feat: implement multiple saved addresses with modal selector in checkout
- Add AddressController with full CRUD API for saved addresses - Implement address management UI in My Account > Addresses - Add modal-based address selector in checkout (Tokopedia-style) - Hide checkout forms when saved address is selected - Add search functionality in address modal - Auto-select default addresses on page load - Fix variable products to show 'Select Options' instead of 'Add to Cart' - Add admin toggle for multiple addresses feature - Clean up debug logs and fix TypeScript errors
This commit is contained in:
Dwindi Ramadhana
216
customer-spa/src/pages/Account/OrderDetails.tsx
Normal file
216
customer-spa/src/pages/Account/OrderDetails.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { api } from '@/lib/api/client';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
interface OrderItem {
|
||||
id: number;
|
||||
name: string;
|
||||
quantity: number;
|
||||
total: string;
|
||||
image?: string;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: number;
|
||||
order_number: string;
|
||||
date: string;
|
||||
status: string;
|
||||
total: string;
|
||||
subtotal: string;
|
||||
shipping_total: string;
|
||||
tax_total: string;
|
||||
items: OrderItem[];
|
||||
billing: any;
|
||||
shipping: any;
|
||||
payment_method_title: string;
|
||||
needs_shipping: boolean;
|
||||
}
|
||||
|
||||
export default function OrderDetails() {
|
||||
const { orderId } = useParams();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [order, setOrder] = useState<Order | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (orderId) {
|
||||
loadOrder();
|
||||
}
|
||||
}, [orderId]);
|
||||
|
||||
const loadOrder = async () => {
|
||||
try {
|
||||
const data = await api.get<Order>(`/account/orders/${orderId}`);
|
||||
setOrder(data);
|
||||
} catch (error) {
|
||||
console.error('Load order error:', error);
|
||||
toast.error('Failed to load order details');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
'completed': 'bg-green-100 text-green-800',
|
||||
'processing': 'bg-blue-100 text-blue-800',
|
||||
'pending': 'bg-yellow-100 text-yellow-800',
|
||||
'on-hold': 'bg-orange-100 text-orange-800',
|
||||
'cancelled': 'bg-red-100 text-red-800',
|
||||
'refunded': 'bg-gray-100 text-gray-800',
|
||||
'failed': 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] || 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="text-gray-600">Loading order...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
return (
|
||||
<div>
|
||||
<Link to="/my-account/orders" className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-4">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Orders
|
||||
</Link>
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-600">Order not found</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Link to="/my-account/orders" className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 mb-4">
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Orders
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Order #{order.order_number}</h1>
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
|
||||
{order.status.replace('-', ' ').toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-600 mb-6">
|
||||
Placed on {formatDate(order.date)}
|
||||
</div>
|
||||
|
||||
{/* Order Items */}
|
||||
<div className="border rounded-lg mb-6">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Order Items</h2>
|
||||
</div>
|
||||
<div className="divide-y">
|
||||
{(order.items || []).map((item) => (
|
||||
<div key={item.id} className="p-4 flex items-center gap-4">
|
||||
{item.image && (
|
||||
<img src={item.image} alt={item.name} className="w-16 h-16 object-cover rounded" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-medium">{item.name}</h3>
|
||||
<p className="text-sm text-gray-600">Quantity: {item.quantity}</p>
|
||||
</div>
|
||||
<div className="font-semibold">{item.total}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Summary */}
|
||||
<div className="border rounded-lg mb-6">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Order Summary</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Subtotal</span>
|
||||
<span>{order.subtotal}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Shipping</span>
|
||||
<span>{order.shipping_total}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Tax</span>
|
||||
<span>{order.tax_total}</span>
|
||||
</div>
|
||||
<div className="flex justify-between font-bold text-lg pt-2 border-t">
|
||||
<span>Total</span>
|
||||
<span>{order.total}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Addresses */}
|
||||
<div className={`grid grid-cols-1 gap-6 ${order.needs_shipping ? 'md:grid-cols-2' : ''}`}>
|
||||
<div className="border rounded-lg">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Billing Address</h2>
|
||||
</div>
|
||||
<div className="p-4 text-sm">
|
||||
{order.billing && (
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">{order.billing.first_name} {order.billing.last_name}</p>
|
||||
{order.billing.company && <p>{order.billing.company}</p>}
|
||||
<p>{order.billing.address_1}</p>
|
||||
{order.billing.address_2 && <p>{order.billing.address_2}</p>}
|
||||
<p>{order.billing.city}, {order.billing.state} {order.billing.postcode}</p>
|
||||
<p>{order.billing.country}</p>
|
||||
{order.billing.email && <p className="pt-2">Email: {order.billing.email}</p>}
|
||||
{order.billing.phone && <p>Phone: {order.billing.phone}</p>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Only show shipping address if order needs shipping (not virtual-only) */}
|
||||
{order.needs_shipping && (
|
||||
<div className="border rounded-lg">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Shipping Address</h2>
|
||||
</div>
|
||||
<div className="p-4 text-sm">
|
||||
{order.shipping && (
|
||||
<div className="space-y-1">
|
||||
<p className="font-medium">{order.shipping.first_name} {order.shipping.last_name}</p>
|
||||
{order.shipping.company && <p>{order.shipping.company}</p>}
|
||||
<p>{order.shipping.address_1}</p>
|
||||
{order.shipping.address_2 && <p>{order.shipping.address_2}</p>}
|
||||
<p>{order.shipping.city}, {order.shipping.state} {order.shipping.postcode}</p>
|
||||
<p>{order.shipping.country}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Payment Method */}
|
||||
<div className="mt-6 border rounded-lg">
|
||||
<div className="bg-gray-50 px-4 py-3 border-b">
|
||||
<h2 className="text-base font-medium">Payment Method</h2>
|
||||
</div>
|
||||
<div className="p-4 text-sm">
|
||||
{order.payment_method_title || 'Not specified'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user