feat: Multiple fixes and features

1. Add allow_custom_avatar toggle to Customer Settings
2. Implement coupon apply/remove in Cart and Checkout pages
3. Update Cart interface with coupons array and discount_total
4. Implement Downloads page to fetch from /account/downloads API

customer-spa/src/lib/cart/api.ts

@@ -109,3 +109,57 @@ export async function fetchCart(): Promise<Cart> {
   const data = await response.json();
   return data;
 }
+
+/**
+ * Apply coupon to cart via API
+ */
+export async function applyCoupon(couponCode: string): Promise<Cart> {
+  const { apiRoot, nonce } = getApiConfig();
+
+  const response = await fetch(`${apiRoot}/cart/apply-coupon`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-WP-Nonce': nonce,
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      coupon_code: couponCode,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || 'Failed to apply coupon');
+  }
+
+  const data = await response.json();
+  return data.cart;
+}
+
+/**
+ * Remove coupon from cart via API
+ */
+export async function removeCoupon(couponCode: string): Promise<Cart> {
+  const { apiRoot, nonce } = getApiConfig();
+
+  const response = await fetch(`${apiRoot}/cart/remove-coupon`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-WP-Nonce': nonce,
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      coupon_code: couponCode,
+    }),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || 'Failed to remove coupon');
+  }
+
+  const data = await response.json();
+  return data.cart;
+}

customer-spa/src/lib/cart/store.ts

@@ -24,12 +24,19 @@ export interface Cart {
     code: string;
     discount: number;
   };
