Update to use billingAlert banner

PostHog · Nov 16, 2023 · a83d738 · a83d738
1 parent 50c2e57
commit a83d738
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git 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:[email protected]',
               children: billingAlert.buttonCTA || 'Contact support',

diff --git 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
@@ -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