diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
index b2c9c2ed17..d7a2eed25a 100644
--- a/ghost/portal/src/components/common/PlansSection.js
+++ b/ghost/portal/src/components/common/PlansSection.js
@@ -335,13 +335,14 @@ function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) {
);
}
-function PriceLabel({currencySymbol, price}) {
+function PriceLabel({currencySymbol, price, interval}) {
const isSymbol = currencySymbol.length !== 3;
const currencyClass = isSymbol ? 'gh-portal-plan-currency gh-portal-plan-currency-symbol' : 'gh-portal-plan-currency gh-portal-plan-currency-code';
return (
{currencySymbol}
{formatNumber(price)}
+ {interval ? / {interval} : null}
);
}
@@ -365,7 +366,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
const {site} = useContext(AppContext);
const {free_price_name: freePriceName, free_price_description: freePriceDescription} = site;
addDiscountToPlans(plans);
- return plans.map(({name, currency_symbol: currencySymbol, amount, description, id}) => {
+ return plans.map(({ name, currency_symbol: currencySymbol, amount, description, interval, id}) => {
const price = amount / 100;
const isChecked = selectedPlan === id;
const classes = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
@@ -387,7 +388,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
onPlanSelect(e, id)}>
{displayName}
-
+