Added direct portal link for free signup

refs https://github.com/TryGhost/Ghost/issues/12365

- Added direct portal link handling for - `/signup/free` - to open Portal with Free plan only when available
- In case free plan is not available, Portal will show default signup screen

ghost/portal/src/App.js

@@ -350,6 +350,11 @@ export default class App extends React.Component {
             return {
                 page: 'signup'
             };
+        } else if (path === 'signup/free') {
+            return {
+                page: 'signup',
+                pageQuery: 'free'
+            };
         } else if (path === 'signup/monthly') {
             return {
                 page: 'signup',

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

@@ -253,7 +253,7 @@ class SignupPage extends React.Component {
             is_stripe_configured: isStripeConfigured,
             portal_plans: portalPlans
         } = this.context.site;
-
+        const {pageQuery} = this.context;
         const plansData = [];
         const discount = CalculateDiscount(plans.monthly, plans.yearly);
         const stripePlans = [
@@ -276,7 +276,7 @@ class SignupPage extends React.Component {
             plansData.push({type: 'free', price: 0, currency: plans.currency_symbol, name: 'Free'});
         }
 
-        if (isStripeConfigured) {
+        if (isStripeConfigured && pageQuery !== 'free') {
             stripePlans.forEach((plan) => {
                 if (portalPlans === undefined || portalPlans.includes(plan.name.toLowerCase())) {
                     plansData.push(plan);
@@ -326,9 +326,9 @@ class SignupPage extends React.Component {
     }
 
     renderSubmitButton() {
-        const {action, site, brandColor} = this.context;
+        const {action, site, brandColor, pageQuery} = this.context;
 
-        const availablePlans = getSitePlans({site});
+        const availablePlans = getSitePlans({site, pageQuery});
         if (availablePlans.length === 0) {
             return null;
         }
@@ -365,8 +365,8 @@ class SignupPage extends React.Component {
     }
 
     renderPlans() {
-        const {site} = this.context;
-        const plansData = getSitePlans({site});
+        const {site, pageQuery} = this.context;
+        const plansData = getSitePlans({site, pageQuery});
         return (
             <>
                 <PlansSection
@@ -396,8 +396,8 @@ class SignupPage extends React.Component {
 
     renderForm() {
         const fields = this.getInputFields({state: this.state});
-        const {site} = this.context;
-        const availablePlans = getSitePlans({site});
+        const {site, pageQuery} = this.context;
+        const availablePlans = getSitePlans({site, pageQuery});
         if (availablePlans.length === 0) {
             return (
                 <section>

ghost/portal/src/utils/helpers.js

@@ -103,7 +103,7 @@ export function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export function getSitePlans({site = {}, includeFree = true}) {
+export function getSitePlans({site = {}, includeFree = true, pageQuery} = {}) {
     const {
         plans,
         allow_self_signup: allowSelfSignup,
@@ -141,8 +141,9 @@ export function getSitePlans({site = {}, includeFree = true}) {
             name: 'Free'
         });
     }
+    const showOnlyFree = pageQuery === 'free' && hasPlan({site, plan: 'free'});
 
-    if (isStripeConfigured) {
+    if (isStripeConfigured && !showOnlyFree) {
         stripePlans.forEach((plan) => {
             if (portalPlans.includes(plan.name.toLowerCase())) {
                 plansData.push(plan);