From 2ad2098bbaa4db05a7c42b5cffff29a5e679ab64 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Wed, 29 Jul 2020 16:54:20 +0200
Subject: [PATCH] Unify free + paid account home pages

no refs.
- used similar design patterns for free and paid home pages
---
 ghost/portal/src/App.js                       |  4 +-
 ghost/portal/src/components/Frame.styles.js   |  2 +-
 .../src/components/common/MemberGravatar.js   |  2 +-
 .../src/components/pages/AccountHomePage.js   | 63 ++++++++++++++-----
 .../components/pages/AccountProfilePage.js    | 23 -------
 5 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index 25fed99dcf..616284bd15 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -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 {};
diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index 8b8d283b2d..ea7da47c59 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -33,7 +33,7 @@ const GlobalStyles = `
         --grey10: #dcdcdc;
         --grey11: #e1e1e1;
         --grey12: #eaeaea;
-        --grey13: #f8f8f8;
+        --grey13: #f9f9f9;
         --white: #fff;
     }
     
diff --git a/ghost/portal/src/components/common/MemberGravatar.js b/ghost/portal/src/components/common/MemberGravatar.js
index d780589918..7a6629ec3a 100644
--- a/ghost/portal/src/components/common/MemberGravatar.js
+++ b/ghost/portal/src/components/common/MemberGravatar.js
@@ -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;
     }
 
diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/ghost/portal/src/components/pages/AccountHomePage.js
index e69d1f9a31..7b92b35039 100644
--- a/ghost/portal/src/components/pages/AccountHomePage.js
+++ b/ghost/portal/src/components/pages/AccountHomePage.js
@@ -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>
         );
     }
diff --git a/ghost/portal/src/components/pages/AccountProfilePage.js b/ghost/portal/src/components/pages/AccountProfilePage.js
index 5eb298e303..2af18b51e1 100644
--- a/ghost/portal/src/components/pages/AccountProfilePage.js
+++ b/ghost/portal/src/components/pages/AccountProfilePage.js
@@ -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>