Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added fallback discount description

Browse source 
refs https://github.com/TryGhost/Team/issues/671

When turning on custom products, existing sites should have default price description that retains current behaviour. This change adds custom description with discount value for Yearly Plans to keep the existing behavior for sites that mimic the old setup.
This commit is contained in:
Rishabh 2021-05-10 15:52:39 +05:30 • committed by Rishabh Garg
parent 9f154dbcd2
commit 12500c3b95
1 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
ghost/portal/src/components/common/PlansSection.js
View file

@ -1,5 +1,6 @@
import React, { useContext } from 'react';
import React, {useContext} from 'react';
import AppContext from '../../AppContext';
import calculateDiscount from '../../utils/discount';
import {isCookiesDisabled, formatNumber, hasOnlyFreePlan} from '../../utils/helpers';
export const PlanSectionStyles = `
@ -314,7 +315,7 @@ export const PlanSectionStyles = `
}
`;
function Checkbox({name, id, onPlanSelect, isChecked, disabled}) {
function Checkbox({name, id, onPlanSelect, isChecked, disabled = false}) {
if (isCookiesDisabled()) {
disabled = true;
}
@ -345,9 +346,25 @@ function PriceLabel({currencySymbol, price}) {
);
}
function addDiscountToPlans(plans) {
const filteredPlans = plans.filter(d => d.id !== 'free');
const monthlyPlan = plans.find((d) => {
return d.name === 'Monthly' && !d.description && d.interval === 'month';
});
const yearlyPlan = plans.find((d) => {
return d.name === 'Yearly' && !d.description && d.interval === 'year';
});
if (filteredPlans.length === 2 && monthlyPlan && yearlyPlan) {
const discount = calculateDiscount(monthlyPlan.amount, yearlyPlan.amount);
yearlyPlan.description = discount > 0 ? `${discount}% discount` : '';
}
}
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, price, description, id}) => {
const isChecked = selectedPlan === id;
const classes = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
@ -369,7 +386,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
<div className={classes} key={id} onClick={e => onPlanSelect(e, id)}>
<Checkbox name={name} id={id} isChecked={isChecked} onPlanSelect={onPlanSelect} />
<h4 className={planNameClass}>{displayName}</h4>
<PriceLabel name={name} currencySymbol={currencySymbol} price={price} />
<PriceLabel currencySymbol={currencySymbol} price={price} />
<div className='gh-portal-plan-featurewrapper'>
<div className='gh-portal-plan-feature'>
{planDetails.feature}