@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/hooks/useDiscountValidator.ts

@@ -1,43 +0,0 @@
-import { useCallback } from 'react'
-import { validateDiscount } from '@fayz-ai/shop'
-import { useStorefrontConfig } from '../config'
-
-export interface DiscountValidation {
-  valid: boolean
-  percent: number
-  message?: string
-}
-
-const REASON_MESSAGE: Record<string, string> = {
-  expired: 'Cupom expirado.',
-  not_started: 'Cupom ainda não está ativo.',
-  usage_limit: 'Cupom esgotado.',
-  not_found: 'Cupom inválido ou expirado.',
-}
-
-/**
- * Storefront coupon validator. The store's own config.discounts (simple percent
- * codes) are trusted directly; everything else goes through the provider-backed
- * validateDiscount primitive, which enforces status/date-window/usage-limit.
- * The storefront cart models discounts as a percentage, so non-percentage codes
- * are rejected for client-side preview (the server still honors them at checkout).
- */
-export function useDiscountValidator(): (code: string) => Promise<DiscountValidation> {
-  const config = useStorefrontConfig()
-  return useCallback(async (code: string) => {
-    const normalized = code.trim().toUpperCase()
-    if (!normalized) return { valid: false, percent: 0, message: 'Informe um cupom.' }
-
-    const configDiscount = config.discounts?.find((d) => d.code.trim().toUpperCase() === normalized)
-    if (configDiscount) return { valid: true, percent: configDiscount.percent }
-
-    const validation = await validateDiscount({ code: normalized })
-    if (!validation.valid) {
-      return { valid: false, percent: 0, message: REASON_MESSAGE[validation.reason ?? 'not_found'] ?? 'Cupom inválido ou expirado.' }
-    }
-    if (validation.type !== 'percentage') {
-      return { valid: false, percent: 0, message: 'Este cupom não é suportado na loja.' }
-    }
-    return { valid: true, percent: validation.value }
-  }, [config.discounts])
-}

package/src/hooks/useMyOrders.ts

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

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

@@ -1,39 +0,0 @@
-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/useStorefront.ts

@@ -1,58 +0,0 @@
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import type { CreateProductEnquiryInput } from '@fayz-ai/shop/types'
-import { useStorefrontConfig } from '../config'
-import { navigateTo } from '../router'
-import { useCatalogStore } from '../stores/catalog.store'
-import { useCartStore } from '../stores/cart.store'
-import type { ProductOptionSelection } from '../product-options'
-import type { Product } from '@fayz-ai/shop/types'
-
-export function useStorefront() {
-  return useStorefrontConfig()
-}
-
-export function useCatalog() {
-  const config = useStorefrontConfig()
-  const catalog = useCatalogStore()
-  return {
-    ...catalog,
-    catalogPath: config.catalogPath,
-    config,
-  }
-}
-
-export function useCart() {
-  return useCartStore()
-}
-
-export function useEnquiry() {
-  const config = useStorefrontConfig()
-  const createProductEnquiry = async (input: CreateProductEnquiryInput) => {
-    const provider = getShopProvider()
-    if (!provider.createProductEnquiry) {
-      throw new Error('The active shop provider does not support product enquiries.')
-    }
-    return provider.createProductEnquiry(input)
-  }
-
-  return {
-    enquiry: config.enquiry,
-    createProductEnquiry,
-  }
-}
-
-export function useStorefrontActions() {
-  const addItem = useCartStore((state) => state.addItem)
-  const openDrawer = useCartStore((state) => state.openDrawer)
-  const closeDrawer = useCartStore((state) => state.closeDrawer)
-  const { createProductEnquiry } = useEnquiry()
-
-  return {
-    navigateTo,
-    addToCart: (product: Product, quantity?: number, options?: ProductOptionSelection) =>
-      addItem(product, quantity, options),
-    openCart: openDrawer,
-    closeCart: closeDrawer,
-    createProductEnquiry,
-  }
-}

package/src/hooks/useStorefrontHead.ts

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

