@rovela-ai/sdk 0.19.4 → 0.19.6

package/templates/store-template/app/LayoutContent.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+/**
+ * Layout Content Component
+ *
+ * Handles route-aware layout rendering to separate admin and customer experiences.
+ *
+ * - Customer routes (/products, /cart, etc.): Full store experience with Header, Footer, Cart
+ * - Admin routes (/admin/*): Minimal wrapper, admin layout handles its own chrome
+ *
+ * This separation ensures the store owner feels a clear disconnection between
+ * the admin panel and the customer-facing store.
+ */
+
+import { usePathname } from 'next/navigation'
+import { CartProvider, CartDrawer } from '@rovela-ai/sdk/cart'
+import {
+  CookieConsentProvider,
+  type CookieConsentConfig,
+  CookieBanner,
+} from '@rovela-ai/sdk/core/cookie-consent'
+import { AnalyticsProvider } from '@rovela-ai/sdk/analytics'
+import { RovelaLocaleProvider, type StoreLocale } from '@rovela-ai/sdk/core'
+import { Header } from '@/components/layout/Header'
+import { Footer } from '@/components/layout/Footer'
+import { PathSyncBridge } from '@/components/PathSyncBridge'
+
+interface LayoutContentProps {
+  children: React.ReactNode
+  /** R021: master toggle from store_settings.cookie_banner_enabled.
+   *  When false, the banner never renders and the consent provider
+   *  short-circuits (grants all categories). */
+  cookieBannerEnabled?: boolean
+  /** Merchant banner configuration (store_settings.cookie_consent, sanitized). */
+  cookieConsentConfig?: CookieConsentConfig
+  /** Region-rule verdict computed server-side from the visitor's IP country. */
+  consentRegionExempt?: boolean
+  /** Request-resolved storefront locale (root layout). */
+  locale?: StoreLocale
+  /** Server-resolved store locale config (hydration-safe navigation). */
+  defaultLocale?: StoreLocale
+  enabledLocales?: StoreLocale[]
+}
+
+export function LayoutContent({
+  children,
+  cookieBannerEnabled = true,
+  cookieConsentConfig,
+  consentRegionExempt = false,
+  locale = 'en',
+  defaultLocale,
+  enabledLocales,
+}: LayoutContentProps) {
+  const pathname = usePathname()
+
+  // Check if current route is an admin route
+  const isAdminRoute = pathname?.startsWith('/admin')
+
+  // Admin routes: No store header/footer, no cart infrastructure.
+  // The admin layout (app/admin/(dashboard)/layout.tsx) provides its own chrome.
+  // Cookie banner is customer-facing only — admins don't see it either way.
+  //
+  // PathSyncBridge is mounted on BOTH branches so the Rovela editor's path
+  // bar reflects whichever URL the iframe is showing — admin or customer.
+  if (isAdminRoute) {
+    return (
+      <>
+        <PathSyncBridge />
+        {children}
+      </>
+    )
+  }
+
+  // Customer routes: Full store experience.
+  //
+  // R021: CookieConsentProvider wraps the storefront so any script (added
+  // by Claude Code in response to a merchant request) can gate itself via
+  // `useCookieConsent()`. CookieBanner is the EDPB-compliant UI; it only
+  // renders when the master toggle is on AND the user hasn't decided yet
+  // (or their 12-month consent expired). Do not remove — this is the
+  // GDPR compliance surface for EU/UK-seated stores.
+  // AnalyticsProvider (§46) is mounted INSIDE CookieConsentProvider so it can
+  // read consent state via useCookieConsent(). It auto-fires page_view +
+  // session_start on the customer branch only — admin sessions short-circuit
+  // automatically. Never mount on the admin branch.
+  return (
+    <RovelaLocaleProvider locale={locale} defaultLocale={defaultLocale} enabledLocales={enabledLocales}>
+      <CookieConsentProvider
+        enabled={cookieBannerEnabled}
+        config={cookieConsentConfig}
+        regionExempt={consentRegionExempt}
+      >
+        <AnalyticsProvider>
+          <CartProvider>
+            <PathSyncBridge />
+            <Header />
+            <main className="flex-1">{children}</main>
+            <Footer />
+            <CartDrawer />
+            <CookieBanner />
+          </CartProvider>
+        </AnalyticsProvider>
+      </CookieConsentProvider>
+    </RovelaLocaleProvider>
+  )
+}

package/templates/store-template/app/[...path]/page.tsx

