fix: allow usage exceeded alert to be dismissed

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -57,7 +57,7 @@ export function Navigation({
                         sceneConfig?.layout === 'app-raw' && 'Navigation3000__scene--raw'
                     )}
                 >
-                    <BillingAlertsV2 />
+                    {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}
                     {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
                     {children}
                 </div>

frontend/src/lib/components/BillingAlertsV2.tsx

@@ -48,10 +48,13 @@ export function BillingAlertsV2(): JSX.Element | null {
             <LemonBanner
                 type={billingAlert.status}
                 action={showButton ? buttonProps : undefined}
-                onClose={() => {
-                    billingAlert.status !== 'error' ? () => setAlertHidden(true) : undefined
-                    billingAlert.onClose?.()
-                }}
+                onClose={
+                    billingAlert.status !== 'error'
+                        ? () => setAlertHidden(true)
+                        : billingAlert.onClose
+                        ? () => billingAlert.onClose?.()
+                        : undefined
+                }
                 dismissKey={billingAlert.dismissKey}
             >
                 <b>{billingAlert.title}</b>

frontend/src/lib/lemon-ui/LemonBanner/lemonBannerLogic.ts

@@ -13,13 +13,15 @@ export const lemonBannerLogic = kea<lemonBannerLogicType>([
     props({} as LemonBannerLogicProps),
     actions({
         dismiss: true,
+        resetDismissKey: true,
     }),
     reducers({
         isDismissed: [
             false,
             { persist: true },
             {
                 dismiss: () => true,
+                resetDismissKey: () => false,
             },
         ],
     }),

frontend/src/scenes/billing/billingLogic.ts

@@ -6,6 +6,7 @@ import { router, urlToAction } from 'kea-router'
 import api from 'lib/api'
 import { dayjs } from 'lib/dayjs'
 import { LemonBannerAction } from 'lib/lemon-ui/LemonBanner/LemonBanner'
+import { lemonBannerLogic } from 'lib/lemon-ui/LemonBanner/lemonBannerLogic'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { pluralize } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
@@ -234,9 +235,14 @@ export const billingLogic = kea<billingLogicType>([
                         message: `You have exceeded the usage limit for ${productOverLimit.name}. Please 
                             ${productOverLimit.subscribed ? 'increase your billing limit' : 'upgrade your plan'}
                             or data loss may occur.`,
+                        dismissKey: 'usage-limit-exceeded',
                     }
                 }
 
+                lemonBannerLogic({ dismissKey: 'usage-limit-exceeded' }).mount()
+                lemonBannerLogic({ dismissKey: 'usage-limit-exceeded' }).actions.resetDismissKey()
+                lemonBannerLogic({ dismissKey: 'usage-limit-exceeded' }).unmount()
+
                 const productApproachingLimit = billing.products?.find(
                     (x) => x.percentage_usage > ALLOCATION_THRESHOLD_ALERT
                 )

frontend/src/scenes/sceneTypes.ts

@@ -126,6 +126,8 @@ export interface SceneConfig {
     layout?: 'app' | 'app-raw' | 'app-container' | 'plain'
     /** Hides project notice (ProjectNotice.tsx). */
     hideProjectNotice?: boolean
+    /** Hides billing notice (BillingAlertsV2.tsx). */
+    hideBillingNotice?: boolean
     /** Personal account management (used e.g. by breadcrumbs) */
     personal?: boolean
     /** Instance management (used e.g. by breadcrumbs) */

frontend/src/scenes/scenes.ts

@@ -269,6 +269,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
     },
     [Scene.Onboarding]: {
         projectBased: true,
+        hideBillingNotice: true,
         hideProjectNotice: true,
     },
     [Scene.ToolbarLaunch]: {