Added logic for introducing multiple products

refs https://github.com/TryGhost/Team/issues/767

- Adds new helper to switch UI for multiple products
- Cleans up fixtures
This commit is contained in:
Rishabh 2021-06-09 20:51:18 +05:30
parent f59711ab1b
commit a73a04034b
3 changed files with 101 additions and 84 deletions

View File

@ -4,7 +4,7 @@ import AppContext from '../../AppContext';
import PlansSection from '../common/PlansSection';
import InputForm from '../common/InputForm';
import {ValidateInputForm} from '../../utils/form';
import {getSitePrices, hasOnlyFreePlan, isInviteOnlySite} from '../../utils/helpers';
import {getSitePrices, hasMultipleProducts, hasOnlyFreePlan, isInviteOnlySite} from '../../utils/helpers';
import {ReactComponent as InvitationIcon} from '../../images/icons/invitation.svg';
const React = require('react');
@ -448,7 +448,7 @@ class SignupPage extends React.Component {
return {sectionClass, footerClass};
}
render() {
renderMultipleProducts() {
let {sectionClass, footerClass} = this.getClassNames();
return (
@ -465,6 +465,32 @@ class SignupPage extends React.Component {
</>
);
}
renderSingleProduct() {
let {sectionClass, footerClass} = this.getClassNames();
return (
<>
<div className={'gh-portal-content signup ' + sectionClass}>
<CloseButton />
{this.renderFormHeader()}
{this.renderForm()}
</div>
<footer className={'gh-portal-signup-footer ' + footerClass}>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</footer>
</>
);
}
render() {
const {site} = this.context;
if (hasMultipleProducts({site})) {
return this.renderMultipleProducts();
}
return this.renderSingleProduct();
}
}
export default SignupPage;

View File

@ -11,35 +11,31 @@ const prices = [
interval: 'month'
},
{
id: '6086ead8070218227791fe4f',
stripe_price_id: 'price_1IkXLAFToJelIqAseQdK4WSU',
id: '6086eff0823dd7240afc8083',
stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price 15',
nickname: 'Yearly',
currency: 'usd',
amount: 1500,
amount: 5000,
type: 'recurring',
interval: 'month'
},
interval: 'year'
}
];
const products = [
{
id: '6086eb2a823dd7240afc8081',
stripe_price_id: 'price_1IkXMUFToJelIqAstq0R3Ero',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price USD',
currency: 'usd',
amount: 1100,
type: 'recurring',
interval: 'month'
},
name: 'Main Product',
description: 'The default product',
prices: [
{
id: '6086eb3e823dd7240afc8082',
stripe_price_id: 'price_1IkXMoFToJelIqAsTHKl5ELV',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
id: '6086d2c776909b1a2382369a',
stripe_price_id: '7d6c89c0289ca1731226e86b95b5a162085b8561ca0d10d3a4f03afd3e3e6ba6',
stripe_product_id: '109c85c734fb9992e7bc30a26af66c22f5c94d8dc62e0a33cb797be902c06b2d',
active: 1,
nickname: 'Test Price Comp',
nickname: 'Monthly',
currency: 'usd',
amount: 0,
amount: 500,
type: 'recurring',
interval: 'month'
},
@ -50,42 +46,39 @@ const prices = [
active: 1,
nickname: 'Yearly',
currency: 'usd',
amount: 12200,
amount: 5000,
type: 'recurring',
interval: 'year'
}
]
},
{
id: '6086f4c9823dd7240afc8084',
stripe_price_id: 'price_1IkY0CFToJelIqAs5h7qlgP5',
name: 'Advanced Product',
description: 'For extra content',
prices: [
{
id: '6086d2c776909b1a2382369a',
stripe_price_id: '7d6c89c0289ca1731226e86b95b5a162085b8561ca0d10d3a4f03afd3e3e6ba6',
stripe_product_id: '109c85c734fb9992e7bc30a26af66c22f5c94d8dc62e0a33cb797be902c06b2d',
active: 1,
nickname: 'Monthly',
currency: 'usd',
amount: 1200,
type: 'recurring',
interval: 'month'
},
{
id: '6086eff0823dd7240afc8083',
stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price B',
currency: 'gbp',
nickname: 'Yearly',
currency: 'usd',
amount: 12000,
type: 'recurring',
interval: 'year'
},
{
id: '6087c314d3e64b3266bf715e',
stripe_price_id: 'price_1IkljzFToJelIqAsPNGA2Lov',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price A',
currency: 'cad',
amount: 12200,
type: 'recurring',
interval: 'month'
},
{
id: '6087c36ed3e64b3266bf715f',
stripe_price_id: 'price_1IkllSFToJelIqAsvElnxOwF',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price X',
currency: 'gbp',
amount: 12300,
type: 'recurring',
interval: 'month'
}
]
}
];
@ -101,10 +94,7 @@ export const site = {
yearly: 150000,
currency: 'USD'
},
product: {
name: 'Main Product',
description: 'The default product'
},
products,
prices: prices,
allow_self_signup: true,
members_signup_access: 'all',

View File

@ -125,19 +125,6 @@ export function getQueryPrice({site = {}, priceId}) {
return null;
}
export function getProductDetails({site}) {
if (site && site.product) {
return {
name: site.product.name || '',
description: site.product.description || ''
};
}
return {
name: '',
description: ''
};
}
export function capitalize(str) {
if (typeof str !== 'string' || !str) {
return '';
@ -150,6 +137,20 @@ export function isInviteOnlySite({site = {}, pageQuery = ''}) {
return prices.length === 0 || (site && site.members_signup_access === 'invite');
}
export function hasMultipleProducts({site = {}}) {
const {
products = []
} = site || {};
if (products?.length > 0) {
return true;
}
return false;
}
export function getProducts({site = {}}) {
return site?.products || [];
}
export function getAvailablePrices({site = {}, includeFree = true} = {}) {
let {
prices,