@@ -0,0 +1,79 @@
+/**
+ * Catch-all URL redirect — SEO migration bridge.
+ *
+ * Fires ONLY for paths no real route matched: old URLs from a previous platform
+ * (PrestaShop, etc.) plus genuine 404s. It reads the PrestaShop id out of the
+ * incoming old URL and permanently redirects to the matching new page, using the
+ * `store_url_map` the catalog import populates by design (id → new path). An
+ * optional `store_redirects` table (a merchant CSV export) gives exact-path
+ * overrides for URLs that carry no id. Anything unmapped renders the normal 404.
+ *
+ * Read-only and fully guarded: any DB / missing-table error degrades to a clean
+ * 404, so this can never break the storefront. `permanentRedirect` / `notFound`
+ * are called OUTSIDE the try/catch — they signal via a thrown control-flow error
+ * that must not be swallowed.
+ */
+import { permanentRedirect, notFound } from 'next/navigation'
+import { getSql } from '@rovela-ai/sdk/core/server'
+
+export const dynamic = 'force-dynamic'
+
+async function resolveRedirect(pathname: string): Promise<string | null> {
+  try {
+    const sql = getSql()
+
+    // 1. Exact-path overlay (optional merchant CSV export).
+    const exact = (await sql`
+      SELECT to_path FROM store_redirects WHERE from_path = ${pathname} LIMIT 1
+    `) as { to_path: string }[]
+    if (exact[0]?.to_path) return exact[0].to_path
+
+    // 2. By-design id engine — read the id out of the old URL (config-independent).
+    const segments = pathname.split('/').filter(Boolean)
+    if (segments.length === 0) return null
+    const idMatch = segments[segments.length - 1].match(/^(\d+)-/)
+    if (!idMatch) return null
+    const psId = idMatch[1]
+
+    // PrestaShop shape: products end in .html and/or sit under a category path;
+    // categories are a single `/{id}-{slug}` segment.
+    const kind =
+      pathname.endsWith('.html') || segments.length >= 2 ? 'product' : 'category'
+
+    // PrestaShop root/home categories (ids 1, 2) → homepage.
+    if (kind === 'category' && (psId === '1' || psId === '2')) return '/'
+
+    const hit = (await sql`
+      SELECT to_path FROM store_url_map WHERE kind = ${kind} AND ps_id = ${psId} LIMIT 1
+    `) as { to_path: string }[]
+    if (hit[0]?.to_path) return hit[0].to_path
+
+    // 3. Fallback for an unmapped (inactive/deleted) product: if the old URL's
+    //    leading category segment resolves to a live category, send them there
+    //    instead of 404. Never blanket-redirect to homepage (that reads as a
+    //    soft 404 to search engines).
+    if (kind === 'product' && segments.length >= 2) {
+      const cat = (await sql`
+        SELECT id FROM categories WHERE slug = ${segments[0]} LIMIT 1
+      `) as { id: string }[]
+      if (cat[0]?.id) return `/products?category=${cat[0].id}`
+    }
+
+    return null
+  } catch {
+    return null
+  }
+}
+
+export default async function CatchAllRedirect({
+  params,
+}: {
+  params: Promise<{ path?: string[] }>
+}) {
+  const { path = [] } = await params
+  const pathname = '/' + path.map((s) => decodeURIComponent(s)).join('/')
+
+  const to = await resolveRedirect(pathname)
+  if (to) permanentRedirect(to)
+  notFound()
+}

package/templates/store-template/app/account/addresses/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+/**
+ * Customer Addresses Page
+ *
+ * Self-service address book (add / edit / remove / set default). Admin identity
+ * cannot reach this page: `useAuth()` role-filters the session and `AuthGuard`
+ * redirects anything that isn't a signed-in customer to `/auth/signin`.
+ */
+
+import { LocaleLink as Link } from '@rovela-ai/sdk/core'
+import { ChevronLeft } from 'lucide-react'
+import { AuthGuard } from '@rovela-ai/sdk/auth'
+import { AddressBook } from '@rovela-ai/sdk/auth'
+import { useT } from '@rovela-ai/sdk/core'
+
+function AddressesContent() {
+  const t = useT()
+  return (
+    <div className="container mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8">
+      <Link
+        href="/account"
+        className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ChevronLeft className="h-4 w-4" />
+        {t('account.backToAccountLower')}
+      </Link>
+
+      <h1 className="mb-2 text-3xl font-bold font-heading">{t('account.myAddresses')}</h1>
+      <p className="mb-8 text-sm text-muted-foreground">
+        {t('account.addressesHint')}
+      </p>
+
+      <AddressBook />
+    </div>
+  )
+}
+
+export default function AddressesPage() {
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <AddressesContent />
+    </AuthGuard>
+  )
+}

package/templates/store-template/app/account/layout.tsx

