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/components/AccountLayout.tsx
+++ b/customer-spa/src/pages/Account/components/AccountLayout.tsx
@@ -0,0 +1,121 @@
+import React, { ReactNode } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { LayoutDashboard, ShoppingBag, Download, MapPin, User, LogOut } from 'lucide-react';
+
+interface AccountLayoutProps {
+  children: ReactNode;
+}
+
+export function AccountLayout({ children }: AccountLayoutProps) {
+  const location = useLocation();
+  const user = (window as any).woonoowCustomer?.user;
+  
+  const menuItems = [
+    { id: 'dashboard', label: 'Dashboard', path: '/my-account', icon: LayoutDashboard },
+    { id: 'orders', label: 'Orders', path: '/my-account/orders', icon: ShoppingBag },
+    { id: 'downloads', label: 'Downloads', path: '/my-account/downloads', icon: Download },
+    { id: 'addresses', label: 'Addresses', path: '/my-account/addresses', icon: MapPin },
+    { id: 'account-details', label: 'Account Details', path: '/my-account/account-details', icon: User },
+  ];
+
+  const handleLogout = () => {
+    window.location.href = '/wp-login.php?action=logout';
+  };
+
+  const isActive = (path: string) => {
+    if (path === '/my-account') {
+      return location.pathname === '/my-account';
+    }
+    return location.pathname.startsWith(path);
+  };
+
+  // Sidebar Navigation
+  const SidebarNav = () => (
+    <aside className="bg-white rounded-lg border p-4">
+      <div className="mb-6">
+        <div className="flex items-center gap-3 pb-4 border-b">
+          <div className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center">
+            <User className="w-6 h-6 text-gray-600" />
+          </div>
+          <div>
+            <p className="font-semibold">{user?.display_name || 'User'}</p>
+            <p className="text-sm text-gray-500">{user?.email}</p>
+          </div>
+        </div>
+      </div>
+      
+      <nav className="space-y-1">
+        {menuItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.id}
+              to={item.path}
+              className={`flex items-center gap-3 px-4 py-2.5 rounded-lg transition-colors ${
+                isActive(item.path)
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <Icon className="w-5 h-5" />
+              <span className="font-medium">{item.label}</span>
+            </Link>
+          );
+        })}
+        
+        <button
+          onClick={handleLogout}
+          className="w-full font-[inherit] flex items-center gap-3 px-4 py-2.5 rounded-lg text-gray-700 hover:bg-gray-100 transition-colors"
+        >
+          <LogOut className="w-5 h-5" />
+          <span className="font-medium">Logout</span>
+        </button>
+      </nav>
+    </aside>
+  );
+
+  // Tab Navigation (Mobile)
+  const TabNav = () => (
+    <div className="bg-white rounded-lg border mb-6 lg:hidden">
+      <nav className="flex overflow-x-auto">
+        {menuItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.id}
+              to={item.path}
+              className={`flex items-center gap-2 px-6 py-4 border-b-2 transition-colors whitespace-nowrap text-sm ${
+                isActive(item.path)
+                  ? 'border-primary text-primary font-medium'
+                  : 'border-transparent text-gray-600 hover:text-gray-900'
+              }`}
+            >
+              <Icon className="w-5 h-5" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+
+  // Responsive layout: Tabs on mobile, Sidebar on desktop
+  return (
+    <div className="py-8">
+      {/* Mobile: Tab Navigation */}
+      <TabNav />
+      
+      {/* Desktop: Sidebar + Content */}
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+        <div className="hidden lg:block lg:col-span-1">
+          <SidebarNav />
+        </div>
+        <div className="lg:col-span-3">
+          <div className="bg-white rounded-lg border p-6">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}