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
This commit is contained in:
Dwindi Ramadhana
2026-01-04 20:03:33 +07:00
parent befacf9d29
commit 0f542ad452
13 changed files with 420 additions and 32 deletions

View File

@@ -56,7 +56,7 @@ export default function Newsletter() {
description={__('Manage subscribers and send email campaigns')}
>
<Tabs value={activeTab} onValueChange={handleTabChange} className="space-y-6">
<TabsList className="grid w-full grid-cols-2 max-w-md">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="subscribers">{__('Subscribers')}</TabsTrigger>
<TabsTrigger value="campaigns">{__('Campaigns')}</TabsTrigger>
</TabsList>

View File

@@ -13,6 +13,7 @@ import { formatMoney, getStoreCurrency } from '@/lib/currency';
interface CustomerSettings {
auto_register_members: boolean;
multiple_addresses_enabled: boolean;
allow_custom_avatar: boolean;
vip_min_spent: number;
vip_min_orders: number;
vip_timeframe: 'all' | '30' | '90' | '365';
@@ -24,6 +25,7 @@ export default function CustomersSettings() {
const [settings, setSettings] = useState<CustomerSettings>({
auto_register_members: false,
multiple_addresses_enabled: true,
allow_custom_avatar: false,
vip_min_spent: 1000,
vip_min_orders: 10,
vip_timeframe: 'all',
@@ -138,6 +140,14 @@ export default function CustomersSettings() {
onCheckedChange={(checked) => setSettings({ ...settings, multiple_addresses_enabled: checked })}
/>
<ToggleField
id="allow_custom_avatar"
label={__('Allow custom profile photo')}
description={__('Allow customers to upload their own profile photo. When disabled, customer avatars will use Gravatar or default initials.')}
checked={settings.allow_custom_avatar}
onCheckedChange={(checked) => setSettings({ ...settings, allow_custom_avatar: checked })}
/>
</div>
</SettingsCard>

View File

@@ -34,7 +34,7 @@ export default function CustomerNotifications() {
}
>
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
<TabsTrigger value="events">{__('Events')}</TabsTrigger>
</TabsList>

View File

@@ -22,7 +22,7 @@ export default function EmailConfiguration() {
}
>
<Tabs defaultValue="template" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="template">{__('Template Settings')}</TabsTrigger>
<TabsTrigger value="connection">{__('Connection Settings')}</TabsTrigger>
</TabsList>

View File

@@ -25,7 +25,7 @@ export default function PushConfiguration() {
}
>
<Tabs defaultValue="template" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="template">{__('Template Settings')}</TabsTrigger>
<TabsTrigger value="connection">{__('Connection Settings')}</TabsTrigger>
</TabsList>

View File

@@ -34,7 +34,7 @@ export default function StaffNotifications() {
}
>
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="channels">{__('Channels')}</TabsTrigger>
<TabsTrigger value="events">{__('Events')}</TabsTrigger>
</TabsList>

View File

@@ -206,7 +206,7 @@ export default function TemplateEditor({
{/* Body - Scrollable */}
<div className="flex-1 overflow-y-auto px-6 py-4">
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsList className="grid w-full max-w-md grid-cols-2">
<TabsTrigger value="editor" className="flex items-center gap-2">
<Edit className="h-4 w-4" />
{__('Editor')}

View File

@@ -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;
}

View File

@@ -24,6 +24,13 @@ export interface Cart {
code: string;
discount: number;
};
coupons?: {
code: string;
discount: number;
type?: string;
}[];
discount_total?: number;
shipping_total?: number;
}
interface CartStore {

View File

@@ -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>
);
}

View File

@@ -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,6 +24,8 @@ 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(() => {
@@ -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 (
@@ -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>

View File

@@ -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>

View File

@@ -21,6 +21,7 @@ class CustomerSettingsProvider {
// General
'auto_register_members' => get_option('woonoow_auto_register_members', 'no') === 'yes',
'multiple_addresses_enabled' => get_option('woonoow_multiple_addresses_enabled', 'yes') === 'yes',
'allow_custom_avatar' => get_option('woonoow_allow_custom_avatar', 'no') === 'yes',
// VIP Customer Qualification
'vip_min_spent' => floatval(get_option('woonoow_vip_min_spent', 1000)),
@@ -49,8 +50,10 @@ class CustomerSettingsProvider {
update_option('woonoow_multiple_addresses_enabled', $value);
}
if (array_key_exists('allow_custom_avatar', $settings)) {
$value = !empty($settings['allow_custom_avatar']) ? 'yes' : 'no';
update_option('woonoow_allow_custom_avatar', $value);
}
// VIP settings
if (isset($settings['vip_min_spent'])) {
update_option('woonoow_vip_min_spent', floatval($settings['vip_min_spent']));