feat: show alert when we automatically apply billing limit upon subscribe

frontend/src/lib/components/BillingAlertsV2.tsx

@@ -21,9 +21,12 @@ export function BillingAlertsV2(): JSX.Element | null {
         return null
     }
 
-    const showButton = billingAlert.contactSupport || currentLocation.pathname !== urls.organizationBilling()
+    const showButton =
+        billingAlert.action || billingAlert.contactSupport || currentLocation.pathname !== urls.organizationBilling()
 
-    const buttonProps = billingAlert.contactSupport
+    const buttonProps = billingAlert.action
+        ? billingAlert.action
+        : billingAlert.contactSupport
         ? {
               to: 'mailto:[email protected]',
               children: billingAlert.buttonCTA || 'Contact support',

frontend/src/scenes/billing/BillingLimitInput.tsx

@@ -78,7 +78,7 @@ export const BillingLimitInput = ({ product }: { product: BillingProductV2Type }
         return null
     }
     return (
-        <div className="border-t border-border p-8">
+        <div className="border-t border-border p-8" data-attr={`billing-limit-input-${product.type.replace('_', '-')}`}>
             <div className="flex">
                 <div className="flex items-center gap-1">
                     {!isEditingBillingLimit ? (

frontend/src/scenes/billing/billingLogic.ts

@@ -24,6 +24,7 @@ export interface BillingAlertConfig {
     contactSupport?: boolean
     buttonCTA?: string
     dismissKey?: string
+    action?: any
 }
 
 const parseBillingResponse = (data: Partial<BillingV2Type>): BillingV2Type => {
@@ -146,6 +147,45 @@ export const billingLogic = kea<billingLogicType>([
         billingAlert: [
             (s) => [s.billing, s.preflight, s.projectedTotalAmountUsd],
             (billing, preflight, projectedTotalAmountUsd): BillingAlertConfig | undefined => {
+                if (router.values.searchParams['products']) {
+                    let upgradedProducts = router.values.searchParams['products'].split(',')
+                    upgradedProducts = billing?.products.filter((product) => upgradedProducts.includes(product.type))
+                    const alerts: BillingAlertConfig[] = []
+                    upgradedProducts?.forEach((product: BillingProductV2Type) => {
+                        const currentPlan = product.plans.find((plan) => plan.current_plan)
+                        if (currentPlan?.initial_billing_limit) {
+                            alerts.push({
+                                status: 'warning',
+                                title: 'Billing Limit Automatically Applied',
+                                message: `To protect your and our costs, we've automatically applied a $${currentPlan?.initial_billing_limit} billing limit for ${product.name}.`,
+                                action: {
+                                    onClick: () => {
+                                        const element: HTMLElement = document.body.querySelector(
+                                            `[data-attr="billing-limit-input-${product.type.replace(
+                                                '_',
+                                                '-'
+                                            )}"] .text-link`
+                                        ) as HTMLElement
+                                        element?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+                                        element?.click()
+                                        setTimeout(() => {
+                                            const inputElement: HTMLElement = document.body.querySelector(
+                                                `[data-attr="billing-limit-input-${product.type.replace(
+                                                    '_',
+                                                    '-'
+                                                )}"] input`
+                                            ) as HTMLElement
+                                            inputElement?.focus()
+                                        }, 0)
+                                    },
+                                    children: 'Update billing limit',
+                                },
+                            })
+                        }
+                    })
+                    // There should only be one product being upgraded at a time.
+                    return alerts.length ? alerts[0] : undefined
+                }
                 if (!billing || !preflight?.cloud) {
                     return
                 }