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,