+  coupons?: {
+    code: string;
+    discount: number;
+    type?: string;
+  }[];
+  discount_total?: number;
+  shipping_total?: number;
 }
 
 interface CartStore {
   cart: Cart;
   isOpen: boolean;
-  
+
   // Actions
   setCart: (cart: Cart) => void;
   addItem: (item: CartItem) => void;
@@ -60,7 +67,7 @@ export const useCartStore = create<CartStore>()(
       addItem: (item) =>
         set((state) => {
           const existingItem = state.cart.items.find((i) => i.key === item.key);
-          
+
           if (existingItem) {
             // Update quantity if item exists
             return {
@@ -74,7 +81,7 @@ export const useCartStore = create<CartStore>()(
               },
             };
           }
-          
+
           // Add new item
           return {
             cart: {

customer-spa/src/pages/Account/Downloads.tsx

@@ -1,15 +1,158 @@
-import React from 'react';
-import { Download } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { Download, Loader2, FileText, ExternalLink } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { api } from '@/lib/api/client';
+import { toast } from 'sonner';
+import { formatPrice } from '@/lib/currency';
+
+interface DownloadItem {
+  download_id: string;
+  download_url: string;
+  product_id: number;
+  product_name: string;
+  product_url: string;
+  download_name: string;
+  order_id: number;
+  order_key: string;
+  downloads_remaining: string;
+  access_expires: string | null;
+  file: {
+    name: string;
+    file: string;
+  };
+}
 
 export default function Downloads() {
+  const [downloads, setDownloads] = useState<DownloadItem[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchDownloads = async () => {
+      try {
+        setIsLoading(true);
+        const data = await api.get<DownloadItem[]>('/account/downloads');
+        setDownloads(data);
+      } catch (err: any) {
+        console.error('Failed to fetch downloads:', err);
+        setError(err.message || 'Failed to load downloads');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchDownloads();
+  }, []);
+
+  const handleDownload = (downloadUrl: string, fileName: string) => {
+    // Open download in new tab
+    window.open(downloadUrl, '_blank');
+    toast.success(`Downloading ${fileName}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold mb-6">Downloads</h1>
+        <div className="text-center py-12">
+          <Loader2 className="w-12 h-12 text-gray-400 mx-auto mb-4 animate-spin" />
+          <p className="text-gray-600">Loading your downloads...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold mb-6">Downloads</h1>
+        <div className="text-center py-12">
+          <p className="text-red-600">{error}</p>
+          <Button
+            onClick={() => window.location.reload()}
+            variant="outline"
+            className="mt-4"
+          >
+            Try Again
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (downloads.length === 0) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold mb-6">Downloads</h1>
+        <div className="text-center py-12">
+          <Download className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+          <p className="text-gray-600 mb-2">No downloads available</p>
+          <p className="text-sm text-gray-500">
+            Downloads will appear here after you purchase downloadable products.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <h1 className="text-2xl font-bold mb-6">Downloads</h1>
-      
-      <div className="text-center py-12">
-        <Download className="w-16 h-16 text-gray-300 mx-auto mb-4" />
-        <p className="text-gray-600">No downloads available</p>
+
+      <div className="space-y-4">
+        {downloads.map((download) => (
+          <div
+            key={`${download.download_id}-${download.order_id}`}
+            className="bg-white border rounded-lg p-4 hover:shadow-md transition-shadow"
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-start gap-3 min-w-0 flex-1">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                  <FileText className="w-5 h-5 text-blue-600" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <h3 className="font-semibold text-gray-900 truncate">
+                    {download.product_name}
+                  </h3>
+                  <p className="text-sm text-gray-600 truncate">
+                    {download.download_name || download.file?.name || 'Download'}
+                  </p>
+                  <div className="flex flex-wrap gap-2 mt-2 text-xs text-gray-500">
+                    <span className="bg-gray-100 px-2 py-1 rounded">
+                      Order #{download.order_id}
+                    </span>
+                    {download.downloads_remaining && download.downloads_remaining !== 'unlimited' && (
+                      <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded">
+                        {download.downloads_remaining} downloads left
+                      </span>
+                    )}
+                    {download.access_expires && (
+                      <span className="bg-orange-100 text-orange-700 px-2 py-1 rounded">
+                        Expires: {new Date(download.access_expires).toLocaleDateString()}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                size="sm"
+                onClick={() => handleDownload(download.download_url, download.download_name || 'file')}
+                className="flex-shrink-0"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Download
+              </Button>
+            </div>
+          </div>
+        ))}
       </div>
+
+      {downloads.length > 0 && (
+        <p className="text-sm text-gray-500 mt-6 text-center">
+          {downloads.length} {downloads.length === 1 ? 'download' : 'downloads'} available
+        </p>
+      )}
     </div>
   );
 }

customer-spa/src/pages/Cart/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useCartStore, type CartItem } from '@/lib/cart/store';
 import { useCartSettings } from '@/hooks/useAppearanceSettings';
-import { updateCartItemQuantity, removeCartItem, clearCartAPI, fetchCart } from '@/lib/cart/api';
+import { updateCartItemQuantity, removeCartItem, clearCartAPI, fetchCart, applyCoupon, removeCoupon } from '@/lib/cart/api';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -14,7 +14,7 @@ import {
 } from '@/components/ui/dialog';
 import Container from '@/components/Layout/Container';
 import { formatPrice } from '@/lib/currency';
-import { Trash2, Plus, Minus, ShoppingBag, ArrowLeft, Loader2 } from 'lucide-react';
+import { Trash2, Plus, Minus, ShoppingBag, ArrowLeft, Loader2, X, Tag } from 'lucide-react';
 import { toast } from 'sonner';
 
 export default function Cart() {
@@ -24,7 +24,9 @@ export default function Cart() {
   const [showClearDialog, setShowClearDialog] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  
+  const [couponCode, setCouponCode] = useState('');
+  const [isApplyingCoupon, setIsApplyingCoupon] = useState(false);
+
   // Fetch cart from server on mount to sync with WooCommerce
   useEffect(() => {
     const loadCart = async () => {
@@ -37,10 +39,10 @@ export default function Cart() {
         setIsLoading(false);
       }
     };
-    
+
     loadCart();
   }, [setCart]);
-  
+
   // Calculate total from items
   const total = cart.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
 
@@ -49,7 +51,7 @@ export default function Cart() {
       handleRemoveItem(key);
       return;
     }
-    
+
     setIsUpdating(true);
     try {
       const updatedCart = await updateCartItemQuantity(key, newQuantity);
@@ -92,6 +94,37 @@ export default function Cart() {
     }
   };
 
+  const handleApplyCoupon = async () => {
+    if (!couponCode.trim()) return;
+
+    setIsApplyingCoupon(true);
+    try {
+      const updatedCart = await applyCoupon(couponCode.trim());
+      setCart(updatedCart);
+      setCouponCode('');
+      toast.success('Coupon applied successfully');
+    } catch (error: any) {
+      console.error('Failed to apply coupon:', error);
+      toast.error(error.message || 'Failed to apply coupon');
+    } finally {
+      setIsApplyingCoupon(false);
+    }
+  };
+
+  const handleRemoveCoupon = async (code: string) => {
+    setIsUpdating(true);
+    try {
+      const updatedCart = await removeCoupon(code);
+      setCart(updatedCart);
+      toast.success('Coupon removed');
+    } catch (error: any) {
+      console.error('Failed to remove coupon:', error);
+      toast.error(error.message || 'Failed to remove coupon');
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
   // Show loading state while fetching cart
   if (isLoading) {
     return (
@@ -162,7 +195,7 @@ export default function Cart() {
                   <h3 className="font-semibold text-lg mb-1 truncate">
                     {item.name}
                   </h3>
-                  
+
                   {/* Variation Attributes */}
                   {item.attributes && Object.keys(item.attributes).length > 0 && (
                     <div className="text-sm text-gray-500 mb-1">
@@ -177,7 +210,7 @@ export default function Cart() {
                       })}
                     </div>
                   )}
-                  
+
                   <p className="text-gray-600 mb-2">
                     {formatPrice(item.price)}
                   </p>
@@ -237,10 +270,43 @@ export default function Cart() {
                     <input
                       type="text"
                       placeholder="Enter coupon code"
+                      value={couponCode}
+                      onChange={(e) => setCouponCode(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleApplyCoupon()}
                       className="flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                      disabled={isApplyingCoupon}
                     />
-                    <Button variant="outline" size="sm">Apply</Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleApplyCoupon}
+                      disabled={isApplyingCoupon || !couponCode.trim()}
+                    >
+                      {isApplyingCoupon ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
+                    </Button>
                   </div>
+
+                  {/* Applied Coupons */}
+                  {(cart as any).coupons?.length > 0 && (
+                    <div className="mt-3 space-y-2">
+                      {(cart as any).coupons.map((coupon: { code: string; discount: number }) => (
+                        <div key={coupon.code} className="flex items-center justify-between p-2 bg-green-50 border border-green-200 rounded-md">
+                          <div className="flex items-center gap-2">
+                            <Tag className="h-4 w-4 text-green-600" />
+                            <span className="text-sm font-medium text-green-800">{coupon.code}</span>
+                            <span className="text-sm text-green-600">-{formatPrice(coupon.discount)}</span>
+                          </div>
+                          <button
+                            onClick={() => handleRemoveCoupon(coupon.code)}
+                            className="text-green-600 hover:text-green-800 p-1"
+                            disabled={isUpdating}
+                          >
+                            <X className="h-4 w-4" />
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </div>
               )}
 
@@ -262,15 +328,22 @@ export default function Cart() {
               <div className="space-y-3 mb-6">
                 <div className="flex justify-between text-gray-600">
                   <span>Subtotal</span>
-                  <span>{formatPrice(total)}</span>
+                  <span>{formatPrice((cart as any).subtotal || total)}</span>
                 </div>
+                {/* Show discount if coupons applied */}
+                {(cart as any).discount_total > 0 && (
+                  <div className="flex justify-between text-green-600">
+                    <span>Discount</span>
+                    <span>-{formatPrice((cart as any).discount_total)}</span>
+                  </div>
+                )}
                 <div className="flex justify-between text-gray-600">
                   <span>Shipping</span>
-                  <span>Calculated at checkout</span>
+                  <span>{(cart as any).shipping_total > 0 ? formatPrice((cart as any).shipping_total) : 'Calculated at checkout'}</span>
                 </div>
                 <div className="border-t pt-3 flex justify-between text-lg font-bold">
                   <span>Total</span>
-                  <span>{formatPrice(total)}</span>
+                  <span>{formatPrice((cart as any).total || total)}</span>
                 </div>
               </div>
 

customer-spa/src/pages/Checkout/index.tsx

@@ -5,11 +5,12 @@ import { useCheckoutSettings } from '@/hooks/useAppearanceSettings';
 import { Button } from '@/components/ui/button';
 import Container from '@/components/Layout/Container';
 import { formatPrice } from '@/lib/currency';
-import { ArrowLeft, ShoppingBag, MapPin, Check, Edit2 } from 'lucide-react';
+import { ArrowLeft, ShoppingBag, MapPin, Check, Edit2, Loader2, X, Tag } from 'lucide-react';
 import { toast } from 'sonner';
 import { apiClient } from '@/lib/api/client';
 import { api } from '@/lib/api/client';
 import { AddressSelector } from '@/components/AddressSelector';
+import { applyCoupon, removeCoupon, fetchCart } from '@/lib/cart/api';
 
 interface SavedAddress {
   id: number;
@@ -34,6 +35,10 @@ export default function Checkout() {
   const { cart } = useCartStore();
   const { layout, elements } = useCheckoutSettings();
   const [isProcessing, setIsProcessing] = useState(false);
+  const [couponCode, setCouponCode] = useState('');
+  const [isApplyingCoupon, setIsApplyingCoupon] = useState(false);
+  const [appliedCoupons, setAppliedCoupons] = useState<{ code: string; discount: number }[]>([]);
+  const [discountTotal, setDiscountTotal] = useState(0);
   const user = (window as any).woonoowCustomer?.user;
 
   // Check if cart contains only virtual/downloadable products
@@ -189,6 +194,57 @@ export default function Checkout() {
     }
   }, [user]);
 
+  const handleApplyCoupon = async () => {
+    if (!couponCode.trim()) return;
+
+    setIsApplyingCoupon(true);
+    try {
+      const updatedCart = await applyCoupon(couponCode.trim());
+      if (updatedCart.coupons) {
+        setAppliedCoupons(updatedCart.coupons);
+        setDiscountTotal(updatedCart.discount_total || 0);
+      }
+      setCouponCode('');
+      toast.success('Coupon applied successfully');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to apply coupon');
+    } finally {
+      setIsApplyingCoupon(false);
+    }
+  };
+
+  const handleRemoveCoupon = async (code: string) => {
+    setIsApplyingCoupon(true);
+    try {
+      const updatedCart = await removeCoupon(code);
+      if (updatedCart.coupons) {
+        setAppliedCoupons(updatedCart.coupons);
+        setDiscountTotal(updatedCart.discount_total || 0);
+      }
+      toast.success('Coupon removed');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to remove coupon');
+    } finally {
+      setIsApplyingCoupon(false);
+    }
+  };
+
+  // Load cart data including coupons on mount
+  useEffect(() => {
+    const loadCartData = async () => {
+      try {
+        const cartData = await fetchCart();
+        if (cartData.coupons) {
+          setAppliedCoupons(cartData.coupons);
+          setDiscountTotal(cartData.discount_total || 0);
+        }
+      } catch (error) {
+        console.error('Failed to load cart data:', error);
+      }
+    };
+    loadCartData();
+  }, []);
+
   const handlePlaceOrder = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsProcessing(true);
@@ -652,10 +708,45 @@ export default function Checkout() {
                       <input
                         type="text"
                         placeholder="Enter coupon code"
+                        value={couponCode}
+                        onChange={(e) => setCouponCode(e.target.value)}
+                        onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleApplyCoupon())}
                         className="flex-1 px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                        disabled={isApplyingCoupon}
                       />
-                      <Button type="button" variant="outline" size="sm">Apply</Button>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleApplyCoupon}
+                        disabled={isApplyingCoupon || !couponCode.trim()}
+                      >
+                        {isApplyingCoupon ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
+                      </Button>
                     </div>
+
+                    {/* Applied Coupons */}
+                    {appliedCoupons.length > 0 && (
+                      <div className="mt-3 space-y-2">
+                        {appliedCoupons.map((coupon) => (
+                          <div key={coupon.code} className="flex items-center justify-between p-2 bg-green-50 border border-green-200 rounded-md">
+                            <div className="flex items-center gap-2">
+                              <Tag className="h-4 w-4 text-green-600" />
+                              <span className="text-sm font-medium text-green-800">{coupon.code}</span>
+                              <span className="text-sm text-green-600">-{formatPrice(coupon.discount)}</span>
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => handleRemoveCoupon(coupon.code)}
+                              className="text-green-600 hover:text-green-800 p-1"
+                              disabled={isApplyingCoupon}
+                            >
+                              <X className="h-4 w-4" />
+                            </button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 )}
 
@@ -702,6 +793,13 @@ export default function Checkout() {
                     <span>Subtotal</span>
                     <span>{formatPrice(subtotal)}</span>
                   </div>
+                  {/* Show discount if coupons applied */}
+                  {discountTotal > 0 && (
+                    <div className="flex justify-between text-sm text-green-600">
+                      <span>Discount</span>
+                      <span>-{formatPrice(discountTotal)}</span>
+                    </div>
+                  )}
                   <div className="flex justify-between text-sm">
                     <span>Shipping</span>
                     <span>{shipping === 0 ? 'Free' : formatPrice(shipping)}</span>
@@ -714,7 +812,7 @@ export default function Checkout() {
                   )}
                   <div className="border-t pt-2 flex justify-between font-bold text-lg">
                     <span>Total</span>
-                    <span>{formatPrice(total)}</span>
+                    <span>{formatPrice(total - discountTotal)}</span>
                   </div>
                 </div>