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
2025-12-26 01:16:11 +07:00
parent 9ac09582d2
commit 100f9cce55
27 changed files with 2492 additions and 205 deletions
--- a/customer-spa/src/pages/Account/Orders.tsx
+++ b/customer-spa/src/pages/Account/Orders.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Package, Eye } from 'lucide-react';
+import { api } from '@/lib/api/client';
+import { toast } from 'sonner';
+
+interface Order {
+  id: number;
+  order_number: string;
+  date: string;
+  status: string;
+  total: string;
+  items_count: number;
+}
+
+export default function Orders() {
+  const [loading, setLoading] = useState(true);
+  const [orders, setOrders] = useState<Order[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+
+  useEffect(() => {
+    loadOrders();
+  }, [page]);
+
+  const loadOrders = async () => {
+    try {
+      const data = await api.get<any>('/account/orders', { page, per_page: 10 });
+      setOrders(data.orders || []);
+      setTotalPages(data.total_pages || 1);
+    } catch (error) {
+      console.error('Load orders error:', error);
+      toast.error('Failed to load orders');
+    } 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: 'short',
+      day: 'numeric',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="text-gray-600">Loading orders...</div>
+      </div>
+    );
+  }
+
+  if (orders.length === 0) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold mb-6">Orders</h1>
+        
+        <div className="text-center py-12">
+          <Package className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <p className="text-gray-600 mb-4">No orders yet</p>
+          <Link
+            to="/shop"
+            className="inline-block px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
+          >
+            Browse Products
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Orders</h1>
+      
+      <div className="space-y-4">
+        {orders.map((order) => (
+          <div key={order.id} className="border rounded-lg p-4 hover:border-primary transition-colors">
+            <div className="flex items-center justify-between mb-3">
+              <div>
+                <h3 className="font-semibold text-lg">Order #{order.order_number}</h3>
+                <p className="text-sm text-gray-600">{formatDate(order.date)}</p>
+              </div>
+              <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
+                {order.status.replace('-', ' ').toUpperCase()}
+              </span>
+            </div>
+            
+            <div className="flex items-center justify-between">
+              <div className="text-sm text-gray-600">
+                {order.items_count} {order.items_count === 1 ? 'item' : 'items'}
+              </div>
+              <div className="flex items-center gap-4">
+                <span className="font-bold text-lg">{order.total}</span>
+                <Link
+                  to={`/my-account/orders/${order.id}`}
+                  className="flex items-center gap-2 px-4 py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors"
+                >
+                  <Eye className="w-4 h-4" />
+                  View
+                </Link>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-center gap-2 mt-8">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="font-[inherit] px-4 py-2 border rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Previous
+          </button>
+          <span className="text-sm text-gray-600">
+            Page {page} of {totalPages}
+          </span>
+          <button
+            onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+            disabled={page === totalPages}
+            className="font-[inherit] px-4 py-2 border rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Next
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}