42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
import { useSearch, Link } from "wouter";
|
|
import { CheckCircle2, ShoppingBag } from "lucide-react";
|
|
|
|
export default function OrderConfirmationPage() {
|
|
const search = useSearch();
|
|
const params = new URLSearchParams(search);
|
|
const orderNumber = params.get("order");
|
|
|
|
return (
|
|
<div className="max-w-lg mx-auto px-4 py-20 text-center" data-testid="order-confirmation-page">
|
|
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<CheckCircle2 size={40} className="text-green-600" />
|
|
</div>
|
|
<h1 className="text-3xl font-bold mb-3">Order confirmed!</h1>
|
|
{orderNumber && (
|
|
<p className="text-muted-foreground mb-2">
|
|
Order <span className="font-mono font-semibold text-foreground" data-testid="order-number">#{orderNumber}</span>
|
|
</p>
|
|
)}
|
|
<p className="text-muted-foreground mb-8">
|
|
Thank you for your purchase. A confirmation email has been sent to you. You can track your order in your account.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
<Link
|
|
href="/account"
|
|
className="px-6 py-3 border border-border rounded-md font-medium text-sm hover:bg-muted transition-colors"
|
|
data-testid="link-view-orders"
|
|
>
|
|
View orders
|
|
</Link>
|
|
<Link
|
|
href="/"
|
|
className="px-6 py-3 bg-primary text-primary-foreground rounded-md font-medium text-sm hover:bg-primary/90 transition-colors flex items-center gap-2 justify-center"
|
|
data-testid="link-continue-shopping"
|
|
>
|
|
<ShoppingBag size={16} />
|
|
Continue shopping
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|