fix: improve plan change UX with card charge confirmation and fix paid-to-free downgrade

This commit is contained in:
southseact-3d
2026-02-12 19:06:17 +00:00
parent 16f620cccb
commit 6c09b70317

View File

@@ -1347,8 +1347,8 @@
showConfirmModal({ showConfirmModal({
title: 'Change Subscription Plan', title: 'Change Subscription Plan',
body: isDowngrade body: isDowngrade
? `You are downgrading from ${currentLabel} to ${planLabel}. Any price difference will be credited to your account and applied to future renewals. Your subscription will continue without interruption.` ? `<strong>Your card will be charged for any price difference.</strong><br><br>You are downgrading from ${currentLabel} to ${planLabel}. Any price difference will be credited to your account and applied to future renewals. Your subscription will continue without interruption.`
: `You are upgrading from ${currentLabel} to ${planLabel}. You will be charged the difference for the current billing period. Your subscription will update immediately.`, : `<strong>Your card will be charged for the price difference.</strong><br><br>You are upgrading from ${currentLabel} to ${planLabel}. You will be charged the difference for the current billing period. Your subscription will update immediately.`,
icon: 'info', icon: 'info',
onConfirm: async () => { onConfirm: async () => {
setStatus('Changing subscription plan...'); setStatus('Changing subscription plan...');
@@ -1381,7 +1381,7 @@
return; return;
} }
// Handle paid-to-free downgrade (schedule cancellation at period end) // Handle paid-to-free downgrade (use same cancel endpoint as cancel button)
if (isPaidToFree) { if (isPaidToFree) {
const renewsAt = account?.subscriptionRenewsAt; const renewsAt = account?.subscriptionRenewsAt;
const dateStr = renewsAt ? new Date(renewsAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) : 'the end of your billing period'; const dateStr = renewsAt ? new Date(renewsAt).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) : 'the end of your billing period';
@@ -1393,19 +1393,13 @@
onConfirm: async () => { onConfirm: async () => {
setStatus('Scheduling cancellation...'); setStatus('Scheduling cancellation...');
try { try {
const resp = await fetch('/api/account', { const resp = await fetch('/api/subscription/cancel', {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken, 'X-CSRF-Token': csrfToken,
}, },
credentials: 'same-origin', credentials: 'same-origin',
body: JSON.stringify({
plan: newPlan,
billingCycle: newBillingCycle,
currency: newCurrency,
billingEmail: newBillingEmail,
}),
}); });
const data = await resp.json().catch(() => ({})); const data = await resp.json().catch(() => ({}));