diff --git a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx index 1593289f144..9c7bc637188 100644 --- a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx +++ b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx @@ -1,7 +1,16 @@ import { useQueryClient } from '@tanstack/react-query' import { useRouter } from 'next/router' import { useState } from 'react' -import { Button, IconEdit2, IconExternalLink, IconInfo, Input, Listbox } from 'ui' +import { + Button, + IconEdit2, + IconExternalLink, + IconHelpCircle, + IconInfo, + Input, + Listbox, + Toggle, +} from 'ui' import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js' import type { PaymentMethod } from '@stripe/stripe-js' @@ -13,6 +22,7 @@ import { post } from 'lib/common/fetch' import { API_URL, BASE_PATH, PRICING_TIER_LABELS_ORG } from 'lib/constants' import { getURL } from 'lib/helpers' import Link from 'next/link' +import { SpendCapModal } from 'components/interfaces/BillingV2' const ORG_KIND_TYPES = { PERSONAL: 'Personal', @@ -55,6 +65,9 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => { const [dbPricingTierKey, setDbPricingTierKey] = useState('FREE') + const [showSpendCapHelperModal, setShowSpendCapHelperModal] = useState(false) + const [isSpendCapEnabled, setIsSpendCapEnabled] = useState(true) + function validateOrgName(name: any) { const value = name ? name.trim() : '' return value.length >= 1 @@ -77,13 +90,15 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => { } async function createOrg(paymentMethodId?: string) { + const dbTier = dbPricingTierKey === 'PRO' && !isSpendCapEnabled ? 'PAYG' : dbPricingTierKey + const response = await post( `${API_URL}/organizations`, { name: orgName, kind: orgKind, payment_method: paymentMethodId, - tier: 'tier_' + dbPricingTierKey.toLowerCase(), + tier: 'tier_' + dbTier.toLowerCase(), ...(orgKind == 'COMPANY' ? { size: orgSize } : {}), }, // Call new V2 endpoint from API @@ -276,6 +291,45 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => { + {dbPricingTierKey === 'PRO' && ( + <> + + + Spend Cap + setShowSpendCapHelperModal(true)} + /> + + } + checked={isSpendCapEnabled} + onChange={() => setIsSpendCapEnabled(!isSpendCapEnabled)} + descriptionText={ +
+

+ By default, Pro plan organizations have a spend cap to control costs. When + enabled, usage is limited to the plan's quota, with restrictions when limits + are exceeded. To scale beyond Pro limits without restrictions, disable the + spend cap and pay for over-usage beyond the quota. +

+
+ } + /> +
+ + setShowSpendCapHelperModal(false)} + /> + + )} + {dbPricingTierKey !== 'FREE' && ( {paymentMethod?.card !== undefined ? (