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

Updated plans section component plans prop

Browse source 
no issue

- Updates plans section component to take simpler plans array as prop for rendering plans
This commit is contained in:
Rish 2020-05-01 20:49:35 +05:30
parent 9cc5badd2f
commit 4931ea68bd
3 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -93,7 +93,16 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
});
}
function PlansSection({plans, selectedPlan, onPlanSelect, style}) {
function PlanLabel({showLabel}) {
if (!showLabel) {
return null;
}
return (
<label style={{marginBottom: '3px', fontSize: '12px', fontWeight: '700'}}> Plan </label>
);
}
function PlansSection({plans, showLabel = true, selectedPlan, onPlanSelect, style}) {
const containerStyle = {
display: 'flex',
border: '1px solid #c5d2d9',
@ -106,13 +115,9 @@ function PlansSection({plans, selectedPlan, onPlanSelect, style}) {
}
return (
<div style={{width: '100%'}}>
<label style={{marginBottom: '3px', fontSize: '12px', fontWeight: '700'}}> Plan </label>
<PlanLabel showLabel={showLabel} />
<div style={containerStyle}>
<PlanOptions plans={[
{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'}
]} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} />
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} />
</div>
</div>
);

11
ghost/portal/src/components/common/PlansSection.test.js
View file

@ -5,12 +5,11 @@ import PlansSection from './PlansSection';
const setup = (overrides = {}) => {
const mockOnPlanSelectFn = jest.fn();
const props = {
plans: {
monthly: 12,
yearly: 110,
currency: 'USD',
currency_symbol: '$'
},
plans: [
{type: 'free', price: 'Decide later', name: 'Free'},
{type: 'month', price: 12, currency: '$', name: 'Monthly'},
{type: 'year', price: 110, currency: '$', name: 'Yearly'}
],
selectedPlan: 'Monthly',
onPlanSelect: mockOnPlanSelectFn
};

7
ghost/portal/src/components/pages/SignupPage.js
View file

@ -61,8 +61,13 @@ class SignupPage extends React.Component {
renderPlans() {
const {plans} = this.context.site;
const plansData = [
{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'}
];
return (
<PlansSection plans={plans} selectedPlan={this.state.plan} onPlanSelect={(e, name) => this.handleSelectPlan(e, name)}/>
<PlansSection plans={plansData} selectedPlan={this.state.plan} onPlanSelect={(e, name) => this.handleSelectPlan(e, name)}/>
);
}