diff --git a/frontend/common/utils/utils.tsx b/frontend/common/utils/utils.tsx index 31813dd9a0c6..476e439fd1d2 100644 --- a/frontend/common/utils/utils.tsx +++ b/frontend/common/utils/utils.tsx @@ -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 diff --git a/frontend/env/project_dev.js b/frontend/env/project_dev.js index 0f5a5fc96b24..d69548f70853 100644 --- a/frontend/env/project_dev.js +++ b/frontend/env/project_dev.js @@ -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, diff --git a/frontend/env/project_local.js b/frontend/env/project_local.js index e36f3b68b199..cf36706e946d 100644 --- a/frontend/env/project_local.js +++ b/frontend/env/project_local.js @@ -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, diff --git a/frontend/env/project_prod.js b/frontend/env/project_prod.js index 4747c51e9aa7..c1e3306f8103 100644 --- a/frontend/env/project_prod.js +++ b/frontend/env/project_prod.js @@ -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, diff --git a/frontend/web/components/modals/Payment.js b/frontend/web/components/modals/Payment.js index ad13226a1fe9..bd8ae15b8633 100644 --- a/frontend/web/components/modals/Payment.js +++ b/frontend/web/components/modals/Payment.js @@ -268,6 +268,118 @@ const Payment = class extends Component { + +
+
+ + Most Popular + + + +

Scale-Up

+ + +
$
+

+ {this.state.yearly ? '270' : '300'}{' '} +

/mo
+ + +
+ + ${this.state.yearly ? '50' : '60'}/seat +
+ {!viewOnly ? ( + <> + + {plan.includes('scale-up') + ? 'Purchased' + : '14 Day Free Trial'} + + + {plan.includes('scale-up') + ? 'Purchased' + : '14 Day Free Trial'} + + + ) : null} +
+
+
+ All from{' '} + Start-Up, plus +
+
    +
  • + + + + +
    + Up to + 5,000,000 Requests per month +
    +     +
    • +
  • + + + + +
    + Up to 20 Team members +
    +     +
    • +
  • + + + + +
    + User roles and permissions +
    +     +
    • +
  • + + + + +
    Change requests
    +     +
    • +
  • + + + + +
    Audit logs
    +     +
    • +
+
+
+
All from{' '} - Start-Up, plus + Scale-Up, plus
  • @@ -410,16 +522,6 @@ const Payment = class extends Component {
-
- *Need something in-between our Enterprise plan for users or - API limits? -
- - Reach out - {' '} - to us and we'll help you out -
-
) }} diff --git a/frontend/web/components/modals/payment/Payment.tsx b/frontend/web/components/modals/payment/Payment.tsx index 20eeb53cd049..b3ef23204b72 100644 --- a/frontend/web/components/modals/payment/Payment.tsx +++ b/frontend/web/components/modals/payment/Payment.tsx @@ -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, @@ -102,6 +106,28 @@ export const Payment: FC = ({ features={STARTUP_FEATURES} hasActiveSubscription={hasActiveSubscription} organisationId={organisation.id} + includesFrom='Free' + /> + + = ({ features={ENTERPRISE_FEATURES} hasActiveSubscription={hasActiveSubscription} organisationId={organisation.id} + includesFrom='Scale-Up' headerContent={ <> Optional{' '} @@ -136,13 +163,6 @@ export const Payment: FC = ({ } /> -
- *Need something in-between our Enterprise plan for users or API - limits? -
- Reach out to us and we'll help you out -
-
) diff --git a/frontend/web/components/modals/payment/PricingPanel.tsx b/frontend/web/components/modals/payment/PricingPanel.tsx index 8e8da888030f..9f22f84b797c 100644 --- a/frontend/web/components/modals/payment/PricingPanel.tsx +++ b/frontend/web/components/modals/payment/PricingPanel.tsx @@ -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 @@ -27,13 +31,17 @@ export const PricingPanel = ({ features, hasActiveSubscription, headerContent, + includesFrom, isDisableAccount, isEnterprise, + isFeatured, isPurchased, isYearly, organisationId, priceMonthly, priceYearly, + seatPriceMonthly, + seatPriceYearly, title, }: PricingPanelProps) => { return ( @@ -46,6 +54,11 @@ export const PricingPanel = ({
+ {isFeatured && ( + + Most Popular + + )} {headerContent && ( )} + {(seatPriceMonthly || seatPriceYearly) && ( +
+ + ${isYearly ? seatPriceYearly : seatPriceMonthly}/seat +
+ )} + {isEnterprise && (
@@ -125,7 +144,7 @@ export const PricingPanel = ({ > All from{' '} - {isEnterprise ? 'Start-Up,' : 'Free,'} + {includesFrom}, {' '} plus diff --git a/frontend/web/components/modals/payment/pricingFeatures.tsx b/frontend/web/components/modals/payment/pricingFeatures.tsx index b7e2a85b9719..a5259256bf86 100644 --- a/frontend/web/components/modals/payment/pricingFeatures.tsx +++ b/frontend/web/components/modals/payment/pricingFeatures.tsx @@ -30,6 +30,33 @@ export const STARTUP_FEATURES: PricingFeature[] = [ }, ] +export const SCALE_UP_FEATURES: PricingFeature[] = [ + { + text: ( + <> + Up to + 5,000,000 Requests per month + + ), + }, + { + text: ( + <> + Up to 20 Team members + + ), + }, + { + text: 'User roles and permissions', + }, + { + text: 'Change requests', + }, + { + text: 'Audit logs', + }, +] + export const ENTERPRISE_FEATURES: PricingFeature[] = [ { text: ( diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx index 773238ce349a..e958bd489964 100644 --- a/frontend/web/components/pages/UsersAndPermissionsPage.tsx +++ b/frontend/web/components/pages/UsersAndPermissionsPage.tsx @@ -280,7 +280,7 @@ const UsersAndPermissionsInner: FC = ({ ) : ( You will automatically be charged - $20/month for each additional member that + $60/month for each additional member that joins your organisation. )}