diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js index e0f4312f3a5..9799d88aa48 100644 --- a/ghost/portal/src/App.js +++ b/ghost/portal/src/App.js @@ -64,10 +64,10 @@ export default class App extends React.Component { this.clickHandler = (event) => { 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}); + this.onAction('openPopup', {page, pageQuery}); }; const customTriggerSelector = '[data-portal]'; const popupCloseClass = 'gh-members-popup-close'; @@ -223,16 +223,16 @@ export default class App extends React.Component { /** Fetch state from Portal Links */ fetchLinkData() { - const [path, pathQuery] = window.location.hash.substr(1).split('?'); + const [path] = window.location.hash.substr(1).split('?'); 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} : {}), - ...(pathQuery ? {pageQuery: pathQuery} : {}), + ...(pageQuery ? {pageQuery} : {}), ...(lastPage ? {lastPage} : {}) }; } @@ -335,6 +335,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 || {}; diff --git a/ghost/portal/src/actions.js b/ghost/portal/src/actions.js index 4b1fd4d8e45..9da54c6ba28 100644 --- a/ghost/portal/src/actions.js +++ b/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} : {}) }; } diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js index 249937406a9..ec5334bc854 100644 --- a/ghost/portal/src/components/pages/SignupPage.js +++ b/ghost/portal/src/components/pages/SignupPage.js @@ -158,9 +158,9 @@ class SignupPage extends React.Component { // Handle the default plan if not set const plans = this.getPlans(); - const queryPlan = pageQuery ? (new URLSearchParams(pageQuery)).get('plan') : ''; - if (['monthly', 'yearly'].includes(queryPlan) && hasPlan({site, plan: queryPlan})) { - this.context.onAction('signup', {plan: capitalize(queryPlan)}); + + 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);