@rovela-ai/sdk 0.19.4 → 0.19.6

package/templates/store-template/app/api/media/route.ts

@@ -0,0 +1,7 @@
+/**
+ * Media API Route
+ *
+ * DELETE /api/media - Delete a file from storage
+ */
+
+export { DELETE } from '@rovela-ai/sdk/media/api'

package/templates/store-template/app/api/products/[slug]/route.ts

@@ -0,0 +1,10 @@
+/**
+ * Single Product API Route
+ *
+ * GET /api/products/[slug] - Get product by slug with variants
+ * Wires directly to SDK handler.
+ */
+
+import { getProduct } from '@rovela-ai/sdk/products'
+
+export const GET = getProduct

package/templates/store-template/app/api/products/route.ts

@@ -0,0 +1,10 @@
+/**
+ * Products API Route
+ *
+ * GET /api/products - List products with filtering, sorting, pagination
+ * Wires directly to SDK handler.
+ */
+
+import { getProducts } from '@rovela-ai/sdk/products'
+
+export const GET = getProducts

package/templates/store-template/app/api/store/settings/route.ts

@@ -0,0 +1,12 @@
+/**
+ * Public Store Settings API
+ *
+ * Returns public (non-sensitive) store settings.
+ * Used by StoreSettingsProvider to get dynamic store configuration.
+ *
+ * This endpoint is PUBLIC - no authentication required.
+ */
+
+import { getPublicSettings } from '@rovela-ai/sdk/core/api'
+
+export { getPublicSettings as GET }

package/templates/store-template/app/api/webhooks/stripe/route.ts

@@ -0,0 +1,63 @@
+/**
+ * Stripe Webhook Route
+ *
+ * POST /api/webhooks/stripe - Handle Stripe webhook events
+ *
+ * The SDK's handleStripeWebhook() already:
+ * - Verifies webhook signature
+ * - Creates orders on checkout.session.completed
+ * - Sends order confirmation emails
+ * - Handles refunds
+ *
+ * §46 wrapper-and-extend: when the SDK returns analytics context from a
+ * successful checkout completion, fire a server-side `purchase` event tied
+ * to the same visitor session that browsed the storefront. The partial
+ * unique index on (order_id) WHERE event='purchase' absorbs Stripe's
+ * at-least-once delivery — duplicate webhooks ON CONFLICT DO NOTHING.
+ */
+
+import { handleStripeWebhook } from '@rovela-ai/sdk/checkout/server'
+import { recordEvent } from '@rovela-ai/sdk/analytics/server'
+
+export async function POST(request: Request) {
+  const payload = await request.text()
+  const signature = request.headers.get('stripe-signature')
+
+  if (!signature) {
+    return Response.json(
+      { error: 'Missing stripe-signature header' },
+      { status: 400 }
+    )
+  }
+
+  const result = await handleStripeWebhook(payload, signature)
+
+  // Fire server-side `purchase` analytics event when the order was created
+  // AND the storefront passed visitor identity through Stripe metadata
+  // (CheckoutFlow does this automatically via useCheckout). Fire-and-forget;
+  // recordEvent swallows errors so analytics CAN'T break webhook delivery.
+  if (
+    result?.event === 'checkout.session.completed' &&
+    result.orderId &&
+    result.analytics?.visitorId &&
+    result.analytics?.sessionId &&
+    typeof result.analytics.valueCents === 'number' &&
+    result.analytics.currency
+  ) {
+    void recordEvent({
+      event: {
+        event: 'purchase',
+        visitor_id: result.analytics.visitorId,
+        session_id: result.analytics.sessionId,
+        order_id: result.orderId,
+        value_cents: result.analytics.valueCents,
+        currency: result.analytics.currency,
+        path: '/checkout/success',
+      },
+      device: null,
+      country: null,
+    })
+  }
+
+  return Response.json(result)
+}

