From 1da4187405f65236c4a8b3b9a05e50a3bb933228 Mon Sep 17 00:00:00 2001
From: binwiederhier <pheckel@datto.com>
Date: Wed, 22 Feb 2023 14:21:23 -0500
Subject: [PATCH] "save up to" in upgrade dialog
---
web/public/static/langs/en.json | 2 ++
web/src/components/UpgradeDialog.js | 21 +++++++++++++++++----
2 files changed, 19 insertions(+), 4 deletions(-)
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 <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>.",
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)}
/>
<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>