TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-29 07:09:48 +03:00
Code Issues Projects Releases Wiki Activity

Used common plans section component in signup page

Browse Source 
refs https://github.com/TryGhost/members.js/issues/10

We want to use the common UI component for rendering the plans section. Also fixes the weird dom sync problem with checkboxes by adding a timeout for small lag to keep the state in sync.
This commit is contained in:
Rish 2020-04-30 00:18:47 +05:30
parent 886ee7e9ec
commit 24e98cfb21
1 changed files with 12 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
ghost/portal/src/components/pages/SignupPage.js
View File

@ -1,6 +1,7 @@
import ActionButton from '../common/ActionButton';
import InputField from '../common/InputField';
import {ParentContext} from '../ParentContext';
import PlansSection from '../common/PlansSection';
const React = require('react');
@ -47,125 +48,21 @@ class SignupPage extends React.Component {
}
handleSelectPlan(e, name) {
this.setState({
plan: name
});
}
renderCheckbox({name, isChecked = false}) {
const style = {
width: '20px',
height: '20px',
border: 'solid 1px #cccccc'
};
return (
<>
<input
name={name}
type="checkbox"
style={style}
checked={this.state.plan === name}
onChange={e => e.preventDefault()}
/>
</>
);
}
renderPlanOptions(plans) {
const nameStyle = {
fontSize: '13px',
fontWeight: '500',
display: 'flex',
color: '#343F44',
justifyContent: 'center'
};
const priceStyle = {
fontSize: '12px',
fontWeight: 'bold',
display: 'flex',
justifyContent: 'center',
marginBottom: '9px'
};
const checkboxStyle = {
display: 'flex',
justifyContent: 'center'
};
const boxStyle = ({isLast = false}) => {
const style = {
padding: '12px 12px',
flexBasis: '100%'
};
if (!isLast) {
style.borderRight = '1px solid #c5d2d9';
}
return style;
};
const PriceLabel = ({name, currency, price}) => {
if (name === 'Free') {
return (
<strong style={{
fontSize: '11px',
textAlign: 'center',
lineHeight: '18px',
color: '#929292',
fontWeight: 'normal'
}}> Access free members-only posts </strong>
);
}
const type = name === 'Monthly' ? 'month' : 'year';
return (
<div style={{
display: 'inline',
verticalAlign: 'baseline'
}}>
<span style={{fontSize: '14px', color: '#929292', fontWeight: 'normal'}}> {currency} </span>
<strong style={{fontSize: '21px'}}> {price} </strong>
<span style={{fontSize: '12px', color: '#929292', fontWeight: 'normal'}}> {` / ${type}`}</span>
</div>
);
};
return plans.map(({name, currency, price}, i) => {
const isLast = i === plans.length - 1;
const isChecked = this.state.plan === name;
return (
<div style={boxStyle({isLast})} key={name} onClick={e => this.handleSelectPlan(e, name)}>
<div style={checkboxStyle}> {this.renderCheckbox({name, isChecked})} </div>
<div style={nameStyle}> {name.toUpperCase()} </div>
<div style={priceStyle}>
{PriceLabel({name, currency, price})}
</div>
</div>
);
});
e.preventDefault();
// Hack: React checkbox gets out of sync with dom state with instant update
setTimeout(() => {
this.setState((prevState) => {
return {
plan: name
};
});
}, 5);
}
renderPlans() {
const containerStyle = {
display: 'flex',
border: '1px solid #c5d2d9',
borderRadius: '9px',
marginBottom: '12px'
};
let {site} = this.context;
const plans = site.plans;
if (!plans) {
return null;
}
const {plans} = this.context.site;
return (
<div style={{width: '100%'}}>
<label style={{marginBottom: '3px', fontSize: '12px', fontWeight: '700'}}> Plan </label>
<div style={containerStyle}>
{this.renderPlanOptions([
{type: 'free', price: 'Decide later', name: 'Free'},
{type: 'month', price: plans.monthly, currency: plans.currency_symbol, name: 'Monthly'},
{type: 'year', price: plans.yearly, currency: plans.currency_symbol, name: 'Yearly'}
])}
</div>
</div>
<PlansSection plans={plans} selectedPlan={this.state.plan} onPlanSelect={(e, name) => this.handleSelectPlan(e, name)}/>
);
}