"save up to" in upgrade dialog

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 <strong>cancel your subscription</strong>, and downgrade your account on {{date}}. On that date, topic reservations as well as messages cached on the server <strong>will be deleted</strong>.",
   "account_upgrade_dialog_proration_info": "<strong>Proration</strong>: When upgrading between paid plans, the price difference will be <strong>charged immediately</strong>. 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, <strong>please delete at least one reservation</strong>. You can remove reservations in the <Link>Settings</Link>.",

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);
+                const tierDiscount = Math.round(((t.prices.month*12/t.prices.year)-1)*100);
-                break;
+                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)}
                         />
                         <Typography component="span" variant="subtitle1">{t("account_upgrade_dialog_interval_yearly")}</Typography>
-                        {discount > 0 && <Chip label={`-${discount}%`} color="primary" size="small" variant={interval === SubscriptionInterval.YEAR ? "filled" : "outlined"} sx={{ marginLeft: "5px" }}/>}
+                        {discount > 0 &&
+                            <Chip
+                                label={upto ? t("account_upgrade_dialog_interval_yearly_discount_save_up_to", { discount: discount }) : t("account_upgrade_dialog_interval_yearly_discount_save", { discount: discount })}
+                                color="primary"
+                                size="small"
+                                variant={interval === SubscriptionInterval.YEAR ? "filled" : "outlined"}
+                                sx={{ marginLeft: "5px" }}
+                            />
+                        }
                     </div>
                 </div>
             </DialogTitle>