mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Combined account home pages in single file
no issue - Cleanup: Combines home page for both free and paid member in single file for cleaner split
This commit is contained in:
Rish
parent
d8072971b5
commit
f94f16a90d
3 changed files with 238 additions and 228 deletions
|
|
@ -8,7 +8,6 @@ import {ReactComponent as CloseIcon} from '../images/icons/close.svg';
|
||||||
import {ParentContext} from './ParentContext';
|
import {ParentContext} from './ParentContext';
|
||||||
import FrameStyle from './Frame.styles';
|
import FrameStyle from './Frame.styles';
|
||||||
import AccountPlanPage from './pages/AccountPlanPage';
|
import AccountPlanPage from './pages/AccountPlanPage';
|
||||||
import PaidAccountHomePage from './pages/PaidAccountHomePage';
|
|
||||||
import AccountProfilePage from './pages/AccountProfilePage';
|
import AccountProfilePage from './pages/AccountProfilePage';
|
||||||
|
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
@ -109,7 +108,7 @@ const Pages = {
|
||||||
signin: SigninPage,
|
signin: SigninPage,
|
||||||
signup: SignupPage,
|
signup: SignupPage,
|
||||||
accountHome: AccountHomePage,
|
accountHome: AccountHomePage,
|
||||||
paidAccountHome: PaidAccountHomePage,
|
paidAccountHome: AccountHomePage,
|
||||||
accountPlan: AccountPlanPage,
|
accountPlan: AccountPlanPage,
|
||||||
accountProfile: AccountProfilePage,
|
accountProfile: AccountProfilePage,
|
||||||
magiclink: MagicLinkPage,
|
magiclink: MagicLinkPage,
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import ActionButton from '../common/ActionButton';
|
||||||
|
|
||||||
const React = require('react');
|
const React = require('react');
|
||||||
|
|
||||||
export default class AccountHomePage extends React.Component {
|
class FreeAccountHomePage extends React.Component {
|
||||||
static contextType = ParentContext;
|
static contextType = ParentContext;
|
||||||
|
|
||||||
handleSignout(e) {
|
handleSignout(e) {
|
||||||
|
|
@ -124,3 +124,239 @@ export default class AccountHomePage extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class PaidAccountHomePage extends React.Component {
|
||||||
|
static contextType = ParentContext;
|
||||||
|
|
||||||
|
handleSignout(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.context.onAction('signout');
|
||||||
|
}
|
||||||
|
|
||||||
|
renderHeader() {
|
||||||
|
const memberEmail = this.context.member.email;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{paddingLeft: '16px', paddingRight: '16px', color: '#A6A6A6', fontSize: '1.2rem', lineHeight: '1.0em'}}>
|
||||||
|
Signed in as
|
||||||
|
</div>
|
||||||
|
<div style={{paddingLeft: '16px', paddingRight: '16px', paddingBottom: '9px'}}>
|
||||||
|
{memberEmail}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUserAvatar() {
|
||||||
|
const avatarImg = (this.context.member && this.context.member.avatar_image);
|
||||||
|
|
||||||
|
const avatarContainerStyle = {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'flex',
|
||||||
|
width: '64px',
|
||||||
|
height: '64px',
|
||||||
|
marginBottom: '6px',
|
||||||
|
borderRadius: '100%',
|
||||||
|
boxShadow: '0 0 0 3px #fff',
|
||||||
|
border: '1px solid gray',
|
||||||
|
overflow: 'hidden',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center'
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={avatarContainerStyle}>
|
||||||
|
<MemberAvatar gravatar={avatarImg} style={{userIcon: {color: 'black', width: '45px', height: '45px'}}} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderUserHeader() {
|
||||||
|
return (
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '12px'}}>
|
||||||
|
{this.renderUserAvatar()}
|
||||||
|
<div style={{fontSize: '21px', fontWeight: '500', marginTop: '6px'}}> Your Account </div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
openSettings(e) {
|
||||||
|
// no-op
|
||||||
|
}
|
||||||
|
|
||||||
|
openSubscribe(e) {
|
||||||
|
this.context.onAction('switchPage', {
|
||||||
|
page: 'accountPlan',
|
||||||
|
lastPage: 'accountHome'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAccountFooter() {
|
||||||
|
return (
|
||||||
|
<div style={{display: 'flex', padding: '0 24px', marginTop: '24px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px'}}>
|
||||||
|
<div style={{cursor: 'pointer'}} role='button'> Contact support </div>
|
||||||
|
<div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
|
||||||
|
<div style={{cursor: 'pointer'}} onClick={e => this.handleSignout(e)} role='button'> Logout </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAccountWelcome() {
|
||||||
|
const {name, firstname, email} = this.context.member;
|
||||||
|
const siteTitle = this.context.site.title;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{padding: '0 24px'}}>
|
||||||
|
<div style={{textAlign: 'center', marginBottom: '12px', fontSize: '14px'}}>
|
||||||
|
<span style={{fontWeight: 'bold'}}>Hey {firstname || name || email}! </span>
|
||||||
|
You have an active <span style={{fontWeight: 'bold'}}>{siteTitle}</span> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderDivider() {
|
||||||
|
return (
|
||||||
|
<div style={{borderBottom: '1px solid grey'}}> </div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
getPlanLabel({amount = 0, currency_symbol: currencySymbol = '$', interval}) {
|
||||||
|
return `${currencySymbol}${amount / 100} / ${interval}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
getCardLabel({defaultCardLast4}) {
|
||||||
|
return `**** **** **** ${defaultCardLast4}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
openEditProfile() {
|
||||||
|
this.context.onAction('switchPage', {
|
||||||
|
page: 'accountProfile',
|
||||||
|
lastPage: 'accountHome'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
openUpdatePlan() {
|
||||||
|
this.context.onAction('switchPage', {
|
||||||
|
page: 'accountPlan',
|
||||||
|
lastPage: 'accountHome'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditBilling() {
|
||||||
|
this.context.onAction('editBilling');
|
||||||
|
}
|
||||||
|
|
||||||
|
onToggleSubscription(e, subscribed) {
|
||||||
|
this.context.onAction('updateMember', {subscribed: !subscribed});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAccountDetails() {
|
||||||
|
const buttonStyle = {
|
||||||
|
padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
|
||||||
|
borderRadius: '5px', cursor: 'pointer'
|
||||||
|
};
|
||||||
|
const {name, email, subscriptions, subscribed} = this.context.member;
|
||||||
|
|
||||||
|
const {
|
||||||
|
plan,
|
||||||
|
default_payment_card_last4: defaultCardLast4
|
||||||
|
} = subscriptions[0];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{padding: '0 24px', marginTop: '24px', marginBottom: '24px'}}>
|
||||||
|
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
||||||
|
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Profile </div>
|
||||||
|
<div style={{lineHeight: '18px'}}>
|
||||||
|
<div style={{color: '#666666'}}> {name} </div>
|
||||||
|
<div style={{color: '#666666', fontSize: '11px'}}> {email} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={buttonStyle} onClick={e => this.openEditProfile(e)}>
|
||||||
|
Edit
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
||||||
|
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Plan </div>
|
||||||
|
<div style={{lineHeight: '18px'}}>
|
||||||
|
<div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}>
|
||||||
|
Change
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
||||||
|
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Billing Info </div>
|
||||||
|
<div style={{lineHeight: '18px'}}>
|
||||||
|
<div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={buttonStyle} onClick={e => this.onEditBilling(e)}>
|
||||||
|
Update
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
||||||
|
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Newsletter </div>
|
||||||
|
<div style={{lineHeight: '18px'}}>
|
||||||
|
<div style={{color: '#666666'}}> You are subscribed to email newsletters </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Switch onToggle={(e) => {
|
||||||
|
this.onToggleSubscription(e, subscribed);
|
||||||
|
}} checked={subscribed} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderLogoutButton() {
|
||||||
|
return (
|
||||||
|
<div style={{paddingLeft: '21px', paddingRight: '16px', paddingTop: '12px', borderTop: '1px solid #EFEFEF', cursor: 'pointer'}}>
|
||||||
|
<div role="button" onClick={(e) => {
|
||||||
|
this.handleAccountDetail(e);
|
||||||
|
}} style={{marginBottom: '3px'}}> Account </div>
|
||||||
|
<div role="button" onClick={(e) => {
|
||||||
|
this.handleSignout(e);
|
||||||
|
}}> Log out </div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
|
||||||
|
{this.renderUserHeader()}
|
||||||
|
{this.renderAccountWelcome()}
|
||||||
|
{this.renderDivider()}
|
||||||
|
{this.renderAccountDetails()}
|
||||||
|
{this.renderDivider()}
|
||||||
|
{this.renderAccountFooter()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default class AccountHomePage extends React.Component {
|
||||||
|
static contextType = ParentContext;
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {member} = this.context;
|
||||||
|
|
||||||
|
if (member.paid) {
|
||||||
|
return (
|
||||||
|
<PaidAccountHomePage />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<FreeAccountHomePage />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,225 +0,0 @@
|
||||||
import {ParentContext} from '../ParentContext';
|
|
||||||
import MemberAvatar from '../common/MemberGravatar';
|
|
||||||
import Switch from '../common/Switch';
|
|
||||||
|
|
||||||
const React = require('react');
|
|
||||||
|
|
||||||
export default class PaidAccountHomePage extends React.Component {
|
|
||||||
static contextType = ParentContext;
|
|
||||||
|
|
||||||
handleSignout(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
this.context.onAction('signout');
|
|
||||||
}
|
|
||||||
|
|
||||||
renderHeader() {
|
|
||||||
const memberEmail = this.context.member.email;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div style={{paddingLeft: '16px', paddingRight: '16px', color: '#A6A6A6', fontSize: '1.2rem', lineHeight: '1.0em'}}>
|
|
||||||
Signed in as
|
|
||||||
</div>
|
|
||||||
<div style={{paddingLeft: '16px', paddingRight: '16px', paddingBottom: '9px'}}>
|
|
||||||
{memberEmail}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderUserAvatar() {
|
|
||||||
const avatarImg = (this.context.member && this.context.member.avatar_image);
|
|
||||||
|
|
||||||
const avatarContainerStyle = {
|
|
||||||
position: 'relative',
|
|
||||||
display: 'flex',
|
|
||||||
width: '64px',
|
|
||||||
height: '64px',
|
|
||||||
marginBottom: '6px',
|
|
||||||
borderRadius: '100%',
|
|
||||||
boxShadow: '0 0 0 3px #fff',
|
|
||||||
border: '1px solid gray',
|
|
||||||
overflow: 'hidden',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center'
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={avatarContainerStyle}>
|
|
||||||
<MemberAvatar gravatar={avatarImg} style={{userIcon: {color: 'black', width: '45px', height: '45px'}}} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderUserHeader() {
|
|
||||||
return (
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '12px'}}>
|
|
||||||
{this.renderUserAvatar()}
|
|
||||||
<div style={{fontSize: '21px', fontWeight: '500', marginTop: '6px'}}> Your Account </div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
openSettings(e) {
|
|
||||||
// no-op
|
|
||||||
}
|
|
||||||
|
|
||||||
openSubscribe(e) {
|
|
||||||
this.context.onAction('switchPage', {
|
|
||||||
page: 'accountPlan',
|
|
||||||
lastPage: 'accountHome'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
renderAccountFooter() {
|
|
||||||
return (
|
|
||||||
<div style={{display: 'flex', padding: '0 24px', marginTop: '24px', color: this.context.brandColor, fontWeight: 'bold', fontSize: '13px'}}>
|
|
||||||
<div style={{cursor: 'pointer'}} role='button'> Contact support </div>
|
|
||||||
<div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
|
|
||||||
<div style={{cursor: 'pointer'}} onClick={e => this.handleSignout(e)} role='button'> Logout </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderAccountWelcome() {
|
|
||||||
const {name, firstname, email} = this.context.member;
|
|
||||||
const siteTitle = this.context.site.title;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{padding: '0 24px'}}>
|
|
||||||
<div style={{textAlign: 'center', marginBottom: '12px', fontSize: '14px'}}>
|
|
||||||
<span style={{fontWeight: 'bold'}}>Hey {firstname || name || email}! </span>
|
|
||||||
You have an active <span style={{fontWeight: 'bold'}}>{siteTitle}</span> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderDivider() {
|
|
||||||
return (
|
|
||||||
<div style={{borderBottom: '1px solid grey'}}> </div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
getPlanLabel({amount = 0, currency_symbol: currencySymbol = '$', interval}) {
|
|
||||||
return `${currencySymbol}${amount / 100} / ${interval}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
getCardLabel({defaultCardLast4}) {
|
|
||||||
return `**** **** **** ${defaultCardLast4}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
openEditProfile() {
|
|
||||||
this.context.onAction('switchPage', {
|
|
||||||
page: 'accountProfile',
|
|
||||||
lastPage: 'paidAccountHome'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
openUpdatePlan() {
|
|
||||||
this.context.onAction('switchPage', {
|
|
||||||
page: 'accountPlan',
|
|
||||||
lastPage: 'paidAccountHome'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
onEditBilling() {
|
|
||||||
this.context.onAction('editBilling');
|
|
||||||
}
|
|
||||||
|
|
||||||
onToggleSubscription(e, subscribed) {
|
|
||||||
this.context.onAction('updateMember', {subscribed: !subscribed});
|
|
||||||
}
|
|
||||||
|
|
||||||
renderAccountDetails() {
|
|
||||||
const buttonStyle = {
|
|
||||||
padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
|
|
||||||
borderRadius: '5px', cursor: 'pointer'
|
|
||||||
};
|
|
||||||
const {name, email, subscriptions, subscribed} = this.context.member;
|
|
||||||
|
|
||||||
const {
|
|
||||||
plan,
|
|
||||||
default_payment_card_last4: defaultCardLast4
|
|
||||||
} = subscriptions[0];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{padding: '0 24px', marginTop: '24px', marginBottom: '24px'}}>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
|
||||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Profile </div>
|
|
||||||
<div style={{lineHeight: '18px'}}>
|
|
||||||
<div style={{color: '#666666'}}> {name} </div>
|
|
||||||
<div style={{color: '#666666', fontSize: '11px'}}> {email} </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={buttonStyle} onClick={e => this.openEditProfile(e)}>
|
|
||||||
Edit
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
|
||||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Plan </div>
|
|
||||||
<div style={{lineHeight: '18px'}}>
|
|
||||||
<div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}>
|
|
||||||
Change
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
|
||||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Billing Info </div>
|
|
||||||
<div style={{lineHeight: '18px'}}>
|
|
||||||
<div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={buttonStyle} onClick={e => this.onEditBilling(e)}>
|
|
||||||
Update
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
|
||||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Newsletter </div>
|
|
||||||
<div style={{lineHeight: '18px'}}>
|
|
||||||
<div style={{color: '#666666'}}> You are subscribed to newsletters </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Switch onToggle={(e) => {
|
|
||||||
this.onToggleSubscription(e, subscribed);
|
|
||||||
}} checked={subscribed} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderLogoutButton() {
|
|
||||||
return (
|
|
||||||
<div style={{paddingLeft: '21px', paddingRight: '16px', paddingTop: '12px', borderTop: '1px solid #EFEFEF', cursor: 'pointer'}}>
|
|
||||||
<div role="button" onClick={(e) => {
|
|
||||||
this.handleAccountDetail(e);
|
|
||||||
}} style={{marginBottom: '3px'}}> Account </div>
|
|
||||||
<div role="button" onClick={(e) => {
|
|
||||||
this.handleSignout(e);
|
|
||||||
}}> Log out </div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
|
|
||||||
{this.renderUserHeader()}
|
|
||||||
{this.renderAccountWelcome()}
|
|
||||||
{this.renderDivider()}
|
|
||||||
{this.renderAccountDetails()}
|
|
||||||
{this.renderDivider()}
|
|
||||||
{this.renderAccountFooter()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue