diff --git a/ghost/portal/src/components/pages/SignupPage.js b/ghost/portal/src/components/pages/SignupPage.js
index 0875d7b649..72b8226c2d 100644
--- a/ghost/portal/src/components/pages/SignupPage.js
+++ b/ghost/portal/src/components/pages/SignupPage.js
@@ -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,25 @@ class SignupPage extends React.Component {
return {sectionClass, footerClass};
}
- render() {
+ renderMultipleProducts() {
+ let {sectionClass, footerClass} = this.getClassNames();
+
+ return (
+ <>
+
+
+ {this.renderFormHeader()}
+ {this.renderForm()}
+
+
+ >
+ );
+ }
+
+ renderSingleProduct() {
let {sectionClass, footerClass} = this.getClassNames();
return (
@@ -465,6 +483,14 @@ class SignupPage extends React.Component {
>
);
}
+
+ render() {
+ const {site} = this.context;
+ if (hasMultipleProducts({site})) {
+ return this.renderMultipleProducts();
+ }
+ return this.renderSingleProduct();
+ }
}
export default SignupPage;
diff --git a/ghost/portal/src/utils/fixtures.js b/ghost/portal/src/utils/fixtures.js
index 3e939c103b..834ae1bb6b 100644
--- a/ghost/portal/src/utils/fixtures.js
+++ b/ghost/portal/src/utils/fixtures.js
@@ -10,39 +10,6 @@ const prices = [
type: 'recurring',
interval: 'month'
},
- {
- id: '6086ead8070218227791fe4f',
- stripe_price_id: 'price_1IkXLAFToJelIqAseQdK4WSU',
- stripe_product_id: 'prod_JNGGBrrogUXcoM',
- active: 1,
- nickname: 'Test Price 15',
- currency: 'usd',
- amount: 1500,
- type: 'recurring',
- interval: 'month'
- },
- {
- 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'
- },
- {
- id: '6086eb3e823dd7240afc8082',
- stripe_price_id: 'price_1IkXMoFToJelIqAsTHKl5ELV',
- stripe_product_id: 'prod_JNGGBrrogUXcoM',
- active: 1,
- nickname: 'Test Price Comp',
- currency: 'usd',
- amount: 0,
- type: 'recurring',
- interval: 'month'
- },
{
id: '6086eff0823dd7240afc8083',
stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
@@ -50,42 +17,68 @@ const prices = [
active: 1,
nickname: 'Yearly',
currency: 'usd',
- amount: 12200,
+ amount: 5000,
type: 'recurring',
interval: 'year'
+ }
+];
+
+const products = [
+ {
+ name: 'Main Product',
+ description: 'The default product',
+ prices: [
+ {
+ id: '6086d2c776909b1a2382369a',
+ stripe_price_id: '7d6c89c0289ca1731226e86b95b5a162085b8561ca0d10d3a4f03afd3e3e6ba6',
+ stripe_product_id: '109c85c734fb9992e7bc30a26af66c22f5c94d8dc62e0a33cb797be902c06b2d',
+ active: 1,
+ nickname: 'Monthly',
+ currency: 'usd',
+ amount: 500,
+ type: 'recurring',
+ interval: 'month'
+ },
+ {
+ id: '6086eff0823dd7240afc8083',
+ stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
+ stripe_product_id: 'prod_JNGGBrrogUXcoM',
+ active: 1,
+ nickname: 'Yearly',
+ currency: 'usd',
+ amount: 5000,
+ type: 'recurring',
+ interval: 'year'
+ }
+ ]
},
{
- id: '6086f4c9823dd7240afc8084',
- stripe_price_id: 'price_1IkY0CFToJelIqAs5h7qlgP5',
- stripe_product_id: 'prod_JNGGBrrogUXcoM',
- active: 1,
- nickname: 'Test Price B',
- currency: 'gbp',
- 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'
+ 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: 'Yearly',
+ currency: 'usd',
+ amount: 12000,
+ type: 'recurring',
+ interval: 'year'
+ }
+ ]
}
];
@@ -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',
diff --git a/ghost/portal/src/utils/helpers.js b/ghost/portal/src/utils/helpers.js
index 753c1c6535..b2ec520d0a 100644
--- a/ghost/portal/src/utils/helpers.js
+++ b/ghost/portal/src/utils/helpers.js
@@ -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,