TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

Unify free + paid account home pages

Browse Source 
no refs.
- used similar design patterns for free and paid home pages
This commit is contained in:
Peter Zimon 2020-07-29 16:54:20 +02:00
parent bafdac7bd2
commit 2ad2098bba
5 changed files with 50 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/portal/src/App.js
View File

@ -142,8 +142,8 @@ export default class App extends React.Component {
return {
showPopup: true,
site: Fixtures.site,
member: Fixtures.member.paid,
page: 'signup'
member: Fixtures.member.free,
page: 'accountHome'
};
}
return {};

2
ghost/portal/src/components/Frame.styles.js
View File

@ -33,7 +33,7 @@ const GlobalStyles = `
--grey10: #dcdcdc;
--grey11: #e1e1e1;
--grey12: #eaeaea;
--grey13: #f8f8f8;
--grey13: #f9f9f9;
--white: #fff;
}

2
ghost/portal/src/components/common/MemberGravatar.js
View File

@ -8,7 +8,7 @@ export const AvatarStyles = `
align-items: center;
justify-content: center;
overflow: hidden;
margin: 6px 0 8px;
margin-bottom: 8px;
border-radius: 999px;
}

63
ghost/portal/src/components/pages/AccountHomePage.js
View File

@ -20,6 +20,10 @@ export const AccountHomePageStyles = `
margin: 0 0 32px;
}
.gh-portal-account-header .gh-portal-avatar {
margin: 6px 0 8px !important;
}
.gh-portal-account-footer {
display: flex;
margin-top: 32px;
@ -63,6 +67,10 @@ export const AccountHomePageStyles = `
flex-direction: column;
flex-grow: 1;
}
.gh-portal-free-ctatext {
margin-top: -12px;
}
`;
const UserAvatar = ({avatar, brandColor}) => {
@ -77,13 +85,7 @@ const AccountFooter = ({onLogout, onSettings, brandColor}) => {
return (
<footer className='gh-portal-account-footer'>
<ul className='gh-portal-account-footermenu'>
{onSettings ? null :
<li><button className='gh-portal-btn gh-portal-btn-branded'>Contact support</button></li>
}
{onSettings
? <li><button className='gh-portal-btn gh-portal-btn-branded' onClick={onSettings}>Settings</button></li>
: null
}
<li><button className='gh-portal-btn gh-portal-btn-branded'>Contact support</button></li>
</ul>
<div className='gh-portal-account-footerright'>
<ul className='gh-portal-account-footermenu'>
@ -114,16 +116,16 @@ class FreeAccountHomePage extends React.Component {
this.context.onAction('signout');
}
openSettings(e) {
openSubscribe(e) {
this.context.onAction('switchPage', {
page: 'accountProfile',
page: 'accountPlan',
lastPage: 'accountHome'
});
}
openSubscribe(e) {
openEditProfile() {
this.context.onAction('switchPage', {
page: 'accountPlan',
page: 'accountProfile',
lastPage: 'accountHome'
});
}
@ -140,17 +142,44 @@ class FreeAccountHomePage extends React.Component {
return null;
}
onToggleSubscription(e, subscribed) {
this.context.onAction('updateMember', {subscribed: !subscribed});
}
renderAccountDetail(e) {
const {name, firstname, email} = this.context.member;
const {name, firstname, email, subscribed} = this.context.member;
const {title: siteTitle} = this.context.site;
const label = subscribed ? 'Subscribed to email newsletters' : 'Not subscribed to email newsletters';
return (
<section>
<p className='gh-portal-text-center'>
Hey <strong>{firstname || name || email}! </strong>
You are subscribed to free updates from <strong>{siteTitle}</strong>, but you don't have a paid subscription to unlock full access
</p>
{this.renderSubscribeButton()}
<div className='gh-portal-section'>
<p className='gh-portal-text-center gh-portal-free-ctatext'>
Hey <strong>{firstname || name || email}! </strong>
You are subscribed to free updates from <strong>{siteTitle}</strong>, but you don't have a paid subscription to unlock full access
</p>
{this.renderSubscribeButton()}
</div>
<div className='gh-portal-list'>
<section>
<div className='gh-portal-list-detail'>
<h3>{name}</h3>
<p>{email}</p>
</div>
<button className='gh-portal-btn gh-portal-btn-list' onClick={e => this.openEditProfile(e)}>Edit</button>
</section>
<section>
<div className='gh-portal-list-detail'>
<h3>Newsletter</h3>
<p>{label}</p>
</div>
<div>
<Switch onToggle={(e) => {
this.onToggleSubscription(e, subscribed);
}} checked={subscribed} />
</div>
</section>
</div>
</section>
);
}

23
ghost/portal/src/components/pages/AccountProfilePage.js
View File

@ -2,7 +2,6 @@ import AppContext from '../../AppContext';
import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton';
import InputForm from '../common/InputForm';
import Switch from '../common/Switch';
import {ValidateInputForm} from '../../utils/form';
const React = require('react');
@ -181,27 +180,6 @@ export default class AccountProfilePage extends React.Component {
this.context.onAction('updateMember', {subscribed: !subscribed});
}
renderNewsletterOption() {
const {subscribed, paid} = this.context.member;
if (paid) {
return null;
}
const label = subscribed ? 'Subscribed to email newsletters' : 'Not subscribed to email newsletters';
return (
<div className='gh-portal-freeaccount-newsletter'>
<div className='label'>
<h3 className='gh-portal-input-label'>Newsletter</h3>
<div className='gh-portal-setting-data'>{label}</div>
</div>
<div>
<Switch onToggle={(e) => {
this.onToggleSubscription(e, subscribed);
}} checked={subscribed} />
</div>
</div>
);
}
render() {
const {member} = this.context;
if (!member) {
@ -212,7 +190,6 @@ export default class AccountProfilePage extends React.Component {
{this.renderHeader()}
<div className='gh-portal-section'>
{this.renderProfileData()}
{this.renderNewsletterOption()}
</div>
{this.renderAccountFooter()}
</div>