@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/pages/HomePage.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { renderBlocks } from '@fayz-ai/core'
-import type { StorefrontSection } from '../sections'
-import { sectionsToBlocks } from '../blocks'
-
-// The home page is now a block tree resolved through the universal block
-// registry (see ../blocks). Section components and their props are unchanged;
-// only the dispatch mechanism moved from a switch to the registry, so the same
-// composition works from a pure-data AppManifest.
-export function StorefrontSections({ sections }: { sections: readonly StorefrontSection[] }) {
-  return <main>{renderBlocks(sectionsToBlocks(sections))}</main>
-}
-
-export function HomePage({ sections }: { sections: readonly StorefrontSection[] }) {
-  return <StorefrontSections sections={sections} />
-}

package/src/pages/MyPurchasesPage.tsx

@@ -1,311 +0,0 @@
-import React, { useState } from 'react'
-import { CreditCard, MapPin, Package, QrCode } from 'lucide-react'
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import { useSessionStore } from '../stores/session.store'
-import { establishCustomerSession, signUpCustomer } from '../auth'
-import { useMyOrders } from '../hooks/useMyOrders'
-import { useStorefrontConfig } from '../config'
-import { Link } from '../router'
-import { formatMoney } from '../format'
-import { TID } from '../testids'
-import { CustomerAccountShell, type AccountSection } from '../components/CustomerAccountShell'
-import { OrderTrackingTimeline } from '../components/OrderTrackingTimeline'
-import { financialStatusBadge } from '../order-status'
-import { useStorefrontHead } from '../hooks/useStorefrontHead'
-import { SmoothImage } from '../components/SmoothImage'
-
-function AuthForm() {
-  const [mode, setMode] = useState<'signin' | 'signup'>('signin')
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [name, setName] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  async function submit(e: React.FormEvent) {
-    e.preventDefault()
-    setError(null)
-    if (!email.trim() || !password) return
-    if (mode === 'signup' && !name.trim()) {
-      setError('Informe seu nome.')
-      return
-    }
-    setBusy(true)
-    try {
-      if (mode === 'signup') await signUpCustomer(email, password, name.trim())
-      else await establishCustomerSession(email, { password })
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Não foi possível entrar. Verifique seus dados.')
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const tab = (id: 'signin' | 'signup', label: string, testId: string) => (
-    <button
-      type="button"
-      data-testid={testId}
-      onClick={() => {
-        setMode(id)
-        setError(null)
-      }}
-      className={`flex-1 border-b-2 pb-2.5 text-sm font-semibold transition-colors ${
-        mode === id ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
-      }`}
-    >
-      {label}
-    </button>
-  )
-
-  return (
-    <div className="mx-auto max-w-sm animate-fade-up border bg-card p-7" style={{ borderRadius: 'var(--sf-radius-card)' }}>
-      <h2 className="sf-heading text-xl font-semibold">Minha conta</h2>
-      <p className="mt-1 text-sm text-muted-foreground">
-        Acompanhe pedidos e acelere seus próximos checkouts.
-      </p>
-      <div className="mt-5 flex gap-2">
-        {tab('signin', 'Entrar', TID.authTabSignin)}
-        {tab('signup', 'Criar conta', TID.authTabSignup)}
-      </div>
-      <form className="mt-5 space-y-3" onSubmit={submit}>
-        {mode === 'signup' && (
-          <input
-            data-testid={TID.signinName}
-            type="text"
-            required
-            placeholder="Nome completo"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="w-full border bg-background px-3 py-2.5 text-sm"
-            style={{ borderRadius: 'var(--sf-radius-input)' }}
-          />
-        )}
-        <input
-          data-testid={TID.signinEmail}
-          type="email"
-          required
-          placeholder="voce@exemplo.com"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          className="w-full border bg-background px-3 py-2.5 text-sm"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-        <input
-          data-testid={TID.signinPassword}
-          type="password"
-          required
-          placeholder="Senha"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          className="w-full border bg-background px-3 py-2.5 text-sm"
-          style={{ borderRadius: 'var(--sf-radius-input)' }}
-        />
-        {error && (
-          <p data-testid={TID.authError} className="text-sm text-destructive">{error}</p>
-        )}
-        <button
-          type="submit"
-          data-testid={TID.signinSubmit}
-          disabled={busy}
-          className="sf-cta w-full bg-primary py-3 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:opacity-60"
-          style={{ borderRadius: 'var(--sf-radius-button)' }}
-        >
-          {busy ? 'Entrando…' : mode === 'signup' ? 'Criar conta' : 'Entrar'}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-function OrdersPanel() {
-  const config = useStorefrontConfig()
-  const { orders, loading } = useMyOrders()
-  const money = (v: number) => formatMoney(v, config.currency, config.locale)
-
-  if (loading) return <div className="py-16 text-center text-muted-foreground">Carregando…</div>
-  if (orders.length === 0) {
-    return (
-      <div data-testid={TID.purchasesEmpty} className="rounded-2xl border bg-card py-16 text-center">
-        <Package className="mx-auto h-10 w-10 text-muted-foreground" />
-        <p className="mt-3 text-muted-foreground">Você ainda não tem pedidos.</p>
-        <Link to="/" className="mt-4 inline-block text-primary underline">Explorar a loja</Link>
-      </div>
-    )
-  }
-  return (
-    <ul data-testid={TID.purchasesList} className="space-y-4">
-      {orders.map((order) => (
-        <li
-          key={order.id}
-          data-testid={TID.purchaseItem}
-          data-order-number={order.orderNumber}
-          className="rounded-2xl border bg-card p-5"
-        >
-          <div className="flex items-center justify-between">
-            <span className="font-semibold">Pedido #{order.orderNumber}</span>
-            <span className={`inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ${financialStatusBadge(order.financialStatus).className}`}>
-              {financialStatusBadge(order.financialStatus).label}
-            </span>
-          </div>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            {new Date(order.createdAt).toLocaleDateString(config.locale)}
-          </p>
-          <div className="mt-4">
-            <OrderTrackingTimeline order={order} compact />
-          </div>
-          <ul className="mt-3 flex flex-wrap gap-2">
-            {order.items.map((item) => (
-              <li key={item.id} className="flex items-center gap-2 rounded-lg border px-2 py-1 text-xs">
-                {item.imageUrl && <SmoothImage src={item.imageUrl} alt={item.name} className="h-6 w-6 rounded object-cover" />}
-                {item.name} × {item.quantity}
-              </li>
-            ))}
-          </ul>
-          <div className="mt-3 flex items-center justify-between border-t pt-3 text-sm">
-            <Link to={`/order/${order.id}`} className="font-medium text-primary hover:underline">
-              Ver detalhes
-            </Link>
-            <span>
-              <span className="mr-2 text-muted-foreground">Total</span>
-              <span className="font-semibold" data-price={order.total.toFixed(2)}>{money(order.total)}</span>
-            </span>
-          </div>
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-function ProfilePanel() {
-  const session = useSessionStore()
-  const [name, setName] = useState(session.name ?? '')
-  const [saving, setSaving] = useState(false)
-  const [saved, setSaved] = useState(false)
-
-  async function save(e: React.FormEvent) {
-    e.preventDefault()
-    const trimmed = name.trim()
-    if (!trimmed) return
-    setSaving(true)
-    setSaved(false)
-    try {
-      if (session.customerId) {
-        const parts = trimmed.split(/\s+/).filter(Boolean)
-        await getShopProvider().updateCustomer(session.customerId, {
-          firstName: parts[0] ?? trimmed,
-          lastName: parts.slice(1).join(' '),
-        })
-      }
-      useSessionStore.setState({ name: trimmed })
-      setSaved(true)
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <form onSubmit={save} className="max-w-md rounded-2xl border bg-card p-6">
-      <h2 className="sf-heading text-lg font-semibold">Perfil</h2>
-      <p className="mt-1 text-sm text-muted-foreground">Seus dados para os próximos checkouts.</p>
-      <label className="mt-5 block text-sm font-medium">
-        Nome completo
-        <input
-          value={name}
-          onChange={(e) => { setName(e.target.value); setSaved(false) }}
-          className="mt-1 w-full rounded-lg border bg-background px-3 py-2.5 text-sm"
-          placeholder="Seu nome"
-        />
-      </label>
-      <label className="mt-4 block text-sm font-medium">
-        E-mail
-        <input
-          value={session.email ?? ''}
-          readOnly
-          className="mt-1 w-full cursor-not-allowed rounded-lg border bg-muted/40 px-3 py-2.5 text-sm text-muted-foreground"
-        />
-      </label>
-      <div className="mt-5 flex items-center gap-3">
-        <button
-          type="submit"
-          disabled={saving}
-          className="sf-cta rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground disabled:opacity-60"
-        >
-          {saving ? 'Salvando…' : 'Salvar'}
-        </button>
-        {saved && <span className="text-sm font-medium text-emerald-700">Salvo</span>}
-      </div>
-    </form>
-  )
-}
-
-function AddressesPanel() {
-  return (
-    <div className="rounded-2xl border bg-card p-6">
-      <div className="flex items-center gap-2">
-        <MapPin className="h-5 w-5 text-primary" />
-        <h2 className="sf-heading text-lg font-semibold">Endereços</h2>
-      </div>
-      <p className="mt-2 text-sm text-muted-foreground">
-        Você informa o endereço de entrega no checkout. Em breve será possível salvar endereços para reutilizar
-        nas próximas compras.
-      </p>
-      <Link to="/" className="mt-4 inline-block text-sm font-semibold text-primary underline">
-        Continuar comprando
-      </Link>
-    </div>
-  )
-}
-
-function PaymentsPanel() {
-  return (
-    <div className="rounded-2xl border bg-card p-6">
-      <div className="flex items-center gap-2">
-        <CreditCard className="h-5 w-5 text-primary" />
-        <h2 className="sf-heading text-lg font-semibold">Pagamentos</h2>
-      </div>
-      <p className="mt-2 text-sm text-muted-foreground">
-        Os pagamentos são processados com segurança no checkout — nenhum dado de pagamento fica salvo nesta conta.
-      </p>
-      <div className="mt-4 flex items-center gap-2 rounded-lg bg-muted/40 px-3 py-2.5 text-sm">
-        <QrCode className="h-4 w-4 text-primary" />
-        <span>Pix e cartão via Mercado Pago no momento da compra.</span>
-      </div>
-    </div>
-  )
-}
-
-const SECTION_SUBTITLE: Record<AccountSection, string> = {
-  profile: 'Seus dados de contato.',
-  orders: 'Acompanhe seus pedidos e entregas.',
-  addresses: 'Endereços de entrega.',
-  payments: 'Como você paga na loja.',
-}
-
-export function MyPurchasesPage() {
-  const config = useStorefrontConfig()
-  const session = useSessionStore()
-  const [section, setSection] = useState<AccountSection>('orders')
-  useStorefrontHead({ title: `Minha conta — ${config.name}` })
-
-  if (!session.email) {
-    return (
-      <main className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
-        <AuthForm />
-      </main>
-    )
-  }
-
-  return (
-    <CustomerAccountShell
-      title="Minha conta"
-      subtitle={SECTION_SUBTITLE[section]}
-      active={section}
-      onSelect={setSection}
-    >
-      {section === 'profile' && <ProfilePanel />}
-      {section === 'orders' && <OrdersPanel />}
-      {section === 'addresses' && <AddressesPanel />}
-      {section === 'payments' && <PaymentsPanel />}
-    </CustomerAccountShell>
-  )
-}

package/src/pages/NotFoundPage.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Link } from '../router'
-import { useStorefrontConfig } from '../config'
-import { useStorefrontHead } from '../hooks/useStorefrontHead'
-
-/** Fallback for unknown routes. Previously these silently rendered the home/catalog page with a 200. */
-export function NotFoundPage() {
-  const config = useStorefrontConfig()
-  useStorefrontHead({ title: `Página não encontrada — ${config.name}` })
-  return (
-    <main className="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-4 py-16 text-center">
-      <p className="sf-heading text-5xl font-bold tracking-tight text-primary">404</p>
-      <h1 className="mt-3 text-xl font-semibold">Página não encontrada</h1>
-      <p className="mt-2 text-sm text-muted-foreground">
-        O endereço que você tentou acessar não existe ou foi movido.
-      </p>
-      <Link
-        to={config.catalogPath}
-        className="mt-6 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition hover:opacity-90"
-      >
-        Ir para a loja
-      </Link>
-    </main>
-  )
-}

package/src/pages/OrderConfirmationPage.tsx

@@ -1,190 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { getShopProvider } from '@fayz-ai/shop/runtime'
-import { prefersReducedMotion } from '../motion'
-import type { Order } from '@fayz-ai/shop/types'
-import { useStorefrontConfig } from '../config'
-import { Link } from '../router'
-import { formatMoney } from '../format'
-import { TID } from '../testids'
-import { CustomerAccountShell } from '../components/CustomerAccountShell'
-import { OrderTrackingTimeline } from '../components/OrderTrackingTimeline'
-import { financialStatusBadge } from '../order-status'
-import { useStorefrontHead } from '../hooks/useStorefrontHead'
-import { SmoothImage } from '../components/SmoothImage'
-
-const CONFETTI_COLORS = ['hsl(var(--primary))', '#f59e0b', '#10b981', '#3b82f6', '#ec4899']
-
-/** One-shot celebration: circle pops in, check draws itself, confetti rains. */
-function SuccessMark() {
-  const reduced = prefersReducedMotion()
-  return (
-    <div className="relative mx-auto h-24 w-24">
-      {!reduced &&
-        Array.from({ length: 14 }, (_, i) => (
-          <span
-            key={i}
-            aria-hidden
-            className="absolute h-2 w-2 animate-confetti-fall rounded-sm"
-            style={{
-              left: `${(i * 7.3) % 100}%`,
-              top: '-4px',
-              backgroundColor: CONFETTI_COLORS[i % CONFETTI_COLORS.length],
-              animationDelay: `${200 + (i % 7) * 90}ms`,
-            }}
-          />
-        ))}
-      <span className={`absolute inset-0 rounded-full bg-emerald-100 ${reduced ? '' : 'animate-pop-in'}`} />
-      <svg viewBox="0 0 48 48" className="absolute inset-0 h-full w-full p-6" aria-hidden>
-        <path
-          d="M10 25 L20 35 L38 14"
-          fill="none"
-          stroke="rgb(5 150 105)"
-          strokeWidth="5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeDasharray="48"
-          className={reduced ? '' : 'animate-draw-check'}
-        />
-      </svg>
-    </div>
-  )
-}
-
-export function OrderConfirmationPage({ orderId }: { orderId: string }) {
-  const config = useStorefrontConfig()
-  const [order, setOrder] = useState<Order | null>(null)
-  const [loading, setLoading] = useState(true)
-  const money = (v: number) => formatMoney(v, config.currency, config.locale)
-  useStorefrontHead({ title: order ? `Pedido #${order.orderNumber} — ${config.name}` : config.name })
-
-  useEffect(() => {
-    let cancelled = false
-    getShopProvider()
-      .getOrder(orderId)
-      .then((o) => {
-        if (!cancelled) setOrder(o)
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [orderId])
-
-  if (loading) {
-    return <main className="mx-auto max-w-2xl px-4 py-20 text-center text-muted-foreground">Carregando…</main>
-  }
-  if (!order) {
-    return (
-      <main className="mx-auto max-w-2xl px-4 py-20 text-center">
-        <p className="text-muted-foreground">Pedido não encontrado.</p>
-        <Link to="/" className="mt-4 inline-block text-primary underline">Voltar à loja</Link>
-      </main>
-    )
-  }
-
-  return (
-    <CustomerAccountShell
-      title="Detalhe do pedido"
-      subtitle="Compra confirmada e vinculada à sua conta."
-      active="orders"
-    >
-      <article data-testid={TID.orderDetail} className="animate-fade-up rounded-xl border bg-card p-6 sm:p-8">
-        <div className="grid gap-6 border-b pb-6 sm:grid-cols-[120px_minmax(0,1fr)]">
-          <SuccessMark />
-          <div className="text-center sm:text-left">
-            <h2 className="sf-heading text-3xl font-bold tracking-tight">
-              Pedido confirmado!
-            </h2>
-            <p className="mt-1 text-muted-foreground">
-              Obrigado pela compra, {order.customerName ?? 'cliente'}. Enviamos a confirmação para {order.customerEmail}.
-            </p>
-            <p className="mt-4 text-lg">
-              Pedido <span data-testid={TID.orderNumber} className="font-semibold">#{order.orderNumber}</span>{' '}
-              <span
-                data-testid={TID.orderStatus}
-                className={`ml-2 inline-flex rounded-full px-2.5 py-0.5 text-sm font-medium ${financialStatusBadge(order.financialStatus).className}`}
-              >
-                {financialStatusBadge(order.financialStatus).label}
-              </span>
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 rounded-xl border bg-muted/20 p-4 text-sm sm:grid-cols-3">
-          <div>
-            <p className="text-muted-foreground">Cliente</p>
-            <p className="mt-1 font-semibold">{order.customerName ?? 'Cliente'}</p>
-            <p className="text-muted-foreground">{order.customerEmail}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground">Entrega</p>
-            <p className="mt-1 font-semibold">{order.fulfillmentStatus === 'fulfilled' ? 'Enviado' : 'Preparando envio'}</p>
-            <p className="text-muted-foreground">{order.notes ?? 'Endereço salvo no pedido'}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground">Pagamento</p>
-            <p className="mt-1 font-semibold">{financialStatusBadge(order.financialStatus).label}</p>
-            <p className="text-muted-foreground">Processado no checkout</p>
-          </div>
-        </div>
-
-        <div className="mt-6">
-          <h3 className="mb-3 text-sm font-semibold uppercase text-muted-foreground">
-            Acompanhamento
-          </h3>
-          <OrderTrackingTimeline order={order} />
-        </div>
-
-        <ul className="mt-8 space-y-3 text-left">
-          {order.items.map((item) => (
-            <li key={item.id} className="flex items-center gap-3 text-sm">
-              {item.imageUrl && <SmoothImage src={item.imageUrl} alt={item.name} className="h-12 w-12 rounded-lg border object-cover" />}
-              <span className="flex-1">
-                {item.name} <span className="text-muted-foreground">× {item.quantity}</span>
-              </span>
-              <span data-price={item.total.toFixed(2)}>{money(item.total)}</span>
-            </li>
-          ))}
-        </ul>
-
-        <dl className="mt-4 space-y-1.5 border-t pt-4 text-left text-sm">
-          <div className="flex justify-between">
-            <dt className="text-muted-foreground">Subtotal</dt>
-            <dd data-price={order.subtotal.toFixed(2)}>{money(order.subtotal)}</dd>
-          </div>
-          {order.discountTotal > 0 && (
-            <div className="flex justify-between text-emerald-700">
-              <dt>Desconto {order.discountCode ? `(${order.discountCode})` : ''}</dt>
-              <dd data-price={order.discountTotal.toFixed(2)}>−{money(order.discountTotal)}</dd>
-            </div>
-          )}
-          <div className="flex justify-between">
-            <dt className="text-muted-foreground">Frete</dt>
-            <dd data-price={order.shippingTotal.toFixed(2)}>
-              {order.shippingTotal === 0 ? 'Grátis' : money(order.shippingTotal)}
-            </dd>
-          </div>
-          <div className="flex justify-between border-t pt-2 text-base font-semibold">
-            <dt>Total</dt>
-            <dd data-testid={TID.orderTotal} data-price={order.total.toFixed(2)}>{money(order.total)}</dd>
-          </div>
-        </dl>
-
-        <div className="mt-8 flex flex-wrap gap-3">
-          <Link
-            to="/account"
-            data-testid={TID.viewPurchases}
-            className="rounded-xl bg-primary px-5 py-2.5 font-semibold text-primary-foreground hover:opacity-90"
-          >
-            Minhas compras
-          </Link>
-          <Link to="/" className="rounded-xl border px-5 py-2.5 font-semibold hover:bg-muted">
-            Continuar comprando
-          </Link>
-        </div>
-      </article>
-    </CustomerAccountShell>
-  )
-}

package/src/pages/PolicyPage.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { Link } from '../router'
-import { useStorefrontConfig } from '../config'
-import { useStorefrontHead } from '../hooks/useStorefrontHead'
-
-const TITLES = {
-  privacy: 'Política de Privacidade',
-  terms: 'Termos de Uso',
-  returns: 'Trocas e Devoluções',
-} as const
-
-export type PolicyKind = keyof typeof TITLES
-
-/** Institutional/legal pages. Content comes from config.legal; absent pages show
- *  a placeholder so the routes + footer links exist (no 404) before the store
- *  publishes its policy — a payment-processor / go-live requirement. */
-export function PolicyPage({ kind }: { kind: PolicyKind }) {
-  const config = useStorefrontConfig()
-  const title = TITLES[kind]
-  const content = config.legal?.[kind]
-  const email = config.footer?.contact?.email
-  useStorefrontHead({ title: `${title} — ${config.name}` })
-
-  return (
-    <main className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
-      <Link to={config.catalogPath} className="text-sm text-muted-foreground transition-colors hover:text-foreground">
-        ← Voltar à loja
-      </Link>
-      <h1 className="sf-heading mt-4 text-3xl font-bold tracking-tight">{title}</h1>
-      <div className="mt-6 space-y-4 leading-relaxed text-muted-foreground">
-        {content ? (
-          content.split('\n').filter((line) => line.trim()).map((paragraph, i) => <p key={i}>{paragraph}</p>)
-        ) : (
-          <>
-            <p>O conteúdo desta política ainda será publicado pela loja.</p>
-            {email && (
-              <p>
-                Em caso de dúvidas, fale com a gente em{' '}
-                <a href={`mailto:${email}`} className="text-primary underline">{email}</a>.
-              </p>
-            )}
-          </>
-        )}
-      </div>
-    </main>
-  )
-}