44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { createFileRoute, useNavigate } from '@tanstack/react-router'
|
|
import { CheckCircle2 } from 'lucide-react'
|
|
|
|
export const Route = createFileRoute('/home/order-success')({
|
|
component: OrderSuccessPage,
|
|
validateSearch: (search: Record<string, string>) => ({
|
|
orderId: search.orderId || '',
|
|
totalAmount: search.totalAmount || '0',
|
|
}),
|
|
})
|
|
|
|
function OrderSuccessPage() {
|
|
const navigate = useNavigate()
|
|
const { orderId, totalAmount } = Route.useSearch()
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
|
|
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-brand-25">
|
|
<CheckCircle2 className="h-10 w-10 text-brand-600" />
|
|
</div>
|
|
<p className="mb-2 mt-6 text-2xl font-extrabold text-gray-900">
|
|
Order Placed
|
|
</p>
|
|
<p className="mb-1 text-gray-600">
|
|
Order ID: #{orderId}
|
|
</p>
|
|
<p className="mb-8 text-gray-600">
|
|
Total: ₹{totalAmount}
|
|
</p>
|
|
<button
|
|
onClick={() => navigate({ to: '/home' })}
|
|
className="mb-3 rounded-lg bg-brand-600 px-8 py-3 text-sm font-bold text-white transition-colors hover:bg-brand-700"
|
|
>
|
|
Continue Shopping
|
|
</button>
|
|
<button
|
|
onClick={() => navigate({ to: '/me/orders' })}
|
|
className="rounded-lg border border-gray-200 bg-white px-8 py-3 text-sm font-bold text-gray-700 transition-colors hover:bg-gray-100"
|
|
>
|
|
View My Orders
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|