🐛 Fixed portal free signup link not working if free plan is hidden (#17742)

refs TryGhost/Product#3743

- Users should be able to hide the free plan from Portal, which removes it as an option on the main portal /signup page
- However, they should still be able to use the /signup/free link to allow members to signup for the free plan. Currently if the free plan is hidden from portal, the /signup/free link renders the main /signup page, with only paid plans available.
- This PR fixes that by allowing the /signup/free link to work even if the free plan is hidden from portal, but only by directly accessing the /signup/free link

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

@@ -7,7 +7,7 @@ import NewsletterSelectionPage from './NewsletterSelectionPage';
 import ProductsSection from '../common/ProductsSection';
 import InputForm from '../common/InputForm';
 import {ValidateInputForm} from '../../utils/form';
-import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasFreeProductPrice, hasMultipleNewsletters, hasFreeTrialTier, isSignupAllowed} from '../../utils/helpers';
+import {getSiteProducts, getSitePrices, hasOnlyFreePlan, isInviteOnlySite, freeHasBenefitsOrDescription, hasOnlyFreeProduct, getFreeProductBenefits, getFreeTierDescription, hasMultipleNewsletters, hasFreeTrialTier, isSignupAllowed} from '../../utils/helpers';
 import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
 
 export const SignupPageStyles = `
@@ -548,7 +548,7 @@ class SignupPage extends React.Component {
         }
 
         let label = t('Continue');
-        const showOnlyFree = pageQuery === 'free' && hasFreeProductPrice({site});
+        const showOnlyFree = pageQuery === 'free';
 
         if (hasOnlyFreePlan({site}) || showOnlyFree) {
             label = t('Sign up');
@@ -687,7 +687,7 @@ class SignupPage extends React.Component {
 
         const freeBenefits = getFreeProductBenefits({site});
         const freeDescription = getFreeTierDescription({site});
-        const showOnlyFree = pageQuery === 'free' && hasFreeProductPrice({site});
+        const showOnlyFree = pageQuery === 'free';
         const hasOnlyFree = hasOnlyFreeProduct({site}) || showOnlyFree;
         const sticky = !showOnlyFree && (freeBenefits.length || freeDescription);
 

apps/portal/src/tests/SignupFlow.test.js

@@ -643,6 +643,22 @@ describe('Signup', () => {
             const magicLink = await within(popupIframeDocument).findByText(/now check your email/i);
             expect(magicLink).toBeInTheDocument();
         });
+
+        test('should not show free plan if it is hidden', async () => {
+            let {
+                popupFrame, triggerButtonFrame, emailInput, nameInput,
+                siteTitle, freePlanTitle
+            } = await multiTierSetup({
+                site: FixtureSite.multipleTiers.onlyPaidPlans
+            });
+
+            expect(popupFrame).toBeInTheDocument();
+            expect(triggerButtonFrame).toBeInTheDocument();
+            expect(siteTitle).toBeInTheDocument();
+            expect(emailInput).toBeInTheDocument();
+            expect(nameInput).toBeInTheDocument();
+            expect(freePlanTitle.length).toBe(0);
+        });
     });
 
     describe('as paid member on multi tier site', () => {

apps/portal/src/tests/portal-links.test.js

@@ -136,6 +136,30 @@ describe('Portal Data links:', () => {
             const signupTitle = within(popupFrame.contentDocument).queryByText(/already a member/i);
             expect(signupTitle).toBeInTheDocument();
         });
+
+        test('opens portal signup page with free plan even if free plan is hidden', async () => {
+            window.location.hash = '#/portal/signup/free';
+            let {
+                popupFrame, triggerButtonFrame, ...utils
+            } = await setup({
+                site: FixtureSite.multipleTiers.onlyPaidPlans,
+                member: null
+            });
+            expect(triggerButtonFrame).toBeInTheDocument();
+            popupFrame = await utils.findByTitle(/portal-popup/i);
+            const popupIframeDocument = popupFrame.contentDocument;
+            const emailInput = within(popupIframeDocument).getByLabelText(/email/i);
+            const nameInput = within(popupIframeDocument).getByLabelText(/name/i);
+            const submitButton = within(popupIframeDocument).getByRole('button', {name: 'Sign up'});
+            const signinButton = within(popupIframeDocument).getByRole('button', {name: 'Sign in'});
+            expect(popupFrame).toBeInTheDocument();
+            expect(emailInput).toBeInTheDocument();
+            expect(nameInput).toBeInTheDocument();
+            expect(submitButton).toBeInTheDocument();
+            expect(signinButton).toBeInTheDocument();
+            const signupTitle = within(popupFrame.contentDocument).queryByText(/already a member/i);
+            expect(signupTitle).toBeInTheDocument();
+        });
     });
 
     describe('#/portal/account', () => {

apps/portal/src/utils/helpers.js

@@ -415,7 +415,7 @@ export function hasBenefits({prices, site}) {
 
 export function getSiteProducts({site, pageQuery}) {
     const products = getAvailableProducts({site});
-    const showOnlyFree = pageQuery === 'free' && hasFreeProductPrice({site});
+    const showOnlyFree = pageQuery === 'free';
     if (showOnlyFree) {
         return [];
     }

apps/portal/src/utils/test-fixtures.js

@@ -176,6 +176,10 @@ export const site = {
             ...baseMultiTierSite,
             portal_plans: ['free']
         },
+        onlyPaidPlans: {
+            ...baseMultiTierSite,
+            portal_plans: ['monthly', 'yearly']
+        },
         withoutName: {
             ...baseMultiTierSite,
             portal_name: false