Updated change Plan UX

no issue

- Updates various flows to update/change plan for a member
- Adds a confirmation step for different change plan actions
- Adds new helpers for plans and members
- Updates Account plan page to use more streamlined components
- Fixed lint

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

@@ -37,9 +37,7 @@ function ActionButton({label = 'Back', brandColor = '#3eb0ef', hidden = false, o
     if (hidden) {
         return;
     }
-    let style = {
-        color: brandColor
-    };
+
     return (
         <button className='gh-portal-btn gh-portal-btn-back' onClick={e => onClick(e)}>
             <LeftArrowIcon /> {label}

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

@@ -173,7 +173,7 @@ export const PlanSectionStyles = `
         opacity: 0;
         transition: all 0.2s ease-in-out;
     }
-    
+
     .gh-portal-plan-section:not(.checked):hover::before {
         opacity: 0.5;
     }
@@ -195,7 +195,7 @@ export const PlanSectionStyles = `
     .gh-portal-plan-section:not(.checked).show-check-onhover:hover .checkmark:before {
         opacity: 0.2;
     }
-    
+
     .gh-portal-plan-section:not(.checked).show-check-onhover .checkmark:after {
         display: block;
         opacity: 0;
@@ -255,7 +255,7 @@ function PlanOptions({plans, selectedPlan, onPlanSelect}) {
         case 'Yearly':
             planDetails.feature = ((hasMonthlyPlan && discount > 0) ? (discount + '% discount') : 'Full access');
             break;
-    
+
         default:
             break;
         }
@@ -289,7 +289,7 @@ function PlansSection({plans, showLabel = true, selectedPlan, onPlanSelect, styl
     return (
         <section>
             <PlanLabel showLabel={showLabel} />
-            <div className={'gh-portal-plans-container ' + plansContainerClass}>
+            <div className={`gh-portal-plans-container ${plansContainerClass}`}>
                 <PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} />
             </div>
         </section>

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

@@ -2,7 +2,7 @@ import AppContext from '../../AppContext';
 import MemberAvatar from '../common/MemberGravatar';
 import ActionButton from '../common/ActionButton';
 import Switch from '../common/Switch';
-import {getMemberSubscription, isMemberComplimentary} from '../../utils/helpers';
+import {getMemberSubscription, hasOnlyFreePlan, isComplimentaryMember} from '../../utils/helpers';
 import {getDateString} from '../../utils/date-time';
 
 const React = require('react');
@@ -117,7 +117,7 @@ const UserHeader = ({member, brandColor}) => {
     );
 };
 
-const PaidAccountActions = ({member, openUpdatePlan, onEditBilling}) => {
+const PaidAccountActions = ({member, site, openUpdatePlan, onEditBilling}) => {
     const PlanLabel = ({plan, isComplimentary}) => {
         const {amount = 0, currency_symbol: currencySymbol = '$', interval} = plan;
         let label = `${currencySymbol}${amount / 100}/${interval}`;
@@ -132,7 +132,7 @@ const PaidAccountActions = ({member, openUpdatePlan, onEditBilling}) => {
     };
 
     const PlanUpdateButton = ({isComplimentary}) => {
-        if (isComplimentary) {
+        if (isComplimentary || hasOnlyFreePlan({site})) {
             return null;
         }
         return (
@@ -169,7 +169,7 @@ const PaidAccountActions = ({member, openUpdatePlan, onEditBilling}) => {
 
     const subscription = getMemberSubscription({member});
     if (subscription) {
-        let isComplimentary = isMemberComplimentary({member});
+        let isComplimentary = isComplimentaryMember({member});
         const {
             plan,
             default_payment_card_last4: defaultCardLast4
@@ -190,7 +190,7 @@ const PaidAccountActions = ({member, openUpdatePlan, onEditBilling}) => {
     return null;
 };
 
-const AccountActions = ({member, action, openEditProfile, openUpdatePlan, onEditBilling, onToggleSubscription}) => {
+const AccountActions = ({member, site, action, openEditProfile, openUpdatePlan, onEditBilling, onToggleSubscription}) => {
     const {name, email, subscribed} = member;
 
     let label = subscribed ? 'Subscribed to email newsletters' : 'Not subscribed to email newsletters';
@@ -207,7 +207,7 @@ const AccountActions = ({member, action, openEditProfile, openUpdatePlan, onEdit
                 <button className='gh-portal-btn gh-portal-btn-list' onClick={e => openEditProfile(e)}>Edit</button>
             </section>
 
-            <PaidAccountActions member={member} onEditBilling={onEditBilling} openUpdatePlan={openUpdatePlan} />
+            <PaidAccountActions site={site} member={member} onEditBilling={onEditBilling} openUpdatePlan={openUpdatePlan} />
 
             <section>
                 <div className='gh-portal-list-detail'>
@@ -224,19 +224,25 @@ const AccountActions = ({member, action, openEditProfile, openUpdatePlan, onEdit
     );
 };
 
-const SubscribeButton = ({site, openSubscribe, brandColor}) => {
+const SubscribeButton = ({site, action, openSubscribe, brandColor}) => {
     const {is_stripe_configured: isStripeConfigured} = site;
 
-    if (!isStripeConfigured) {
+    if (!isStripeConfigured || hasOnlyFreePlan({site})) {
         return null;
     }
-
+    const isRunning = ['checkoutPlan:running'].includes(action);
     return (
-        <ActionButton label="Subscribe now" onClick={() => openSubscribe()} brandColor={brandColor} style={{width: '100%'}} />
+        <ActionButton
+            isRunning={isRunning}
+            label="Subscribe now"
+            onClick={() => openSubscribe()}
+            brandColor={brandColor}
+            style={{width: '100%'}}
+        />
     );
 };
 
-const AccountWelcome = ({member, site, openSubscribe, brandColor}) => {
+const AccountWelcome = ({member, action, site, openSubscribe, brandColor}) => {
     const {name, firstname, email} = member;
     const {title: siteTitle} = site;
     const {is_stripe_configured: isStripeConfigured} = site;
@@ -255,7 +261,7 @@ const AccountWelcome = ({member, site, openSubscribe, brandColor}) => {
                 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 site={site} openSubscribe={openSubscribe} brandColor={brandColor} />
+            <SubscribeButton action={action} site={site} openSubscribe={openSubscribe} brandColor={brandColor} />
         </div>
     );
 };
@@ -318,7 +324,7 @@ const AccountMain = ({member, site, onAction, action, openSubscribe, brandColor,
         <div className='gh-portal-account-main'>
             <UserHeader member={member} brandColor={brandColor} />
             <section>
-                <AccountWelcome member={member} site={site} openSubscribe={e => openSubscribe(e)} brandColor={brandColor} />
+                <AccountWelcome action={action} member={member} site={site} openSubscribe={e => openSubscribe(e)} brandColor={brandColor} />
                 <CancelContinueSubscription
                     member={member}
                     onAction={onAction}
@@ -328,6 +334,7 @@ const AccountMain = ({member, site, onAction, action, openSubscribe, brandColor,
                 <AccountActions
                     action={action}
                     member={member}
+                    site={site}
                     openEditProfile={e => openEditProfile(e)}
                     onToggleSubscription={(e, subscribed) => onToggleSubscription(e, subscribed)}
                     openUpdatePlan={(e, subscribed) => openUpdatePlan(e, subscribed)}
@@ -364,6 +371,11 @@ export default class AccountHomePage extends React.Component {
         });
     }
 
+    checkoutPlan(plan) {
+        const {onAction} = this.context;
+        onAction('checkoutPlan', {plan: plan.name});
+    }
+
     openUpdatePlan() {
         const {is_stripe_configured: isStripeConfigured} = this.context.site;
         if (isStripeConfigured) {

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

@@ -3,7 +3,7 @@ import ActionButton from '../common/ActionButton';
 import BackButton from '../common/BackButton';
 import PlansSection from '../common/PlansSection';
 import {getDateString} from '../../utils/date-time';
-import {getMemberSubscription, getPlanFromSubscription, getSitePlans, getSubscriptionFromId} from '../../utils/helpers';
+import {getMemberActivePlan, getMemberSubscription, getPlanFromSubscription, getSitePlans, getSubscriptionFromId, isPaidMember} from '../../utils/helpers';
 
 export const AccountPlanPageStyles = `
     .gh-portal-accountplans-main {
@@ -41,7 +41,7 @@ const GlobalError = ({message, style}) => {
     );
 };
 
-export const CancelContinueSubscription = ({member, onCancelContinueSubscription, onAction, action, brandColor, showOnlyContinue = false}) => {
+const CancelContinueSubscription = ({member, onCancelContinueSubscription, onAction, action, brandColor, showOnlyContinue = false}) => {
     if (!member.paid) {
         return null;
     }
@@ -54,6 +54,11 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
     if (showOnlyContinue && !subscription.cancel_at_period_end) {
         return null;
     }
+
+    // Hide the button if subscription is due cancellation
+    if (subscription.cancel_at_period_end) {
+        return null;
+    }
     const label = subscription.cancel_at_period_end ? 'Continue subscription' : 'Cancel subscription';
     const isRunning = ['cancelSubscription:running'].includes(action);
     const disabled = (isRunning) ? true : false;
@@ -77,10 +82,6 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
             <CancelNotice />
             <ActionButton
                 onClick={(e) => {
-                    // onAction('cancelSubscription', {
-                    //     subscriptionId: subscription.id,
-                    //     cancelAtPeriodEnd: !subscription.cancel_at_period_end
-                    // });
                     onCancelContinueSubscription({
                         subscriptionId: subscription.id,
                         cancelAtPeriodEnd: !subscription.cancel_at_period_end
@@ -100,54 +101,20 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
     );
 };
 
-const Header = ({member, brandColor, onBack, showConfirmation, confirmationType}) => {
+const Header = ({member, lastPage, brandColor, onBack, showConfirmation, confirmationType}) => {
     let title = member.paid ? 'Choose plan' : 'Choose your plan';
     if (showConfirmation) {
         title = getConfirmationPageTitle({confirmationType});
     }
     return (
         <header className='gh-portal-detail-header'>
-            <BackButton brandColor={brandColor} onClick={e => onBack(e)} />
+            {lastPage ? <BackButton brandColor={brandColor} onClick={e => onBack(e)} /> : null}
             <h3 className='gh-portal-main-title'>{title}</h3>
         </header>
     );
 };
 
-const Footer = ({member, action, plan, brandColor, onPlanCheckout, onBack}) => {
-    return (
-        <footer className='gh-portal-action-footer'>
-            <button className='gh-portal-btn' onClick={e => onBack(e)}>Cancel</button>
-            <SubmitButton
-                member={member}
-                action={action}
-                plan={plan}
-                brandColor={brandColor}
-                onPlanCheckout={onPlanCheckout}
-            />
-        </footer>
-    );
-};
-
-const SubmitButton = ({member, action, plan, brandColor, onPlanCheckout}) => {
-    const isRunning = ['updateSubscription:running', 'checkoutPlan:running'].includes(action);
-    const label = member.paid ? 'Change Plan' : 'Continue';
-    const disabled = (isRunning || !plan) ? true : false;
-    const subscription = getMemberSubscription({member});
-    const isPrimary = (!subscription || !subscription.cancel_at_period_end);
-    return (
-        <ActionButton
-            onClick={e => onPlanCheckout(e)}
-            disabled={disabled}
-            isRunning={isRunning}
-            isPrimary={isPrimary}
-            brandColor={brandColor}
-            label={label}
-            style={{height: '40px'}}
-        />
-    );
-};
-
-const PlanConfirmation = ({plan, type, brandColor, onConfirm, member}) => {
+const PlanConfirmation = ({action, member, plan, type, brandColor, onConfirm}) => {
     let actionDescription = '';
     let confirmMessage = 'Are you sure ?';
     if (type === 'changePlan') {
@@ -158,6 +125,7 @@ const PlanConfirmation = ({plan, type, brandColor, onConfirm, member}) => {
         const subscription = getMemberSubscription({member});
         actionDescription = `If you confirm and end your subscription now, you can still access it until ${getDateString(subscription.current_period_end)}`;
     }
+    const isRunning = ['updateSubscription:running', 'checkoutPlan:running', 'cancelSubscription:running'].includes(action);
     const label = 'Confirm';
     return (
         <div>
@@ -165,7 +133,7 @@ const PlanConfirmation = ({plan, type, brandColor, onConfirm, member}) => {
             <div> {confirmMessage} </div>
             <ActionButton
                 onClick={e => onConfirm(e, plan)}
-                isRunning={false}
+                isRunning={isRunning}
                 isPrimary={true}
                 brandColor={brandColor}
                 label={label}
@@ -204,12 +172,13 @@ const PlanMain = ({
     if (!showConfirmation) {
         return (
             <PlanChooser
-                {...{plans, selectedPlan, errors, member, onAction, onCancelContinueSubscription, action, brandColor, onPlanSelect}}
+                {...{plans, selectedPlan, errors, member, action, brandColor,
+                    onAction, onCancelContinueSubscription, onPlanSelect}}
             />
         );
     }
     return (
-        <PlanConfirmation {...{plan: confirmationPlan, type: confirmationType, onConfirm, member}}/>
+        <PlanConfirmation {...{action, member, plan: confirmationPlan, type: confirmationType, onConfirm}}/>
     );
 };
 export default class AccountPlanPage extends React.Component {
@@ -217,19 +186,29 @@ export default class AccountPlanPage extends React.Component {
 
     constructor(props, context) {
         super(props, context);
-        const {member} = this.context;
-        const {site} = this.context;
-        this.plans = getSitePlans({site});
-        let activePlan = this.getActivePlan({member});
+        this.state = this.getInitialState();
+    }
+
+    getInitialState() {
+        const {member, site} = this.context;
+        this.plans = getSitePlans({site, includeFree: false});
+        let activePlan = getMemberActivePlan({member});
         const selectedPlan = activePlan ? this.plans.find((d) => {
             return (d.name === activePlan.name && d.price === activePlan.price && d.currency === activePlan.currency);
         }) : null;
-        // const activePlanExists = this.plans.some(d => d.name === activePlan);
-        // if (!activePlanExists) {
-        //     activePlan = this.plans[0].name;
-        // }
-        this.state = {
-            plan: selectedPlan ? selectedPlan.name : null
+        const isFreeMember = !isPaidMember({member});
+        const selectedPlanName = selectedPlan ? selectedPlan.name : null;
+        if (isFreeMember && this.plans.length === 1) {
+            return {
+                selectedPlan: selectedPlanName,
+                showConfirmation: true,
+                isDirectConfirmation: true,
+                confirmationPlan: this.plans[0],
+                confirmationType: 'subscribe'
+            };
+        }
+        return {
+            selectedPlan: selectedPlanName
         };
     }
 
@@ -239,7 +218,7 @@ export default class AccountPlanPage extends React.Component {
     }
 
     onBack(e) {
-        if (this.state.showConfirmation) {
+        if (this.state.showConfirmation && !this.state.isDirectConfirmation) {
             this.cancelConfirmPage();
         } else {
             this.context.onAction('back');
@@ -254,29 +233,6 @@ export default class AccountPlanPage extends React.Component {
         });
     }
 
-    onPlanCheckoutOld(e) {
-        e.preventDefault();
-        this.setState((state) => {
-            const errors = this.validateForm({state});
-            return {
-                errors
-            };
-        }, () => {
-            const {onAction, member} = this.context;
-            const {plan, errors} = this.state;
-            const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
-            if (!hasFormErrors) {
-                if (member.paid) {
-                    const {subscriptions} = member;
-                    const subscriptionId = subscriptions[0].id;
-                    onAction('updateSubscription', {plan, subscriptionId});
-                } else {
-                    onAction('checkoutPlan', {plan});
-                }
-            }
-        });
-    }
-
     onPlanCheckout(e) {
         const {onAction, member} = this.context;
         const {confirmationPlan: plan, errors} = this.state;
@@ -285,7 +241,7 @@ export default class AccountPlanPage extends React.Component {
             if (member.paid) {
                 const {subscriptions} = member;
                 const subscriptionId = subscriptions[0].id;
-                onAction('updateSubscription', {plan: plan.name, subscriptionId});
+                onAction('updateSubscription', {plan: plan.name, subscriptionId, cancelAtPeriodEnd: false});
             } else {
                 onAction('checkoutPlan', {plan: plan.name});
             }
@@ -298,21 +254,13 @@ export default class AccountPlanPage extends React.Component {
         const confirmationPlan = this.plans.find(d => d.name === name);
         const activePlan = this.getActivePlanName({member});
         const confirmationType = activePlan ? 'changePlan' : 'subscribe';
-        if (name !== this.state.plan) {
+        if (name !== this.state.selectedPlan) {
             this.setState({
                 confirmationPlan,
                 confirmationType,
                 showConfirmation: true
             });
         }
-        // // Hack: React checkbox gets out of sync with dom state with instant update
-        // setTimeout(() => {
-        //     this.setState((state) => {
-        //         return {
-        //             plan: name
-        //         };
-        //     });
-        // }, 5);
     }
 
     onCancelContinueSubscription({subscriptionId, cancelAtPeriodEnd}) {
@@ -345,19 +293,6 @@ export default class AccountPlanPage extends React.Component {
         });
     }
 
-    getActivePlan({member}) {
-        if (member && member.paid && member.subscriptions[0]) {
-            const {plan} = member.subscriptions[0];
-            return {
-                type: plan.interval,
-                price: plan.amount / 100,
-                currency: plan.currency_symbol,
-                name: plan.nickname
-            };
-        }
-        return null;
-    }
-
     getActivePlanName({member}) {
         if (member && member.paid && member.subscriptions[0]) {
             const {plan} = member.subscriptions[0];
@@ -366,40 +301,32 @@ export default class AccountPlanPage extends React.Component {
         return null;
     }
 
-    validateForm({state}) {
-        const {member} = this.context;
-        const activePlan = this.getActivePlanName({member});
-        if (activePlan === state.plan) {
-            return {
-                global: 'Please select a different plan'
-            };
+    onConfirm() {
+        const {confirmationType} = this.state;
+        if (confirmationType === 'cancel') {
+            return this.onCancelSubscriptionConfirmation();
+        } else if (['changePlan', 'subscribe'].includes(confirmationType)) {
+            return this.onPlanCheckout();
         }
-        return {};
     }
 
     render() {
-        const {member, brandColor} = this.context;
+        const {member, brandColor, lastPage} = this.context;
         const plans = this.plans;
-        const selectedPlan = this.state.plan;
-        const errors = this.state.errors || {};
-        const {showConfirmation, confirmationPlan, confirmationType} = this.state;
-        let onConfirm = () => {};
-        if (confirmationType === 'cancel') {
-            onConfirm = () => this.onCancelSubscriptionConfirmation();
-        } else if (['changePlan', 'subscribe'].includes(confirmationType)) {
-            onConfirm = e => this.onPlanCheckout(e);
-        }
+        const {selectedPlan, errors = {}, showConfirmation, confirmationPlan, confirmationType} = this.state;
         return (
             <div>
                 <div className='gh-portal-content'>
                     <Header
+                        lastPage={lastPage}
                         member={member} brandColor={brandColor} onBack={e => this.onBack(e)}
                         confirmationType = {confirmationType}
                         showConfirmation = {showConfirmation}
                     />
                     <PlanMain
                         {...this.context}
-                        {...{plans, selectedPlan, showConfirmation, confirmationPlan, confirmationType, onConfirm, errors}}
+                        {...{plans, selectedPlan, showConfirmation, confirmationPlan, confirmationType, errors}}
+                        onConfirm = {() => this.onConfirm()}
                         onCancelSubscriptionConfirmation = {() => this.onCancelSubscriptionConfirmation()}
                         onCancelContinueSubscription = {data => this.onCancelContinueSubscription(data)}
                         onPlanSelect = {(e, name) => this.onPlanSelect(e, name)}

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

@@ -4,6 +4,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';
 
 const React = require('react');
 
@@ -259,11 +260,10 @@ class SignupPage extends React.Component {
     }
 
     renderSubmitButton() {
-        const {action, brandColor} = this.context;
-        const plans = this.getPlans();
+        const {action, site, brandColor} = this.context;
 
         let label = 'Continue';
-        if (!plans || plans.length === 0 || (plans.length === 1 && plans[0].type === 'free')) {
+        if (hasOnlyFreePlan({site})) {
             label = 'Sign up';
         }
 
@@ -293,7 +293,8 @@ class SignupPage extends React.Component {
     }
 
     renderPlans() {
-        const plansData = this.getPlans();
+        const {site} = this.context;
+        const plansData = getSitePlans({site});
 
         return (
             <div>
@@ -326,7 +327,7 @@ class SignupPage extends React.Component {
         const plansData = this.getPlans();
         const fields = this.getInputFields({state: this.state});
         let sectionClass = '';
-        
+
         if (plansData.length <= 1) {
             if ((plansData.length === 1 && plansData[0].type === 'free') || plansData.length === 0) {
                 sectionClass = 'noplan';

ghost/portal/src/utils/helpers.js

@@ -8,7 +8,7 @@ export function getMemberSubscription({member = {}}) {
     return null;
 }
 
-export function isMemberComplimentary({member = {}}) {
+export function isComplimentaryMember({member = {}}) {
     const subscription = getMemberSubscription({member});
     if (subscription) {
         const {plan} = subscription;
@@ -33,6 +33,11 @@ export function getPlanFromSubscription({subscription}) {
     return null;
 }
 
+export function getMemberActivePlan({member}) {
+    const subscription = getMemberSubscription({member});
+    return getPlanFromSubscription({subscription});
+}
+
 export function getSubscriptionFromId({member, subscriptionId}) {
     if (member.paid) {
         const subscriptions = member.subscriptions || [];
@@ -41,10 +46,26 @@ export function getSubscriptionFromId({member, subscriptionId}) {
     return null;
 }
 
-export function getSitePlans({site = {}}) {
-    const {plans} = site;
+export function hasOnlyFreePlan({site = {}}) {
+    const plans = getSitePlans({site});
+    return !plans || plans.length === 0 || (plans.length === 1 && plans[0].type === 'free');
+}
+
+export function getSitePlans({site = {}, includeFree = true}) {
+    const {
+        plans,
+        allow_self_signup: allowSelfSignup,
+        is_stripe_configured: isStripeConfigured,
+        portal_plans: portalPlans
+    } = site || {};
+
+    if (!plans) {
+        return [];
+    }
+
+    const plansData = [];
     const discount = CalculateDiscount(plans.monthly, plans.yearly);
-    return [
+    const stripePlans = [
         {
             type: 'month',
             price: plans.monthly,
@@ -59,4 +80,22 @@ export function getSitePlans({site = {}}) {
             discount
         }
     ];
+
+    if (allowSelfSignup && portalPlans.includes('free') && includeFree) {
+        plansData.push({
+            type: 'free',
+            price: 0,
+            currency: plans.currency_symbol,
+            name: 'Free'
+        });
+    }
+
+    if (isStripeConfigured) {
+        stripePlans.forEach((plan) => {
+            if (portalPlans.includes(plan.name.toLowerCase())) {
+                plansData.push(plan);
+            }
+        });
+    }
+    return plansData;
 }