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({
title: 'Change Subscription Plan',
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.`
: `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 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.`
: `<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',
onConfirm: async () => {
setStatus('Changing subscription plan...');
@@ -1381,7 +1381,7 @@
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) {
const renewsAt = account?.subscriptionRenewsAt;
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 () => {
setStatus('Scheduling cancellation...');
try {
const resp = await fetch('/api/account', {
const resp = await fetch('/api/subscription/cancel', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken,
},
credentials: 'same-origin',
body: JSON.stringify({
plan: newPlan,
billingCycle: newBillingCycle,
currency: newCurrency,
billingEmail: newBillingEmail,
}),
});
const data = await resp.json().catch(() => ({}));