@fayz-ai/storefront 0.2.0

package/src/hooks/useMyOrders.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react'
+import { getShopProvider } from '@fayz-ai/shop/runtime'
+import type { Order } from '@fayz-ai/shop/types'
+import { useSessionStore } from '../stores/session.store'
+
+export function useMyOrders(): { orders: Order[]; loading: boolean; refresh: () => void } {
+  const customerId = useSessionStore((s) => s.customerId)
+  const email = useSessionStore((s) => s.email)
+  const [orders, setOrders] = useState<Order[]>([])
+  const [loading, setLoading] = useState(true)
+  const [tick, setTick] = useState(0)
+
+  const refresh = useCallback(() => setTick((t) => t + 1), [])
+
+  useEffect(() => {
+    let cancelled = false
+    if (!customerId && !email) {
+      setOrders([])
+      setLoading(false)
+      return
+    }
+    setLoading(true)
+    // Scope by customerId (RLS-enforced to the owner on Supabase) when available;
+    // fall back to email only for legacy sessions without a linked customer.
+    const query = customerId ? { customerId, limit: 50 } : { customerEmail: email!, limit: 50 }
+    getShopProvider()
+      .listOrders(query)
+      .then((data) => {
+        if (!cancelled) setOrders(data)
+      })
+      .catch(() => {})
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [customerId, email, tick])
+
+  return { orders, loading, refresh }
+}

package/src/hooks/useProduct.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { getShopProvider } from '@fayz-ai/shop/runtime'
+import type { Product } from '@fayz-ai/shop/types'
+
+export function useProduct(slug: string): {
+  product: Product | null
+  loading: boolean
+  error: string | null
+} {
+  const [product, setProduct] = useState<Product | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    getShopProvider()
+      .listProducts({ slug, status: 'active', limit: 1 })
+      .then((data) => {
+        if (cancelled) return
+        setProduct(data[0] ?? null)
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [slug])
+
+  return { product, loading, error }
+}

package/src/hooks/useProducts.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+import { getShopProvider } from '@fayz-ai/shop/runtime'
+import type { Product, ListProductsOptions } from '@fayz-ai/shop/types'
+
+export function useProducts(opts: ListProductsOptions): {
+  products: Product[]
+  loading: boolean
+  error: string | null
+  reload: () => void
+} {
+  const [products, setProducts] = useState<Product[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [nonce, setNonce] = useState(0)
+  const key = JSON.stringify(opts)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    getShopProvider()
+      .listProducts(JSON.parse(key) as ListProductsOptions)
+      .then((data) => {
+        if (cancelled) return
+        setProducts(data)
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : String(e))
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [key, nonce])
+
+  return { products, loading, error, reload: () => setNonce((n) => n + 1) }
+}

package/src/hooks/useStorefrontHead.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+/**
+ * Minimal per-route head manager: sets document.title and meta description so
+ * each storefront page (product, catalog, account, checkout) has its own title
+ * and shareable description instead of one static SPA title. A real SSR/prerender
+ * pass (M12) layers OG/canonical on top; this covers the client-rendered baseline.
+ */
+export function useStorefrontHead(input: { title?: string; description?: string | null }): void {
+  const { title, description } = input
+  useEffect(() => {
+    if (title) document.title = title
+  }, [title])
+
+  useEffect(() => {
+    if (!description) return
+    let tag = document.head.querySelector<HTMLMetaElement>('meta[name="description"]')
+    if (!tag) {
+      tag = document.createElement('meta')
+      tag.setAttribute('name', 'description')
+      document.head.appendChild(tag)
+    }
+    tag.setAttribute('content', description.slice(0, 160))
+  }, [description])
+}

package/src/index.ts

@@ -0,0 +1,132 @@
+// Factory
+export { createStorefrontApp, initStorefrontRuntime, StorefrontShell } from './createStorefrontApp'
+export type {
+  StorefrontConfig,
+  ResolvedStorefrontConfig,
+  StorefrontRouteComponentProps,
+  StorefrontRouteChrome,
+  StorefrontRouteDefinition,
+  StorefrontRouteKind,
+  StorefrontRouteParams,
+} from './config'
+export { useStorefrontConfig } from './config'
+
+// Manifest path (renderApp(defineStorefront(config)) / storefront scaffold)
+export { defineStorefront, StorefrontScaffold } from './scaffold'
+
+// Block system (storefront sections as registry blocks)
+export { registerStorefrontBlocks, sectionsToBlocks } from './blocks'
+
+// Routing
+export { Link, navigateTo, useHashPath, matchPath } from './router'
+export type { LinkProps } from './router'
+
+// Stores
+export {
+  useCartStore,
+  selectCount,
+  selectSubtotal,
+  selectDiscountTotal,
+  selectShipping,
+  selectTotal,
+} from './stores/cart.store'
+export type { CartLine, CartState } from './stores/cart.store'
+export { useSessionStore } from './stores/session.store'
+export type { SessionState } from './stores/session.store'
+export {
+  signInByEmail,
+  signUpCustomer,
+  establishCustomerSession,
+  signOutCustomer,
+  getCustomerAuthAdapter,
+  resolveAuthAdapter,
+} from './auth'
+export type { StorefrontAuthAdapter, EstablishSessionOptions } from './auth'
+export { useCatalogStore } from './stores/catalog.store'
+export type { CatalogState, CatalogSort } from './stores/catalog.store'
+
+// Hooks
+export { useProducts, useProduct, useCategories, useMyOrders, useDiscountValidator } from './hooks'
+
+// Components (for custom layouts)
+export { StorefrontHeader } from './components/StorefrontHeader'
+export { ProductCard } from './components/ProductCard'
+export type { ProductCardProps } from './components/ProductCard'
+export { OrderTrackingTimeline } from './components/OrderTrackingTimeline'
+export { ProductGrid } from './components/ProductGrid'
+export { FiltersPanel } from './components/FiltersPanel'
+export { CartDrawer } from './components/CartDrawer'
+export { Price } from './components/Price'
+export { QuantityInput } from './components/QuantityInput'
+export { ProductOptionSelector } from './components/ProductOptionSelector'
+export type { ProductOptionSelectorProps } from './components/ProductOptionSelector'
+export {
+  getProductOptionGroups,
+  normalizeProductOptionSelection,
+  formatProductOptionSelection,
+  productOptionSelectionKey,
+} from './product-options'
+export type { ProductOptionGroup, ProductOptionSelection } from './product-options'
+
+// Pages (for custom routing)
+export { CatalogPage } from './pages/CatalogPage'
+export { ProductDetailPage } from './pages/ProductDetailPage'
+export { CheckoutPage } from './pages/CheckoutPage'
+export { OrderConfirmationPage } from './pages/OrderConfirmationPage'
+export { MyPurchasesPage } from './pages/MyPurchasesPage'
+export { placeStorefrontOrder } from './workflows/checkout'
+export type {
+  PlaceStorefrontOrderInput,
+  PlaceStorefrontOrderResult,
+  StorefrontCheckoutAddress,
+  StorefrontCheckoutCustomer,
+} from './workflows/checkout'
+
+// Theming + templates
+export { StorefrontThemeStyle, themeToCss } from './theme'
+export type {
+  StorefrontTheme,
+  StorefrontThemeColors,
+  StorefrontThemeFont,
+  StorefrontRadius,
+  HeaderVariant,
+  HeroVariant,
+  CardStyle,
+} from './theme'
+export type { HomeSection, HomeConfig, HeroSlide, NavLink, FooterConfig } from './sections'
+export { bannerPlaceholder } from './sections'
+export {
+  storefrontTemplates,
+  mareTemplate,
+  sertaoTemplate,
+  voltTemplate,
+  atelierTemplate,
+} from './presets'
+export type { StorefrontTemplate, StorefrontTemplateId } from './presets'
+
+// Home sections (for custom compositions)
+export { HomePage } from './pages/HomePage'
+export { HeroSection } from './components/sections/HeroSection'
+export { CategoryShowcase } from './components/sections/CategoryShowcase'
+export { ProductRail } from './components/sections/ProductRail'
+export {
+  BenefitsRow,
+  PromoBanner,
+  ManifestoBlock,
+  Testimonials,
+  NewsletterBand,
+} from './components/sections/MiscSections'
+export { StorefrontFooter } from './components/StorefrontFooter'
+
+// Motion (core animation primitives)
+export { Reveal, useInView, useScrolled, usePopOnChange, prefersReducedMotion } from './motion'
+export type { RevealProps } from './motion'
+
+// Utilities
+export { formatMoney, roundCents } from './format'
+export { TID } from './testids'
+export {
+  productCardSlotContract,
+  storefrontSlotContracts,
+} from './slot-contracts'
+export type { ProductCardSlotContract } from './slot-contracts'

package/src/motion.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+// ---------------------------------------------------------------------------
+// Core motion primitives — every storefront inherits these; stores never
+// implement animation ad hoc. All effects respect prefers-reduced-motion.
+// ---------------------------------------------------------------------------
+
+export function prefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || !window.matchMedia) return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+/** True once the element has entered the viewport (one-shot). */
+export function useInView<T extends HTMLElement>(margin = '0px 0px -8% 0px'): [React.RefObject<T>, boolean] {
+  const ref = useRef<T>(null)
+  const [inView, setInView] = useState(() => prefersReducedMotion())
+
+  useEffect(() => {
+    if (inView) return
+    const el = ref.current
+    if (!el || typeof IntersectionObserver === 'undefined') {
+      setInView(true)
+      return
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setInView(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: margin },
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [inView, margin])
+
+  return [ref, inView]
+}
+
+export interface RevealProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Stagger delay in ms */
+  delay?: number
+  children: React.ReactNode
+}
+
+/** Plays a fade-up entrance when the element scrolls into view.
+ *  Content is VISIBLE by default — never pre-hidden — so screenshots,
+ *  crawlers and environments without IntersectionObserver always see it;
+ *  the animation's own from-state handles the fade. */
+export function Reveal({ delay = 0, children, className, style, ...rest }: RevealProps) {
+  const [ref, inView] = useInView<HTMLDivElement>()
+  return (
+    <div
+      ref={ref}
+      className={`${inView ? 'animate-fade-up' : ''} ${className ?? ''}`}
+      style={{ ...style, animationDelay: delay ? `${delay}ms` : undefined }}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+/** True after the window has scrolled past the threshold (header treatments). */
+export function useScrolled(threshold = 8): boolean {
+  const [scrolled, setScrolled] = useState(false)
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > threshold)
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [threshold])
+  return scrolled
+}
+
+/** Re-triggers a CSS animation class whenever `value` changes (cart badge pop). */
+export function usePopOnChange(value: number): boolean {
+  const [pop, setPop] = useState(false)
+  const prev = useRef(value)
+  useEffect(() => {
+    if (prev.current !== value && value > 0) {
+      setPop(true)
+      const t = setTimeout(() => setPop(false), 400)
+      return () => clearTimeout(t)
+    }
+    prev.current = value
+    return undefined
+  }, [value])
+  useEffect(() => {
+    prev.current = value
+  })
+  return pop
+}

package/src/order-status.ts

@@ -0,0 +1,33 @@
+import type { FinancialStatus } from '@fayz-ai/shop/types'
+
+type Tone = 'positive' | 'pending' | 'negative'
+
+const FINANCIAL: Record<FinancialStatus, { label: string; tone: Tone }> = {
+  pending: { label: 'Pendente', tone: 'pending' },
+  paid: { label: 'Pago', tone: 'positive' },
+  partially_paid: { label: 'Parcialmente pago', tone: 'pending' },
+  partially_refunded: { label: 'Parcialmente reembolsado', tone: 'negative' },
+  refunded: { label: 'Reembolsado', tone: 'negative' },
+  voided: { label: 'Cancelado', tone: 'negative' },
+}
+
+const TONE_CLASS: Record<Tone, string> = {
+  positive: 'bg-emerald-100 text-emerald-800',
+  pending: 'bg-amber-100 text-amber-800',
+  negative: 'bg-rose-100 text-rose-800',
+}
+
+/** One source of truth for a financial-status pill — label + color by status,
+ *  so a pending or refunded order never renders inside a green "success" pill. */
+export function financialStatusBadge(status: FinancialStatus): { label: string; className: string } {
+  const entry = FINANCIAL[status] ?? { label: status, tone: 'pending' as Tone }
+  return { label: entry.label, className: TONE_CLASS[entry.tone] }
+}
+
+export function isPaid(status: FinancialStatus): boolean {
+  return status === 'paid' || status === 'partially_paid'
+}
+
+export function isRefunded(status: FinancialStatus): boolean {
+  return status === 'refunded' || status === 'partially_refunded'
+}

package/src/pages/CatalogPage.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useMemo, useRef } from 'react'
+import { useCatalogStore, type CatalogSort } from '../stores/catalog.store'
+import { useProducts } from '../hooks/useProducts'
+import { ProductGrid } from '../components/ProductGrid'
+import { FiltersPanel } from '../components/FiltersPanel'
+import { useStorefrontConfig } from '../config'
+import { useStorefrontHead } from '../hooks/useStorefrontHead'
+import type { ListProductsOptions } from '@fayz-ai/shop/types'
+
+const SORT_MAP: Record<string, Pick<ListProductsOptions, 'orderBy' | 'order'>> = {
+  newest: { orderBy: 'created_at', order: 'desc' },
+  'price-asc': { orderBy: 'price', order: 'asc' },
+  'price-desc': { orderBy: 'price', order: 'desc' },
+  name: { orderBy: 'name', order: 'asc' },
+}
+
+const SORTS: CatalogSort[] = ['newest', 'price-asc', 'price-desc', 'name']
+
+/**
+ * Two-way sync between catalog filters and the URL hash query, so a filtered/
+ * searched catalog is shareable, bookmarkable, and survives a refresh. Uses
+ * history.replaceState (no navigation / no scroll jump).
+ */
+function useCatalogUrlSync() {
+  const hydrated = useRef(false)
+  const catalog = useCatalogStore()
+
+  useEffect(() => {
+    if (hydrated.current) return
+    hydrated.current = true
+    const q = window.location.hash.split('?')[1]
+    if (!q) return
+    const p = new URLSearchParams(q)
+    const s = useCatalogStore.getState()
+    if (p.has('search')) s.setSearch(p.get('search') ?? '')
+    if (p.get('category')) s.setCategoryId(p.get('category'))
+    const sort = p.get('sort')
+    if (sort && (SORTS as string[]).includes(sort)) s.setSort(sort as CatalogSort)
+    if (p.get('stock') === '1') s.setInStockOnly(true)
+    if (p.has('min')) s.setPriceMin(Number(p.get('min')) || null)
+    if (p.has('max')) s.setPriceMax(Number(p.get('max')) || null)
+  }, [])
+
+  useEffect(() => {
+    const p = new URLSearchParams()
+    if (catalog.search) p.set('search', catalog.search)
+    if (catalog.categoryId) p.set('category', catalog.categoryId)
+    if (catalog.sort !== 'newest') p.set('sort', catalog.sort)
+    if (catalog.inStockOnly) p.set('stock', '1')
+    if (catalog.priceMin != null) p.set('min', String(catalog.priceMin))
+    if (catalog.priceMax != null) p.set('max', String(catalog.priceMax))
+    const base = window.location.hash.split('?')[0] || '#/catalog'
+    const qs = p.toString()
+    const next = qs ? `${base}?${qs}` : base
+    if (next !== window.location.hash) window.history.replaceState(null, '', next)
+  }, [catalog.search, catalog.categoryId, catalog.sort, catalog.inStockOnly, catalog.priceMin, catalog.priceMax])
+}
+
+export function CatalogPage() {
+  const config = useStorefrontConfig()
+  const catalog = useCatalogStore()
+  useCatalogUrlSync()
+  useStorefrontHead({
+    title: catalog.search ? `“${catalog.search}” — ${config.name}` : `${config.name} — Loja`,
+  })
+
+  const providerOpts: ListProductsOptions = {
+    status: 'active',
+    categoryId: catalog.categoryId ?? undefined,
+    search: catalog.search || undefined,
+    ...SORT_MAP[catalog.sort],
+  }
+  const { products, loading, error, reload } = useProducts(providerOpts)
+
+  // Price range + availability are client-side refinements over the fetched set
+  const filtered = useMemo(
+    () =>
+      products.filter((p) => {
+        if (catalog.priceMin != null && p.price < catalog.priceMin) return false
+        if (catalog.priceMax != null && p.price > catalog.priceMax) return false
+        if (catalog.inStockOnly && p.inventoryCount <= 0) return false
+        return true
+      }),
+    [products, catalog.priceMin, catalog.priceMax, catalog.inStockOnly],
+  )
+
+  return (
+    <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold tracking-tight">{config.name}</h1>
+        <p className="mt-1 text-muted-foreground">
+          {catalog.search
+            ? `Resultados para “${catalog.search}”`
+            : 'Produtos selecionados com qualidade e entrega rápida.'}
+        </p>
+      </div>
+      <div className="flex flex-col gap-8 lg:flex-row">
+        <FiltersPanel />
+        <div className="flex-1">
+          {error ? (
+            <div className="rounded-2xl border bg-card py-16 text-center">
+              <p className="text-muted-foreground">Não foi possível carregar os produtos.</p>
+              <button
+                type="button"
+                onClick={reload}
+                className="mt-4 rounded-lg border px-4 py-2 text-sm font-semibold transition hover:bg-muted"
+              >
+                Tentar novamente
+              </button>
+            </div>
+          ) : (
+            <ProductGrid products={filtered} loading={loading} />
+          )}
+        </div>
+      </div>
+    </main>
+  )
+}