chore: add client/src/pages/order-confirmation.tsx

client/src/pages/order-confirmation.tsx

@@ -0,0 +1,42 @@
+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>
+  );
+}