From 6d26bc8bf13d1ab85e6e247cb57ea705413a2207 Mon Sep 17 00:00:00 2001
From: Zach Waterfield <zlwaterfield@gmail.com>
Date: Tue, 3 Sep 2024 10:06:46 -0400
Subject: [PATCH] feat: add billing limit max value, improve error handling
 (#24754)

---
 frontend/src/scenes/billing/BillingLimit.tsx  | 47 +++++++++----------
 frontend/src/scenes/billing/billingLogic.tsx  | 14 ++++--
 .../src/scenes/billing/billingProductLogic.ts |  8 +++-
 3 files changed, 38 insertions(+), 31 deletions(-)

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
                                     ) : (
                                         <Tooltip title="Set a billing limit to control your recurring costs. Some features may stop working and data may be dropped if your usage exceeds your limit.">
                                             <span className="text-sm" data-attr={`billing-limit-set-${product.type}`}>
-                                                You have a <b>${customLimitUsd}</b> billing limit set for{' '}
-                                                {product?.name?.toLowerCase()}.
+                                                You have a <b>${customLimitUsd?.toLocaleString()}</b> billing limit set
+                                                for {product?.name?.toLowerCase()}.
                                             </span>
                                         </Tooltip>
                                     )}
@@ -78,30 +79,26 @@ export const BillingLimit = ({ product }: { product: BillingProductV2Type }): JS
                             )}{' '}
                         </div>
                     ) : (
-                        <div className="flex items-center justify-center gap-2.5">
-                            <Field name="input" noStyle>
+                        <div className="flex items-start justify-start gap-2.5">
+                            <LemonField name="input" className="max-w-52">
                                 {({ value, onChange, error }) => (
-                                    <Tooltip title={error}>
-                                        <div className="max-w-36">
-                                            <LemonInput
-                                                inputRef={limitInputRef}
-                                                type="number"
-                                                fullWidth={false}
-                                                status={error ? 'danger' : 'default'}
-                                                value={value}
-                                                data-attr={`billing-limit-input-${product.type}`}
-                                                onChange={onChange}
-                                                prefix={<b>$</b>}
-                                                disabled={billingLoading}
-                                                min={0}
-                                                step={10}
-                                                suffix={<>/ {billing?.billing_period?.interval}</>}
-                                                size="small"
-                                            />
-                                        </div>
-                                    </Tooltip>
+                                    <LemonInput
+                                        inputRef={limitInputRef}
+                                        type="number"
+                                        fullWidth={false}
+                                        status={error ? 'danger' : 'default'}
+                                        value={value}
+                                        data-attr={`billing-limit-input-${product.type}`}
+                                        onChange={onChange}
+                                        prefix={<b>$</b>}
+                                        disabled={billingLoading}
+                                        min={0}
+                                        step={10}
+                                        suffix={<>/ {billing?.billing_period?.interval}</>}
+                                        size="small"
+                                    />
                                 )}
-                            </Field>
+                            </LemonField>
 
                             <LemonButton
                                 loading={billingLoading}
diff --git a/frontend/src/scenes/billing/billingLogic.tsx b/frontend/src/scenes/billing/billingLogic.tsx
index b6ffa6a4aafff..3c3f5505eeb34 100644
--- a/frontend/src/scenes/billing/billingLogic.tsx
+++ b/frontend/src/scenes/billing/billingLogic.tsx
@@ -191,10 +191,16 @@ export const billingLogic = kea<billingLogicType>([
                 },
 
                 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<billingProductLogicType>([
                 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<billingProductLogicType>([
     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 =