Updated newsletter selection flow for signup

refs https://github.com/TryGhost/Team/issues/1490

Updates newsletter selection flow on signup to render content inside the signup page, so we can keep the common header and popup modal for both pages.

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

@@ -3,13 +3,23 @@ import AppContext from '../../AppContext';
 
 export default class SiteTitleBackButton extends React.Component {
     static contextType = AppContext;
-    
+
     render() {
         const {site} = this.context;
         return (
             <>
-                <button className='gh-portal-btn gh-portal-btn-site-title-back' onClick = {() => this.context.onAction('closePopup')}>&larr; {site.title}</button>
+                <button
+                    className='gh-portal-btn gh-portal-btn-site-title-back'
+                    onClick = {() => {
+                        if (this.props.onBack) {
+                            this.props.onBack();
+                        } else {
+                            this.context.onAction('closePopup');
+                        }
+                    }}>
+                    &larr; {site.title}
+                </button>
             </>
         );
     }
-}
+}

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

@@ -3,7 +3,7 @@ import CloseButton from '../common/CloseButton';
 import BackButton from '../common/BackButton';
 import {useContext, useState} from 'react';
 import Switch from '../common/Switch';
-import {getSiteNewsletters} from '../../utils/helpers';
+import {getProductFromPrice, getSiteNewsletters} from '../../utils/helpers';
 import ActionButton from '../common/ActionButton';
 
 const React = require('react');
@@ -63,13 +63,14 @@ function NewsletterPrefs({subscribedNewsletters, setSubscribedNewsletters}) {
     });
 }
 
-export default function NewsletterSelectionPage() {
-    const {brandColor, site, onAction, pageData, action} = useContext(AppContext);
+export default function NewsletterSelectionPage({pageData}) {
+    const {brandColor, site, onAction, action} = useContext(AppContext);
     const siteNewsletters = getSiteNewsletters({site});
     const defaultNewsletters = siteNewsletters.filter((d) => {
         return d.subscribe_on_signup;
     });
-
+    const tier = getProductFromPrice({site, priceId: pageData.plan});
+    const tierName = tier?.name;
     let isRunning = false;
     if (action === 'signup:running') {
         isRunning = true;
@@ -86,9 +87,7 @@ export default function NewsletterSelectionPage() {
     const [subscribedNewsletters, setSubscribedNewsletters] = useState(defaultNewsletters);
     return (
         <div className='gh-portal-content with-footer'>
-            <CloseButton />
-            <AccountHeader />
-            <p className="gh-portal-text-center">Pick which emails you want to receive with your <strong>TIER NAME</strong> membership.</p>
+            <p className="gh-portal-text-center">Pick which emails you want to receive with your <strong>{tierName}</strong> membership.</p>
             <div className='gh-portal-section'>
                 <div className='gh-portal-list'>
                     <NewsletterPrefs

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

@@ -2,6 +2,7 @@ import ActionButton from '../common/ActionButton';
 import AppContext from '../../AppContext';
 import CloseButton from '../common/CloseButton';
 import SiteTitleBackButton from '../common/SiteTitleBackButton';
+import NewsletterSelectionPage from './NewsletterSelectionPage';
 import ProductsSection from '../common/ProductsSection';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
@@ -223,7 +224,8 @@ class SignupPage extends React.Component {
         this.state = {
             name: '',
             email: '',
-            plan: 'free'
+            plan: 'free',
+            showNewsletterSelection: false
         };
     }
 
@@ -271,12 +273,9 @@ class SignupPage extends React.Component {
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors) {
                 if (hasMultipleNewsletters({site})) {
-                    onAction('switchPage', {
-                        page: 'signupNewsletter',
-                        lastPage: 'signup',
-                        pageData: {name, email, plan}
-                    });
                     this.setState({
+                        showNewsletterSelection: true,
+                        pageData: {name, email, plan},
                         errors: {}
                     });
                 } else {
@@ -301,13 +300,9 @@ class SignupPage extends React.Component {
             const hasFormErrors = (errors && Object.values(errors).filter(d => !!d).length > 0);
             if (!hasFormErrors) {
                 if (hasMultipleNewsletters({site})) {
-                    onAction('switchPage', {
-                        page: 'signupNewsletter',
-                        lastPage: 'signup',
-                        pageData: {name, email, plan}
-                    });
-
                     this.setState({
+                        showNewsletterSelection: true,
+                        pageData: {name, email, plan},
                         errors: {}
                     });
                 } else {
@@ -477,6 +472,22 @@ class SignupPage extends React.Component {
         const fields = this.getInputFields({state: this.state});
         const {site, pageQuery} = this.context;
 
+        if (this.state.showNewsletterSelection) {
+            return (
+                <NewsletterSelectionPage
+                    pageData={this.state.pageData}
+                    onSubmit={() => {
+                        // Handle submit
+                    }}
+                    onBack={() => {
+                        this.setState({
+                            showNewsletterSelection: false
+                        });
+                    }}
+                />
+            );
+        }
+
         if (isInviteOnlySite({site, pageQuery})) {
             return (
                 <section>
@@ -583,7 +594,17 @@ class SignupPage extends React.Component {
         return (
             <>
                 <div className='gh-portal-back-sitetitle'>
-                    <SiteTitleBackButton />
+                    <SiteTitleBackButton
+                        onBack={() => {
+                            if (this.state.showNewsletterSelection) {
+                                this.setState({
+                                    showNewsletterSelection: false
+                                });
+                            } else {
+                                this.context.onAction('closePopup');
+                            }
+                        }}
+                    />
                 </div>
                 <CloseButton />
                 <div className={'gh-portal-content signup ' + sectionClass}>

ghost/portal/src/utils/helpers.js

@@ -387,7 +387,7 @@ export function hasMultipleNewsletters({site}) {
     const {
         newsletters
     } = site || {};
-    return newsletters?.length > 0;
+    return newsletters?.length > 1;
 }
 
 export function hasOnlyFreeProduct({site}) {