@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/components/OrderTrackingTimeline.tsx

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

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

package/src/components/ProductCard.tsx

@@ -1,120 +0,0 @@
-import React from 'react'
-import { ShoppingBag } from 'lucide-react'
-import { useStorefrontConfig } from '../config'
-import { Link, navigateTo } from '../router'
-import { getProductOptionGroups } from '../product-options'
-import { Price } from './Price'
-import { TID } from '../testids'
-import { productCardComponentContract } from '../component-selectors'
-import { useStorefrontActions } from '../hooks/useStorefront'
-import type { ProductCardProps } from '../component-contracts'
-import { SmoothImage } from './SmoothImage'
-
-export function ProductCard({ product, config: providedConfig, actions: providedActions }: ProductCardProps) {
-  const runtimeConfig = useStorefrontConfig()
-  const runtimeActions = useStorefrontActions()
-  const config = providedConfig ?? runtimeConfig
-  const actions = providedActions ?? runtimeActions
-  const hasOptions = getProductOptionGroups(product).length > 0
-  const soldOut = product.inventoryCount <= 0
-  const onSale = product.compareAtPrice != null && product.compareAtPrice > product.price
-  const image = product.images.find((i) => i.isPrimary) ?? product.images[0]
-  const cardStyle = config.theme?.productCard?.style ?? 'card'
-  const aspect = config.theme?.productCard?.imageAspect === 'portrait' ? 'aspect-[3/4]' : 'aspect-square'
-  const purchaseMode = config.commerceMode === 'checkout'
-
-  return (
-    <div
-      {...productCardComponentContract.root}
-      data-slug={product.slug}
-      className={`group flex flex-col overflow-hidden transition-all duration-300 ${
-        cardStyle === 'editorial'
-          ? 'hover:-translate-y-1'
-          : 'border bg-card hover:-translate-y-1 hover:shadow-lg'
-      }`}
-      style={{ borderRadius: 'var(--sf-radius-card)' }}
-    >
-      <Link to={`/product/${product.slug}`} className={`relative block ${aspect} overflow-hidden bg-muted`} style={{ borderRadius: cardStyle === 'editorial' ? 'var(--sf-radius-card)' : undefined }}>
-        {image && (
-          <SmoothImage
-            src={image.url}
-            alt={image.altText ?? product.name}
-            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-            loading="lazy"
-          />
-        )}
-        <div className="absolute left-3 top-3 flex gap-2">
-          {onSale && !soldOut && (
-            <span
-              data-testid={TID.badgeSale}
-              className="rounded-full bg-red-600 px-2.5 py-0.5 text-xs font-semibold text-white"
-            >
-              Oferta
-            </span>
-          )}
-          {soldOut && (
-            <span
-              data-testid={TID.badgeSoldout}
-              className="rounded-full bg-gray-900/80 px-2.5 py-0.5 text-xs font-semibold text-white"
-            >
-              Esgotado
-            </span>
-          )}
-        </div>
-      </Link>
-
-      <div className={`flex flex-1 flex-col gap-1 ${cardStyle === 'editorial' ? 'px-1 py-3' : 'p-4'}`}>
-        <span className="text-xs text-muted-foreground">{product.categoryName}</span>
-        <Link
-          to={`/product/${product.slug}`}
-          {...productCardComponentContract.name}
-          className="font-medium leading-snug hover:underline"
-        >
-          {product.name}
-        </Link>
-        <div className="mt-auto flex items-center justify-between gap-3 pt-2">
-          {purchaseMode ? (
-            <Price
-              value={product.price}
-              compareAt={product.compareAtPrice}
-              testId={productCardComponentContract.priceTestId}
-            />
-          ) : (
-            <span data-testid={productCardComponentContract.priceTestId} className="text-sm text-muted-foreground">
-              {config.commerceMode === 'enquiry' ? config.enquiry.label : 'Ver detalhes'}
-            </span>
-          )}
-          <button
-            type="button"
-            {...productCardComponentContract.addButton}
-            disabled={purchaseMode && soldOut}
-            aria-label={
-              purchaseMode
-                ? hasOptions
-                  ? `Escolher opções de ${product.name}`
-                  : `Adicionar ${product.name} ao carrinho`
-                : `${config.enquiry.label} ${product.name}`
-            }
-            onClick={() => {
-              if (!purchaseMode) {
-                navigateTo(`/product/${product.slug}`)
-                return
-              }
-              // Products with variants (size/color) must pick an option on the PDP
-              // — quick-adding would create an option-less line. Others add inline
-              // (addItem auto-opens the cart drawer).
-              if (hasOptions) {
-                navigateTo(`/product/${product.slug}`)
-                return
-              }
-              actions.addToCart(product)
-            }}
-            className="rounded-full border bg-background/90 p-2.5 text-foreground shadow-sm transition-all duration-200 hover:scale-110 hover:bg-primary hover:text-primary-foreground hover:shadow disabled:cursor-not-allowed disabled:opacity-40 lg:translate-y-1 lg:opacity-0 lg:group-hover:translate-y-0 lg:group-hover:opacity-100 lg:disabled:opacity-0 lg:group-hover:disabled:opacity-40"
-          >
-            <ShoppingBag className="h-4 w-4" />
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/ProductEnquiryForm.tsx

@@ -1,175 +0,0 @@
-import React, { useState } from 'react'
-import { Mail, MessageCircle, Send } from 'lucide-react'
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import type { Product } from '@fayz-ai/shop/types'
-import { useStorefrontConfig } from '../config'
-import { storefrontComponentContracts } from '../component-selectors'
-import { TID } from '../testids'
-
-export interface ProductEnquiryFormProps {
-  product: Product
-  onSuccess?: () => void
-}
-
-function defaultSubject(prefix: string, product: Product): string {
-  return `${prefix}: ${product.name}`
-}
-
-function buildWhatsAppHref(url: string, product: Product): string {
-  const text = encodeURIComponent(`Hello, I would like more information about ${product.name}.`)
-  const sep = url.includes('?') ? '&' : '?'
-  return `${url}${sep}text=${text}`
-}
-
-export function ProductEnquiryForm({ product, onSuccess }: ProductEnquiryFormProps) {
-  const config = useStorefrontConfig()
-  const [customerName, setCustomerName] = useState('')
-  const [customerEmail, setCustomerEmail] = useState('')
-  const [customerPhone, setCustomerPhone] = useState('')
-  const [subject, setSubject] = useState(defaultSubject(config.enquiry.subjectPrefix, product))
-  const [message, setMessage] = useState(`I would like more information about ${product.name}.`)
-  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle')
-  const [error, setError] = useState<string | null>(null)
-
-  const submit = async (event: React.FormEvent) => {
-    event.preventDefault()
-    setStatus('submitting')
-    setError(null)
-    try {
-      const provider = getShopProvider()
-      if (provider.createProductEnquiry) {
-        await provider.createProductEnquiry({
-          productId: product.id,
-          productName: product.name,
-          productSlug: product.slug,
-          customerName,
-          customerEmail,
-          customerPhone: customerPhone || undefined,
-          subject,
-          message,
-          sourceUrl: typeof window === 'undefined' ? undefined : window.location.href,
-          metadata: { sku: product.sku, categoryName: product.categoryName },
-        })
-      } else if (config.enquiry.email) {
-        window.location.href = `mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`
-      }
-      setStatus('success')
-      onSuccess?.()
-    } catch (e) {
-      setStatus('error')
-      setError(e instanceof Error ? e.message : String(e))
-    }
-  }
-
-  return (
-    <form
-      {...storefrontComponentContracts.productDetail.enquiryForm}
-      onSubmit={submit}
-      className="space-y-4"
-    >
-      <div className="grid gap-4 sm:grid-cols-2">
-        <label className="space-y-1.5 text-sm font-medium">
-          <span>Your name</span>
-          <input
-            data-testid={TID.enquiryName}
-            required
-            value={customerName}
-            onChange={(e) => setCustomerName(e.target.value)}
-            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-        </label>
-        <label className="space-y-1.5 text-sm font-medium">
-          <span>Your email</span>
-          <input
-            data-testid={TID.enquiryEmail}
-            required
-            type="email"
-            value={customerEmail}
-            onChange={(e) => setCustomerEmail(e.target.value)}
-            className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-        </label>
-      </div>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Phone{config.enquiry.requirePhone ? '' : ' (optional)'}</span>
-        <input
-          data-testid={TID.enquiryPhone}
-          required={config.enquiry.requirePhone}
-          value={customerPhone}
-          onChange={(e) => setCustomerPhone(e.target.value)}
-          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Subject</span>
-        <input
-          data-testid={TID.enquirySubject}
-          required
-          value={subject}
-          onChange={(e) => setSubject(e.target.value)}
-          className="w-full border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <label className="block space-y-1.5 text-sm font-medium">
-        <span>Message</span>
-        <textarea
-          data-testid={TID.enquiryMessage}
-          required
-          rows={5}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          className="w-full resize-none border bg-background px-3 py-2 outline-none focus:border-primary"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-      </label>
-      <div className="flex flex-wrap items-center gap-3">
-        <button
-          data-testid={TID.enquirySubmit}
-          type="submit"
-          disabled={status === 'submitting'}
-          className="sf-cta inline-flex items-center gap-2 bg-primary px-5 py-3 font-semibold text-primary-foreground disabled:cursor-wait disabled:opacity-60"
-          style={{ borderRadius: 'var(--sf-radius-button)' }}
-        >
-          <Send className="h-4 w-4" />
-          {status === 'submitting' ? 'Sending...' : 'Send enquiry'}
-        </button>
-        {config.enquiry.whatsappUrl && (
-          <a
-            href={buildWhatsAppHref(config.enquiry.whatsappUrl, product)}
-            target="_blank"
-            rel="noreferrer"
-            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            <MessageCircle className="h-4 w-4" />
-            WhatsApp
-          </a>
-        )}
-        {config.enquiry.email && (
-          <a
-            href={`mailto:${config.enquiry.email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`}
-            className="inline-flex items-center gap-2 border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
-            style={{ borderRadius: 'var(--sf-radius-button)' }}
-          >
-            <Mail className="h-4 w-4" />
-            Email
-          </a>
-        )}
-      </div>
-      {status === 'success' && (
-        <p data-testid={TID.enquirySuccess} className="text-sm font-medium text-emerald-600">
-          {config.enquiry.successMessage}
-        </p>
-      )}
-      {error && (
-        <p data-testid={TID.enquiryError} className="text-sm font-medium text-red-600">
-          {error}
-        </p>
-      )}
-    </form>
-  )
-}

package/src/components/ProductGallery.tsx

@@ -1,174 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import type { ProductImage } from '@fayz-ai/shop/types'
-import type { ProductGalleryProps } from '../component-contracts'
-import { SmoothImage } from './SmoothImage'
-import { TID } from '../testids'
-import { storefrontComponentContracts } from '../component-selectors'
-
-/**
- * Product gallery: one framed image, hover-to-zoom, and a thumbnail strip when
- * the product has more than one photo.
- *
- * It replaces a bare <img> that rendered only the primary image. Three things
- * were wrong with that:
- *
- *   · the frame was a grid child with the default `stretch`, so it grew to the
- *     height of the (much taller) details column and left a slab of empty dark
- *     box under a square photo;
- *   · `plg_shop_product_images` has always been a collection with sort_order and
- *     is_primary, and every extra photo a merchant uploaded was invisible;
- *   · zooming is table stakes for anything sold by its looks — food especially.
- *
- * Zoom is pointer-driven: the transform origin follows the cursor, so the part
- * under the pointer is the part magnified. Disabled on coarse pointers, where
- * there is no hover and a stuck 2× would just be a broken image.
- */
-export function ProductGallery({ product, images, primaryImage }: ProductGalleryProps) {
-  const ordered = orderImages(images, primaryImage)
-  const [index, setIndex] = useState(0)
-  const [zoom, setZoom] = useState<{ x: number; y: number } | null>(null)
-  const frameRef = useRef<HTMLDivElement>(null)
-  const canHover = useCanHover()
-
-  // A different product (client-side navigation) must not keep the previous
-  // product's selected slide.
-  useEffect(() => { setIndex(0); setZoom(null) }, [product.id])
-
-  const current = ordered[Math.min(index, ordered.length - 1)]
-
-  function trackPointer(event: React.MouseEvent<HTMLDivElement>) {
-    if (!canHover) return
-    const frame = frameRef.current
-    if (!frame) return
-    const rect = frame.getBoundingClientRect()
-    setZoom({
-      x: ((event.clientX - rect.left) / rect.width) * 100,
-      y: ((event.clientY - rect.top) / rect.height) * 100,
-    })
-  }
-
-  function step(delta: number) {
-    if (ordered.length < 2) return
-    setIndex((current) => (current + delta + ordered.length) % ordered.length)
-    setZoom(null)
-  }
-
-  return (
-    <div className="flex flex-col gap-3 self-start">
-      <div
-        {...storefrontComponentContracts.productDetail.gallery}
-        ref={frameRef}
-        // `self-start` above and a fixed aspect here: the frame is sized by the
-        // image, never by whatever the column beside it happens to contain.
-        className="group relative aspect-square w-full overflow-hidden border bg-muted"
-        style={{ borderRadius: 'var(--sf-radius-card)' }}
-        onMouseMove={trackPointer}
-        onMouseLeave={() => setZoom(null)}
-        onKeyDown={(event) => {
-          if (event.key === 'ArrowRight') step(1)
-          if (event.key === 'ArrowLeft') step(-1)
-        }}
-        tabIndex={ordered.length > 1 ? 0 : -1}
-        role={ordered.length > 1 ? 'group' : undefined}
-        aria-label={ordered.length > 1 ? `Imagens de ${product.name}` : undefined}
-      >
-        {/*
-          The transform lives on a wrapper, not on the image: SmoothImage writes
-          its own inline `transition` for the load fade (SmoothImage.tsx:52,
-          spread AFTER any style passed in), which would have stretched the zoom
-          to 420ms and left it visibly lagging the cursor.
-        */}
-        {current && (
-          <div
-            className="h-full w-full transition-transform duration-150 ease-out"
-            style={zoom
-              ? { transform: 'scale(2)', transformOrigin: `${zoom.x}% ${zoom.y}%` }
-              : { transform: 'scale(1)' }}
-          >
-            <SmoothImage
-              key={current.id}
-              src={current.url}
-              alt={current.altText ?? product.name}
-              data-testid={TID.pdpGalleryImage}
-              className="h-full w-full object-cover"
-            />
-          </div>
-        )}
-
-        {ordered.length > 1 && (
-          <>
-            <GalleryArrow side="left" onClick={() => step(-1)} />
-            <GalleryArrow side="right" onClick={() => step(1)} />
-            <span className="pointer-events-none absolute bottom-3 right-3 rounded-full bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white">
-              {index + 1}/{ordered.length}
-            </span>
-          </>
-        )}
-      </div>
-
-      {ordered.length > 1 && (
-        <ul data-testid={TID.pdpGalleryThumbs} className="flex gap-2 overflow-x-auto pb-1">
-          {ordered.map((image, position) => (
-            <li key={image.id}>
-              <button
-                type="button"
-                data-testid={TID.pdpGalleryThumb}
-                data-index={position}
-                aria-label={`Imagem ${position + 1} de ${ordered.length}`}
-                aria-current={position === index}
-                onClick={() => { setIndex(position); setZoom(null) }}
-                className={`h-16 w-16 shrink-0 overflow-hidden rounded-lg border transition ${
-                  position === index ? 'border-primary ring-2 ring-primary/20' : 'border-border opacity-70 hover:opacity-100'
-                }`}
-              >
-                <img src={image.url} alt="" className="h-full w-full object-cover" loading="lazy" />
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-/** Primary first, then sort_order — the order the merchant set in the admin. */
-function orderImages(images: ProductImage[], primary?: ProductImage): ProductImage[] {
-  const all = images.length > 0 ? images : primary ? [primary] : []
-  return [...all].sort((a, b) => {
-    if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1
-    return (a.sortOrder ?? 0) - (b.sortOrder ?? 0)
-  })
-}
-
-/**
- * Whether the device actually has a hover-capable pointer. On a phone every
- * element is permanently "hovered" by some emulations, which would leave the
- * photo stuck at 2× with no way back.
- */
-function useCanHover(): boolean {
-  const [canHover, setCanHover] = useState(false)
-  useEffect(() => {
-    const query = window.matchMedia?.('(hover: hover) and (pointer: fine)')
-    if (!query) return
-    setCanHover(query.matches)
-    const onChange = (event: MediaQueryListEvent) => setCanHover(event.matches)
-    query.addEventListener?.('change', onChange)
-    return () => query.removeEventListener?.('change', onChange)
-  }, [])
-  return canHover
-}
-
-function GalleryArrow({ side, onClick }: { side: 'left' | 'right'; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label={side === 'left' ? 'Imagem anterior' : 'Próxima imagem'}
-      className={`absolute top-1/2 z-10 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full bg-background/80 opacity-0 shadow-md backdrop-blur transition hover:bg-background focus:opacity-100 group-hover:opacity-100 ${
-        side === 'left' ? 'left-3' : 'right-3'
-      }`}
-    >
-      <span aria-hidden className="text-lg leading-none">{side === 'left' ? '‹' : '›'}</span>
-    </button>
-  )
-}

package/src/components/ProductGrid.tsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import type { Product } from '@fayz-ai/shop/types'
-import { ProductCard } from './ProductCard'
-import { getStorefrontComponents, useStorefrontConfig } from '../config'
-import { useStorefrontActions } from '../hooks/useStorefront'
-import { TID } from '../testids'
-
-export function ProductGrid({ products, loading }: { products: Product[]; loading: boolean }) {
-  const config = useStorefrontConfig()
-  const actions = useStorefrontActions()
-  const components = getStorefrontComponents(config)
-  const ProductCardComponent = components.ProductCard ?? ProductCard
-
-  if (loading) {
-    return (
-      <div data-testid={TID.productGrid} className="grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4">
-        {Array.from({ length: 8 }, (_, i) => (
-          <div key={i} className="aspect-[3/4] animate-pulse rounded-xl bg-muted" />
-        ))}
-      </div>
-    )
-  }
-  if (products.length === 0) {
-    return (
-      <div data-testid={TID.productGrid} className="py-20 text-center text-muted-foreground">
-        Nenhum produto encontrado.
-      </div>
-    )
-  }
-  return (
-    <div data-testid={TID.productGrid} className="grid grid-cols-2 gap-5 md:grid-cols-3 xl:grid-cols-4">
-      {products.map((p) => (
-        <ProductCardComponent
-          key={p.id}
-          product={p}
-          config={config}
-          commerceMode={config.commerceMode}
-          actions={actions}
-        />
-      ))}
-    </div>
-  )
-}