@rovela-ai/sdk 0.19.4 → 0.19.6

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

@@ -0,0 +1,153 @@
+'use client'
+
+/**
+ * Order History Page
+ *
+ * Shows CUSTOMER's past orders. Admin identity cannot reach this page:
+ * `useAuth()` role-filters the session (returns null for admin JWTs) and
+ * `AuthGuard` redirects anything that's not a signed-in customer to
+ * `/auth/signin`.
+ */
+
+import { useState, useEffect } from 'react'
+import { LocaleLink as Link, useStoreFormatting } from '@rovela-ai/sdk/core'
+import { ChevronLeft, Package } from 'lucide-react'
+import { AuthGuard } from '@rovela-ai/sdk/auth'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+import { useT, translateDynamic } from '@rovela-ai/sdk/core'
+
+interface Order {
+  id: string
+  status: string
+  total: number
+  createdAt: string
+  items?: Array<{
+    name: string
+    quantity: number
+    price: number
+  }>
+}
+
+function OrdersContent() {
+  const t = useT()
+  // Locale-aware price and date shapes (active i18n locale + store currency).
+  const { formatPrice, formatDate } = useStoreFormatting()
+  const [orders, setOrders] = useState<Order[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchOrders() {
+      try {
+        const res = await fetch('/api/account/orders')
+        if (res.ok) {
+          const data = await res.json()
+          setOrders(data.orders || [])
+        }
+      } catch (error) {
+        console.error('Failed to fetch orders:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchOrders()
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 w-48 bg-muted rounded" />
+          <div className="h-24 bg-muted rounded" />
+          <div className="h-24 bg-muted rounded" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <nav className="mb-8">
+        <Link
+          href="/account"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          {t('account.backToAccount')}
+        </Link>
+      </nav>
+
+      <h1 className="text-3xl font-bold font-heading mb-8">{t('account.orderHistory')}</h1>
+
+      {orders.length === 0 ? (
+        <div className="text-center py-12">
+          <Package className="h-16 w-16 mx-auto text-muted-foreground" />
+          <h2 className="mt-6 text-xl font-semibold">{t('account.noOrders')}</h2>
+          <p className="mt-2 text-muted-foreground">
+            {t('account.noOrdersHint')}
+          </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('account.startShopping')}
+          </Link>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {orders.map((order) => (
+            <div
+              key={order.id}
+              className="rounded-lg border bg-card p-6"
+            >
+              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">
+                    {t('account.orderRefNo', { ref: order.id.slice(0, 8).toUpperCase() })}
+                  </p>
+                  <p className="font-semibold mt-1">
+                    {formatPrice(order.total, (order as { currency?: string | null }).currency)}
+                  </p>
+                  <p className="text-sm text-muted-foreground mt-1">
+                    {formatDate(new Date(order.createdAt))}
+                  </p>
+                </div>
+                <div className="flex items-center gap-4">
+                  <span className={`
+                    inline-flex items-center rounded-full px-3 py-1 text-xs font-medium
+                    ${order.status === 'delivered' ? 'bg-green-100 text-green-800' : ''}
+                    ${order.status === 'shipped' ? 'bg-blue-100 text-blue-800' : ''}
+                    ${order.status === 'paid' ? 'bg-yellow-100 text-yellow-800' : ''}
+                    ${order.status === 'pending' ? 'bg-gray-100 text-gray-800' : ''}
+                    ${order.status === 'cancelled' ? 'bg-red-100 text-red-800' : ''}
+                  `}>
+                    {(() => { const l = translateDynamic(t, 'status', order.status); return l === order.status ? order.status.charAt(0).toUpperCase() + order.status.slice(1) : l })()}
+                  </span>
+                  <Link
+                    href={`/account/orders/${order.id}`}
+                    className="text-sm text-primary hover:underline"
+                  >
+                    {t('account.viewDetails')}
+                  </Link>
+                </div>
+              </div>
+              <div className="mt-4 pt-4 border-t">
+                <p className="text-sm text-muted-foreground">
+                  {(order.items ?? []).length} item{(order.items ?? []).length !== 1 ? 's' : ''}:{' '}
+                  {(order.items ?? []).map(item => item.name).join(', ')}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function OrdersPage() {
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <OrdersContent />
+    </AuthGuard>
+  )
+}

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

@@ -0,0 +1,184 @@
+'use client'
+
+/**
+ * Account Dashboard (overview hub)
+ *
+ * Protected page showing a CUSTOMER account overview: a greeting, the most
+ * recent order with its status, and quick actions. Admin identity cannot reach
+ * this page — `useAuth()` role-filters the session (returns null for admin JWTs)
+ * and `AuthGuard` redirects non-customers to `/auth/signin`.
+ */
+
+import { useState, useEffect } from 'react'
+import { LocaleLink as Link, useStoreFormatting } from '@rovela-ai/sdk/core'
+import { Package, User, MapPin, LogOut, ChevronRight } from 'lucide-react'
+import { AuthGuard, useAuth } from '@rovela-ai/sdk/auth'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+import { useT, translateDynamic, type Translator } from '@rovela-ai/sdk/core'
+
+interface RecentOrder {
+  id: string
+  status: string
+  total: number
+  createdAt: string
+}
+
+function greeting(t: Translator): string {
+  const h = new Date().getHours()
+  if (h < 12) return t('account.goodMorning')
+  if (h < 18) return t('account.goodAfternoon')
+  return t('account.goodEvening')
+}
+
+const statusStyles: Record<string, string> = {
+  pending: 'bg-amber-100 text-amber-700',
+  paid: 'bg-blue-100 text-blue-700',
+  shipped: 'bg-indigo-100 text-indigo-700',
+  delivered: 'bg-green-100 text-green-700',
+  cancelled: 'bg-red-100 text-red-700',
+  refunded: 'bg-muted text-muted-foreground',
+  return_requested: 'bg-amber-100 text-amber-700',
+}
+
+function statusLabel(t: Translator, s: string): string {
+  const label = translateDynamic(t, 'status', s)
+  return label === s ? s.charAt(0).toUpperCase() + s.slice(1) : label
+}
+
+function AccountContent() {
+  const t = useT()
+  const { customer, signOut } = useAuth()
+  // Locale-aware price and date shapes (active i18n locale + store currency).
+  const { formatPrice, formatDate } = useStoreFormatting()
+  const [latestOrder, setLatestOrder] = useState<RecentOrder | null>(null)
+  const [loadingOrder, setLoadingOrder] = useState(true)
+
+  // Pattern C — populate state from async-loaded data.
+  useEffect(() => {
+    let active = true
+    async function load() {
+      try {
+        const res = await fetch('/api/account/orders')
+        if (res.ok) {
+          const data = await res.json()
+          const orders: RecentOrder[] = data.orders ?? data ?? []
+          const newest = orders.reduce<RecentOrder | null>((acc, o) => {
+            if (!acc) return o
+            return new Date(o.createdAt).getTime() > new Date(acc.createdAt).getTime() ? o : acc
+          }, null)
+          if (active) setLatestOrder(newest)
+        }
+      } catch {
+        // non-fatal — the hub still renders without the latest-order card
+      } finally {
+        if (active) setLoadingOrder(false)
+      }
+    }
+    load()
+    return () => {
+      active = false
+    }
+  }, [])
+
+  const firstName = customer?.name?.split(' ')[0] || null
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Greeting */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold font-heading">
+          {greeting(t)}
+          {firstName ? `, ${firstName}` : ''}
+        </h1>
+        <p className="mt-1 text-muted-foreground">{customer?.email}</p>
+      </div>
+
+      {/* Latest order */}
+      {!loadingOrder && latestOrder && (
+        <Link
+          href={`/account/orders/${latestOrder.id}`}
+          className="mb-8 flex items-center justify-between gap-4 rounded-lg border bg-card p-5 hover:border-primary transition-colors"
+        >
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+              <Package className="h-6 w-6 text-primary" />
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <p className="font-semibold">
+                  {t('account.orderRef', { ref: latestOrder.id.slice(0, 8).toUpperCase() })}
+                </p>
+                <span
+                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                    statusStyles[latestOrder.status] || 'bg-muted text-muted-foreground'
+                  }`}
+                >
+                  {statusLabel(t, latestOrder.status)}
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {formatDate(new Date(latestOrder.createdAt))} · {formatPrice(latestOrder.total)}
+              </p>
+            </div>
+          </div>
+          <ChevronRight className="h-5 w-5 text-muted-foreground" />
+        </Link>
+      )}
+
+      {/* Quick actions */}
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <Link
+          href="/account/orders"
+          className="rounded-lg border bg-card p-6 hover:border-primary transition-colors"
+        >
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <Package className="h-6 w-6 text-primary" />
+          </div>
+          <h2 className="font-semibold">{t('account.orders')}</h2>
+          <p className="text-sm text-muted-foreground">{t('account.viewOrderHistory')}</p>
+        </Link>
+
+        <Link
+          href="/account/addresses"
+          className="rounded-lg border bg-card p-6 hover:border-primary transition-colors"
+        >
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <MapPin className="h-6 w-6 text-primary" />
+          </div>
+          <h2 className="font-semibold">{t('account.addresses')}</h2>
+          <p className="text-sm text-muted-foreground">{t('account.manageAddresses')}</p>
+        </Link>
+
+        <Link
+          href="/account/profile"
+          className="rounded-lg border bg-card p-6 hover:border-primary transition-colors"
+        >
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <User className="h-6 w-6 text-primary" />
+          </div>
+          <h2 className="font-semibold">{t('account.profile')}</h2>
+          <p className="text-sm text-muted-foreground">{t('account.profileDesc')}</p>
+        </Link>
+
+        <button
+          onClick={() => signOut()}
+          className="rounded-lg border bg-card p-6 text-left hover:border-destructive transition-colors"
+        >
+          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+            <LogOut className="h-6 w-6 text-destructive" />
+          </div>
+          <h2 className="font-semibold">{t('account.signOut')}</h2>
+          <p className="text-sm text-muted-foreground">{t('account.signOutDesc')}</p>
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default function AccountPage() {
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <AccountContent />
+    </AuthGuard>
+  )
+}