@fayz-ai/storefront 0.2.0

package/src/components/CartDrawer.tsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react'
+import { X, Trash2 } from 'lucide-react'
+import {
+  useCartStore,
+  selectSubtotal,
+  selectDiscountTotal,
+  selectShipping,
+  selectTotal,
+} from '../stores/cart.store'
+import { useDiscountValidator } from '../hooks/useDiscountValidator'
+import { toast } from '../stores/toast.store'
+import { useStorefrontConfig } from '../config'
+import { navigateTo } from '../router'
+import { formatMoney } from '../format'
+import { QuantityInput } from './QuantityInput'
+import { TID } from '../testids'
+
+export function CartDrawer() {
+  const config = useStorefrontConfig()
+  const cart = useCartStore()
+  const validate = useDiscountValidator()
+  const [code, setCode] = useState('')
+  const [discountError, setDiscountError] = useState<string | null>(null)
+  const [applying, setApplying] = useState(false)
+
+  // a11y: close on Escape while the drawer is open.
+  useEffect(() => {
+    if (!cart.isOpen) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') cart.closeDrawer()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [cart.isOpen, cart.closeDrawer])
+
+  const subtotal = selectSubtotal(cart)
+  const discountTotal = selectDiscountTotal(cart)
+  const shipping = selectShipping(cart, config)
+  const total = selectTotal(cart, config)
+  const money = (v: number) => formatMoney(v, config.currency, config.locale)
+
+  async function applyCode() {
+    setApplying(true)
+    setDiscountError(null)
+    try {
+      const result = await validate(code)
+      if (result.valid) {
+        const applied = code.trim().toUpperCase()
+        cart.applyDiscount(applied, result.percent)
+        setCode('')
+        toast.success('Cupom aplicado!', `${applied} • ${result.percent}% de desconto`)
+      } else {
+        setDiscountError(result.message ?? 'Cupom inválido.')
+        toast.error('Cupom inválido', result.message ?? 'Verifique o código e tente novamente.')
+      }
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  if (!cart.isOpen) return null
+
+  // Free-shipping nudge: how far from the threshold this cart is
+  const freeAbove = config.shipping.freeAbove
+  const missingForFree = freeAbove != null && subtotal < freeAbove ? freeAbove - subtotal : 0
+  const progress = freeAbove != null ? Math.min(100, (subtotal / freeAbove) * 100) : 0
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div
+        className="absolute inset-0 animate-fade-in bg-black/40"
+        aria-hidden
+        onClick={cart.closeDrawer}
+      />
+      <div
+        data-testid={TID.cartDrawer}
+        role="dialog"
+        aria-label="Carrinho"
+        className="absolute right-0 top-0 flex h-full w-full max-w-md animate-slide-in-from-right flex-col bg-background shadow-2xl"
+      >
+        <div className="flex items-center justify-between border-b px-5 py-4">
+          <h2 className="text-lg font-semibold">Carrinho</h2>
+          <button
+            type="button"
+            aria-label="Fechar carrinho"
+            onClick={cart.closeDrawer}
+            className="rounded-full p-1.5 hover:bg-muted"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {cart.lines.length === 0 ? (
+          <div data-testid={TID.cartEmpty} className="flex flex-1 items-center justify-center p-8 text-center text-muted-foreground">
+            Seu carrinho está vazio.
+          </div>
+        ) : (
+          <>
+            {freeAbove != null && (
+              <div data-testid={TID.shippingProgress} className="border-b bg-muted/40 px-5 py-3">
+                <p className="text-xs font-medium">
+                  {missingForFree > 0 ? (
+                    <>Faltam <strong>{money(missingForFree)}</strong> para frete grátis 🚚</>
+                  ) : (
+                    <>🎉 Você ganhou <strong>frete grátis</strong>!</>
+                  )}
+                </p>
+                <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-border">
+                  <div
+                    className="h-full rounded-full bg-primary transition-all duration-500 ease-out"
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="flex-1 space-y-4 overflow-y-auto px-5 py-4">
+              {cart.lines.map((line) => (
+                <div
+                  key={line.lineId ?? line.productId}
+                  data-testid={TID.cartLine}
+                  data-product-id={line.productId}
+                  data-line-id={line.lineId ?? line.productId}
+                  className={`flex animate-fade-up gap-3 rounded-lg p-1.5 transition-all hover:bg-muted/40 ${
+                    (line.lineId ?? line.productId) === cart.justAddedLineId
+                      ? 'bg-primary/5 ring-1 ring-primary/30'
+                      : ''
+                  }`}
+                >
+                  {line.imageUrl && (
+                    <img src={line.imageUrl} alt={line.name} className="h-20 w-20 shrink-0 rounded-lg border object-cover" />
+                  )}
+                  <div className="flex flex-1 flex-col">
+                    <div className="flex items-start justify-between gap-2">
+                      <span className="text-sm font-medium leading-snug">{line.name}</span>
+                      <button
+                        type="button"
+                        data-testid={TID.lineRemove}
+                        aria-label={`Remover ${line.name}`}
+                        onClick={() => cart.removeItem(line.lineId ?? line.productId)}
+                        className="text-muted-foreground hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+                    <span className="text-xs text-muted-foreground">{line.sku}</span>
+                    {line.optionsLabel && (
+                      <span className="text-xs text-muted-foreground">{line.optionsLabel}</span>
+                    )}
+                    <div className="mt-auto flex items-center justify-between pt-2">
+                      <QuantityInput
+                        value={line.quantity}
+                        max={line.maxQuantity || undefined}
+                        onChange={(n) => cart.setQuantity(line.lineId ?? line.productId, n)}
+                        testId={TID.lineQty}
+                        incTestId={TID.lineInc}
+                        decTestId={TID.lineDec}
+                      />
+                      <span
+                        className="text-sm font-semibold"
+                        data-price={(line.unitPrice * line.quantity).toFixed(2)}
+                      >
+                        {money(line.unitPrice * line.quantity)}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <div className="space-y-3 border-t px-5 py-4">
+              {config.features.discounts && (
+                <div className="space-y-1">
+                  <div className="flex gap-2">
+                    <input
+                      data-testid={TID.discountInput}
+                      type="text"
+                      placeholder="Cupom de desconto"
+                      value={code}
+                      onChange={(e) => setCode(e.target.value)}
+                      className="flex-1 rounded-lg border bg-background px-3 py-2 text-sm uppercase"
+                    />
+                    <button
+                      type="button"
+                      data-testid={TID.discountApply}
+                      onClick={applyCode}
+                      disabled={applying || !code.trim()}
+                      className="rounded-lg border px-3 py-2 text-sm font-medium hover:bg-muted disabled:opacity-50"
+                    >
+                      Aplicar
+                    </button>
+                  </div>
+                  {discountError && (
+                    <p data-testid={TID.discountError} className="text-xs text-destructive">
+                      {discountError}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <dl className="space-y-1.5 text-sm">
+                <div className="flex justify-between">
+                  <dt className="text-muted-foreground">Subtotal</dt>
+                  <dd data-testid={TID.cartSubtotal} data-price={subtotal.toFixed(2)}>{money(subtotal)}</dd>
+                </div>
+                {discountTotal > 0 && (
+                  <div className="flex justify-between text-emerald-700" data-testid={TID.discountRow}>
+                    <dt>
+                      Desconto{' '}
+                      <button
+                        type="button"
+                        onClick={cart.clearDiscount}
+                        className="text-xs text-muted-foreground underline"
+                      >
+                        ({cart.discountCode} ✕)
+                      </button>
+                    </dt>
+                    <dd data-price={discountTotal.toFixed(2)}>−{money(discountTotal)}</dd>
+                  </div>
+                )}
+                <div className="flex justify-between">
+                  <dt className="text-muted-foreground">Frete</dt>
+                  <dd data-testid={TID.cartShipping} data-price={shipping.toFixed(2)}>
+                    {shipping === 0 ? 'Grátis' : money(shipping)}
+                  </dd>
+                </div>
+                <div className="flex justify-between border-t pt-2 text-base font-semibold">
+                  <dt>Total</dt>
+                  <dd data-testid={TID.cartTotal} data-price={total.toFixed(2)}>{money(total)}</dd>
+                </div>
+              </dl>
+
+              <button
+                type="button"
+                data-testid={TID.goCheckout}
+                onClick={() => {
+                  cart.closeDrawer()
+                  navigateTo('/checkout')
+                }}
+                className="sf-cta w-full bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg"
+                style={{ borderRadius: 'var(--sf-radius-button)' }}
+              >
+                Finalizar compra
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/CustomerAccountShell.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import { CreditCard, LogOut, MapPin, Package, ShieldCheck, User } from 'lucide-react'
+import { signOutCustomer } from '../auth'
+import { useStorefrontConfig } from '../config'
+import { Link } from '../router'
+import { useSessionStore } from '../stores/session.store'
+import { TID } from '../testids'
+
+export type AccountSection = 'profile' | 'orders' | 'addresses' | 'payments'
+
+interface CustomerAccountShellProps {
+  title: string
+  subtitle?: string
+  active: AccountSection
+  /** Switch the active section in-place. */
+  onSelect?: (section: AccountSection) => void
+  children: React.ReactNode
+}
+
+const menuItems = [
+  { id: 'profile', label: 'Perfil', icon: User },
+  { id: 'orders', label: 'Meus pedidos', icon: Package },
+  { id: 'addresses', label: 'Endereços', icon: MapPin },
+  { id: 'payments', label: 'Pagamentos', icon: CreditCard },
+] as const
+
+export function CustomerAccountShell({ title, subtitle, active, onSelect, children }: CustomerAccountShellProps) {
+  const config = useStorefrontConfig()
+  const session = useSessionStore()
+  const displayName = session.name || session.email?.split('@')[0] || 'Cliente'
+  const displayEmail = session.email || 'Conta criada no checkout'
+
+  return (
+    <main data-testid={TID.customerAccountShell} className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
+      <div className="mb-6 flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <p className="text-sm font-medium text-muted-foreground">{config.name}</p>
+          <h1 className="sf-heading text-3xl font-bold tracking-tight">{title}</h1>
+          {subtitle && <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>}
+        </div>
+        <Link to={config.catalogPath} className="rounded-lg border px-4 py-2 text-sm font-semibold hover:bg-muted">
+          Voltar à loja
+        </Link>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]">
+        <aside className="h-fit rounded-xl border bg-card p-4">
+          <div className="flex items-center gap-3 border-b pb-4">
+            <div className="flex h-11 w-11 items-center justify-center rounded-full bg-primary/10 font-bold text-primary">
+              {displayName.slice(0, 1).toUpperCase()}
+            </div>
+            <div className="min-w-0">
+              <p className="truncate font-semibold">{displayName}</p>
+              <p className="truncate text-xs text-muted-foreground">{displayEmail}</p>
+            </div>
+          </div>
+
+          <nav data-testid={TID.customerAccountMenu} className="mt-4 space-y-1" aria-label="Área do cliente">
+            {menuItems.map((item) => {
+              const Icon = item.icon
+              const selected = item.id === active
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  aria-current={selected ? 'page' : undefined}
+                  onClick={() => onSelect?.(item.id)}
+                  className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-semibold transition ${
+                    selected ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  }`}
+                >
+                  <Icon className="h-4 w-4" />
+                  {item.label}
+                </button>
+              )
+            })}
+          </nav>
+
+          <div className="mt-4 rounded-lg bg-muted/40 p-3 text-xs text-muted-foreground">
+            <div className="flex items-center gap-2 font-semibold text-foreground">
+              <ShieldCheck className="h-4 w-4 text-primary" />
+              Conta protegida
+            </div>
+            <p className="mt-1">Pedidos, pagamentos e endereços ficam organizados para próximas compras.</p>
+          </div>
+
+          <button
+            type="button"
+            data-testid={TID.signout}
+            onClick={() => void signOutCustomer()}
+            className="mt-4 flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-semibold text-muted-foreground transition hover:bg-muted hover:text-foreground"
+          >
+            <LogOut className="h-4 w-4" />
+            Sair
+          </button>
+        </aside>
+
+        <section className="min-w-0">{children}</section>
+      </div>
+    </main>
+  )
+}

package/src/components/FiltersPanel.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { useCatalogStore } from '../stores/catalog.store'
+import type { CatalogSort } from '../stores/catalog.store'
+import { useCategories } from '../hooks/useCategories'
+import { TID } from '../testids'
+
+export function FiltersPanel() {
+  const { categories } = useCategories()
+  const catalog = useCatalogStore()
+
+  return (
+    <aside className="w-full shrink-0 space-y-6 lg:w-56">
+      {/* Sort */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Ordenar por</h3>
+        <select
+          data-testid={TID.sortSelect}
+          value={catalog.sort}
+          onChange={(e) => catalog.setSort(e.target.value as CatalogSort)}
+          className="w-full rounded-lg border bg-background px-3 py-2 text-sm"
+        >
+          <option value="newest">Mais recentes</option>
+          <option value="price-asc">Menor preço</option>
+          <option value="price-desc">Maior preço</option>
+          <option value="name">Nome (A–Z)</option>
+        </select>
+      </div>
+
+      {/* Categories */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Categorias</h3>
+        <ul className="space-y-1">
+          <li>
+            <button
+              type="button"
+              onClick={() => catalog.setCategoryId(null)}
+              className={`w-full rounded-md px-2 py-1.5 text-left text-sm transition-colors ${
+                catalog.categoryId === null ? 'bg-primary/10 font-medium text-primary' : 'hover:bg-muted'
+              }`}
+            >
+              Todas
+            </button>
+          </li>
+          {categories.map((c) => (
+            <li key={c.id}>
+              <button
+                type="button"
+                data-testid={TID.filterCategory(c.slug)}
+                onClick={() => catalog.setCategoryId(catalog.categoryId === c.id ? null : c.id)}
+                className={`w-full rounded-md px-2 py-1.5 text-left text-sm transition-colors ${
+                  catalog.categoryId === c.id ? 'bg-primary/10 font-medium text-primary' : 'hover:bg-muted'
+                }`}
+              >
+                {c.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Price range */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold">Preço</h3>
+        <div className="flex items-center gap-2">
+          <input
+            data-testid={TID.filterPriceMin}
+            type="number"
+            placeholder="Mín"
+            min={0}
+            value={catalog.priceMin ?? ''}
+            onChange={(e) => catalog.setPriceMin(e.target.value === '' ? null : Number(e.target.value))}
+            className="w-full rounded-lg border bg-background px-2.5 py-1.5 text-sm"
+          />
+          <span className="text-muted-foreground">–</span>
+          <input
+            data-testid={TID.filterPriceMax}
+            type="number"
+            placeholder="Máx"
+            min={0}
+            value={catalog.priceMax ?? ''}
+            onChange={(e) => catalog.setPriceMax(e.target.value === '' ? null : Number(e.target.value))}
+            className="w-full rounded-lg border bg-background px-2.5 py-1.5 text-sm"
+          />
+        </div>
+      </div>
+
+      {/* Availability */}
+      <label className="flex cursor-pointer items-center gap-2 text-sm">
+        <input
+          data-testid={TID.filterInstock}
+          type="checkbox"
+          checked={catalog.inStockOnly}
+          onChange={(e) => catalog.setInStockOnly(e.target.checked)}
+          className="h-4 w-4 rounded border"
+        />
+        Somente em estoque
+      </label>
+
+      <button
+        type="button"
+        data-testid={TID.filtersClear}
+        onClick={() => catalog.reset()}
+        className="text-sm text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+      >
+        Limpar filtros
+      </button>
+    </aside>
+  )
+}

package/src/components/OrderTrackingTimeline.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { Check, Clock, PackageCheck, RotateCcw, Truck, XCircle } from 'lucide-react'
+import type { Order } from '@fayz-ai/shop/types'
+import { isPaid, isRefunded } from '../order-status'
+import { TID } from '../testids'
+
+type TrackingState = 'complete' | 'current' | 'pending' | 'cancelled'
+
+interface TrackingStep {
+  id: string
+  label: string
+  description: string
+  state: TrackingState
+  icon: React.ComponentType<{ className?: string }>
+}
+
+function orderTrackingSteps(order: Order): TrackingStep[] {
+  const received: TrackingStep = {
+    id: 'received',
+    label: 'Pedido recebido',
+    description: `#${order.orderNumber}`,
+    state: 'complete',
+    icon: Check,
+  }
+
+  // Terminal states short-circuit the happy path.
+  if (order.status === 'cancelled' || order.financialStatus === 'voided') {
+    return [
+      received,
+      { id: 'payment', label: 'Pedido cancelado', description: 'Este pedido foi cancelado', state: 'cancelled', icon: XCircle },
+    ]
+  }
+  if (isRefunded(order.financialStatus)) {
+    return [
+      received,
+      { id: 'payment', label: 'Pagamento aprovado', description: 'Compra confirmada', state: 'complete', icon: Check },
+      {
+        id: 'refund',
+        label: order.financialStatus === 'refunded' ? 'Reembolsado' : 'Reembolso parcial',
+        description: 'Valor devolvido ao cliente',
+        state: 'cancelled',
+        icon: RotateCcw,
+      },
+    ]
+  }
+
+  const paid = isPaid(order.financialStatus)
+  const partiallyFulfilled = order.fulfillmentStatus === 'partially_fulfilled'
+  const fulfilled = order.fulfillmentStatus === 'fulfilled'
+
+  return [
+    received,
+    {
+      id: 'payment',
+      label: paid ? 'Pagamento aprovado' : 'Aguardando pagamento',
+      description: paid ? 'Compra confirmada' : 'Processando',
+      state: paid ? 'complete' : 'current',
+      icon: Check,
+    },
+    {
+      id: 'preparing',
+      label: 'Preparando envio',
+      description: paid ? 'Separando produtos' : 'Começa após o pagamento',
+      state: fulfilled || partiallyFulfilled ? 'complete' : paid ? 'current' : 'pending',
+      icon: PackageCheck,
+    },
+    {
+      id: 'delivery',
+      label: fulfilled ? 'Pedido enviado' : partiallyFulfilled ? 'Envio parcial' : 'Entrega',
+      description: fulfilled ? 'A caminho do cliente' : partiallyFulfilled ? 'Parte do pedido saiu' : 'Próxima etapa',
+      state: fulfilled ? 'complete' : partiallyFulfilled ? 'current' : 'pending',
+      icon: fulfilled || partiallyFulfilled ? Truck : Clock,
+    },
+  ]
+}
+
+const GRID_COLS: Record<number, string> = {
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+}
+
+export function OrderTrackingTimeline({ order, compact = false }: { order: Order; compact?: boolean }) {
+  const steps = orderTrackingSteps(order)
+
+  return (
+    <ol
+      data-testid={TID.orderTracking}
+      className={`grid ${compact ? 'gap-2' : 'gap-3'} ${GRID_COLS[steps.length] ?? 'sm:grid-cols-4'}`}
+      aria-label="Acompanhamento do pedido"
+    >
+      {steps.map((step) => {
+        const Icon = step.icon
+        const cancelled = step.state === 'cancelled'
+        const active = step.state !== 'pending'
+        return (
+          <li
+            key={step.id}
+            data-testid={TID.orderTrackingStep(step.id)}
+            data-state={step.state}
+            className={[
+              'relative min-w-0 rounded-xl border p-3',
+              cancelled
+                ? 'border-rose-200 bg-rose-50 text-rose-700'
+                : active
+                  ? 'border-primary/35 bg-primary/5'
+                  : 'bg-muted/20 text-muted-foreground',
+              compact ? 'text-xs' : 'text-sm',
+            ].join(' ')}
+          >
+            <div className="flex items-start gap-2">
+              <span
+                className={[
+                  'grid h-7 w-7 shrink-0 place-items-center rounded-full border',
+                  cancelled
+                    ? 'border-rose-300 bg-rose-500 text-white'
+                    : active
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : 'border-muted-foreground/30 bg-background',
+                ].join(' ')}
+                aria-hidden
+              >
+                <Icon className="h-3.5 w-3.5" />
+              </span>
+              <span className="min-w-0">
+                <span className="block truncate font-semibold text-foreground">{step.label}</span>
+                <span className="mt-0.5 block truncate text-muted-foreground">{step.description}</span>
+              </span>
+            </div>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}

package/src/components/Price.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { formatMoney } from '../format'
+import { useStorefrontConfig } from '../config'
+
+export interface PriceProps {
+  value: number
+  compareAt?: number | null
+  testId?: string
+  compareTestId?: string
+  className?: string
+}
+
+/** Formatted money. Always carries data-price so tests assert raw numbers, never locale strings. */
+export function Price({ value, compareAt, testId, compareTestId, className }: PriceProps) {
+  const { currency, locale } = useStorefrontConfig()
+  return (
+    <span className={`inline-flex items-baseline gap-2 ${className ?? ''}`}>
+      <span data-testid={testId} data-price={value.toFixed(2)} className="font-semibold">
+        {formatMoney(value, currency, locale)}
+      </span>
+      {compareAt != null && compareAt > value && (
+        <span
+          data-testid={compareTestId}
+          data-price={compareAt.toFixed(2)}
+          className="text-sm text-muted-foreground line-through"
+        >
+          {formatMoney(compareAt, currency, locale)}
+        </span>
+      )}
+    </span>
+  )
+}