78 lines
3.3 KiB
JavaScript
78 lines
3.3 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { CheckCircle2, ArrowRight } from 'lucide-react';
|
|
import { formatINR } from '../../utils/formatCurrency';
|
|
import api from '../../api/axios';
|
|
|
|
const OrderConfirmationPage = () => {
|
|
const { id } = useParams();
|
|
const [order, setOrder] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
api.get(`/orders/${id}`)
|
|
.then((res) => setOrder(res.data.data))
|
|
.catch((err) => console.error(err))
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
if (loading || !order) {
|
|
return <div className="max-w-7xl mx-auto px-4 py-20 text-center text-slate-500">Retrieving Order Receipt...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-4 py-16 text-center space-y-8 bg-slate-50 text-slate-900">
|
|
<div className="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto border border-emerald-200 shadow-sm">
|
|
<CheckCircle2 className="w-10 h-10" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<span className="text-xs font-bold text-amber-600 uppercase tracking-widest">Order Confirmed & Placed in India</span>
|
|
<h1 className="text-3xl font-extrabold text-slate-900 font-serif">Thank You for Your Order!</h1>
|
|
<p className="text-xs text-slate-500">Order Number: <strong className="text-slate-900 font-mono">{order.orderNumber}</strong></p>
|
|
</div>
|
|
|
|
{/* Summary Box */}
|
|
<div className="bg-white border border-slate-200 rounded-3xl p-6 text-left space-y-4 shadow-sm">
|
|
<h3 className="text-sm font-bold text-slate-900 uppercase tracking-wider border-b border-slate-100 pb-3">Purchased Items</h3>
|
|
<div className="space-y-3">
|
|
{order.orderItems.map((item, idx) => (
|
|
<div key={idx} className="flex items-center justify-between text-xs">
|
|
<div className="flex items-center gap-3">
|
|
<img src={item.image} alt="" className="w-12 h-12 object-cover rounded-lg border border-slate-200" />
|
|
<div>
|
|
<div className="font-bold text-slate-900">{item.name}</div>
|
|
<div className="text-slate-500">Qty: {item.quantity} {item.variantColor && `| ${item.variantColor}`}</div>
|
|
</div>
|
|
</div>
|
|
<div className="font-bold text-amber-700">{formatINR(item.price * item.quantity)}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-slate-100 pt-4 flex justify-between text-sm font-bold text-slate-900">
|
|
<span>Total Paid</span>
|
|
<span className="text-amber-700">{formatINR(order.totalAmount)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<Link
|
|
to={`/track-order/${order._id}`}
|
|
className="py-3.5 px-8 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-2xl text-xs flex items-center gap-2 shadow-sm"
|
|
>
|
|
Track Live Delivery Timeline <ArrowRight className="w-4 h-4" />
|
|
</Link>
|
|
<Link
|
|
to="/shop"
|
|
className="py-3.5 px-8 bg-white hover:bg-slate-50 text-slate-800 font-bold rounded-2xl text-xs border border-slate-200 shadow-sm"
|
|
>
|
|
Continue Shopping
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrderConfirmationPage;
|