@@ -0,0 +1,17 @@
+/**
+ * Account area gate — when the merchant sets Customer accounts to Off
+ * (admin Settings → Checkout Settings), the whole /account area redirects
+ * home BEFORE any HTML ships. Customer data is never deleted — flipping
+ * the setting back restores access. Fail-open on a settings-read error.
+ */
+
+import { redirect } from 'next/navigation'
+import { findSettings } from '@rovela-ai/sdk/core/server'
+
+export const dynamic = 'force-dynamic'
+
+export default async function AccountLayout({ children }: { children: React.ReactNode }) {
+  const settings = await findSettings().catch(() => null)
+  if (settings?.customerAccounts === false) redirect('/')
+  return <>{children}</>
+}

package/templates/store-template/app/account/orders/[id]/invoice/page.tsx

@@ -0,0 +1,277 @@
+'use client'
+
+/**
+ * Order Invoice Page
+ *
+ * A clean, print-ready invoice for a single order, built from the immutable
+ * order snapshot + store settings. "Download" uses the browser's print-to-PDF.
+ * Admin identity cannot reach this page (AuthGuard + role-filtered useAuth).
+ */
+
+import { useState, useEffect, use } from 'react'
+import { LocaleLink as Link } from '@rovela-ai/sdk/core'
+import { ChevronLeft, Printer, Loader2 } from 'lucide-react'
+import { AuthGuard } from '@rovela-ai/sdk/auth'
+import { useStoreSettings, useT, useStoreFormatting } from '@rovela-ai/sdk/core'
+
+interface InvoiceItem {
+  id: string
+  name: string
+  quantity: number
+  price: number
+  attributes?: Record<string, string>
+}
+
+interface InvoiceAddress {
+  firstName?: string
+  lastName?: string
+  name?: string
+  company?: string
+  line1: string
+  line2?: string
+  city: string
+  state?: string
+  postalCode: string
+  country: string
+  phone?: string
+}
+
+interface InvoiceOrder {
+  id: string
+  status: string
+  total: number
+  subtotal: number
+  tax: number
+  shipping: number
+  discountAmount?: number | string
+  discountCode?: string | null
+  refundAmount?: number
+  createdAt: string
+  items: InvoiceItem[]
+  shippingAddress: InvoiceAddress
+  billingAddress?: InvoiceAddress
+  customerEmail?: string
+}
+
+function addrName(a: InvoiceAddress): string {
+  if (a.firstName || a.lastName) return `${a.firstName ?? ''} ${a.lastName ?? ''}`.trim()
+  return a.name ?? ''
+}
+
+function AddressBlock({ address }: { address: InvoiceAddress }) {
+  return (
+    <div className="text-sm text-muted-foreground leading-relaxed">
+      <p className="font-medium text-foreground">{addrName(address)}</p>
+      {address.company && <p>{address.company}</p>}
+      <p>{address.line1}</p>
+      {address.line2 && <p>{address.line2}</p>}
+      <p>
+        {address.city}
+        {address.state ? `, ${address.state}` : ''} {address.postalCode}
+      </p>
+      <p>{address.country}</p>
+      {address.phone && <p>{address.phone}</p>}
+    </div>
+  )
+}
+
+function InvoiceContent({ orderId }: { orderId: string }) {
+  const t = useT()
+  const { settings } = useStoreSettings()
+  // Locale-aware price and date shapes (active i18n locale + store currency).
+  const { formatPrice, formatDate } = useStoreFormatting()
+  const [order, setOrder] = useState<InvoiceOrder | null>(null)
+  // Per-order snapshot (orders.currency): the order renders in the currency
+  // it was PLACED in, even after the store's currency changes.
+  const orderCurrency = (order as { currency?: string | null } | null)?.currency
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+    async function load() {
+      try {
+        const res = await fetch(`/api/account/orders/${orderId}`)
+        if (!res.ok) {
+          if (active) setError(res.status === 404 ? t('account.orderNotFound') : t('account.orderLoadFailed'))
+          return
+        }
+        const data = await res.json()
+        if (active) setOrder(data.order ?? data)
+      } catch {
+        if (active) setError(t('account.orderLoadFailed'))
+      } finally {
+        if (active) setIsLoading(false)
+      }
+    }
+    load()
+    return () => {
+      active = false
+    }
+  }, [orderId])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-24 text-muted-foreground">
+        <Loader2 className="h-6 w-6 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error || !order) {
+    return (
+      <div className="container mx-auto max-w-2xl px-4 py-16 text-center">
+        <p className="text-muted-foreground">{error || t('account.orderNotFound')}</p>
+        <Link href="/account/orders" className="mt-4 inline-block text-sm text-primary hover:underline">
+          {t('invoice.backToOrders')}
+        </Link>
+      </div>
+    )
+  }
+
+  const billing = order.billingAddress ?? order.shippingAddress
+
+  return (
+    <div className="container mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8">
+      {/* Screen-only controls */}
+      <div className="mb-6 flex items-center justify-between print:hidden">
+        <Link
+          href={`/account/orders/${order.id}`}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+        >
+          <ChevronLeft className="h-4 w-4" />
+          {t('invoice.backToOrder')}
+        </Link>
+        <button
+          type="button"
+          onClick={() => window.print()}
+          className="inline-flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+        >
+          <Printer className="h-4 w-4" />
+          {t('invoice.printSavePdf')}
+        </button>
+      </div>
+
+      {/* Invoice document */}
+      <div className="rounded-lg border bg-card p-8 print:border-0 print:p-0">
+        {/* Header */}
+        <div className="flex flex-col gap-6 border-b pb-6 sm:flex-row sm:items-start sm:justify-between">
+          <div>
+            {settings?.logoUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={settings.logoUrl} alt={settings.storeName} className="mb-2 h-10 w-auto object-contain" />
+            ) : (
+              <p className="text-xl font-bold font-heading">{settings?.storeName}</p>
+            )}
+            {settings?.storeEmail && (
+              <p className="text-sm text-muted-foreground">{settings.storeEmail}</p>
+            )}
+          </div>
+          <div className="text-left sm:text-right">
+            <h1 className="text-2xl font-bold font-heading">{t('invoice.title')}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">
+              #{order.id.slice(0, 8).toUpperCase()}
+            </p>
+            <p className="text-sm text-muted-foreground">
+              {formatDate(new Date(order.createdAt))}
+            </p>
+          </div>
+        </div>
+
+        {/* Parties */}
+        <div className="grid grid-cols-1 gap-8 py-6 sm:grid-cols-2">
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t('invoice.billTo')}
+            </p>
+            <AddressBlock address={billing} />
+          </div>
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t('invoice.shipTo')}
+            </p>
+            <AddressBlock address={order.shippingAddress} />
+          </div>
+        </div>
+
+        {/* Line items */}
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b text-left text-xs uppercase tracking-wide text-muted-foreground">
+              <th className="py-2 font-semibold">{t('invoice.item')}</th>
+              <th className="py-2 text-center font-semibold">{t('invoice.qty')}</th>
+              <th className="py-2 text-right font-semibold">{t('invoice.price')}</th>
+              <th className="py-2 text-right font-semibold">{t('common.total')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {order.items.map((item, i) => (
+              <tr key={item.id || i} className="border-b border-border/60">
+                <td className="py-3">
+                  <p className="font-medium text-foreground">{item.name}</p>
+                  {item.attributes && Object.keys(item.attributes).length > 0 && (
+                    <p className="text-xs text-muted-foreground">
+                      {Object.entries(item.attributes)
+                        .map(([k, v]) => `${k}: ${v}`)
+                        .join(', ')}
+                    </p>
+                  )}
+                </td>
+                <td className="py-3 text-center text-muted-foreground">{item.quantity}</td>
+                <td className="py-3 text-right text-muted-foreground">{formatPrice(item.price, orderCurrency)}</td>
+                <td className="py-3 text-right font-medium">
+                  {formatPrice(item.price * item.quantity, orderCurrency)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {/* Totals */}
+        <div className="ml-auto mt-6 w-full max-w-xs space-y-2 text-sm">
+          <div className="flex justify-between text-muted-foreground">
+            <span>{t('common.subtotal')}</span>
+            <span>{formatPrice(order.subtotal, orderCurrency)}</span>
+          </div>
+          {Number(order.discountAmount ?? 0) > 0 && (
+            <div className="flex justify-between text-emerald-600">
+              <span>{t('common.discount')}{order.discountCode ? ` (${order.discountCode})` : ''}</span>
+              <span>-{formatPrice(order.discountAmount!, orderCurrency)}</span>
+            </div>
+          )}
+          <div className="flex justify-between text-muted-foreground">
+            <span>{t('common.shipping')}</span>
+            <span>{order.shipping > 0 ? formatPrice(order.shipping, orderCurrency) : t('common.free')}</span>
+          </div>
+          <div className="flex justify-between text-muted-foreground">
+            <span>{t('common.tax')}</span>
+            <span>{formatPrice(order.tax, orderCurrency)}</span>
+          </div>
+          <div className="flex justify-between border-t pt-2 text-base font-semibold text-foreground">
+            <span>{t('common.total')}</span>
+            <span>{formatPrice(order.total, orderCurrency)}</span>
+          </div>
+          {order.refundAmount != null && order.refundAmount > 0 && (
+            <div className="flex justify-between text-amber-600">
+              <span>{t('account.refunded')}</span>
+              <span>-{formatPrice(order.refundAmount)}</span>
+            </div>
+          )}
+        </div>
+
+        <p className="mt-8 border-t pt-6 text-center text-xs text-muted-foreground">
+          {t('invoice.thankYou')}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default function InvoicePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <InvoiceContent orderId={id} />
+    </AuthGuard>
+  )
+}