{
marginBottom: "8px",
width: "100%"
}}>
- setNewTier(null)}
- />
{tiers.map(tier =>
setNewTier(tier.code)}
+ key={`tierCard${tier.code || '_free'}`}
+ tier={tier}
+ selected={newTier === tier.code} // tier.code may be undefined!
+ onClick={() => setNewTier(tier.code)} // tier.code may be undefined!
/>
)}
{action === Action.CANCEL &&
- {t("account_upgrade_dialog_cancel_warning", { date: formatShortDate(account.billing.paid_until) })}
+
}
- {action === Action.UPDATE &&
+ {currentTier && (!action || action === Action.UPDATE) &&
- {t("account_upgrade_dialog_proration_info")}
+
}
@@ -124,12 +126,18 @@ const UpgradeDialog = (props) => {
};
const TierCard = (props) => {
- const cardStyle = (props.selected) ? { background: "#eee", border: "2px solid #338574" } : {};
+ const { t } = useTranslation();
+ const cardStyle = (props.selected) ? { background: "#eee", border: "2px solid #338574" } : { border: "2px solid transparent" };
+ const tier = props.tier;
+
return (