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

Added basic anoymous checkout flow setup

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

Adds happy path flow for triggering anonymous checkout from signup page when monthly or yearly plan is selected. Opens the stripe checkout session with empty email, and currently doesn't handle the success or failure redirect.
This commit is contained in:
Rish 2020-04-28 23:33:22 +05:30
parent e0c222f25c
commit 4d99e881d7
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ghost/portal/src/components/ParentContainer.js
View file

@ -133,7 +133,12 @@ export default class ParentContainer extends React.Component {
page: 'magiclink'
});
} else if (action === 'signup') {
await this.GhostApi.member.sendMagicLink(data);
const {plan} = data;
if (plan.toLowerCase() === 'free') {
await this.GhostApi.member.sendMagicLink(data);
} else {
await this.GhostApi.member.checkoutPlan({plan});
}
this.setState({
action: 'signup:success',
page: 'magiclink'

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

@ -104,7 +104,7 @@ class SignupPage extends React.Component {
};
const PriceLabel = ({name, currency, price}) => {
if (name === 'FREE') {
if (name === 'Free') {
return (
<strong style={{
fontSize: '11px',
@ -115,7 +115,7 @@ class SignupPage extends React.Component {
}}> Access free members-only posts </strong>
);
}
const type = name === 'MONTHLY' ? 'month' : 'year';
const type = name === 'Monthly' ? 'month' : 'year';
return (
<div style={{
display: 'inline',
@ -134,7 +134,7 @@ class SignupPage extends React.Component {
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} </div>
<div style={nameStyle}> {name.toUpperCase()} </div>
<div style={priceStyle}>
{PriceLabel({name, currency, price})}
</div>
@ -160,9 +160,9 @@ class SignupPage extends React.Component {
<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'}
{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>