From 094d32a88de11d5762897c699d280a3b3f237c19 Mon Sep 17 00:00:00 2001 From: Rish Date: Fri, 1 May 2020 22:19:56 +0530 Subject: [PATCH] Added new paid account home area refs https://github.com/TryGhost/members.js/issues/20 - Adds new page for home account area of paid member - Updates popup modal to add paid account home page in list --- ghost/portal/src/components/PopupModal.js | 7 + .../components/pages/PaidAccountHomePage.js | 201 ++++++++++++++++++ 2 files changed, 208 insertions(+) create mode 100644 ghost/portal/src/components/pages/PaidAccountHomePage.js diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js index 94d65a5b83..424f74ef50 100644 --- a/ghost/portal/src/components/PopupModal.js +++ b/ghost/portal/src/components/PopupModal.js @@ -8,6 +8,7 @@ import {ReactComponent as CloseIcon} from '../images/icons/close.svg'; import {ParentContext} from './ParentContext'; import FrameStyle from './Frame.styles'; import AccountPlanPage from './pages/AccountPlanPage'; +import PaidAccountHomePage from './pages/PaidAccountHomePage'; const React = require('react'); @@ -50,6 +51,11 @@ const Styles = { minHeight: '300px', maxHeight: '350px' }, + paidAccountHome: { + width: '500px', + minHeight: '650px', + maxHeight: '700px' + }, magiclink: { minHeight: '230px', maxHeight: '230px' @@ -97,6 +103,7 @@ const Pages = { signin: SigninPage, signup: SignupPage, accountHome: AccountHomePage, + paidAccountHome: PaidAccountHomePage, accountPlan: AccountPlanPage, magiclink: MagicLinkPage, loading: LoadingPage diff --git a/ghost/portal/src/components/pages/PaidAccountHomePage.js b/ghost/portal/src/components/pages/PaidAccountHomePage.js new file mode 100644 index 0000000000..9e7447d8ee --- /dev/null +++ b/ghost/portal/src/components/pages/PaidAccountHomePage.js @@ -0,0 +1,201 @@ +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 ( + <> +
+ Signed in as +
+
+ {memberEmail} +
+ + ); + } + + 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 ( +
+ +
+ ); + } + + renderUserHeader() { + return ( +
+ {this.renderUserAvatar()} +
Your Account
+
+ ); + } + + openSettings(e) { + // no-op + } + + openSubscribe(e) { + this.context.onAction('switchPage', { + page: 'accountPlan', + lastPage: 'accountHome' + }); + } + + renderAccountFooter() { + return ( +
+
Contact support
+
+
this.handleSignout(e)} role='button'> Logout
+
+
+ ); + } + + renderAccountWelcome() { + const {name, firstname, email} = this.context.member; + const siteTitle = this.context.site.title; + + return ( +
+
+ Hey {firstname || name || email}! + You have an active {siteTitle} 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. +
+
+ ); + } + + renderDivider() { + return ( +
+ ); + } + + getPlanLabel({amount, currency_symbol: currencySymbol = '$', interval}) { + return `${currencySymbol}${amount} / ${interval}`; + } + + getCardLabel({defaultCardLast4}) { + return `**** **** **** ${defaultCardLast4}`; + } + + renderAccountDetails() { + const buttonStyle = { + padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center', + borderRadius: '5px' + }; + const {name, email, subscriptions} = this.context.member; + + const { + plan, + default_payment_card_last4: defaultCardLast4 + } = subscriptions[0]; + + return ( +
+
+
+
Profile
+
+
{name}
+
{email}
+
+
+
+ Edit +
+
+
+
+
Plan
+
+
{this.getPlanLabel(plan)}
+
+
+
+
Change
+
+
+
+
+
Billing Info
+
+
{this.getCardLabel({defaultCardLast4})}
+
+
+
+ Update +
+
+
+
+
Newsletter
+
+
You are subscribed to newsletters
+
+
+
+ {}}/> +
+
+
+ ); + } + + renderLogoutButton() { + return ( +
+
{ + this.handleAccountDetail(e); + }} style={{marginBottom: '3px'}}> Account
+
{ + this.handleSignout(e); + }}> Log out
+
+ ); + } + + render() { + return ( +
+ {this.renderUserHeader()} + {this.renderAccountWelcome()} + {this.renderDivider()} + {this.renderAccountDetails()} + {this.renderDivider()} + {this.renderAccountFooter()} +
+ ); + } +} \ No newline at end of file