fix: resolve container width issues, spa redirects, and appearance settings overwrite. feat: enhance order/sub details and newsletter layout

This commit is contained in:
Dwindi Ramadhana
2026-02-05 00:09:40 +07:00
parent a0b5f8496d
commit 5f08c18ec7
77 changed files with 7027 additions and 4546 deletions

View File

@@ -48,6 +48,7 @@ interface Subscription {
end_date: string | null;
last_payment_date: string | null;
payment_method: string;
payment_method_title?: string;
pause_count: number;
failed_payment_count: number;
cancel_reason: string | null;
@@ -65,6 +66,7 @@ const statusColors: Record<string, string> = {
'cancelled': 'bg-gray-100 text-gray-800',
'expired': 'bg-red-100 text-red-800',
'pending-cancel': 'bg-orange-100 text-orange-800',
'draft': 'bg-gray-100 text-gray-600',
};
const statusLabels: Record<string, string> = {
@@ -74,6 +76,7 @@ const statusLabels: Record<string, string> = {
'cancelled': __('Cancelled'),
'expired': __('Expired'),
'pending-cancel': __('Pending Cancel'),
'draft': __('Draft'),
};
const orderTypeLabels: Record<string, string> = {
@@ -83,6 +86,22 @@ const orderTypeLabels: Record<string, string> = {
'resubscribe': __('Resubscribe'),
};
const formatPrice = (amount: string | number) => {
const val = typeof amount === 'string' ? parseFloat(amount) : amount;
if (isNaN(val)) return amount;
// Simple formatting using browser's locale but keeping currency from store
try {
return new Intl.NumberFormat(window.WNW_STORE?.locale || 'en-US', {
style: 'currency',
currency: window.WNW_STORE?.currency || 'USD',
minimumFractionDigits: window.WNW_STORE?.decimals || 2,
}).format(val);
} catch (e) {
return (window.WNW_STORE?.currency_symbol || '$') + val;
}
};
async function fetchSubscription(id: string) {
const res = await fetch(`${window.WNW_API.root}/subscriptions/${id}`, {
headers: { 'X-WP-Nonce': window.WNW_API.nonce },
@@ -257,7 +276,7 @@ export default function SubscriptionDetail() {
{subscription.billing_schedule}
</p>
<p className="text-lg font-semibold mt-1">
{window.WNW_STORE?.currency_symbol}{subscription.recurring_amount}
{formatPrice(subscription.recurring_amount)}
</p>
</div>
</div>
@@ -317,7 +336,7 @@ export default function SubscriptionDetail() {
<div className="text-sm text-muted-foreground">{__('Payment Method')}</div>
<div className="flex items-center gap-2">
<CreditCard className="w-4 h-4" />
{subscription.payment_method || __('Not set')}
{subscription.payment_method_title || subscription.payment_method || __('Not set')}
</div>
</div>
<div>
@@ -368,29 +387,32 @@ export default function SubscriptionDetail() {
</TableCell>
</TableRow>
) : (
subscription.orders?.map((order) => (
<TableRow key={order.id}>
<TableCell>
<Link
to={`/orders/${order.order_id}`}
className="text-primary hover:underline font-medium"
>
#{order.order_id}
</Link>
</TableCell>
<TableCell>
<Badge variant="outline">
{orderTypeLabels[order.order_type] || order.order_type}
</Badge>
</TableCell>
<TableCell>
<span className="capitalize">{order.order_status?.replace('wc-', '')}</span>
</TableCell>
<TableCell>
{new Date(order.created_at).toLocaleDateString()}
</TableCell>
</TableRow>
))
subscription.orders?.map((order) => {
const rawStatus = order.order_status?.replace('wc-', '') || 'pending';
return (
<TableRow key={order.id}>
<TableCell>
<Link
to={`/orders/${order.order_id}`}
className="text-primary hover:underline font-medium"
>
#{order.order_id}
</Link>
</TableCell>
<TableCell>
<Badge variant="outline">
{orderTypeLabels[order.order_type] || order.order_type}
</Badge>
</TableCell>
<TableCell>
<span className="capitalize">{statusLabels[rawStatus] || rawStatus}</span>
</TableCell>
<TableCell>
{new Date(order.created_at).toLocaleDateString()}
</TableCell>
</TableRow>
);
})
)}
</TableBody>
</Table>