package/templates/store-template/app/auth/forgot-password/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+/**
+ * Forgot Password Page
+ *
+ * Request password reset email.
+ */
+
+import { LocaleLink as Link } from '@rovela-ai/sdk/core'
+import { ForgotPasswordForm } from '@rovela-ai/sdk/auth'
+import { useT } from '@rovela-ai/sdk/core'
+
+export default function ForgotPasswordPage() {
+  const t = useT()
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold font-heading">{t('authPage.resetTitle')}</h1>
+          <p className="mt-2 text-muted-foreground">
+            {t('authPage.resetSubtitle')}
+          </p>
+        </div>
+
+        <div className="rounded-lg border bg-card p-6">
+          <ForgotPasswordForm />
+        </div>
+
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          {t('authPage.rememberPassword')}{' '}
+          <Link href="/auth/signin" className="text-primary hover:underline">
+            {t('authPage.signIn')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Auth area gate — when the merchant sets Customer accounts to Off
+ * (admin Settings → Checkout Settings), every auth page (sign in, sign up,
+ * forgot/reset password, verify email) redirects home BEFORE any HTML
+ * ships. Fail-open: a settings-read error never blocks a normal store.
+ */
+
+import { redirect } from 'next/navigation'
+import { findSettings } from '@rovela-ai/sdk/core/server'
+
+export const dynamic = 'force-dynamic'
+
+export default async function AuthLayout({ children }: { children: React.ReactNode }) {
+  const settings = await findSettings().catch(() => null)
+  if (settings?.customerAccounts === false) redirect('/')
+  return <>{children}</>
+}

package/templates/store-template/app/auth/reset-password/page.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+/**
+ * Reset Password Page
+ *
+ * Set new password using reset token from email.
+ */
+
+import { Suspense } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { LocaleLink as Link, useLocalePath } from '@rovela-ai/sdk/core'
+import { ResetPasswordForm } from '@rovela-ai/sdk/auth'
+import { useT } from '@rovela-ai/sdk/core'
+
+function ResetPasswordContent() {
+  const t = useT()
+  const localePath = useLocalePath()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+
+  if (!token) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="max-w-md mx-auto text-center">
+          <h1 className="text-2xl font-bold font-heading text-destructive">
+            {t('authPage.invalidResetLink')}
+          </h1>
+          <p className="mt-4 text-muted-foreground">
+            {t('authPage.invalidResetLinkBody')}
+          </p>
+          <Link
+            href="/auth/forgot-password"
+            className="mt-8 inline-block rounded-md bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+          >
+            {t('authPage.requestNewLink')}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold font-heading">{t('authPage.setNewPassword')}</h1>
+          <p className="mt-2 text-muted-foreground">
+            Enter your new password below
+          </p>
+        </div>
+
+        <div className="rounded-lg border bg-card p-6">
+          <ResetPasswordForm
+            token={token}
+            onSuccess={() => router.push(localePath('/auth/signin?reset=success'))}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LoadingFallback() {
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" />
+        <p className="mt-4 text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <ResetPasswordContent />
+    </Suspense>
+  )
+}

package/templates/store-template/app/auth/signin/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+/**
+ * Sign In Page
+ *
+ * Customer sign in using SDK auth components.
+ */
+
+import { Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { SignInForm } from '@rovela-ai/sdk/auth'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+import { useT } from '@rovela-ai/sdk/core'
+
+function SignInContent() {
+  const t = useT()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const callbackUrl = searchParams.get('callbackUrl') || '/account'
+  const { storeName } = useStoreSettings()
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold font-heading">{t('authPage.welcomeBack')}</h1>
+          <p className="mt-2 text-muted-foreground">
+            {t('authPage.signInSubtitle', { storeName })}
+          </p>
+        </div>
+
+        <div className="rounded-lg border bg-card p-6">
+          <SignInForm
+            onSuccess={() => router.push(callbackUrl)}
+            forgotPasswordHref="/auth/forgot-password"
+            signUpHref="/auth/signup"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function LoadingFallback() {
+  const t = useT()
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" />
+        <p className="mt-4 text-muted-foreground">{t('authPage.loading')}</p>
+      </div>
+    </div>
+  )
+}
+
+export default function SignInPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <SignInContent />
+    </Suspense>
+  )
+}

package/templates/store-template/app/auth/signup/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+/**
+ * Sign Up Page
+ *
+ * Customer registration using SDK auth components.
+ */
+
+import { useRouter } from 'next/navigation'
+import { SignUpForm } from '@rovela-ai/sdk/auth'
+import { useStoreSettings, useLocalePath } from '@rovela-ai/sdk/core'
+import { useT } from '@rovela-ai/sdk/core'
+
+export default function SignUpPage() {
+  const t = useT()
+  const localePath = useLocalePath()
+  const router = useRouter()
+  const { storeName } = useStoreSettings()
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold font-heading">{t('authPage.createAccount')}</h1>
+          <p className="mt-2 text-muted-foreground">
+            {t('authPage.signUpSubtitle', { storeName })}
+          </p>
+        </div>
+
+        <div className="rounded-lg border bg-card p-6">
+          <SignUpForm
+            onSuccess={() => router.push(localePath('/auth/verify-email'))}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/store-template/app/auth/verify-email/page.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+/**
+ * Verify Email Page
+ *
+ * Shows verification notice or handles token verification.
+ */
+
+import { Suspense, useEffect, useState, useCallback } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { LocaleLink as Link, useLocalePath } from '@rovela-ai/sdk/core'
+import { CheckCircle, XCircle, Mail, RefreshCw } from 'lucide-react'
+import { useT } from '@rovela-ai/sdk/core'
+
+function VerifyEmailContent() {
+  const t = useT()
+  const localePath = useLocalePath()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+  const email = searchParams.get('email') || ''
+
+  const [status, setStatus] = useState<'pending' | 'verifying' | 'success' | 'error'>('pending')
+  const [error, setError] = useState<string | null>(null)
+  const [isResending, setIsResending] = useState(false)
+  const [resent, setResent] = useState(false)
+
+  // If token present, verify it
+  useEffect(() => {
+    if (token) {
+      setStatus('verifying')
+      fetch(`/api/auth/verify-email?token=${token}`)
+        .then(res => res.json())
+        .then(data => {
+          if (data.success) {
+            setStatus('success')
+            // Redirect to signin after 3 seconds
+            setTimeout(() => router.push(localePath('/auth/signin')), 3000)
+          } else {
+            setStatus('error')
+            setError(data.error || t('authPage.verificationFailed'))
+          }
+        })
+        .catch(() => {
+          setStatus('error')
+          setError(t('authPage.verificationError'))
+        })
+    }
+  }, [token, router])
+
+  const handleResend = useCallback(async () => {
+    if (!email || isResending) return
+    setIsResending(true)
+    try {
+      const res = await fetch('/api/auth/resend-verification', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      })
+      if (res.ok) {
+        setResent(true)
+      }
+    } finally {
+      setIsResending(false)
+    }
+  }, [email, isResending])
+
+  // Token verification flow
+  if (token) {
+    if (status === 'verifying') {
+      return (
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="max-w-md mx-auto text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto" />
+            <h1 className="mt-6 text-2xl font-bold font-heading">
+              {t('authPage.verifyingEmail')}
+            </h1>
+          </div>
+        </div>
+      )
+    }
+
+    if (status === 'success') {
+      return (
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="max-w-md mx-auto text-center">
+            <CheckCircle className="h-16 w-16 mx-auto text-green-500" />
+            <h1 className="mt-6 text-2xl font-bold font-heading">
+              {t('authPage.emailVerified')}
+            </h1>
+            <p className="mt-4 text-muted-foreground">
+              Your email has been verified. Redirecting to sign in...
+            </p>
+            <Link
+              href="/auth/signin"
+              className="mt-8 inline-block rounded-md bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+            >
+              Sign In Now
+            </Link>
+          </div>
+        </div>
+      )
+    }
+
+    if (status === 'error') {
+      return (
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+          <div className="max-w-md mx-auto text-center">
+            <XCircle className="h-16 w-16 mx-auto text-destructive" />
+            <h1 className="mt-6 text-2xl font-bold font-heading text-destructive">
+              Verification Failed
+            </h1>
+            <p className="mt-4 text-muted-foreground">
+              {error}
+            </p>
+            <Link
+              href="/auth/signin"
+              className="mt-8 inline-block rounded-md bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+            >
+              Try Again
+            </Link>
+          </div>
+        </div>
+      )
+    }
+  }
+
+  // No token - show verification notice
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto text-center">
+        <Mail className="h-16 w-16 mx-auto text-primary" />
+        <h1 className="mt-6 text-2xl font-bold font-heading">
+          Check your email
+        </h1>
+        <p className="mt-4 text-muted-foreground">
+          We&apos;ve sent you a verification link. Please check your inbox and click the link to verify your email address.
+        </p>
+
+        {email && !resent && (
+          <button
+            onClick={handleResend}
+            disabled={isResending}
+            className="mt-8 inline-flex items-center gap-2 text-sm text-primary hover:underline disabled:opacity-50"
+          >
+            <RefreshCw className={`h-4 w-4 ${isResending ? 'animate-spin' : ''}`} />
+            {isResending ? 'Sending...' : 'Resend verification email'}
+          </button>
+        )}
+
+        {resent && (
+          <p className="mt-8 text-sm text-green-600">
+            Verification email sent! Check your inbox.
+          </p>
+        )}
+
+        <p className="mt-6 text-sm text-muted-foreground">
+          Already verified?{' '}
+          <Link href="/auth/signin" className="text-primary hover:underline">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function LoadingFallback() {
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <div className="max-w-md mx-auto text-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto" />
+        <p className="mt-4 text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  )
+}
+
+export default function VerifyEmailPage() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <VerifyEmailContent />
+    </Suspense>
+  )
+}

