OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix free tier benefit not showing up (#19879)

Browse Source 
ref ENG-760

The benefits for Free tier was not showing up for some old & new logic.

---------

Co-authored-by: Sag <guptazy@gmail.com>
This commit is contained in:
Peter Zimon 2024-03-19 09:51:59 +01:00 committed by GitHub
parent 134c33cef5
commit e4b908479e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/portal/src/components/common/ProductsSection.js
View File

@ -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 (
<ProductsContext.Provider value={{

20
apps/portal/src/components/pages/SignupPage.js
View File

@ -208,6 +208,10 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
}
.signup.single-field .gh-portal-signup-terms-wrapper {
margin-top: 12px;
}
.signup.single-field .gh-portal-products:not(:has(.gh-portal-product-card)) {
margin-top: -16px;
}
@ -216,11 +220,11 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
}
.gh-portal-signup-terms-wrapper.free-only .gh-portal-signup-terms {
margin: -16px 0 0;
margin: -16px 0 24px;
}
.gh-portal-products + .gh-portal-signup-terms-wrapper.free-only {
margin: 20px auto 0;
.gh-portal-products:has(.gh-portal-product-card) + .gh-portal-signup-terms-wrapper.free-only {
margin: 20px auto 0 !important;
}
.gh-portal-signup-terms label {
@ -699,6 +703,8 @@ class SignupPage extends React.Component {
const hasOnlyFree = hasOnlyFreeProduct({site}) || showOnlyFree;
const sticky = !showOnlyFree && (freeBenefits.length || freeDescription);
const signupTerms = this.renderSignupTerms();
return (
<section className="gh-portal-signup">
<div className='gh-portal-section'>
@ -713,14 +719,18 @@ class SignupPage extends React.Component {
{(hasOnlyFree ?
<>
{this.renderProducts()}
{signupTerms &&
<div className='gh-portal-signup-terms-wrapper free-only'>
{this.renderSignupTerms()}
{signupTerms}
</div>
}
</> :
<>
{signupTerms &&
<div className='gh-portal-signup-terms-wrapper'>
{this.renderSignupTerms()}
{signupTerms}
</div>
}
{this.renderProducts()}
</>)}

20
apps/portal/src/tests/SignupFlow.test.js
View File

@ -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'}});

10
apps/portal/src/utils/fixtures-generator.js
View File

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

2
apps/portal/src/utils/test-fixtures.js
View File

@ -41,7 +41,7 @@ export const singleSiteTier = [
getFreeProduct({
name: 'Free',
description: 'Free tier description',
numOfBenefits: 0
numOfBenefits: 1
})
,
getProductData({