fix: resolve container width issues, spa redirects, and appearance settings overwrite. feat: enhance order/sub details and newsletter layout
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user