package/templates/store-template/app/cart/page.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+/**
+ * Cart Page
+ *
+ * Uses SDK components for cart display:
+ * - CartItem: Individual cart line item
+ * - CartSummary: Subtotal and totals
+ * - useCart: Cart state management
+ *
+ * Checkout behavior depends on store settings:
+ * - Shipping enabled: Link to /checkout for pre-checkout flow (Address → Shipping → Review)
+ * - Shipping disabled: Direct CheckoutButton to Stripe (no pre-checkout needed)
+ */
+
+import { LocaleLink as Link } from '@rovela-ai/sdk/core'
+import { ShoppingBag } from 'lucide-react'
+import { useCart, CartItem, CartSummary, getCartItemsWithFallback } from '@rovela-ai/sdk/cart'
+import { CheckoutButton } from '@rovela-ai/sdk/checkout'
+import { useStoreSettings, useT, useStoreFormatting } from '@rovela-ai/sdk/core'
+
+export default function CartPage() {
+  // Use fallback to handle module duplication issues where this route chunk
+  // may have a different store instance than the one CartProvider hydrated
+  const items = getCartItemsWithFallback()
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
+  const t = useT()
+  const { clearCart } = useCart()
+  const { settings } = useStoreSettings()
+  // Locale-aware price shapes (active i18n locale + store currency).
+  const { formatPrice } = useStoreFormatting()
+
+  // Check if shipping is enabled (determines checkout flow)
+  const shippingEnabled = settings?.shippingEnabled ?? true
+
+  // Calculate subtotal for free shipping message
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+
+  // Empty cart
+  if (itemCount === 0) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="text-center max-w-md mx-auto">
+          <ShoppingBag className="h-16 w-16 mx-auto text-muted-foreground" />
+          <h1 className="mt-6 text-2xl font-bold font-heading">{t('cart.empty')}</h1>
+          <p className="mt-4 text-muted-foreground">
+            {t('cartPage.emptyHint')}
+          </p>
+          <Link
+            href="/products"
+            className="mt-8 inline-block rounded-md bg-primary px-8 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+          >
+            {t('checkout.continueShopping')}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="flex items-center justify-between mb-8">
+        <h1 className="text-3xl font-bold font-heading">{t('cart.title')}</h1>
+        <button
+          onClick={clearCart}
+          className="text-sm text-muted-foreground hover:text-destructive transition-colors"
+        >
+          {t('cartPage.clearCart')}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+        {/* Cart Items */}
+        <div className="lg:col-span-2 space-y-4">
+          {items.map((item) => (
+            <CartItem
+              key={item.variantId ? `${item.id}-${item.variantId}` : item.id}
+              item={item}
+            />
+          ))}
+        </div>
+
+        {/* Cart Summary */}
+        <div className="lg:col-span-1">
+          <div className="sticky top-24 rounded-lg border bg-card p-6">
+            <h2 className="text-lg font-semibold mb-4">{t('checkout.orderSummary')}</h2>
+
+            <CartSummary />
+
+            <div className="mt-6">
+              {shippingEnabled ? (
+                <Link
+                  href="/checkout"
+                  className="w-full inline-flex items-center justify-center rounded-md bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 text-base font-medium transition-colors"
+                >
+                  {t('cartPage.proceedToCheckout')}
+                </Link>
+              ) : (
+                <CheckoutButton size="lg" className="w-full">
+                  {t('cartPage.proceedToCheckout')}
+                </CheckoutButton>
+              )}
+            </div>
+
+            <p className="mt-4 text-center text-sm text-muted-foreground">
+              {shippingEnabled ? t('cart.shippingTaxesAtCheckout') : t('cartPage.taxesAtCheckout')}
+            </p>
+
+            {/* Free Shipping Message */}
+            {settings?.shippingEnabled && settings?.freeShippingThreshold > 0 && (
+              <div className="mt-4 text-center">
+                {subtotal < settings.freeShippingThreshold ? (
+                  <p className="text-sm text-primary font-medium">
+                    {t('cartPage.addMoreForFreeShipping', { amount: formatPrice(settings.freeShippingThreshold - subtotal) })}
+                  </p>
+                ) : (
+                  <p className="text-sm text-green-600 font-medium">
+                    ✓ {t('cartPage.qualifyFreeShipping')}
+                  </p>
+                )}
+              </div>
+            )}
+
+            <div className="mt-6 pt-6 border-t">
+              <Link
+                href="/products"
+                className="text-sm text-primary hover:underline"
+              >
+                &larr; {t('checkout.continueShopping')}
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}