From e4b908479e9f93f2b439758c7cb088e958431d8b Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 19 Mar 2024 09:51:59 +0100 Subject: [PATCH] Fix free tier benefit not showing up (#19879) ref ENG-760 The benefits for Free tier was not showing up for some old & new logic. --------- Co-authored-by: Sag --- .../src/components/common/ProductsSection.js | 9 --------- .../portal/src/components/pages/SignupPage.js | 20 ++++++++++++++----- apps/portal/src/tests/SignupFlow.test.js | 20 +++++++++++++++++-- apps/portal/src/utils/fixtures-generator.js | 10 ++++++---- apps/portal/src/utils/test-fixtures.js | 2 +- 5 files changed, 40 insertions(+), 21 deletions(-) diff --git a/apps/portal/src/components/common/ProductsSection.js b/apps/portal/src/components/common/ProductsSection.js index 4c352631ec..472e5d37fd 100644 --- a/apps/portal/src/components/common/ProductsSection.js +++ b/apps/portal/src/components/common/ProductsSection.js @@ -957,10 +957,6 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu onPlanSelect(null, selectedPrice.id); }, [selectedPrice.id, onPlanSelect]); - if (!portalPlans.includes('monthly') && !portalPlans.includes('yearly')) { - return null; - } - if (products.length === 0) { if (isComplimentary) { const supportAddress = getSupportAddress({site}); @@ -979,11 +975,6 @@ function ProductsSection({onPlanSelect, products, type = null, handleChooseSignu className += ' gh-portal-upgrade-product'; } - // If site doesn't have paid products then don't return an empty container - if (hasOnlyFree) { - return null; - } - let finalProduct = products.find(p => p.id === selectedProduct)?.id || products.find(p => p.type === 'paid')?.id; return (
@@ -713,14 +719,18 @@ class SignupPage extends React.Component { {(hasOnlyFree ? <> {this.renderProducts()} + {signupTerms &&
- {this.renderSignupTerms()} + {signupTerms}
+ } : <> + {signupTerms &&
- {this.renderSignupTerms()} + {signupTerms}
+ } {this.renderProducts()} )} diff --git a/apps/portal/src/tests/SignupFlow.test.js b/apps/portal/src/tests/SignupFlow.test.js index 59ca363477..dfb587cc39 100644 --- a/apps/portal/src/tests/SignupFlow.test.js +++ b/apps/portal/src/tests/SignupFlow.test.js @@ -260,17 +260,25 @@ describe('Signup', () => { site: FixtureSite.singleTier.onlyFreePlan }); + const freeProduct = FixtureSite.singleTier.onlyFreePlan.products.find(p => p.type === 'free'); + const benefitText = freeProduct.benefits[0].name; + expect(popupFrame).toBeInTheDocument(); expect(triggerButtonFrame).toBeInTheDocument(); expect(siteTitle).toBeInTheDocument(); expect(emailInput).toBeInTheDocument(); expect(nameInput).toBeInTheDocument(); - expect(freePlanTitle).not.toBeInTheDocument(); expect(monthlyPlanTitle).not.toBeInTheDocument(); expect(yearlyPlanTitle).not.toBeInTheDocument(); expect(fullAccessTitle).not.toBeInTheDocument(); expect(signinButton).toBeInTheDocument(); expect(submitButton).not.toBeInTheDocument(); + + // Free tier title, description and benefits should render + expect(freePlanTitle).toBeInTheDocument(); + await within(popupIframeDocument).findByText(freeProduct.description); + await within(popupIframeDocument).findByText(benefitText); + submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign up'}); fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); @@ -613,14 +621,22 @@ describe('Signup', () => { site: FixtureSite.multipleTiers.onlyFreePlan }); + const freeProduct = FixtureSite.multipleTiers.onlyFreePlan.products.find(p => p.type === 'free'); + const benefitText = freeProduct.benefits[0].name; + expect(popupFrame).toBeInTheDocument(); expect(triggerButtonFrame).toBeInTheDocument(); expect(siteTitle).toBeInTheDocument(); expect(emailInput).toBeInTheDocument(); expect(nameInput).toBeInTheDocument(); - expect(freePlanTitle.length).toBe(0); expect(signinButton).toBeInTheDocument(); expect(submitButton).not.toBeInTheDocument(); + + // Free tier title, description and benefits should render + expect(freePlanTitle.length).toBe(1); + await within(popupIframeDocument).findByText(freeProduct.description); + await within(popupIframeDocument).findByText(benefitText); + submitButton = within(popupIframeDocument).queryByRole('button', {name: 'Sign up'}); fireEvent.change(emailInput, {target: {value: 'jamie@example.com'}}); diff --git a/apps/portal/src/utils/fixtures-generator.js b/apps/portal/src/utils/fixtures-generator.js index 750bb12a96..f831eefcd7 100644 --- a/apps/portal/src/utils/fixtures-generator.js +++ b/apps/portal/src/utils/fixtures-generator.js @@ -261,11 +261,13 @@ export function getFreeProduct({ } export function getBenefits({numOfBenefits}) { + const random = Math.floor(Math.random() * 100); + const beenfits = [ - getBenefitData({name: 'Limited early adopter pricing'}), - getBenefitData({name: 'Latest gear reviews'}), - getBenefitData({name: 'Weekly email newsletter'}), - getBenefitData({name: 'Listen to my podcast'}) + getBenefitData({name: `Limited early adopter pricing #${random}`}), + getBenefitData({name: `Latest gear reviews #${random}`}), + getBenefitData({name: `Weekly email newsletter #${random}`}), + getBenefitData({name: `Listen to my podcast #${random}`}) ]; return beenfits.slice(0, numOfBenefits); } diff --git a/apps/portal/src/utils/test-fixtures.js b/apps/portal/src/utils/test-fixtures.js index f6fa6b9376..63d7725860 100644 --- a/apps/portal/src/utils/test-fixtures.js +++ b/apps/portal/src/utils/test-fixtures.js @@ -41,7 +41,7 @@ export const singleSiteTier = [ getFreeProduct({ name: 'Free', description: 'Free tier description', - numOfBenefits: 0 + numOfBenefits: 1 }) , getProductData({