@fayz-ai/storefront 0.9.0 → 0.10.0

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>
-  )
-}

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>
-  )
-}