Revert to 0.10.17 (#110)

There is a bug in these version where Portal does not load correctly after a successful Stripe Checkout. We are reverting until we can determine the cause of the bug and fix it * Revert "v0.11.1" This reverts commit 828c4d5. * Revert "Fixed incorrect link/path handling" This reverts commit 9d853be. * Revert "v0.11.0" This reverts commit 16c2224. * Revert "Updated portal direct checkout links to use path" This reverts commit d26fad1. * Revert "Added direct links for monthly/yearly checkout" This reverts commit bbea4f7. * Revert "Added user select style to plan container" This reverts commit a665ca5. * Revert "Refined copy" This reverts commit 32d4949. * Revert "Account home page refinements" This reverts commit 6587eca. * Revert "Notification refinements" This reverts commit 23c75e3. * Revert "Added name to welcome notification" This reverts commit 7220049. * Revert "Refined notification" This reverts commit d1c0915.
TryGhost · Nov 18, 2020 · 741bfb6 · 741bfb6
1 parent 828c4d5
commit 741bfb6
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 113 deletions.
diff --git a/ghost/portal/package.json b/ghost/portal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "0.11.1",
+  "version": "0.10.17",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
@@ -16,7 +16,7 @@ const DEV_MODE_DATA = {
     showPopup: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
-    page: 'accountPlan'
+    page: 'accountHome'
 };
 export default class App extends React.Component {
     constructor(props) {
@@ -62,14 +62,12 @@ 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 {page, pageQuery} = this.getPageFromLinkPath(pagePath) || {};
+            const pageFromPath = this.getPageFromPath(pagePath);
 
-            if (page) {
-                this.onAction('openPopup', {page, pageQuery});
-            }
+            event.preventDefault();
+            this.onAction('openPopup', {page: pageFromPath});
         };
         const customTriggerSelector = '[data-portal]';
         const popupCloseClass = 'gh-members-popup-close';
@@ -98,13 +96,12 @@ 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, pageQuery} = await this.fetchData();
+            const {site, member, page, showPopup, popupNotification, lastPage} = await this.fetchData();
             this.setState({
                 site,
                 member,
                 page,
                 lastPage,
-                pageQuery,
                 showPopup,
                 popupNotification,
                 action: 'init:success',
@@ -229,12 +226,11 @@ export default class App extends React.Component {
         const linkRegex = /^\/portal(?:\/(\w+(?:\/\w+)?))?$/;
         if (path && linkRegex.test(path)) {
             const [,pagePath] = path.match(linkRegex);
-            const {page, pageQuery} = this.getPageFromLinkPath(pagePath) || {};
+            const page = this.getPageFromPath(pagePath);
             const lastPage = ['accountPlan', 'accountProfile'].includes(page) ? 'accountHome' : null;
             return {
                 showPopup: true,
                 ...(page ? {page} : {}),
-                ...(pageQuery ? {pageQuery} : {}),
                 ...(lastPage ? {lastPage} : {})
             };
         }
@@ -337,41 +333,6 @@ 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 || {};
@@ -414,15 +375,14 @@ export default class App extends React.Component {
 
     /**Get final App level context from data/state*/
     getContextFromState() {
-        const {site, member, action, page, lastPage, showPopup, pageQuery, popupNotification} = this.state;
+        const {site, member, action, page, lastPage, showPopup, 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,

diff --git a/ghost/portal/src/actions.js b/ghost/portal/src/actions.js
@@ -17,8 +17,7 @@ function togglePopup({state}) {
 function openPopup({data}) {
     return {
         showPopup: true,
-        page: data.page,
-        ...(data.pageQuery ? {pageQuery: data.pageQuery} : {})
+        page: data.page
     };
 }
 
@@ -37,7 +36,6 @@ function closePopup({state}) {
     return {
         showPopup: false,
         lastPage: null,
-        pageQuery: '',
         popupNotification: null,
         page: state.page === 'magiclink' ? '' : state.page
     };

diff --git a/ghost/portal/src/components/Notification.js b/ghost/portal/src/components/Notification.js
@@ -29,23 +29,22 @@ 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{(firstname ? ', ' + firstname : '')}!<br />You've successfully signed in.
+                Welcome back! 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 <br /><strong>{context.site.title}</strong>
+                You've successfully subscribed to <strong>{context.site.title}</strong>
             </p>
         );
     } else if (type === 'updateEmail' && status === 'success') {
@@ -63,7 +62,7 @@ const NotificationText = ({type, status, context}) => {
     } else if (type === 'signup' && status === 'error') {
         return (
             <p>
-                Signup error: Invalid link <br /><a href={singupPortalLink} target="_parent">Click here to retry</a>
+                Could not sign up! Invalid sign up link. <a href={singupPortalLink} target="_parent">Click here to retry</a>
             </p>
         );
     } else if (type === 'stripe:checkout' && status === 'success') {

diff --git a/ghost/portal/src/components/Notification.styles.js b/ghost/portal/src/components/Notification.styles.js
@@ -15,7 +15,7 @@ const NotificationStyles = `
         top: 12px;
         right: 12px;
         width: 100%;
-        padding: 14px 44px 18px 20px;
+        padding: 10px 44px 12px 20px;
         max-width: 380px;
         min-height: 66px;
         font-size: 1.3rem;
@@ -39,7 +39,6 @@ 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;
@@ -63,7 +62,7 @@ const NotificationStyles = `
 
     .gh-portal-notification-icon {
         position: absolute;
-        top: calc(50% - 14px);
+        top: 17px;
         left: 17px;
         width: 28px;
         height: 28px;

diff --git a/ghost/portal/src/components/common/PlansSection.js b/ghost/portal/src/components/common/PlansSection.js
@@ -20,7 +20,6 @@ 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 {
@@ -262,7 +261,6 @@ 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';
@@ -272,7 +270,6 @@ 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;
 
@@ -282,7 +279,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'>{displayName || name}</h4>
+                <h4 className='gh-portal-plan-name'>{name}</h4>
                 <PriceLabel name={name} currency={currency} price={price} />
                 <div className='gh-portal-plan-featurewrapper'>
                     <div className='gh-portal-plan-feature'>

diff --git a/ghost/portal/src/components/pages/AccountHomePage.js b/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)}>Sign out</button></li>
+                <li><button className='gh-portal-btn' name='logout' aria-label='logout' onClick={e => handleSignout(e)}>Logout</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="View plans"
+            label="Upgrade now"
             onClick={() => openSubscribe()}
             brandColor={brandColor}
             style={{width: '100%'}}
@@ -256,28 +256,24 @@ 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) {
-        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 null;
     }
 
     return (
         <div className='gh-portal-section'>
-            <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>
+            <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>
             <SubscribeButton action={action} site={site} openSubscribe={openSubscribe} brandColor={brandColor} />
         </div>
     );
@@ -307,7 +303,9 @@ const CancelContinueSubscription = ({member, onAction, action, brandColor, showO
         }
         const currentPeriodEnd = subscription.current_period_end;
         return (
-            <p className='gh-portal-text-center gh-portal-free-ctatext'>Your subscription will expire on {getDateString(currentPeriodEnd)}</p>
+            <p className="gh-portal-expire-warning">
+                Your subscription will expire on {getDateString(currentPeriodEnd)}.
+            </p>
         );
     };
 

diff --git a/ghost/portal/src/components/pages/AccountPlanPage.js b/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 = 'today';
+        planStartDate = 'immediately';
     }
     const planStartMessage = `${plan.currency}${plan.price}/${plan.type} – Starting ${planStartDate}`;
     if (type === 'changePlan') {

diff --git a/ghost/portal/src/components/pages/MagicLinkPage.js b/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>We've sent you a login link!</h2>
+                    <h2>Check your inbox!</h2>
                 </header>
-                <p>If the email doesn't arrive in 3 minutes, be sure to check your spam folder!</p>
+                <p>Check your inbox and click on the login link to complete the signin.</p>
             </section>
         );
     }

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

diff --git a/ghost/portal/src/components/pages/SigninPage.js b/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...' : 'Continue';
+        let label = isRunning ? 'Sending login link...' : 'Send login link';
         const disabled = isRunning ? true : false;
         if (action === 'signin:failed') {
             label = 'Retry';

diff --git a/ghost/portal/src/components/pages/SigninPage.test.js b/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: 'Continue'});
+    const submitButton = utils.queryByRole('button', {name: 'Send login link'});
     const signupButton = utils.queryByRole('button', {name: 'Sign up'});
     return {
         emailInput,