@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/components/CartDrawer.tsx

@@ -1,279 +0,0 @@
-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 { getStorefrontComponents, useStorefrontConfig } from '../config'
-import { navigateTo } from '../router'
-import { formatMoney } from '../format'
-import { QuantityInput } from './QuantityInput'
-import { formatPostalCode } from '@fayz-ai/core'
-import { useDeliveryStore } from '../stores/delivery.store'
-import { DeliveryEstimator } from './DeliveryEstimator'
-import { TID } from '../testids'
-import { SmoothImage } from './SmoothImage'
-
-export function CartDrawer() {
-  const config = useStorefrontConfig()
-  const cart = useCartStore()
-  const components = getStorefrontComponents(config)
-  const FooterExtra = components.CartDrawerFooterExtra
-  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])
-
-  // Subscribed, not just read: selectShipping consults this store through
-  // getState(), which does not subscribe, so without this hook a fresh quote
-  // would change the price and leave the drawer showing the old one.
-  const delivery = useDeliveryStore()
-
-  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 && (
-                    <SmoothImage 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>
-              )}
-
-              {/* Second chance to give a CEP for anyone who added to cart from
-                  the catalogue and never opened a product page. */}
-              <div className="mb-3">
-                <DeliveryEstimator compact />
-              </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
-                    {delivery.status === 'served' && delivery.postalCode && (
-                      <span className="ml-1 text-xs">
-                        · {formatPostalCode(delivery.postalCode)}
-                      </span>
-                    )}
-                  </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>
-
-              {FooterExtra && (
-                <FooterExtra cart={cart} config={config} commerceMode={config.commerceMode} />
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/CustomerAccountShell.tsx

@@ -1,102 +0,0 @@
-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/DeliveryEstimator.tsx

@@ -1,157 +0,0 @@
-import React, { useState } from 'react'
-import { MapPin, Truck } from 'lucide-react'
-import { formatPostalCode } from '@fayz-ai/core'
-import { useDeliveryStore, resolveOptionRate } from '../stores/delivery.store'
-import { useCartStore, selectSubtotal } from '../stores/cart.store'
-import { useStorefrontConfig } from '../config'
-import { formatMoney } from '../format'
-import { TID } from '../testids'
-
-/**
- * "Do you deliver to me, for how much, and when" — asked on the product page,
- * before the shopper has invested anything in a cart.
- *
- * The CEP is kept in the delivery store, so the answer follows them to the cart
- * and lands at checkout with street/district/city/UF already filled. That is
- * the actual payoff: the buyer types a house number instead of an address.
- *
- * `subtotal` is the PRE-discount cart subtotal, the same number shop_place_order
- * uses to resolve free-above thresholds. Quoting against anything else is how
- * the cart and the order end up disagreeing (see migration 0017).
- */
-export function DeliveryEstimator({ compact = false }: { compact?: boolean }) {
-  const config = useStorefrontConfig()
-  const cart = useCartStore()
-  const delivery = useDeliveryStore()
-  const [draft, setDraft] = useState(() => formatPostalCode(delivery.postalCode))
-
-  const subtotal = selectSubtotal(cart)
-  const money = (value: number) => formatMoney(value, config.currency, config.locale)
-  const loading = delivery.status === 'loading'
-
-  async function submit(event: React.FormEvent) {
-    event.preventDefault()
-    await delivery.resolve(draft, subtotal)
-  }
-
-  function eta(option: { etaMinDays?: number; etaMaxDays?: number }): string | null {
-    const { etaMinDays: min, etaMaxDays: max } = option
-    if (min == null && max == null) return null
-    if (min === 0 && (max === 0 || max === 1)) return 'hoje ou amanhã'
-    if (min != null && max != null && min !== max) return `${min} a ${max} dias úteis`
-    return `${max ?? min} dia(s) útil(eis)`
-  }
-
-  return (
-    <section
-      data-testid={TID.deliveryEstimator}
-      className={compact ? 'rounded-lg border p-3' : 'mt-6 rounded-lg border p-4'}
-    >
-      <div className="flex items-center gap-2 text-sm font-semibold">
-        <Truck className="h-4 w-4 text-primary" />
-        Calcular entrega
-      </div>
-
-      <form onSubmit={submit} className="mt-3 flex gap-2">
-        <input
-          data-testid={TID.deliveryCepInput}
-          aria-label="CEP"
-          inputMode="numeric"
-          autoComplete="postal-code"
-          placeholder="00000-000"
-          value={draft}
-          onChange={(event) => setDraft(formatPostalCode(event.target.value))}
-          className="min-w-0 flex-1 rounded-lg border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/10"
-        />
-        <button
-          type="submit"
-          data-testid={TID.deliveryCepSubmit}
-          disabled={loading}
-          className="shrink-0 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition hover:opacity-90 disabled:opacity-50"
-        >
-          {loading ? '...' : 'Calcular'}
-        </button>
-      </form>
-
-      {/* Shown whenever there is one, including alongside a price: the range
-          may be covered even though the CEP itself was mistyped. */}
-      {delivery.error && (
-        <p data-testid={TID.deliveryError} className="mt-3 text-sm text-destructive">
-          {delivery.error}
-        </p>
-      )}
-
-      {delivery.address && (
-        <p data-testid={TID.deliveryAddress} className="mt-3 flex items-start gap-1.5 text-xs text-muted-foreground">
-          <MapPin className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-          <span>
-            {[delivery.address.street, delivery.address.district].filter(Boolean).join(', ')}
-            {delivery.address.street || delivery.address.district ? ' — ' : ''}
-            {delivery.address.city}/{delivery.address.state}
-          </span>
-        </p>
-      )}
-
-      {delivery.status === 'served' && (
-        <ul className="mt-3 space-y-2">
-          {delivery.options.map((option) => {
-            const selected = delivery.selectedZoneId === option.zoneId
-            const label = eta(option)
-            // Resolved for the cart as it stands right now, not for whatever it
-            // held when the CEP was typed — the same rule the server applies.
-            const rate = resolveOptionRate(option, subtotal)
-            return (
-              <li key={option.zoneId}>
-                <button
-                  type="button"
-                  data-testid={TID.deliveryOption}
-                  data-zone={option.zoneId}
-                  data-rate={rate.toFixed(2)}
-                  aria-pressed={selected}
-                  onClick={() => delivery.selectZone(option.zoneId)}
-                  className={`flex w-full items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left text-sm transition ${
-                    selected ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/40'
-                  }`}
-                >
-                  <span className="min-w-0">
-                    <span className="block truncate font-medium">
-                      {option.carrier ? `${option.carrier} · ${option.name}` : option.name}
-                    </span>
-                    {label && <span className="block text-xs text-muted-foreground">{label}</span>}
-                  </span>
-                  <span className="shrink-0 font-semibold">
-                    {rate === 0 ? 'Grátis' : money(rate)}
-                  </span>
-                </button>
-              </li>
-            )
-          })}
-        </ul>
-      )}
-
-      {/*
-        No options for a valid address. For a store that configured zones this
-        means "outside our delivery area" and checkout will refuse the order, so
-        it is said plainly here rather than at the end of the funnel. A store
-        with no zones at all never reaches this state — it quotes nothing and
-        keeps its flat rate.
-      */}
-      {delivery.status === 'unserved' && (
-        <p data-testid={TID.deliveryUnserved} className="mt-3 text-sm text-destructive">
-          Ainda não entregamos nesse CEP.
-        </p>
-      )}
-
-      {delivery.postalCode && (
-        <button
-          type="button"
-          data-testid={TID.deliveryClear}
-          onClick={() => { delivery.clear(); setDraft('') }}
-          className="mt-3 text-xs text-muted-foreground underline-offset-2 hover:underline"
-        >
-          Trocar CEP
-        </button>
-      )}
-    </section>
-  )
-}

package/src/components/FiltersPanel.tsx

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