fix: Correctly mount lemonBannerLogic through kea when resetting dism…

…sisKey (#20675) * attempt * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * fix * try again * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * make both cookie dismissers work * separate out the code * fix preflight * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `webkit` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Neil Kakkar <[email protected]>
PostHog · Mar 5, 2024 · 638bfb5 · 638bfb5
1 parent 55e584c
commit 638bfb5
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 81 deletions.
diff --git a/...snapshots__/scenes-app-insights--funnel-time-to-convert-edit--light--webkit.png b/...snapshots__/scenes-app-insights--funnel-time-to-convert-edit--light--webkit.png
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-area-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-area-edit--light--webkit.png
diff --git a/...snapshots__/scenes-app-insights--trends-table-breakdown-edit--light--webkit.png b/...snapshots__/scenes-app-insights--trends-table-breakdown-edit--light--webkit.png
diff --git a/frontend/src/scenes/billing/billingLogic.ts b/frontend/src/scenes/billing/billingLogic.ts
@@ -69,12 +69,29 @@ export const billingLogic = kea<billingLogicType>([
         registerInstrumentationProps: true,
         setRedirectPath: true,
         setIsOnboarding: true,
+        determineBillingAlert: true,
+        setBillingAlert: (billingAlert: BillingAlertConfig | null) => ({ billingAlert }),
     }),
-    connect({
+    connect(() => ({
         values: [featureFlagLogic, ['featureFlags'], preflightLogic, ['preflight']],
-        actions: [userLogic, ['loadUser'], eventUsageLogic, ['reportProductUnsubscribed']],
-    }),
+        actions: [
+            userLogic,
+            ['loadUser'],
+            eventUsageLogic,
+            ['reportProductUnsubscribed'],
+            lemonBannerLogic({ dismissKey: 'usage-limit-exceeded' }),
+            ['resetDismissKey as resetUsageLimitExceededKey'],
+            lemonBannerLogic({ dismissKey: 'usage-limit-approaching' }),
+            ['resetDismissKey as resetUsageLimitApproachingKey'],
+        ],
+    })),
     reducers({
+        billingAlert: [
+            null as BillingAlertConfig | null,
+            {
+                setBillingAlert: (_, { billingAlert }) => billingAlert,
+            },
+        ],
         scrollToProductKey: [
             null as ProductKey | null,
             {
@@ -187,84 +204,6 @@ export const billingLogic = kea<billingLogicType>([
                 return billing?.billing_period?.interval === 'year'
             },
         ],
-        billingAlert: [
-            (s) => [s.billing, s.preflight, s.productSpecificAlert],
-            (billing, preflight, productSpecificAlert): BillingAlertConfig | undefined => {
-                if (productSpecificAlert) {
-                    return productSpecificAlert
-                }
-
-                if (!billing || !preflight?.cloud) {
-                    return
-                }
-
-                if (billing.free_trial_until && billing.free_trial_until.isAfter(dayjs())) {
-                    const remainingDays = billing.free_trial_until.diff(dayjs(), 'days')
-                    const remainingHours = billing.free_trial_until.diff(dayjs(), 'hours')
-
-                    if (remainingHours > 72) {
-                        return
-                    }
-
-                    return {
-                        status: 'info',
-                        title: `Your free trial will end in ${
-                            remainingHours < 24 ? pluralize(remainingHours, 'hour') : pluralize(remainingDays, 'day')
-                        }.`,
-                        message: `Setup billing now to ensure you don't lose access to premium features.`,
-                    }
-                }
-
-                if (billing.deactivated) {
-                    return {
-                        status: 'error',
-                        title: 'Your organization has been temporarily suspended.',
-                        message: 'Please contact support to reactivate it.',
-                        contactSupport: true,
-                    }
-                }
-
-                const productOverLimit = billing.products?.find((x: BillingProductV2Type) => {
-                    return x.percentage_usage > 1 && x.usage_key
-                })
-
-                if (productOverLimit) {
-                    return {
-                        status: 'error',
-                        title: 'Usage limit exceeded',
-                        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
-                )
-
-                if (productApproachingLimit) {
-                    return {
-                        status: 'info',
-                        title: 'You will soon hit your usage limit',
-                        message: `You have currently used ${parseFloat(
-                            (productApproachingLimit.percentage_usage * 100).toFixed(2)
-                        )}% of your ${
-                            productApproachingLimit.usage_key && productApproachingLimit.usage_key.toLowerCase()
-                        } allocation.`,
-                        dismissKey: 'usage-limit-approaching',
-                    }
-                }
-
-                lemonBannerLogic({ dismissKey: 'usage-limit-approaching' }).mount()
-                lemonBannerLogic({ dismissKey: 'usage-limit-approaching' }).actions.resetDismissKey()
-                lemonBannerLogic({ dismissKey: 'usage-limit-approaching' }).unmount()
-            },
-        ],
     }),
     forms(({ actions, values }) => ({
         activateLicense: {
@@ -319,6 +258,84 @@ export const billingLogic = kea<billingLogicType>([
                 router.actions.replace('/organization/billing')
             }
             actions.registerInstrumentationProps()
+
+            actions.determineBillingAlert()
+        },
+        determineBillingAlert: () => {
+            if (values.productSpecificAlert) {
+                actions.setBillingAlert(values.productSpecificAlert)
+                return
+            }
+
+            if (!values.billing || !values.preflight?.cloud) {
+                return
+            }
+
+            if (values.billing.free_trial_until && values.billing.free_trial_until.isAfter(dayjs())) {
+                const remainingDays = values.billing.free_trial_until.diff(dayjs(), 'days')
+                const remainingHours = values.billing.free_trial_until.diff(dayjs(), 'hours')
+
+                if (remainingHours > 72) {
+                    return
+                }
+
+                actions.setBillingAlert({
+                    status: 'info',
+                    title: `Your free trial will end in ${
+                        remainingHours < 24 ? pluralize(remainingHours, 'hour') : pluralize(remainingDays, 'day')
+                    }.`,
+                    message: `Setup billing now to ensure you don't lose access to premium features.`,
+                })
+                return
+            }
+
+            if (values.billing.deactivated) {
+                actions.setBillingAlert({
+                    status: 'error',
+                    title: 'Your organization has been temporarily suspended.',
+                    message: 'Please contact support to reactivate it.',
+                    contactSupport: true,
+                })
+                return
+            }
+
+            const productOverLimit = values.billing.products?.find((x: BillingProductV2Type) => {
+                return x.percentage_usage > 1 && x.usage_key
+            })
+
+            if (productOverLimit) {
+                actions.setBillingAlert({
+                    status: 'error',
+                    title: 'Usage limit exceeded',
+                    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',
+                })
+                return
+            }
+
+            actions.resetUsageLimitExceededKey()
+
+            const productApproachingLimit = values.billing.products?.find(
+                (x) => x.percentage_usage > ALLOCATION_THRESHOLD_ALERT
+            )
+
+            if (productApproachingLimit) {
+                actions.setBillingAlert({
+                    status: 'info',
+                    title: 'You will soon hit your usage limit',
+                    message: `You have currently used ${parseFloat(
+                        (productApproachingLimit.percentage_usage * 100).toFixed(2)
+                    )}% of your ${
+                        productApproachingLimit.usage_key && productApproachingLimit.usage_key.toLowerCase()
+                    } allocation.`,
+                    dismissKey: 'usage-limit-approaching',
+                })
+                return
+            }
+
+            actions.resetUsageLimitApproachingKey()
         },
         registerInstrumentationProps: async (_, breakpoint) => {
             await breakpoint(100)