Updated portal direct checkout links to use path

refs #12365

Last commit added Portal checkout links using query param on signup link - `signup?plan=monthly/yearly`, this updates the checkout links to use path instead of params on links and data attributes instead.

Portal link for monthly plan checkout - `#/portal/signup/monthly`
Portal data attribute for monthly plan checkout - `data-portal=signup/monthly`

Portal link for yearly plan checkout - `#/portal/signup/yearly`
Portal data attribute for monthly plan checkout - `data-portal=signup/yearly`

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 || {};

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} : {})
     };
 }
 

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);