@rovela-ai/sdk 0.19.3 → 0.19.5

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

@@ -0,0 +1,725 @@
+'use client'
+
+/**
+ * Order Detail Page
+ *
+ * Shows details of a specific customer order including:
+ * - Order summary (number, date, status)
+ * - Items list with images
+ * - Totals (subtotal, shipping, tax, total)
+ * - Shipping address
+ * - Receipt download button
+ * - Tracking info if shipped
+ * - Request Refund button (for orders not yet shipped)
+ * - Request Return button (for delivered orders)
+ * - Refund status display
+ * - Return request status display
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { LocaleLink as Link, useStoreFormatting } from '@rovela-ai/sdk/core'
+import { use } from 'react'
+import { ChevronLeft, Package, Download, FileText, AlertTriangle, X, Loader2, RotateCcw } from 'lucide-react'
+import { AuthGuard } from '@rovela-ai/sdk/auth'
+import { useStoreSettings } from '@rovela-ai/sdk/core'
+import { OrderTimeline } from '@rovela-ai/sdk/checkout'
+import { useT, translateDynamic } from '@rovela-ai/sdk/core'
+
+interface OrderItem {
+  id: string
+  name: string
+  quantity: number
+  price: number
+  attributes?: Record<string, string>
+}
+
+interface ShippingAddress {
+  firstName?: string
+  lastName?: string
+  name?: string
+  line1: string
+  line2?: string
+  city: string
+  state: string
+  postalCode: string
+  country: string
+}
+
+interface Order {
+  id: string
+  status: string
+  total: number
+  subtotal: number
+  tax: number
+  shipping: number
+  discountAmount?: number | string
+  discountCode?: string | null
+  refundAmount?: number
+  createdAt: string
+  items: OrderItem[]
+  shippingAddress: ShippingAddress
+  pickupLocationId?: string | null
+  trackingNumber?: string
+  trackingUrl?: string
+  carrier?: string
+  receiptUrl?: string
+  returnReason?: string
+}
+
+function OrderDetailContent({ orderId }: { orderId: string }) {
+  const t = useT()
+  // Locale-aware price and date shapes (active i18n locale + store currency).
+  const { formatPrice, formatDate } = useStoreFormatting()
+  const [order, setOrder] = useState<Order | 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)
+
+  // Refund state
+  const [showRefundDialog, setShowRefundDialog] = useState(false)
+  const [isProcessingRefund, setIsProcessingRefund] = useState(false)
+  const [refundError, setRefundError] = useState<string | null>(null)
+  const [refundSuccess, setRefundSuccess] = useState<string | null>(null)
+
+  // Return state
+  const [showReturnDialog, setShowReturnDialog] = useState(false)
+  const [returnReason, setReturnReason] = useState('')
+  const [isProcessingReturn, setIsProcessingReturn] = useState(false)
+  const [returnError, setReturnError] = useState<string | null>(null)
+  const [returnSuccess, setReturnSuccess] = useState<string | null>(null)
+
+  const fetchOrder = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/account/orders/${orderId}`)
+      if (res.ok) {
+        const data = await res.json()
+        setOrder(data.order)
+      } else if (res.status === 404) {
+        setError(t('account.orderNotFound'))
+      } else if (res.status === 403) {
+        setError(t('account.orderForbidden'))
+      } else {
+        setError(t('account.orderLoadFailed'))
+      }
+    } catch (err) {
+      console.error('Failed to fetch order:', err)
+      setError(t('account.orderLoadFailed'))
+    } finally {
+      setIsLoading(false)
+    }
+  }, [orderId])
+
+  useEffect(() => {
+    fetchOrder()
+  }, [fetchOrder])
+
+  // Handle refund request
+  const handleRefundRequest = useCallback(async () => {
+    setIsProcessingRefund(true)
+    setRefundError(null)
+
+    try {
+      const res = await fetch(`/api/account/orders/${orderId}/refund`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+
+      const data = await res.json()
+
+      if (res.ok && data.success) {
+        setRefundSuccess(data.message || t('account.refundProcessedMsg'))
+        setShowRefundDialog(false)
+        // Refresh order to show updated status
+        await fetchOrder()
+      } else {
+        setRefundError(data.error || t('account.refundFailed'))
+      }
+    } catch (err) {
+      console.error('Refund request failed:', err)
+      setRefundError(t('account.refundFailed'))
+    } finally {
+      setIsProcessingRefund(false)
+    }
+  }, [orderId, fetchOrder])
+
+  // Handle return request
+  const handleReturnRequest = useCallback(async () => {
+    if (!returnReason.trim()) {
+      setReturnError(t('account.returnReasonRequired'))
+      return
+    }
+
+    setIsProcessingReturn(true)
+    setReturnError(null)
+
+    try {
+      const res = await fetch(`/api/account/orders/${orderId}/return`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ reason: returnReason.trim() }),
+      })
+
+      const data = await res.json()
+
+      if (res.ok && data.success) {
+        setReturnSuccess(data.message || t('account.returnSubmitted'))
+        setShowReturnDialog(false)
+        setReturnReason('')
+        // Refresh order to show updated status
+        await fetchOrder()
+      } else {
+        setReturnError(data.error || t('account.returnFailed'))
+      }
+    } catch (err) {
+      console.error('Return request failed:', err)
+      setReturnError(t('account.returnFailed'))
+    } finally {
+      setIsProcessingReturn(false)
+    }
+  }, [orderId, returnReason, fetchOrder])
+
+  const getStatusStyles = (status: string) => {
+    switch (status) {
+      case 'delivered':
+        return 'bg-green-100 text-green-800'
+      case 'shipped':
+        return 'bg-blue-100 text-blue-800'
+      case 'paid':
+        return 'bg-yellow-100 text-yellow-800'
+      case 'pending':
+        return 'bg-gray-100 text-gray-800'
+      case 'cancelled':
+      case 'refunded':
+        return 'bg-red-100 text-red-800'
+      case 'return_requested':
+        return 'bg-amber-100 text-amber-800'
+      default:
+        return 'bg-gray-100 text-gray-800'
+    }
+  }
+
+  const getStatusDisplay = (status: string) => {
+    if (status === 'return_requested') {
+      return t('status.returnPending')
+    }
+    const l = translateDynamic(t, 'status', status)
+    return l === status ? status.charAt(0).toUpperCase() + status.slice(1) : l
+  }
+
+  const getAddressName = (address: ShippingAddress) => {
+    if (address.name) return address.name
+    return [address.firstName, address.lastName].filter(Boolean).join(' ') || t('account.customer')
+  }
+
+  // Check if order is eligible for customer-initiated refund
+  const canRequestRefund = order?.status === 'paid'
+
+  // Check if order is eligible for customer-initiated return
+  const canRequestReturn = order?.status === 'delivered'
+
+  // Check if order has a pending return request
+  const hasReturnRequest = order?.status === 'return_requested'
+
+  // Check if order has been refunded (partially or fully)
+  const hasRefund = order && order.refundAmount && order.refundAmount > 0
+
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="animate-pulse space-y-6">
+          <div className="h-8 w-48 bg-muted rounded" />
+          <div className="h-32 bg-muted rounded" />
+          <div className="h-64 bg-muted rounded" />
+        </div>
+      </div>
+    )
+  }
+
+  if (error || !order) {
+    return (
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <nav className="mb-8">
+          <Link
+            href="/account/orders"
+            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.backToOrders')}
+          </Link>
+        </nav>
+        <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">{error || t('account.orderNotFound')}</h2>
+          <Link
+            href="/account/orders"
+            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.viewAllOrders')}
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Navigation */}
+      <nav className="mb-8">
+        <Link
+          href="/account/orders"
+          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.backToOrders')}
+        </Link>
+      </nav>
+
+      {/* Refund Success Message */}
+      {refundSuccess && (
+        <div className="mb-6 rounded-lg border border-green-200 bg-green-50 p-4">
+          <div className="flex items-start gap-3">
+            <RotateCcw className="h-5 w-5 text-green-600 mt-0.5" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-green-800">{refundSuccess}</p>
+            </div>
+            <button
+              onClick={() => setRefundSuccess(null)}
+              className="text-green-600 hover:text-green-800"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Return Success Message */}
+      {returnSuccess && (
+        <div className="mb-6 rounded-lg border border-green-200 bg-green-50 p-4">
+          <div className="flex items-start gap-3">
+            <RotateCcw className="h-5 w-5 text-green-600 mt-0.5" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-green-800">{returnSuccess}</p>
+            </div>
+            <button
+              onClick={() => setReturnSuccess(null)}
+              className="text-green-600 hover:text-green-800"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Return Request Pending Banner */}
+      {hasReturnRequest && (
+        <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4">
+          <div className="flex items-start gap-3">
+            <RotateCcw className="h-5 w-5 text-amber-600 mt-0.5" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-amber-800">
+                {t('account.returnRequestPending')}
+              </p>
+              <p className="text-xs text-amber-600 mt-1">
+                {t('account.returnReviewNote')}
+              </p>
+              {order.returnReason && (
+                <div className="mt-3 p-2 bg-white/50 rounded border border-amber-200">
+                  <p className="text-xs text-amber-700 font-medium">{t('account.yourReason')}</p>
+                  <p className="text-sm text-amber-800 mt-0.5">{order.returnReason}</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
+        <div>
+          <h1 className="text-3xl font-bold font-heading">
+            {t('account.orderRefNo', { ref: order.id.slice(0, 8).toUpperCase() })}
+          </h1>
+          <p className="text-muted-foreground mt-1">
+            {t('account.placedOn', { date: formatDate(new Date(order.createdAt)) })}
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <span className={`inline-flex items-center rounded-full px-4 py-2 text-sm font-medium ${getStatusStyles(order.status)}`}>
+            {getStatusDisplay(order.status)}
+          </span>
+          {canRequestRefund && (
+            <button
+              onClick={() => {
+                setRefundError(null)
+                setShowRefundDialog(true)
+              }}
+              className="inline-flex items-center gap-2 rounded-md border border-red-200 bg-white px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition-colors"
+            >
+              <RotateCcw className="h-4 w-4" />
+              {t('account.requestRefund')}
+            </button>
+          )}
+          {canRequestReturn && (
+            <button
+              onClick={() => {
+                setReturnError(null)
+                setReturnReason('')
+                setShowReturnDialog(true)
+              }}
+              className="inline-flex items-center gap-2 rounded-md border border-amber-200 bg-white px-4 py-2 text-sm font-medium text-amber-600 hover:bg-amber-50 transition-colors"
+            >
+              <RotateCcw className="h-4 w-4" />
+              {t('account.requestReturn')}
+            </button>
+          )}
+          <Link
+            href={`/account/orders/${order.id}/invoice`}
+            className="inline-flex items-center gap-2 rounded-md border bg-background px-4 py-2 text-sm font-medium hover:bg-muted transition-colors"
+          >
+            <FileText className="h-4 w-4" />
+            {t('account.viewInvoice')}
+          </Link>
+        </div>
+      </div>
+
+      {/* Refund Status Banner */}
+      {hasRefund && (
+        <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 p-4">
+          <div className="flex items-center gap-3">
+            <RotateCcw className="h-5 w-5 text-amber-600" />
+            <div>
+              <p className="text-sm font-medium text-amber-800">
+                {t('account.refundProcessedAmount', { amount: formatPrice(order.refundAmount!, orderCurrency) })}
+              </p>
+              <p className="text-xs text-amber-600 mt-0.5">
+                {t('account.refundTiming')}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="grid gap-8 lg:grid-cols-3">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-8">
+          {/* Order status timeline */}
+          <div className="rounded-lg border bg-card p-6">
+            <h2 className="font-semibold mb-6">{t('account.orderStatus')}</h2>
+            <OrderTimeline
+              status={order.status}
+              trackingNumber={order.trackingNumber}
+              trackingUrl={order.trackingUrl}
+              carrier={order.carrier}
+            />
+          </div>
+
+          {/* Order Items */}
+          <div className="rounded-lg border bg-card overflow-hidden">
+            <div className="px-6 py-4 border-b bg-muted/30">
+              <h2 className="font-semibold">{t('account.orderItems')}</h2>
+            </div>
+            <div className="divide-y">
+              {order.items.map((item, index) => (
+                <div key={item.id || index} className="flex items-center gap-4 px-6 py-4">
+                  <div className="h-16 w-16 rounded-lg bg-muted flex items-center justify-center flex-shrink-0">
+                    <Package className="h-6 w-6 text-muted-foreground" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{item.name}</p>
+                    {item.attributes && Object.keys(item.attributes).length > 0 && (
+                      <p className="text-sm text-muted-foreground">
+                        {Object.entries(item.attributes).map(([k, v]) => `${k}: ${v}`).join(', ')}
+                      </p>
+                    )}
+                    <p className="text-sm text-muted-foreground">{t('account.qty', { count: item.quantity })}</p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">{formatPrice(item.price, orderCurrency)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+        </div>
+
+        {/* Sidebar */}
+        <div className="space-y-6">
+          {/* Order Summary */}
+          <div className="rounded-lg border bg-card p-6">
+            <h2 className="font-semibold mb-4">{t('account.orderSummary')}</h2>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">{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>
+              )}
+              {order.tax > 0 && (
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">{t('common.tax')}</span>
+                  <span>{formatPrice(order.tax, orderCurrency)}</span>
+                </div>
+              )}
+              {order.shipping > 0 && (
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">{t('common.shipping')}</span>
+                  <span>{formatPrice(order.shipping, orderCurrency)}</span>
+                </div>
+              )}
+              <div className="pt-2 border-t">
+                <div className="flex justify-between font-medium">
+                  <span>Total</span>
+                  <span>{formatPrice(order.total, orderCurrency)}</span>
+                </div>
+              </div>
+              {hasRefund && (
+                <div className="pt-2 border-t">
+                  <div className="flex justify-between text-green-600 font-medium">
+                    <span>{t('account.refunded')}</span>
+                    <span>-{formatPrice(order.refundAmount!, orderCurrency)}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Shipping Address */}
+          {order.shippingAddress && (
+            <div className="rounded-lg border bg-card p-6">
+              <h2 className="font-semibold mb-4">
+                {order.pickupLocationId ? t('account.pickupLocation') : t('account.shippingAddress')}
+              </h2>
+              <div className="text-sm text-muted-foreground space-y-1">
+                <p className="text-foreground font-medium">{getAddressName(order.shippingAddress)}</p>
+                <p>{order.shippingAddress.line1}</p>
+                {order.shippingAddress.line2 && <p>{order.shippingAddress.line2}</p>}
+                <p>
+                  {order.shippingAddress.city}, {order.shippingAddress.state} {order.shippingAddress.postalCode}
+                </p>
+                <p>{order.shippingAddress.country}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Receipt Download */}
+          {order.receiptUrl && (
+            <div className="rounded-lg border bg-card p-6">
+              <h2 className="font-semibold mb-4">{t('account.receipt')}</h2>
+              <a
+                href={order.receiptUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-full inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+              >
+                <Download className="h-4 w-4" />
+                {t('account.downloadReceipt')}
+              </a>
+              <p className="mt-2 text-xs text-muted-foreground text-center">
+                {t('account.receiptHint')}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Refund Confirmation Dialog */}
+      {showRefundDialog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/50"
+            onClick={() => !isProcessingRefund && setShowRefundDialog(false)}
+          />
+
+          {/* Dialog */}
+          <div className="relative w-full max-w-md mx-4 bg-card rounded-lg shadow-xl">
+            {/* Header */}
+            <div className="flex items-start gap-4 p-6 border-b">
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
+                <AlertTriangle className="h-5 w-5 text-amber-600" />
+              </div>
+              <div className="flex-1">
+                <h2 className="text-lg font-semibold">{t('account.requestRefund')}</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {t('account.refundConfirmQ')}
+                </p>
+              </div>
+              <button
+                onClick={() => setShowRefundDialog(false)}
+                disabled={isProcessingRefund}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-4">
+              {refundError && (
+                <div className="rounded-md bg-red-50 border border-red-200 p-3">
+                  <p className="text-sm text-red-700">{refundError}</p>
+                </div>
+              )}
+
+              <div className="rounded-md bg-muted/50 p-4">
+                <p className="text-sm text-muted-foreground mb-1">{t('account.refundAmount')}</p>
+                <p className="text-2xl font-bold">{formatPrice(order.total, orderCurrency)}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('account.refundMethodNote')}
+                </p>
+              </div>
+
+              <p className="text-sm text-muted-foreground">
+                {t('account.refundProcessingNote')}
+              </p>
+            </div>
+
+            {/* Footer */}
+            <div className="flex gap-3 p-6 border-t bg-muted/30">
+              <button
+                onClick={() => setShowRefundDialog(false)}
+                disabled={isProcessingRefund}
+                className="flex-1 rounded-md border bg-background px-4 py-2.5 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50"
+              >
+                {t('account.cancel')}
+              </button>
+              <button
+                onClick={handleRefundRequest}
+                disabled={isProcessingRefund}
+                className="flex-1 rounded-md bg-red-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-red-700 transition-colors disabled:opacity-50 inline-flex items-center justify-center gap-2"
+              >
+                {isProcessingRefund ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t('account.processing')}
+                  </>
+                ) : (
+                  t('account.confirmRefund')
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Return Request Confirmation Dialog */}
+      {showReturnDialog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/50"
+            onClick={() => !isProcessingReturn && setShowReturnDialog(false)}
+          />
+
+          {/* Dialog */}
+          <div className="relative w-full max-w-md mx-4 bg-card rounded-lg shadow-xl">
+            {/* Header */}
+            <div className="flex items-start gap-4 p-6 border-b">
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
+                <RotateCcw className="h-5 w-5 text-amber-600" />
+              </div>
+              <div className="flex-1">
+                <h2 className="text-lg font-semibold">{t('account.requestReturn')}</h2>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {t('account.returnSubtitle')}
+                </p>
+              </div>
+              <button
+                onClick={() => setShowReturnDialog(false)}
+                disabled={isProcessingReturn}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-6 space-y-4">
+              {returnError && (
+                <div className="rounded-md bg-red-50 border border-red-200 p-3">
+                  <p className="text-sm text-red-700">{returnError}</p>
+                </div>
+              )}
+
+              <div className="rounded-md bg-muted/50 p-4">
+                <p className="text-sm text-muted-foreground mb-1">{t('account.orderTotal')}</p>
+                <p className="text-2xl font-bold">{formatPrice(order.total, orderCurrency)}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('account.returnApprovedNote')}
+                </p>
+              </div>
+
+              <div>
+                <label htmlFor="returnReason" className="block text-sm font-medium mb-2">
+                  {t('account.reasonForReturn')} <span className="text-red-500">*</span>
+                </label>
+                <textarea
+                  id="returnReason"
+                  value={returnReason}
+                  onChange={(e) => setReturnReason(e.target.value)}
+                  placeholder={t('account.returnReasonPlaceholder')}
+                  rows={3}
+                  maxLength={500}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent resize-none"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('account.charCount', { count: returnReason.length })}
+                </p>
+              </div>
+
+              <p className="text-sm text-muted-foreground">
+                {t('account.returnReviewEmailNote')}
+              </p>
+            </div>
+
+            {/* Footer */}
+            <div className="flex gap-3 p-6 border-t bg-muted/30">
+              <button
+                onClick={() => setShowReturnDialog(false)}
+                disabled={isProcessingReturn}
+                className="flex-1 rounded-md border bg-background px-4 py-2.5 text-sm font-medium hover:bg-muted transition-colors disabled:opacity-50"
+              >
+                {t('account.cancel')}
+              </button>
+              <button
+                onClick={handleReturnRequest}
+                disabled={isProcessingReturn || !returnReason.trim()}
+                className="flex-1 rounded-md bg-amber-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-amber-700 transition-colors disabled:opacity-50 inline-flex items-center justify-center gap-2"
+              >
+                {isProcessingReturn ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t('account.submitting')}
+                  </>
+                ) : (
+                  t('account.submitRequest')
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function OrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = use(params)
+
+  return (
+    <AuthGuard redirectTo="/auth/signin">
+      <OrderDetailContent orderId={id} />
+    </AuthGuard>
+  )
+}