Skip to content

feat(Billing): Reintroduce the Scale-Up plan #7216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emyller merged 8 commits into from
Apr 13, 2026
Merged

feat(Billing): Reintroduce the Scale-Up plan #7216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9339bc3
Offer the Scale-Up plan to self-serve customers
emyller Apr 10, 2026
96e0cea
Direct free-plan users to Startup as the first paid upgrade
emyller Apr 10, 2026
2fb0804
Reflect the current $60/seat cost in the auto-seat-upgrade message
emyller Apr 10, 2026
55970f3
Communicate the 20-seat limit on the Scale-Up pricing tile
emyller Apr 10, 2026
3507498
Update Chargebee plan IDs
emyller Apr 10, 2026
da6302a
no laxing
emyller Apr 13, 2026
86e091d
Merge remote-tracking branch 'github/main' into feat/hello-again-scaleup
emyller Apr 13, 2026
b1b2297
Forget bias and retry
emyller Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions frontend/common/utils/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -397,17 +397,20 @@ const Utils = Object.assign({}, BaseUtils, {
return EnvironmentPermissionDescriptions.UPDATE_FEATURE_STATE
},

getNextPlan: (skipFree?: boolean) => {
getNextPlan: () => {
const currentPlan = Utils.getPlanName(AccountStore.getActiveOrgPlan())
if (currentPlan !== planNames.enterprise && !Utils.isSaas()) {
return planNames.enterprise
}
switch (currentPlan) {
case planNames.free: {
return skipFree ? planNames.startup : planNames.scaleUp
return planNames.startup
}
case planNames.startup: {
return planNames.startup
return planNames.scaleUp
}
case planNames.scaleUp: {
return planNames.enterprise
}
default: {
return planNames.enterprise
Expand Down
2 changes: 1 addition & 1 deletion frontend/env/project_dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Project = {
// This is used for Sentry tracking
maintenance: false,
plans: {
scaleUp: { annual: 'scale-up-annual-v2', monthly: 'scale-up-v2' },
scaleUp: { annual: 'Scale-Up-v4-USD-Yearly', monthly: 'Scale-Up-v4-USD-Monthly' },
startup: { annual: 'startup-annual-v2', monthly: 'startup-v2' },
},
useSecureCookies: true,
Expand Down
2 changes: 1 addition & 1 deletion frontend/env/project_local.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Project = {
// This is used for Sentry tracking
maintenance: false,
plans: {
scaleUp: { annual: 'scale-up-annual-v2', monthly: 'scale-up-v2' },
scaleUp: { annual: 'Scale-Up-v4-USD-Yearly', monthly: 'Scale-Up-v4-USD-Monthly' },
startup: { annual: 'startup-annual-v2', monthly: 'startup-v2' },
},
useSecureCookies: false,
Expand Down
2 changes: 1 addition & 1 deletion frontend/env/project_prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Project = {
// This is used for Sentry tracking
maintenance: false,
plans: {
scaleUp: { annual: 'scale-up-12-months-v2', monthly: 'scale-up-v2' },
scaleUp: { annual: 'Scale-Up-v4-USD-Yearly', monthly: 'Scale-Up-v4-USD-Monthly' },
startup: { annual: 'start-up-12-months-v2', monthly: 'startup-v2' },
},
useSecureCookies: true,
Expand Down
124 changes: 113 additions & 11 deletions frontend/web/components/modals/Payment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,118 @@ const Payment = class extends Component {
</div>
</div>
</Flex>
<Flex className='pricing-panel p-2'>
<div className='panel panel-default'>
<div
className='panel-content p-3 pt-4 d-flex flex-column justify-content-between'
style={{
backgroundColor: 'rgba(39, 171, 149, 0.08)',
minHeight: '250px',
}}
>
<span className='fw-bold text-primary fs-small'>
Most Popular
</span>
<Row className='pt-4 justify-content-center'>
<Icon name='flash' width={32} />
<h4 className='mb-0 ml-2'>Scale-Up</h4>
</Row>
<Row className='pt-3 justify-content-center'>
<h5 className='mb-0 align-self-start'>$</h5>
<h1 className='mb-0 d-flex align-items-end'>
{this.state.yearly ? '270' : '300'}{' '}
<h5 className='fs-lg mb-0'>/mo</h5>
</h1>
</Row>
<div className='pricing-type pt-1 text-muted'>
+ ${this.state.yearly ? '50' : '60'}/seat
</div>
{!viewOnly ? (
<>
<PaymentButton
data-cb-plan-id={Project.plans?.scaleUp?.annual}
className={classNames(
'btn btn-primary btn-lg full-width mt-3',
{ 'd-none': !this.state.yearly },
)}
isDisableAccount={this.props.isDisableAccountText}
>
{plan.includes('scale-up')
? 'Purchased'
: '14 Day Free Trial'}
</PaymentButton>
<PaymentButton
data-cb-plan-id={Project.plans?.scaleUp?.monthly}
className={classNames(
'btn btn-primary btn-lg full-width mt-3',
{ 'd-none': this.state.yearly },
)}
isDisableAccount={this.props.isDisableAccountText}
>
{plan.includes('scale-up')
? 'Purchased'
: '14 Day Free Trial'}
</PaymentButton>
</>
) : null}
</div>
<div className='panel-footer mt-3'>
<h5 className='m-2 mb-4'>
All from{' '}
<span className='text-primary'>Start-Up,</span> plus
</h5>
<ul className='pricing-features mb-0 px-2'>
<li>
<Row className='mb-3 pricing-features-item'>
<span>
<Icon name='checkmark-circle' fill='#27AB95' />
</span>
<div className='ml-2'>
Up to
<strong> 5,000,000</strong> Requests per month
</div>
</Row>
</li>
<li>
<Row className='mb-3 pricing-features-item'>
<span>
<Icon name='checkmark-circle' fill='#27AB95' />
</span>
<div className='ml-2'>
Up to <strong>20</strong> Team members
</div>
</Row>
</li>
<li>
<Row className='mb-3 pricing-features-item'>
<span>
<Icon name='checkmark-circle' fill='#27AB95' />
</span>
<div className='ml-2'>
User roles and permissions
</div>
</Row>
</li>
<li>
<Row className='mb-3 pricing-features-item'>
<span>
<Icon name='checkmark-circle' fill='#27AB95' />
</span>
<div className='ml-2'>Change requests</div>
</Row>
</li>
<li>
<Row className='mb-3 pricing-features-item'>
<span>
<Icon name='checkmark-circle' fill='#27AB95' />
</span>
<div className='ml-2'>Audit logs</div>
</Row>
</li>
</ul>
</div>
</div>
</Flex>
<Flex className='pricing-panel bg-primary900 text-white p-2'>
<div className='panel panel-default'>
<div
Expand Down Expand Up @@ -320,7 +432,7 @@ const Payment = class extends Component {
<div className='panel-footer mt-3'>
<h5 className='text-white m-2 mb-4'>
All from{' '}
<span className='text-secondary'>Start-Up,</span> plus
<span className='text-secondary'>Scale-Up,</span> plus
</h5>
<ul className='pricing-features mb-0 px-2'>
<li>
Expand Down Expand Up @@ -410,16 +522,6 @@ const Payment = class extends Component {
</div>
</Flex>
</Row>
<div className='text-center mt-4'>
*Need something in-between our Enterprise plan for users or
API limits?
<div>
<a href={'https://www.flagsmith.com/contact-us'}>
Reach out
</a>{' '}
to us and we'll help you out
</div>
</div>
</div>
)
}}
Expand Down
36 changes: 28 additions & 8 deletions frontend/web/components/modals/payment/Payment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ import BlockedOrgInfo from 'components/BlockedOrgInfo'
import { Organisation } from 'common/types/responses'
import { PricingToggle } from './PricingToggle'
import { PricingPanel } from './PricingPanel'
import { STARTUP_FEATURES, ENTERPRISE_FEATURES } from './pricingFeatures'
import {
STARTUP_FEATURES,
SCALE_UP_FEATURES,
ENTERPRISE_FEATURES,
} from './pricingFeatures'
import {
CHARGEBEE_SCRIPT_URL,
CONTACT_US_URL,
Expand Down Expand Up @@ -102,6 +106,28 @@ export const Payment: FC<PaymentProps> = ({
features={STARTUP_FEATURES}
hasActiveSubscription={hasActiveSubscription}
organisationId={organisation.id}
includesFrom='Free'
/>

<PricingPanel
title='Scale-Up'
priceYearly='270'
priceMonthly='300'
seatPriceYearly='50'
seatPriceMonthly='60'
isYearly={yearly}
isFeatured
chargebeePlanId={
yearly
? Project.plans?.scaleUp?.annual
: Project.plans?.scaleUp?.monthly
}
isPurchased={plan.includes('scale-up')}
isDisableAccount={isDisableAccountText}
features={SCALE_UP_FEATURES}
hasActiveSubscription={hasActiveSubscription}
organisationId={organisation.id}
includesFrom='Start-Up'
/>

<PricingPanel
Expand All @@ -111,6 +137,7 @@ export const Payment: FC<PaymentProps> = ({
features={ENTERPRISE_FEATURES}
hasActiveSubscription={hasActiveSubscription}
organisationId={organisation.id}
includesFrom='Scale-Up'
headerContent={
<>
Optional{' '}
Expand All @@ -136,13 +163,6 @@ export const Payment: FC<PaymentProps> = ({
}
/>
</Row>
<div className='text-center mt-4'>
*Need something in-between our Enterprise plan for users or API
limits?
<div>
<a href={CONTACT_US_URL}>Reach out</a> to us and we'll help you out
</div>
</div>
</div>
</div>
)
Expand Down
21 changes: 20 additions & 1 deletion frontend/web/components/modals/payment/PricingPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ export type PricingPanelProps = {
title: string
priceMonthly?: string
priceYearly?: string
seatPriceMonthly?: string
seatPriceYearly?: string
includesFrom: string
isFeatured?: boolean
isYearly: boolean
chargebeePlanId?: string
isPurchased?: boolean
Expand All @@ -27,13 +31,17 @@ export const PricingPanel = ({
features,
hasActiveSubscription,
headerContent,
includesFrom,
isDisableAccount,
isEnterprise,
isFeatured,
isPurchased,
isYearly,
organisationId,
priceMonthly,
priceYearly,
seatPriceMonthly,
seatPriceYearly,
title,
}: PricingPanelProps) => {
return (
Expand All @@ -46,6 +54,11 @@ export const PricingPanel = ({
<div className='p-3 pt-4 pricing-panel-content'>
<div className='pricing-panel-layout'>
<div>
{isFeatured && (
<span className='fw-bold text-primary fs-small'>
Most Popular
</span>
)}
{headerContent && (
<span
className={classNames('featured', {
Expand Down Expand Up @@ -81,6 +94,12 @@ export const PricingPanel = ({
</Row>
)}

{(seatPriceMonthly || seatPriceYearly) && (
<div className='pricing-type pt-1 text-muted'>
+ ${isYearly ? seatPriceYearly : seatPriceMonthly}/seat
</div>
)}

{isEnterprise && (
<Row className='pt-3 justify-content-center'>
<div className='pricing-type text-secondary'>
Expand Down Expand Up @@ -125,7 +144,7 @@ export const PricingPanel = ({
>
All from{' '}
<span className={isEnterprise ? 'text-secondary' : 'text-primary'}>
{isEnterprise ? 'Start-Up,' : 'Free,'}
{includesFrom},
</span>{' '}
plus
</h5>
Expand Down
27 changes: 27 additions & 0 deletions frontend/web/components/modals/payment/pricingFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,33 @@ export const STARTUP_FEATURES: PricingFeature[] = [
},
]

export const SCALE_UP_FEATURES: PricingFeature[] = [
{
text: (
<>
Up to
<strong> 5,000,000</strong> Requests per month
</>
),
},
{
text: (
<>
Up to <strong>20</strong> Team members
</>
),
},
{
text: 'User roles and permissions',
},
{
text: 'Change requests',
},
{
text: 'Audit logs',
},
]

export const ENTERPRISE_FEATURES: PricingFeature[] = [
{
text: (
Expand Down
2 changes: 1 addition & 1 deletion frontend/web/components/pages/UsersAndPermissionsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ const UsersAndPermissionsInner: FC<UsersAndPermissionsInnerType> = ({
) : (
<strong>
You will automatically be charged
$20/month for each additional member that
$60/month for each additional member that
joins your organisation.
</strong>
)}
Expand Down
Loading