diff --git a/frontend/src/scenes/billing/BillingLimit.tsx b/frontend/src/scenes/billing/BillingLimit.tsx
index 84dfc6b2ff720..3fe760df96f11 100644
--- a/frontend/src/scenes/billing/BillingLimit.tsx
+++ b/frontend/src/scenes/billing/BillingLimit.tsx
@@ -1,6 +1,7 @@
import { LemonButton, LemonInput } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
-import { Field, Form } from 'kea-forms'
+import { Form } from 'kea-forms'
+import { LemonField } from 'lib/lemon-ui/LemonField'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { useRef } from 'react'
@@ -48,8 +49,8 @@ export const BillingLimit = ({ product }: { product: BillingProductV2Type }): JS
) : (
- You have a ${customLimitUsd} billing limit set for{' '}
- {product?.name?.toLowerCase()}.
+ You have a ${customLimitUsd?.toLocaleString()} billing limit set
+ for {product?.name?.toLowerCase()}.
)}
@@ -78,30 +79,26 @@ export const BillingLimit = ({ product }: { product: BillingProductV2Type }): JS
)}{' '}
) : (
-
-
+
+
{({ value, onChange, error }) => (
-
-
- $}
- disabled={billingLoading}
- min={0}
- step={10}
- suffix={<>/ {billing?.billing_period?.interval}>}
- size="small"
- />
-
-
+ $}
+ disabled={billingLoading}
+ min={0}
+ step={10}
+ suffix={<>/ {billing?.billing_period?.interval}>}
+ size="small"
+ />
)}
-
+
([
},
updateBillingLimits: async (limits: { [key: string]: number | null }) => {
- const response = await api.update('api/billing', { custom_limits_usd: limits })
-
- lemonToast.success('Billing limits updated')
- return parseBillingResponse(response)
+ try {
+ const response = await api.update('api/billing', { custom_limits_usd: limits })
+ lemonToast.success('Billing limits updated')
+ return parseBillingResponse(response)
+ } catch (error: any) {
+ lemonToast.error(
+ 'There was an error updating your billing limits. Please try again or contact support.'
+ )
+ throw error
+ }
},
deactivateProduct: async (key: string) => {
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index 777925d1a812f..deaae97fbc689 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -272,7 +272,6 @@ export const billingProductLogic = kea([
const projectedAmount = parseInt(product.projected_amount_usd || '0')
return product.tiers && projectedAmount ? projectedAmount * 1.5 : DEFAULT_BILLING_LIMIT
}
-
actions.setIsEditingBillingLimit(false)
actions.setBillingLimitInput(
values.hasCustomLimitSet ? values.customLimitUsd : calculateDefaultBillingLimit(props.product)
@@ -335,7 +334,12 @@ export const billingProductLogic = kea([
forms(({ actions, props, values }) => ({
billingLimitInput: {
errors: ({ input }) => ({
- input: input === null || Number.isInteger(input) ? undefined : 'Please enter a whole number',
+ input:
+ input === null || Number.isInteger(input)
+ ? input > 25000
+ ? 'Please enter a number less than 25,000'
+ : undefined
+ : 'Please enter a whole number',
}),
submit: async ({ input }) => {
const addonTiers =