add notice about default limit to billing page

PostHog · Jul 1, 2024 · 3bbfe50 · 3bbfe50
1 parent c7f3a82
commit 3bbfe50
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 53 deletions.
diff --git a/frontend/src/scenes/billing/BillingLimit.tsx b/frontend/src/scenes/billing/BillingLimit.tsx
@@ -12,13 +12,16 @@ import { billingProductLogic } from './billingProductLogic'
 export const BillingLimit = ({ product }: { product: BillingProductV2Type }): JSX.Element | null => {
     const limitInputRef = useRef<HTMLInputElement | null>(null)
     const { billing, billingLoading } = useValues(billingLogic)
-    const { isEditingBillingLimit, customLimitUsd } = useValues(
+    const { isEditingBillingLimit, customLimitUsd, currentAndUpgradePlans } = useValues(
         billingProductLogic({ product, billingLimitInputRef: limitInputRef })
     )
     const { setIsEditingBillingLimit, setBillingLimitInput, submitBillingLimitInput } = useActions(
         billingProductLogic({ product })
     )
 
+    const initialBillingLimit = currentAndUpgradePlans?.currentPlan?.initial_billing_limit
+    const usingInitialBillingLimit = customLimitUsd === initialBillingLimit
+
     if (billing?.billing_period?.interval !== 'month' || !product.subscribed) {
         return null
     }
@@ -32,12 +35,22 @@ export const BillingLimit = ({ product }: { product: BillingProductV2Type }): JS
                         <div className="flex items-center justify-center gap-1">
                             {customLimitUsd ? (
                                 <>
-                                    <Tooltip title="Set a billing limit to control your recurring costs. Some features may stop working if your usage exceeds your limit.">
-                                        <span>
-                                            You have a <b>${customLimitUsd}</b> billing limit set for{' '}
-                                            {product?.name?.toLowerCase()}.
-                                        </span>
-                                    </Tooltip>
+                                    {usingInitialBillingLimit ? (
+                                        <Tooltip title="Initial limits protect you from accidentally incurring large unexpected charges. Some features may stop working and data may be dropped if your usage exceeds your limit.">
+                                            <span>
+                                                This product has a default initial billing limit of{' '}
+                                                <b>${initialBillingLimit}</b>.
+                                            </span>
+                                        </Tooltip>
+                                    ) : (
+                                        <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>
+                                                You have a <b>${customLimitUsd}</b> billing limit set for{' '}
+                                                {product?.name?.toLowerCase()}.
+                                            </span>
+                                        </Tooltip>
+                                    )}
+
                                     <LemonButton
                                         onClick={() => setIsEditingBillingLimit(true)}
                                         status="danger"

diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -288,41 +288,14 @@ export const billingProductLogic = kea<billingProductLogicType>([
         },
         setScrollToProductKey: ({ scrollToProductKey }) => {
             if (scrollToProductKey && scrollToProductKey === props.product.type) {
-                const { currentPlan } = values.currentAndUpgradePlans
-
-                if (currentPlan?.initial_billing_limit) {
-                    actions.setProductSpecificAlert({
-                        status: 'warning',
-                        title: 'Billing Limit Automatically Applied',
-                        pathName: '/organization/billing',
-                        dismissKey: `auto-apply-billing-limit-${props.product.type}`,
-                        message: `To protect your costs and ours, we've automatically applied a $${currentPlan?.initial_billing_limit} billing limit for ${props.product.name}.`,
-                        action: {
-                            onClick: () => {
-                                actions.setIsEditingBillingLimit(true)
-                                setTimeout(() => {
-                                    if (props.billingLimitInputRef?.current) {
-                                        props.billingLimitInputRef?.current.focus()
-                                        props.billingLimitInputRef?.current.scrollIntoView({
-                                            behavior: 'smooth',
-                                            block: 'nearest',
-                                        })
-                                    }
-                                }, 0)
-                            },
-                            children: 'Update billing limit',
-                        },
-                    })
-                } else {
-                    setTimeout(() => {
-                        if (props.productRef?.current) {
-                            props.productRef?.current.scrollIntoView({
-                                behavior: 'smooth',
-                                block: 'center',
-                            })
-                        }
-                    }, 0)
-                }
+                setTimeout(() => {
+                    if (props.productRef?.current) {
+                        props.productRef?.current.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'center',
+                        })
+                    }
+                }, 0)
             }
         },
         initiateProductUpgrade: ({ plan, product, redirectPath }) => {

diff --git a/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx b/frontend/src/scenes/onboarding/OnboardingBillingStep.tsx
@@ -1,5 +1,5 @@
 import { IconCheckCircle } from '@posthog/icons'
-import { LemonBanner, LemonButton } from '@posthog/lemon-ui'
+import { LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { BillingUpgradeCTA } from 'lib/components/BillingUpgradeCTA'
 import { StarHog } from 'lib/components/hedgehogs'
@@ -33,7 +33,6 @@ export const OnboardingBillingStep = ({
     const { currentAndUpgradePlans } = useValues(billingProductLogic({ product }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
     const plan = currentAndUpgradePlans?.upgradePlan
-    const currentPlan = currentAndUpgradePlans?.currentPlan
 
     const [showPlanComp, setShowPlanComp] = useState(false)
 
@@ -92,15 +91,6 @@ export const OnboardingBillingStep = ({
                             >
                                 {showPlanComp ? 'Hide' : 'Show'} plans
                             </LemonButton>
-                            {currentPlan?.initial_billing_limit && (
-                                <div className="mt-2">
-                                    <LemonBanner type="info">
-                                        To protect your costs and ours, this product has an initial billing limit of $
-                                        {currentPlan.initial_billing_limit}. You can change or remove this limit on the
-                                        Billing page.
-                                    </LemonBanner>
-                                </div>
-                            )}
                         </div>
                     )}