From a83d7385537b75ae8f4c1c33794024bdc74be2ee Mon Sep 17 00:00:00 2001
From: Bianca Yang <bianca@posthog.com>
Date: Thu, 16 Nov 2023 11:46:26 -0800
Subject: [PATCH] Update to use billingAlert banner

---
 .../src/lib/components/BillingAlertsV2.tsx    |  7 ++--
 .../src/scenes/billing/BillingLimitInput.tsx  |  2 +-
 frontend/src/scenes/billing/billingLogic.ts   | 33 +++++++++++++++++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/BillingAlertsV2.tsx b/frontend/src/lib/components/BillingAlertsV2.tsx
index 21a4023a6262a..ce1d4a7498618 100644
--- a/frontend/src/lib/components/BillingAlertsV2.tsx
+++ b/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:sales@posthog.com',
               children: billingAlert.buttonCTA || 'Contact support',
diff --git a/frontend/src/scenes/billing/BillingLimitInput.tsx b/frontend/src/scenes/billing/BillingLimitInput.tsx
index 6f1dd652a4acb..ab1145f61f598 100644
--- a/frontend/src/scenes/billing/BillingLimitInput.tsx
+++ b/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 ? (
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
index 54f74a70cfc4c..40d82505b078c 100644
--- a/frontend/src/scenes/billing/billingLogic.ts
+++ b/frontend/src/scenes/billing/billingLogic.ts
@@ -25,6 +25,7 @@ export interface BillingAlertConfig {
     contactSupport?: boolean
     buttonCTA?: string
     dismissKey?: string
+    action?: any
 }
 
 const parseBillingResponse = (data: Partial<BillingV2Type>): BillingV2Type => {
@@ -152,14 +153,40 @@ export const billingLogic = kea<billingLogicType>([
                 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) {
-                            lemonToast.info(
-                                `Automatically added ${currentPlan?.initial_billing_limit} billing limit for ${product.name}`
-                            )
+                            alerts.push({
+                                status: 'info',
+                                title: 'Billing Limit Applied',
+                                message: `Automatically added a $${currentPlan?.initial_billing_limit} billing limit for ${product.name}`,
+                                action: {
+                                    onClick: () => {
+                                        const element = document.body.querySelector(
+                                            `[data-attr="billing-limit-input-${product.type.replace(
+                                                '_',
+                                                '-'
+                                            )}"] .text-link`
+                                        )
+                                        element?.scrollIntoView({ block: 'center', behavior: 'smooth' })
+                                        element?.click()
+                                        setTimeout(() => {
+                                            const inputElement = document.body.querySelector(
+                                                `[data-attr="billing-limit-input-${product.type.replace(
+                                                    '_',
+                                                    '-'
+                                                )}"] input`
+                                            )
+                                            inputElement?.focus()
+                                        }, 0)
+                                    },
+                                    children: 'Update billing limit',
+                                },
+                            })
                         }
                     })
+                    return alerts.length ? alerts[0] : undefined
                 }
                 if (!billing || !preflight?.cloud) {
                     return