129 lines
4.3 KiB
JavaScript
129 lines
4.3 KiB
JavaScript
import React, { useContext, useState } from 'react'
|
||
import { Link, useNavigate } from 'react-router-dom'
|
||
import { CartContext } from '../context/CartContext'
|
||
import { AuthContext } from '../context/AuthContext'
|
||
import Toast from '../components/Toast'
|
||
import '../styles/global.css'
|
||
|
||
export default function Cart() {
|
||
const { cart, removeFromCart, updateQuantity, total, clearCart } = useContext(CartContext)
|
||
const { token } = useContext(AuthContext)
|
||
const navigate = useNavigate()
|
||
const [toast, setToast] = useState(null)
|
||
|
||
const handleCheckout = () => {
|
||
if (!token) {
|
||
navigate('/login')
|
||
} else if (cart.length === 0) {
|
||
setToast({ type: 'info', message: 'Your cart is empty' })
|
||
} else {
|
||
navigate('/checkout')
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="cart-page">
|
||
<h1>Shopping Cart</h1>
|
||
|
||
{cart.length === 0 ? (
|
||
<div className="empty-cart">
|
||
<p>Your cart is empty</p>
|
||
<Link to="/products" className="btn">
|
||
Continue Shopping
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="cart-container">
|
||
<div className="cart-items">
|
||
<table className="cart-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Product</th>
|
||
<th>Price</th>
|
||
<th>Quantity</th>
|
||
<th>Total</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{cart.map((item, index) => (
|
||
<tr key={index}>
|
||
<td>
|
||
<div className="cart-item-product">
|
||
<img src={item.product.images[0]} alt={item.product.name} />
|
||
<div>
|
||
<p className="product-name">{item.product.name}</p>
|
||
{item.size && <p>Size: {item.size}</p>}
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td>₪{(item.product.discount_price || item.product.price).toFixed(2)}</td>
|
||
<td>
|
||
<div className="quantity-control">
|
||
<button onClick={() => updateQuantity(index, item.quantity - 1)}>−</button>
|
||
<span>{item.quantity}</span>
|
||
<button onClick={() => updateQuantity(index, item.quantity + 1)}>+</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
₪{((item.product.discount_price || item.product.price) * item.quantity).toFixed(2)}
|
||
</td>
|
||
<td>
|
||
<button
|
||
className="btn btn-small btn-danger"
|
||
onClick={() => removeFromCart(index)}
|
||
>
|
||
Remove
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="cart-summary">
|
||
<h3>Order Summary</h3>
|
||
<div className="summary-rows">
|
||
<div className="summary-row">
|
||
<span>Subtotal:</span>
|
||
<span>₪{total.toFixed(2)}</span>
|
||
</div>
|
||
<div className="summary-row">
|
||
<span>Shipping:</span>
|
||
<span>$10.00</span>
|
||
</div>
|
||
<div className="summary-row">
|
||
<span>Tax:</span>
|
||
<span>₪{(total * 0.1).toFixed(2)}</span>
|
||
</div>
|
||
<div className="summary-row total">
|
||
<span>Total:</span>
|
||
<span>₪{(total + 10 + total * 0.1).toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button className="btn btn-full" onClick={handleCheckout}>
|
||
Proceed to Checkout
|
||
</button>
|
||
<button className="btn btn-secondary btn-full" onClick={() => navigate('/products')}>
|
||
Continue Shopping
|
||
</button>
|
||
<button className="btn btn-outline btn-full" onClick={clearCart}>
|
||
Clear Cart
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{toast && (
|
||
<Toast
|
||
message={toast.message}
|
||
type={toast.type}
|
||
onClose={() => setToast(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|