diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json index efd877d3..06fe139e 100644 --- a/web/public/static/langs/en.json +++ b/web/public/static/langs/en.json @@ -219,6 +219,8 @@ "account_upgrade_dialog_title": "Change account tier", "account_upgrade_dialog_interval_monthly": "Monthly", "account_upgrade_dialog_interval_yearly": "Annually", + "account_upgrade_dialog_interval_yearly_discount_save": "save {{discount}}%", + "account_upgrade_dialog_interval_yearly_discount_save_up_to": "save up to {{discount}}%", "account_upgrade_dialog_cancel_warning": "This will cancel your subscription, and downgrade your account on {{date}}. On that date, topic reservations as well as messages cached on the server will be deleted.", "account_upgrade_dialog_proration_info": "Proration: When upgrading between paid plans, the price difference will be charged immediately. When downgrading to a lower tier, the balance will be used to pay for future billing periods.", "account_upgrade_dialog_reservations_warning_one": "The selected tier allows fewer reserved topics than your current tier. Before changing your tier, please delete at least one reservation. You can remove reservations in the Settings.", diff --git a/web/src/components/UpgradeDialog.js b/web/src/components/UpgradeDialog.js index 447adab2..a46313ab 100644 --- a/web/src/components/UpgradeDialog.js +++ b/web/src/components/UpgradeDialog.js @@ -111,16 +111,21 @@ const UpgradeDialog = (props) => { } // Figure out discount - let discount; + let discount = 0, upto = false; if (newTier?.prices) { discount = Math.round(((newTier.prices.month*12/newTier.prices.year)-1)*100); } else { + let n = 0; for (const t of tiers) { if (t.prices) { - discount = Math.round(((t.prices.month*12/t.prices.year)-1)*100); - break; + const tierDiscount = Math.round(((t.prices.month*12/t.prices.year)-1)*100); + if (tierDiscount > discount) { + discount = tierDiscount; + n++; + } } } + upto = n > 1; } return ( @@ -145,7 +150,15 @@ const UpgradeDialog = (props) => { onChange={(ev) => setInterval(ev.target.checked ? SubscriptionInterval.YEAR : SubscriptionInterval.MONTH)} /> {t("account_upgrade_dialog_interval_yearly")} - {discount > 0 && } + {discount > 0 && + + }