97 lines
3.0 KiB
JavaScript
97 lines
3.0 KiB
JavaScript
import React, { useState, useEffect, useContext } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import api from '../api'
|
|
import { AuthContext } from '../context/AuthContext'
|
|
import '../styles/global.css'
|
|
|
|
export default function Orders() {
|
|
const navigate = useNavigate()
|
|
const { token } = useContext(AuthContext)
|
|
const [orders, setOrders] = useState([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
navigate('/login')
|
|
} else {
|
|
fetchOrders()
|
|
}
|
|
}, [token, navigate])
|
|
|
|
const fetchOrders = async () => {
|
|
try {
|
|
const response = await api.get('/orders')
|
|
setOrders(response.data)
|
|
} catch (error) {
|
|
console.error('Error fetching orders:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
if (loading) return <div className="loading">Loading...</div>
|
|
|
|
return (
|
|
<div className="orders-page">
|
|
<h1>My Orders</h1>
|
|
|
|
{orders.length === 0 ? (
|
|
<div className="empty-state">
|
|
<p>You haven't placed any orders yet.</p>
|
|
<a href="/products" className="btn">
|
|
Start Shopping
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<div className="orders-container">
|
|
{orders.map((order) => (
|
|
<div key={order.id} className="order-card">
|
|
<div className="order-header">
|
|
<h3>Order #{order.order_number}</h3>
|
|
<span className={`status ${order.status}`}>{order.status.toUpperCase()}</span>
|
|
</div>
|
|
|
|
<div className="order-details">
|
|
<div className="detail-row">
|
|
<span>Order Date:</span>
|
|
<span>{new Date(order.created_at).toLocaleDateString()}</span>
|
|
</div>
|
|
<div className="detail-row">
|
|
<span>Total Amount:</span>
|
|
<span>₪{order.total_amount.toFixed(2)}</span>
|
|
</div>
|
|
<div className="detail-row">
|
|
<span>Items:</span>
|
|
<span>{order.items.length} item(s)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="order-items">
|
|
{order.items.map((item) => (
|
|
<div key={item.id} className="order-item">
|
|
<img src={item.product.images[0]} alt={item.product.name} />
|
|
<div>
|
|
<p>{item.product.name}</p>
|
|
<p>Qty: {item.quantity}</p>
|
|
</div>
|
|
<p>₪{item.price.toFixed(2)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="shipping-info">
|
|
<h4>Shipping Address</h4>
|
|
<p>{order.shipping_address}</p>
|
|
<p>
|
|
{order.shipping_city}, {order.shipping_postal_code}
|
|
</p>
|
|
<p>{order.shipping_country}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|