121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
"use client";
|
|
import { useCurrency } from "@/app/contexts/currencyContext";
|
|
import authAxios, { backendUrl } from "@/utils/axios";
|
|
import { ShoppingBag } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useState, useEffect } from "react";
|
|
|
|
const OrdersPage = () => {
|
|
const [orders, setOrders] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const { isLoading, formatPrice } = useCurrency();
|
|
|
|
useEffect(() => {
|
|
const fetchOrders = async () => {
|
|
try {
|
|
const response = await authAxios.get("/orders/my-orders");
|
|
setOrders(response.data);
|
|
} catch (error) {
|
|
console.error("Error fetching orders:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchOrders();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-center items-center min-h-[40vh]">
|
|
Loading...
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!orders.length) {
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
|
|
Orders
|
|
</h1>
|
|
<div className="flex flex-col gap-5 justify-center items-center min-h-[40vh]">
|
|
<h2>
|
|
<ShoppingBag className="sm:ml-20 mb-3 text-[#AC8C6B]" />
|
|
You don't have any orders yet
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-3xl font-semibold border-b pb-4 text-zinc-700">
|
|
Orders
|
|
</h1>
|
|
<div className="mt-6 space-y-4">
|
|
{orders.map((order) => (
|
|
<div key={order.id} className="bg-white p-4 rounded-lg shadow">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<span className="font-medium">Order #{order.order_number}</span>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-sm ${
|
|
order.status === "DELIVERED"
|
|
? "bg-green-100 text-green-800"
|
|
: order.status === "SHIPPED"
|
|
? "bg-blue-100 text-blue-800"
|
|
: "bg-yellow-100 text-yellow-800"
|
|
}`}
|
|
>
|
|
{order.status}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{order.items.map((item) => (
|
|
<div key={item.id} className="flex items-center gap-4">
|
|
<Image
|
|
src={`${backendUrl}${item.variant.product.images[0].image}`}
|
|
alt={item.variant.product.product_name}
|
|
width={64}
|
|
height={64}
|
|
className="object-cover rounded-md"
|
|
/>
|
|
<div>
|
|
<p className="font-medium">
|
|
{item.variant.product.product_name}
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
Size: {item.variant.size.size_name}
|
|
{item.design && ` • Design: ${item.design.design_name}`}
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
Quantity: {item.quantity}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t flex justify-between items-center">
|
|
<div className="text-gray-600">
|
|
{new Date(order.created_at).toLocaleDateString()}
|
|
</div>
|
|
<div className="font-medium">
|
|
Total:{" "}
|
|
{isLoading ? (
|
|
<span>Loading...</span>
|
|
) : (
|
|
<span>{formatPrice(order.total_amount)}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrdersPage;
|