Refactored account home page to dynamically load for free/paid

no issue

- Updates style based on context
- Combines account home page for free/paid members to load based on member status

ghost/portal/src/components/ParentContainer.js

@@ -60,7 +60,7 @@ export default class ParentContainer extends React.Component {
         }
         if (member) {
             return {
-                page: member.paid ? 'paidAccountHome' : 'accountHome'
+                page: 'accountHome'
             };
         }
         return {

ghost/portal/src/components/PopupModal.js

@@ -12,103 +12,110 @@ import AccountProfilePage from './pages/AccountProfilePage';
 
 const React = require('react');
 
-const Styles = {
-    modalContainer: {
-        zIndex: '1000',
-        paddingTop: '100px',
-        position: 'fixed',
-        left: '0',
-        top: '0',
-        width: '100%',
-        height: '100%',
-        overflow: 'auto',
-        backgroundColor: 'rgba(128,128,128,0.5)'
-    },
-    frame: {
-        common: {
-            margin: 'auto',
-            position: 'relative',
-            padding: '0',
-            outline: '0',
-            width: '500px',
-            borderRadius: '8px',
-            boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
-            opacity: '1',
-            overflow: 'hidden',
-            height: '60%',
-            backgroundColor: 'white'
-        },
-        signin: {
-            minHeight: '200px',
-            maxHeight: '330px'
-        },
-        signup: {
-            minHeight: '580px',
-            maxHeight: '620px'
-        },
-        accountHome: {
-            width: '500px',
-            minHeight: '300px',
-            maxHeight: '350px'
-        },
-        paidAccountHome: {
-            width: '500px',
-            minHeight: '650px',
-            maxHeight: '700px'
-        },
-        magiclink: {
-            minHeight: '230px',
-            maxHeight: '230px'
-        },
-        loading: {
-            minHeight: '130px'
-        },
-        accountPlan: {
-            width: '500px',
-            minHeight: '290px',
-            maxHeight: '290px'
-        },
-        accountProfile: {
-            width: '500px',
-            minHeight: '400px',
-            maxHeight: '400px'
-        }
-    },
-    popup: {
-        container: {
+const StylesWrapper = ({member}) => {
+    const isPaidMember = (member && member.paid);
+    const accountHome = isPaidMember ? {
+        width: '500px',
+        minHeight: '650px',
+        maxHeight: '700px'
+    } : {
+        width: '500px',
+        minHeight: '330px',
+        maxHeight: '330px'
+    };
+    const accountProfile = isPaidMember ? {
+        width: '500px',
+        minHeight: '320px',
+        maxHeight: '320px'
+    } : {
+        width: '500px',
+        minHeight: '380px',
+        maxHeight: '380px'
+    };
+    return {
+        modalContainer: {
+            zIndex: '1000',
+            paddingTop: '100px',
+            position: 'fixed',
+            left: '0',
+            top: '0',
             width: '100%',
             height: '100%',
-            position: 'absolute',
-            letterSpacing: '0',
-            textRendering: 'optimizeLegibility',
-            fontSize: '1.5rem',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            top: '0px',
-            bottom: '0px',
-            left: '0px',
-            right: '0px',
-            overflow: 'hidden',
-            paddingTop: '18px',
-            paddingBottom: '18px',
-            textAlign: 'left',
-            boxSizing: 'border-box'
+            overflow: 'auto',
+            backgroundColor: 'rgba(128,128,128,0.5)'
         },
-        closeIcon: {
-            width: '16px',
-            height: '16px',
-            color: 'grey',
-            cursor: 'pointer'
+        frame: {
+            common: {
+                margin: 'auto',
+                position: 'relative',
+                padding: '0',
+                outline: '0',
+                width: '500px',
+                borderRadius: '8px',
+                boxShadow: 'rgba(0, 0, 0, 0.16) 0px 5px 40px',
+                opacity: '1',
+                overflow: 'hidden',
+                height: '60%',
+                backgroundColor: 'white'
+            },
+            signin: {
+                minHeight: '200px',
+                maxHeight: '330px'
+            },
+            signup: {
+                minHeight: '580px',
+                maxHeight: '620px'
+            },
+            accountHome,
+            magiclink: {
+                minHeight: '230px',
+                maxHeight: '230px'
+            },
+            loading: {
+                minHeight: '130px'
+            },
+            accountPlan: {
+                width: '500px',
+                minHeight: '290px',
+                maxHeight: '290px'
+            },
+            accountProfile
+        },
+        popup: {
+            container: {
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                letterSpacing: '0',
+                textRendering: 'optimizeLegibility',
+                fontSize: '1.5rem',
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'flex-start',
+                top: '0px',
+                bottom: '0px',
+                left: '0px',
+                right: '0px',
+                overflow: 'hidden',
+                paddingTop: '18px',
+                paddingBottom: '18px',
+                textAlign: 'left',
+                boxSizing: 'border-box'
+            },
+            closeIcon: {
+                width: '16px',
+                height: '16px',
+                color: 'grey',
+                cursor: 'pointer'
+            }
         }
-    }
+    };
 };
 
 const Pages = {
     signin: SigninPage,
     signup: SignupPage,
     accountHome: AccountHomePage,
-    paidAccountHome: AccountHomePage,
     accountPlan: AccountPlanPage,
     accountProfile: AccountProfilePage,
     magiclink: MagicLinkPage,
@@ -127,6 +134,7 @@ export default class PopupModal extends React.Component {
     }
 
     renderPopupClose() {
+        const Styles = StylesWrapper({});
         return (
             <div style={{display: 'flex', justifyContent: 'flex-end', padding: '0 20px'}}>
                 <CloseIcon style={Styles.popup.closeIcon} onClick = {() => this.context.onAction('closePopup')} />
@@ -135,6 +143,7 @@ export default class PopupModal extends React.Component {
     }
 
     renderPopupContent() {
+        const Styles = StylesWrapper({});
         return (
             <div style={Styles.popup.container}>
                 {this.renderPopupClose()}
@@ -157,6 +166,8 @@ export default class PopupModal extends React.Component {
     }
 
     renderFrameContainer() {
+        const {member} = this.context;
+        const Styles = StylesWrapper({member});
         const page = this.context.page;
         const frameStyle = {
             ...Styles.frame.common,

ghost/portal/src/components/pages/AccountHomePage.js

@@ -1,9 +1,63 @@
 import {ParentContext} from '../ParentContext';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
+import Switch from '../common/Switch';
 
 const React = require('react');
 
+const Divider = () => {
+    return (
+        <div style={{borderBottom: '1px solid grey'}}>  </div>
+    );
+};
+
+const UserAvatar = ({avatar}) => {
+    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={avatar} style={{userIcon: {color: 'black', width: '45px', height: '45px'}}} />
+        </div>
+    );
+};
+
+const AccountFooter = ({onLogout, onSettings, brandColor}) => {
+    return (
+        <div style={{display: 'flex', padding: '0 24px', marginTop: '18px', color: brandColor, fontWeight: 'bold', fontSize: '13px'}}>
+            <div style={{cursor: 'pointer'}} role='button'> Contact support </div>
+            <div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}>
+                {onSettings
+                    ? <div style={{marginRight: '16px', cursor: 'pointer'}} onClick={onSettings} role='button'> Settings </div>
+                    : null
+                }
+                <div style={{cursor: 'pointer'}} onClick={onLogout} role='button'> Logout </div>
+            </div>
+        </div>
+    );
+};
+
+const UserHeader = ({member}) => {
+    const avatar = member.avatar_image;
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '12px'}}>
+            <UserAvatar avatar={avatar} />
+            <div style={{fontSize: '21px', fontWeight: '500', marginTop: '6px'}}> Your Account </div>
+        </div>
+    );
+};
+
 class FreeAccountHomePage extends React.Component {
     static contextType = ParentContext;
 
@@ -12,54 +66,6 @@ class FreeAccountHomePage extends React.Component {
         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) {
         this.context.onAction('switchPage', {
             page: 'accountProfile',
@@ -74,18 +80,6 @@ class FreeAccountHomePage extends React.Component {
         });
     }
 
-    renderAccountFooter() {
-        return (
-            <div style={{display: 'flex', padding: '0 24px', marginTop: '18px', 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={{marginRight: '16px', cursor: 'pointer'}} onClick={e => this.openSettings(e)} role='button'> Settings </div>
-                    <div style={{cursor: 'pointer'}} onClick={e => this.handleSignout(e)} role='button'> Logout </div>
-                </div>
-            </div>
-        );
-    }
-
     renderAccountDetail(e) {
         const {name, firstname, email} = this.context.member;
         const siteTitle = this.context.site.title;
@@ -101,25 +95,13 @@ class FreeAccountHomePage extends React.Component {
         );
     }
 
-    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() {
+        const {member, brandColor} = this.context;
         return (
             <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
-                {this.renderUserHeader()}
+                <UserHeader member={member} />
                 {this.renderAccountDetail()}
-                {this.renderAccountFooter()}
+                <AccountFooter onLogout={e => this.handleSignout(e)} onSettings={e => this.openSettings(e)} brandColor={brandColor} />
             </div>
         );
     }
@@ -133,58 +115,6 @@ class PaidAccountHomePage extends React.Component {
         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',
@@ -192,17 +122,6 @@ class PaidAccountHomePage extends React.Component {
         });
     }
 
-    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;
@@ -217,12 +136,6 @@ class PaidAccountHomePage extends React.Component {
         );
     }
 
-    renderDivider() {
-        return (
-            <div style={{borderBottom: '1px solid grey'}}>  </div>
-        );
-    }
-
     getPlanLabel({amount = 0, currency_symbol: currencySymbol = '$', interval}) {
         return `${currencySymbol}${amount / 100} / ${interval}`;
     }
@@ -318,28 +231,16 @@ class PaidAccountHomePage extends React.Component {
         );
     }
 
-    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() {
+        const {member, brandColor} = this.context;
         return (
             <div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
-                {this.renderUserHeader()}
+                <UserHeader member={member} />
                 {this.renderAccountWelcome()}
-                {this.renderDivider()}
+                <Divider />
                 {this.renderAccountDetails()}
-                {this.renderDivider()}
-                {this.renderAccountFooter()}
+                <Divider />
+                <AccountFooter onLogout={e => this.handleSignout(e)} brandColor={brandColor} />
             </div>
         );
     }