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 interval to prices on Plan UI

Browse source 
closes https://github.com/TryGhost/Team/issues/673
This commit is contained in:
Rishabh 2021-05-11 00:07:55 +05:30
parent 39b7c01909
commit 4d9579e11c
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 (
<div className='gh-portal-plan-pricelabel'>
<span className={currencyClass}>{currencySymbol}</span>
<span className='gh-portal-plan-price'>{formatNumber(price)}</span>
{interval ? <span className=''> / {interval}</span> : null}
</div>
);
}
@ -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}) {
<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 currencySymbol={currencySymbol} price={price} />
<PriceLabel currencySymbol={currencySymbol} price={price} interval={interval} />
<div className='gh-portal-plan-featurewrapper'>
<div className='gh-portal-plan-feature'>
{planDetails.feature}