Revert "Revert to 0.10.17 (#110)"

This reverts commit 741bfb6.

The revert was done to resolve an urgent bug fix which was breaking Portal script in case of any notification

ghost/portal/src/App.js

@@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'accountHome'
+    page: 'accountPlan'
 };
 export default class App extends React.Component {
     constructor(props) {
@@ -62,12 +62,14 @@ export default class App extends React.Component {
     setupCustomTriggerButton() {
         // Handler for custom buttons
         this.clickHandler = (event) => {
+            event.preventDefault();
             const target = event.currentTarget;
             const pagePath = (target && target.dataset.portal);
-            const pageFromPath = this.getPageFromPath(pagePath);
+            const {page, pageQuery} = this.getPageFromLinkPath(pagePath) || {};
 
-            event.preventDefault();
-            this.onAction('openPopup', {page: pageFromPath});
+            if (page) {
+                this.onAction('openPopup', {page, pageQuery});
+            }
         };
         const customTriggerSelector = '[data-portal]';
         const popupCloseClass = 'gh-members-popup-close';
@@ -96,12 +98,13 @@ export default class App extends React.Component {
     async initSetup() {
         try {
             // Fetch data from API, links, preview, dev sources
-            const {site, member, page, showPopup, popupNotification, lastPage} = await this.fetchData();
+            const {site, member, page, showPopup, popupNotification, lastPage, pageQuery} = await this.fetchData();
             this.setState({
                 site,
                 member,
                 page,
                 lastPage,
+                pageQuery,
                 showPopup,
                 popupNotification,
                 action: 'init:success',
@@ -226,11 +229,12 @@ export default class App extends React.Component {
         const linkRegex = /^\/portal(?:\/(\w+(?:\/\w+)?))?$/;
         if (path && linkRegex.test(path)) {
             const [,pagePath] = path.match(linkRegex);
-            const page = this.getPageFromPath(pagePath);
+            const {page, pageQuery} = this.getPageFromLinkPath(pagePath) || {};
             const lastPage = ['accountPlan', 'accountProfile'].includes(page) ? 'accountHome' : null;
             return {
                 showPopup: true,
                 ...(page ? {page} : {}),
+                ...(pageQuery ? {pageQuery} : {}),
                 ...(lastPage ? {lastPage} : {})
             };
         }
@@ -333,6 +337,41 @@ export default class App extends React.Component {
         }
     }
 
+    /**Get Portal page from Link/Data-attribute path*/
+    getPageFromLinkPath(path) {
+        if (path === 'signup') {
+            return {
+                page: 'signup'
+            };
+        } else if (path === 'signup/monthly') {
+            return {
+                page: 'signup',
+                pageQuery: 'monthly'
+            };
+        } else if (path === 'signup/yearly') {
+            return {
+                page: 'signup',
+                pageQuery: 'yearly'
+            };
+        } else if (path === 'signin') {
+            return {
+                page: 'signin'
+            };
+        } else if (path === 'account') {
+            return {
+                page: 'accountHome'
+            };
+        } else if (path === 'account/plans') {
+            return {
+                page: 'accountPlan'
+            };
+        } else if (path === 'account/profile') {
+            return {
+                page: 'accountProfile'
+            };
+        }
+    }
+
     /**Get Accent color from site data, fallback to default*/
     getAccentColor() {
         const {accent_color: accentColor = '#3db0ef'} = this.state.site || {};
@@ -375,14 +414,15 @@ export default class App extends React.Component {
 
     /**Get final App level context from data/state*/
     getContextFromState() {
-        const {site, member, action, page, lastPage, showPopup, popupNotification} = this.state;
+        const {site, member, action, page, lastPage, showPopup, pageQuery, popupNotification} = this.state;
         const contextPage = this.getContextPage({page, member});
         const contextMember = this.getContextMember({page: contextPage, member});
         return {
             site,
             action,
             brandColor: this.getAccentColor(),
             page: contextPage,
+            pageQuery,
             member: contextMember,
             lastPage,
             showPopup,

ghost/portal/src/actions.js

@@ -17,7 +17,8 @@ function togglePopup({state}) {
 function openPopup({data}) {
     return {
         showPopup: true,
-        page: data.page
+        page: data.page,
+        ...(data.pageQuery ? {pageQuery: data.pageQuery} : {})
     };
 }
 
@@ -36,6 +37,7 @@ function closePopup({state}) {
     return {
         showPopup: false,
         lastPage: null,
+        pageQuery: '',
         popupNotification: null,
         page: state.page === 'magiclink' ? '' : state.page
     };

ghost/portal/src/components/Notification.js

@@ -29,22 +29,23 @@ const Styles = () => {
 const NotificationText = ({type, status, context}) => {
     const signinPortalLink = getPortalLink({page: 'signin', siteUrl: context.site.url});
     const singupPortalLink = getPortalLink({page: 'signup', siteUrl: context.site.url});
+    const firstname = context.member.firstname;
     if (type === 'signin' && status === 'success') {
         return (
             <p>
-                Welcome back! You've successfully signed in.
+                Welcome back{(firstname ? ', ' + firstname : '')}!<br />You've successfully signed in.
             </p>
         );
     } else if (type === 'signin' && status === 'error') {
         return (
             <p>
-                Could not sign in! Login link expired. <a href={signinPortalLink} target="_parent">Click here to retry</a>
+                Could not sign in. Login link expired. <a href={signinPortalLink} target="_parent">Click here to retry</a>
             </p>
         );
     } else if (type === 'signup' && status === 'success') {
         return (
             <p>
-                You've successfully subscribed to <strong>{context.site.title}</strong>
+                You've successfully subscribed to <br /><strong>{context.site.title}</strong>
             </p>
         );
     } else if (type === 'updateEmail' && status === 'success') {
@@ -62,7 +63,7 @@ const NotificationText = ({type, status, context}) => {
     } else if (type === 'signup' && status === 'error') {
         return (
             <p>
-                Could not sign up! Invalid sign up link. <a href={singupPortalLink} target="_parent">Click here to retry</a>
+                Signup error: Invalid link <br /><a href={singupPortalLink} target="_parent">Click here to retry</a>
             </p>
         );
     } else if (type === 'stripe:checkout' && status === 'success') {

ghost/portal/src/components/Notification.styles.js

@@ -15,7 +15,7 @@ const NotificationStyles = `
         top: 12px;
         right: 12px;
         width: 100%;
-        padding: 10px 44px 12px 20px;
+        padding: 14px 44px 18px 20px;
         max-width: 380px;
         min-height: 66px;
         font-size: 1.3rem;
@@ -39,6 +39,7 @@ const NotificationStyles = `
     .gh-portal-notification p {
         flex-grow: 1;
         font-size: 1.4rem;
+        line-height: 1.5em;
         text-align: left;
         margin: 0;
         padding: 0 0 0 40px;
@@ -62,7 +63,7 @@ const NotificationStyles = `
 
     .gh-portal-notification-icon {
         position: absolute;
-        top: 17px;
+        top: calc(50% - 14px);
         left: 17px;
         width: 28px;
         height: 28px;

ghost/portal/src/components/common/PlansSection.js

@@ -20,6 +20,7 @@ export const PlanSectionStyles = `
         border-right: 1px solid var(--grey10);
         padding: 16px 10px;
         cursor: pointer;
+        user-select: none;
     }
 
     .gh-portal-plans-container.disabled .gh-portal-plan-section {
@@ -261,6 +262,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
         const isChecked = selectedPlan === name;
         const classes = (isChecked ? 'gh-portal-plan-section checked' : 'gh-portal-plan-section');
         const planDetails = {};
+        let displayName = '';
         switch (name) {
         case 'Free':
             planDetails.feature = 'Free preview';
@@ -270,6 +272,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
             planDetails.feature = 'Full access';
             break;
         case 'Yearly':
+            displayName = 'Annually';
             planDetails.feature = ((hasMonthlyPlan && discount > 0) ? (discount + '% discount') : 'Full access');
             break;
 
@@ -279,7 +282,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect, changePlan}) {
         return (
             <div className={classes} key={name} onClick={e => onPlanSelect(e, name)}>
                 <Checkbox name={name} isChecked={isChecked} onPlanSelect={onPlanSelect} />
-                <h4 className='gh-portal-plan-name'>{name}</h4>
+                <h4 className='gh-portal-plan-name'>{displayName || name}</h4>
                 <PriceLabel name={name} currency={currency} price={price} />
                 <div className='gh-portal-plan-featurewrapper'>
                     <div className='gh-portal-plan-feature'>

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

@@ -107,7 +107,7 @@ const AccountFooter = ({onClose, handleSignout, supportAddress = ''}) => {
     return (
         <footer className='gh-portal-account-footer'>
             <ul className='gh-portal-account-footermenu'>
-                <li><button className='gh-portal-btn' name='logout' aria-label='logout' onClick={e => handleSignout(e)}>Logout</button></li>
+                <li><button className='gh-portal-btn' name='logout' aria-label='logout' onClick={e => handleSignout(e)}>Sign out</button></li>
             </ul>
             <div className='gh-portal-account-footerright'>
                 <ul className='gh-portal-account-footermenu'>
@@ -175,7 +175,7 @@ const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => {
         return (
             <section>
                 <div className='gh-portal-list-detail'>
-                    <h3>Billing Info</h3>
+                    <h3>Billing info</h3>
                     <CardLabel defaultCardLast4={defaultCardLast4} />
                 </div>
                 <button className='gh-portal-btn gh-portal-btn-list' onClick={e => onEditBilling(e)}>{label}</button>
@@ -247,7 +247,7 @@ const SubscribeButton = ({site, action, openSubscribe, brandColor}) => {
     return (
         <ActionButton
             isRunning={isRunning}
-            label="Upgrade now"
+            label="View plans"
             onClick={() => openSubscribe()}
             brandColor={brandColor}
             style={{width: '100%'}}
@@ -256,24 +256,28 @@ const SubscribeButton = ({site, action, openSubscribe, brandColor}) => {
 };
 
 const AccountWelcome = ({member, action, site, openSubscribe, brandColor}) => {
-    const {name, firstname, email} = member;
-    const {title: siteTitle} = site;
     const {is_stripe_configured: isStripeConfigured} = site;
 
     if (!isStripeConfigured) {
         return null;
     }
 
     if (member.paid) {
-        return null;
+        const subscription = getMemberSubscription({member});
+        const currentPeriodEnd = subscription.current_period_end;
+        if (subscription.cancel_at_period_end) {
+            return null;
+        }
+        return (
+            <div className='gh-portal-section'>
+                <p className='gh-portal-text-center gh-portal-free-ctatext'>Your subscription will renew on {getDateString(currentPeriodEnd)}</p>
+            </div>
+        );
     }
 
     return (
         <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>
+            <p className='gh-portal-text-center gh-portal-free-ctatext'>You currently have a free membership, upgrade to a paid subscription for full access.</p>
             <SubscribeButton action={action} site={site} openSubscribe={openSubscribe} brandColor={brandColor} />
         </div>
     );
@@ -303,9 +307,7 @@ const CancelContinueSubscription = ({member, onAction, action, brandColor, showO
         }
         const currentPeriodEnd = subscription.current_period_end;
         return (
-            <p className="gh-portal-expire-warning">
-                Your subscription will expire on {getDateString(currentPeriodEnd)}.
-            </p>
+            <p className='gh-portal-text-center gh-portal-free-ctatext'>Your subscription will expire on {getDateString(currentPeriodEnd)}</p>
         );
     };
 

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

@@ -110,7 +110,7 @@ const PlanConfirmationSection = ({action, member, plan, type, brandColor, onConf
     let planStartDate = getDateString(subscription.current_period_end);
     const currentActivePlan = getMemberActivePlan({member});
     if (currentActivePlan.type !== plan.type) {
-        planStartDate = 'immediately';
+        planStartDate = 'today';
     }
     const planStartMessage = `${plan.currency}${plan.price}/${plan.type} – Starting ${planStartDate}`;
     if (type === 'changePlan') {

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

@@ -31,9 +31,9 @@ export default class MagicLinkPage extends React.Component {
             <section className='gh-portal-inbox-notification'>
                 <header className='gh-portal-header'>
                     <EnvelopeIcon className='gh-portal-icon gh-portal-icon-envelope' />
-                    <h2>Check your inbox!</h2>
+                    <h2>We've sent you a login link!</h2>
                 </header>
-                <p>Check your inbox and click on the login link to complete the signin.</p>
+                <p>If the email doesn't arrive in 3 minutes, be sure to check your spam folder!</p>
             </section>
         );
     }

ghost/portal/src/components/pages/MagicLinkPage.test.js

@@ -6,7 +6,7 @@ const setup = (overrides) => {
     const {mockOnActionFn, ...utils} = render(
         <MagicLinkPage />
     );
-    const inboxText = utils.getByText(/check your inbox!/i);
+    const inboxText = utils.getByText(/we've sent you a login link/i);
     const closeBtn = utils.queryByRole('button', {name: 'Close'});
     return {
         inboxText,

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

@@ -74,7 +74,7 @@ export default class SigninPage extends React.Component {
         const {action} = this.context;
         let retry = false;
         const isRunning = (action === 'signin:running');
-        let label = isRunning ? 'Sending login link...' : 'Send login link';
+        let label = isRunning ? 'Sending login link...' : 'Continue';
         const disabled = isRunning ? true : false;
         if (action === 'signin:failed') {
             label = 'Retry';

ghost/portal/src/components/pages/SigninPage.test.js

@@ -12,7 +12,7 @@ const setup = (overrides) => {
         }
     );
     const emailInput = utils.getByLabelText(/email/i);
-    const submitButton = utils.queryByRole('button', {name: 'Send login link'});
+    const submitButton = utils.queryByRole('button', {name: 'Continue'});
     const signupButton = utils.queryByRole('button', {name: 'Sign up'});
     return {
         emailInput,

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

@@ -5,7 +5,7 @@ import PlansSection from '../common/PlansSection';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
 import CalculateDiscount from '../../utils/discount';
-import {getSitePlans, hasOnlyFreePlan} from '../../utils/helpers';
+import {capitalize, getSitePlans, hasOnlyFreePlan, hasPlan} from '../../utils/helpers';
 import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
 
 const React = require('react');
@@ -149,7 +149,7 @@ class SignupPage extends React.Component {
     }
 
     componentDidMount() {
-        const {member} = this.context;
+        const {member, site, pageQuery = ''} = this.context;
         if (member) {
             this.context.onAction('switchPage', {
                 page: 'accountHome'
@@ -158,6 +158,10 @@ class SignupPage extends React.Component {
 
         // Handle the default plan if not set
         const plans = this.getPlans();
+
+        if (['monthly', 'yearly'].includes(pageQuery) && hasPlan({site, plan: pageQuery})) {
+            this.context.onAction('signup', {plan: capitalize(pageQuery)});
+        }
         const selectedPlan = this.state.plan;
         const defaultSelectedPlan = this.getDefaultSelectedPlan(plans, this.state.plan);
         if (defaultSelectedPlan !== selectedPlan) {
@@ -387,7 +391,7 @@ class SignupPage extends React.Component {
                     style={{color: brandColor}}
                     onClick={() => onAction('switchPage', {page: 'signin'})}
                 >
-                    Log in
+                    Sign in
                 </button>
             </div>
         );
@@ -442,7 +446,7 @@ class SignupPage extends React.Component {
 
     renderFormHeader() {
         const {site} = this.context;
-        const siteTitle = site.title || 'Site Title';
+        const siteTitle = site.title || '';
 
         return (
             <header className='gh-portal-signup-header'>