Merge pull request #15837 from supabase/feat/payg-org

feat: launch a PAYG org

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) => {
             </Listbox>
           </Panel.Content>
 
+          {dbPricingTierKey === 'PRO' && (
+            <>
+              <Panel.Content className="border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
+                <Toggle
+                  id="spend-cap"
+                  layout="horizontal"
+                  label={
+                    <div className="flex space-x-4">
+                      <span>Spend Cap</span>
+                      <IconHelpCircle
+                        size={16}
+                        strokeWidth={1.5}
+                        className="transition opacity-50 cursor-pointer hover:opacity-100"
+                        onClick={() => setShowSpendCapHelperModal(true)}
+                      />
+                    </div>
+                  }
+                  checked={isSpendCapEnabled}
+                  onChange={() => setIsSpendCapEnabled(!isSpendCapEnabled)}
+                  descriptionText={
+                    <div>
+                      <p>
+                        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.
+                      </p>
+                    </div>
+                  }
+                />
+              </Panel.Content>
+
+              <SpendCapModal
+                visible={showSpendCapHelperModal}
+                onHide={() => setShowSpendCapHelperModal(false)}
+              />
+            </>
+          )}
+
           {dbPricingTierKey !== 'FREE' && (
             <Panel.Content>
               {paymentMethod?.card !== undefined ? (