@@ -1,202 +0,0 @@
-// Factory
-export { createStorefront, createStorefrontApp, initStorefrontRuntime, StorefrontShell } from './createStorefrontApp'
-export type { CreateStorefrontOptions } from './createStorefrontApp'
-export {
-  defineStorefrontConfig,
-  defineStorefrontComponents,
-  defineStorefrontRoutes,
-  defineStorefrontSections,
-  defineStorefrontApp,
-} from './define'
-export type {
-  StorefrontConfig,
-  ResolvedStorefrontConfig,
-  StorefrontRouteComponentProps,
-  StorefrontRouteChrome,
-  StorefrontCommerceMode,
-  StorefrontImageLoadingConfig,
-  StorefrontImageLoadingMode,
-  StorefrontRouteDefinition,
-  StorefrontRouteKind,
-  StorefrontRouteParams,
-  StorefrontEnquiryConfig,
-} from './config'
-export type {
-  StorefrontActions,
-  StorefrontComponents,
-  ProductCardProps,
-  ProductDetailProps,
-  ProductGalleryProps,
-  ProductPriceProps,
-  ProductActionsProps,
-  ProductEnquiryFormContractProps,
-  CategoryCardProps,
-  CollectionSectionProps,
-  HeroSectionContractProps,
-  MediaCarouselProps as MediaCarouselContractProps,
-  ProductSliderProps as ProductSliderContractProps,
-  StorefrontChromeProps,
-  StorefrontStateProps,
-} from './component-contracts'
-export { useStorefrontConfig, useStorefrontConfigOptional } 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, StorefrontAuthConfig, EstablishSessionOptions } from './auth'
-export { useCatalogStore } from './stores/catalog.store'
-export type { CatalogState, CatalogSort } from './stores/catalog.store'
-
-// Hooks
-export {
-  useProducts,
-  useProduct,
-  useCategories,
-  useStorefront,
-  useCatalog,
-  useCart,
-  useEnquiry,
-  useStorefrontActions,
-  useMyOrders,
-  useDiscountValidator,
-} from './hooks'
-
-// Components (for custom layouts)
-export { StorefrontHeader } from './components/StorefrontHeader'
-export { SmoothImage } from './components/SmoothImage'
-export type { SmoothImageProps } from './components/SmoothImage'
-export { ProductCard } from './components/ProductCard'
-export { ProductEnquiryForm } from './components/ProductEnquiryForm'
-export type { ProductEnquiryFormProps } from './components/ProductEnquiryForm'
-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 { StorefrontSection, HomeSection, HomeConfig, HeroSlide, MediaCarouselItem, NavLink, FooterConfig } from './sections'
-export { bannerPlaceholder } from './sections'
-export {
-  storefrontTemplates,
-  mareTemplate,
-  sertaoTemplate,
-  voltTemplate,
-  atelierTemplate,
-  foodTemplate,
-} from './presets'
-export type { StorefrontTemplate, StorefrontTemplateId } from './presets'
-
-// Home sections (for custom compositions)
-export { HomePage, StorefrontSections } from './pages/HomePage'
-export { HeroSection } from './components/sections/HeroSection'
-export { MediaCarousel } from './components/sections/MediaCarousel'
-export type { MediaCarouselProps } from './components/sections/MediaCarousel'
-export { CategoryShowcase } from './components/sections/CategoryShowcase'
-export { ProductRail } from './components/sections/ProductRail'
-export { ProductSlider } from './components/sections/ProductSlider'
-export type { ProductSliderProps } from './components/sections/ProductSlider'
-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 {
-  productCardComponentContract,
-  storefrontComponentContracts,
-} from './component-selectors'
-export type {
-  ProductCardComponentContract,
-  ProductDetailComponentContract,
-} from './component-selectors'
-
-// ---------------------------------------------------------------------------
-// Front-door re-exports: storefront apps depend on @fayz-ai/storefront alone.
-// Runtime helpers come from @fayz-ai/core; UI / shop catalog / shop provider
-// live on their own subpaths (./ui, ./catalog, ./shop) to keep module graphs
-// separate. Mirrors the @fayz-ai/saas front door.
-// ---------------------------------------------------------------------------
-// renderApp is wrapped (not re-exported) so the 'storefront' scaffold registers
-// on first render instead of at import time — keeps the barrel side-effect-free.
-import { renderApp as coreRenderApp } from '@fayz-ai/core'
-import { registerStorefrontScaffold } from './scaffold'
-
-export const renderApp: typeof coreRenderApp = (...args) => {
-  registerStorefrontScaffold()
-  return coreRenderApp(...args)
-}
-
-export { getSupabaseClientOptional } from '@fayz-ai/core'
-export { registerStorefrontScaffold } from './scaffold'

package/src/motion.tsx

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

@@ -1,33 +0,0 @@
-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'
-}