@fayz-ai/storefront 0.9.0 → 0.10.0

package/src/component-contracts.ts

@@ -1,154 +0,0 @@
-import type React from 'react'
-import type { Category, CreateProductEnquiryInput, Product, ProductEnquiry, ProductImage } from '@fayz-ai/shop/types'
-import type { ProductOptionGroup, ProductOptionSelection } from './product-options'
-import type { ResolvedStorefrontConfig, StorefrontCommerceMode } from './config'
-import type { MediaCarouselItem } from './sections'
-import type { CartState } from './stores/cart.store'
-
-export interface StorefrontComponentBaseProps {
-  config: ResolvedStorefrontConfig
-  commerceMode: StorefrontCommerceMode
-  className?: string
-  testId?: string
-}
-
-export interface StorefrontActions {
-  navigateTo: (to: string) => void
-  addToCart: (product: Product, quantity?: number, options?: ProductOptionSelection) => void
-  openCart: () => void
-  closeCart: () => void
-  createProductEnquiry: (input: CreateProductEnquiryInput) => Promise<ProductEnquiry>
-}
-
-export interface ProductCardProps extends StorefrontComponentBaseProps {
-  product: Product
-  actions: Pick<StorefrontActions, 'navigateTo' | 'addToCart' | 'openCart'>
-}
-
-export interface ProductDetailProps extends StorefrontComponentBaseProps {
-  product: Product
-  primaryImage?: ProductImage
-  optionGroups: ProductOptionGroup[]
-  selectedOptions: ProductOptionSelection
-  setSelectedOptions: React.Dispatch<React.SetStateAction<ProductOptionSelection>>
-  quantity: number
-  setQuantity: React.Dispatch<React.SetStateAction<number>>
-  soldOut: boolean
-  lowStock: boolean
-  actions: Pick<StorefrontActions, 'addToCart' | 'createProductEnquiry' | 'navigateTo'>
-  addToCart: () => void
-  openEnquiry: () => void
-}
-
-export interface ProductGalleryProps extends StorefrontComponentBaseProps {
-  product: Product
-  images: ProductImage[]
-  primaryImage?: ProductImage
-}
-
-export interface ProductPriceProps extends StorefrontComponentBaseProps {
-  product: Product
-  value: number
-  compareAt?: number | null
-}
-
-export interface ProductActionsProps extends StorefrontComponentBaseProps {
-  product: Product
-  quantity: number
-  setQuantity: React.Dispatch<React.SetStateAction<number>>
-  soldOut: boolean
-  actions: Pick<StorefrontActions, 'addToCart' | 'createProductEnquiry' | 'navigateTo'>
-  addToCart: () => void
-  openEnquiry: () => void
-}
-
-export interface ProductEnquiryFormContractProps extends StorefrontComponentBaseProps {
-  product: Product
-  onSuccess?: () => void
-}
-
-export interface CategoryCardProps extends StorefrontComponentBaseProps {
-  category: Category
-  actions: Pick<StorefrontActions, 'navigateTo'>
-}
-
-export interface CollectionSectionProps extends StorefrontComponentBaseProps {
-  title: string
-  subtitle?: string
-  products: Product[]
-  category?: Category
-  children?: React.ReactNode
-}
-
-export interface HeroSectionContractProps extends StorefrontComponentBaseProps {
-  title: string
-  subtitle?: string
-  eyebrow?: string
-  image?: string
-  cta?: string
-  href?: string
-  children?: React.ReactNode
-}
-
-export interface MediaCarouselProps extends StorefrontComponentBaseProps {
-  items: MediaCarouselItem[]
-  height?: 'medium' | 'tall' | 'screen'
-  autoplayMs?: number
-  overlay?: 'dark' | 'soft' | 'none'
-}
-
-export interface ProductSliderProps extends StorefrontComponentBaseProps {
-  title: string
-  subtitle?: string
-  eyebrow?: string
-  filter?: 'sale' | 'new' | 'all'
-  categoryName?: string
-  collection?: string
-  limit?: number
-  cta?: string
-  href?: string
-}
-
-export interface StorefrontChromeProps extends StorefrontComponentBaseProps {
-  children?: React.ReactNode
-}
-
-export interface StorefrontStateProps extends StorefrontComponentBaseProps {
-  title?: string
-  message?: string
-  children?: React.ReactNode
-}
-
-/**
- * Extra content rendered inside CartDrawer's footer, right after the
- * "Finalizar compra" button — e.g. an alternative checkout path like
- * "Finalizar via WhatsApp". Unlike every other entry in
- * StorefrontComponents, this isn't a whole-component replacement:
- * CartDrawer is always the SDK's own, this only adds optional content
- * inside it. Only rendered when the cart has lines (same condition as the
- * checkout button itself).
- */
-export interface CartDrawerFooterExtraProps extends StorefrontComponentBaseProps {
-  cart: CartState
-}
-
-export interface StorefrontComponents {
-  ProductCard?: React.ComponentType<ProductCardProps>
-  ProductDetail?: React.ComponentType<ProductDetailProps>
-  ProductGallery?: React.ComponentType<ProductGalleryProps>
-  ProductPrice?: React.ComponentType<ProductPriceProps>
-  ProductActions?: React.ComponentType<ProductActionsProps>
-  ProductEnquiryForm?: React.ComponentType<ProductEnquiryFormContractProps>
-  CategoryCard?: React.ComponentType<CategoryCardProps>
-  CollectionSection?: React.ComponentType<CollectionSectionProps>
-  HeroSection?: React.ComponentType<HeroSectionContractProps>
-  MediaCarousel?: React.ComponentType<MediaCarouselProps>
-  ProductSlider?: React.ComponentType<ProductSliderProps>
-  Header?: React.ComponentType<StorefrontChromeProps>
-  Footer?: React.ComponentType<StorefrontChromeProps>
-  Shell?: React.ComponentType<StorefrontChromeProps>
-  EmptyState?: React.ComponentType<StorefrontStateProps>
-  LoadingState?: React.ComponentType<StorefrontStateProps>
-  ErrorState?: React.ComponentType<StorefrontStateProps>
-  CartDrawerFooterExtra?: React.ComponentType<CartDrawerFooterExtraProps>
-}

package/src/component-selectors.ts

@@ -1,31 +0,0 @@
-import { TID } from './testids'
-
-/**
- * Stable selectors that custom storefront components must preserve.
- *
- * Apps can fully customize the visual tree, but replacement components still
- * need these anchors so smoke tests, QA, and agents can operate stores.
- */
-export const productCardComponentContract = {
-  root: { 'data-testid': TID.productCard },
-  name: { 'data-testid': TID.productCardName },
-  priceTestId: TID.productCardPrice,
-  addButton: { 'data-testid': TID.productCardAdd },
-} as const
-
-export const storefrontComponentContracts = {
-  productCard: productCardComponentContract,
-  productDetail: {
-    root: { 'data-testid': TID.pdpRoot },
-    gallery: { 'data-testid': TID.pdpGallery },
-    name: { 'data-testid': TID.pdpName },
-    description: { 'data-testid': TID.pdpDescription },
-    actions: { 'data-testid': TID.pdpActions },
-    addButton: { 'data-testid': TID.pdpAddToCart },
-    enquiryButton: { 'data-testid': TID.pdpEnquiryButton },
-    enquiryForm: { 'data-testid': TID.enquiryForm },
-  },
-} as const
-
-export type ProductCardComponentContract = typeof productCardComponentContract
-export type ProductDetailComponentContract = typeof storefrontComponentContracts.productDetail

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