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 edit billing flow to paid account home

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

- Opens stripe checkout update session from paid account area for a member
- Allows paid member to update their stripe billing info
This commit is contained in:
Rish 2020-05-08 18:33:36 +05:30
parent e185c1ee47
commit 3f738b1088
2 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -171,6 +171,8 @@ export default class ParentContainer extends React.Component {
await this.GhostApi.member.checkoutPlan({
plan
});
} else if (action === 'editBilling') {
await this.GhostApi.member.editBilling();
}
} catch (e) {
this.setState({

21
ghost/portal/src/components/pages/PaidAccountHomePage.js
View file

@ -110,13 +110,24 @@ export default class PaidAccountHomePage extends React.Component {
return `**** **** **** ${defaultCardLast4}`;
}
onEditProfile() {
openEditProfile() {
this.context.onAction('switchPage', {
page: 'accountProfile',
lastPage: 'paidAccountHome'
});
}
openUpdatePlan() {
this.context.onAction('switchPage', {
page: 'accountPlan',
lastPage: 'paidAccountHome'
});
}
onEditBilling() {
this.context.onAction('editBilling');
}
renderAccountDetails() {
const buttonStyle = {
padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
@ -139,7 +150,7 @@ export default class PaidAccountHomePage extends React.Component {
<div style={{color: '#666666', fontSize: '11px'}}> {email} </div>
</div>
</div>
<div style={buttonStyle} onClick={e => this.onEditProfile(e)}>
<div style={buttonStyle} onClick={e => this.openEditProfile(e)}>
Edit
</div>
</div>
@ -150,8 +161,8 @@ export default class PaidAccountHomePage extends React.Component {
<div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
</div>
</div>
<div>
<div style={buttonStyle}> Change </div>
<div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}>
Change
</div>
</div>
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
@ -161,7 +172,7 @@ export default class PaidAccountHomePage extends React.Component {
<div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
</div>
</div>
<div style={buttonStyle}>
<div style={buttonStyle} onClick={e => this.onEditBilling(e)}>
Update
</div>
</div>