diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png
index 208c245f98273..85e97d00c2662 100644
Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png differ
diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
index 80186ea092793..b717e26de15a8 100644
--- a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
+++ b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -1,9 +1,8 @@
import { IconInfo } from '@posthog/icons'
-import { LemonButton, Link, Tooltip } from '@posthog/lemon-ui'
+import { Link, Tooltip } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { FEATURE_FLAGS } from 'lib/constants'
-import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
import { lowercaseFirstLetter } from 'lib/utils'
import { billingLogic } from 'scenes/billing/billingLogic'
import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
@@ -13,8 +12,6 @@ import { userLogic } from 'scenes/userLogic'
import { AvailableFeature } from '~/types'
-import { PayGateMiniButton } from './PayGateMiniButton'
-
export interface PayGateMiniProps {
feature: AvailableFeature
currentUsage?: number
@@ -41,8 +38,7 @@ export function PayGateMini({
}: PayGateMiniProps): JSX.Element | null {
const { preflight, isCloudOrDev } = useValues(preflightLogic)
const { hasAvailableFeature, availableFeature } = useValues(userLogic)
- const { billing, billingLoading } = useValues(billingLogic)
- const { featureFlags } = useValues(featureFlagLogic)
+ const { billing } = useValues(billingLogic)
const { hideUpgradeModal } = useActions(sceneLogic)
const product = billing?.products.find((product) => product.features?.some((f) => f.key === feature))
@@ -63,85 +59,11 @@ export function PayGateMini({
}
}
- if (billingLoading) {
- return null
- }
-
if (gateVariant && preflight?.instance_preferences?.disable_paid_fs) {
return null // Don't show anything if paid features are explicitly disabled
}
- return featureFlags[FEATURE_FLAGS.SUBSCRIBE_FROM_PAYGATE] === 'test' ? (
- gateVariant && product && featureInfo ? (
-
-
{getProductIcon(product.name, featureInfo.icon_key)}
-
{featureInfo.name}
- {featureDetailsWithLimit?.limit && gateVariant !== 'move-to-cloud' ? (
-
-
- You've reached your usage limit for{' '}
-
-
- {featureInfo.name}
-
-
-
- .
-
-
- Your current plan limit: {' '}
-
- {featureDetailsWithLimit.limit} {featureDetailsWithLimit.unit}
-
-
-
- Please upgrade your {product.name} plan to create more {featureInfo.name}
-
-
- ) : (
- <>
-
{featureInfo.description}
-
- {gateVariant === 'move-to-cloud' ? (
- <>This feature is only available on PostHog Cloud.>
- ) : (
- <>
- Upgrade your {product?.name} plan to use this feature.
- >
- )}
-
- >
- )}
- {isGrandfathered && (
-
-
-
- Your plan does not include this feature, but previously set settings may remain. Please
- upgrade your plan to regain access.
-
-
- )}
- {featureInfo.docsUrl && (
-
- <>
-
- Learn more in PostHog Docs.
-
- >
-
- )}
-
-
- ) : (
- {children}
- )
- ) : gateVariant && product && featureInfo ? (
+ return gateVariant && product && featureInfo ? (
void
-}): JSX.Element => {
- const { isPlanComparisonModalOpen } = useValues(billingProductLogic({ product }))
- const { toggleIsPlanComparisonModalOpen } = useActions(billingProductLogic({ product }))
-
- return (
- <>
-
{
- if (gateVariant === 'add-card') {
- toggleIsPlanComparisonModalOpen(featureInfo.key)
- }
- onClick?.()
- }}
- >
- {gateVariant === 'add-card'
- ? `Compare plans`
- : gateVariant === 'contact-sales'
- ? 'Contact sales'
- : 'Move to PostHog Cloud'}
-
-
toggleIsPlanComparisonModalOpen()}
- />
- >
- )
-}
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index 77d5f9c37eb0f..62e78b2bcb2a9 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -208,7 +208,6 @@ export const FEATURE_FLAGS = {
SESSION_REPLAY_LINKED_VARIANTS: 'session-replay-linked-variants', // owner: #team-replay
REPLAY_ERROR_CLUSTERING: 'session-replay-error-clustering', // owner: #team-replay
AUDIT_LOGS_ACCESS: 'audit-logs-access', // owner: #team-growth
- SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
} as const
export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
@@ -288,5 +287,3 @@ export const SESSION_REPLAY_MINIMUM_DURATION_OPTIONS: LemonSelectOptions([
`${siteUrl}/api/plugin_config/${id}/frontend${reload ? '?_=' + new Date().valueOf() : ''}`
)
if ('getFrontendApp' in exports) {
- const app = exports.getFrontendApp()
+ const app = exports.getFrontendApp(frontendAppRequire)
if ('scene' in app) {
if (app.scene.onInit) {
window.setTimeout(() => app.scene.onInit(values.appConfigs[id]), 0)
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index c616ffd4591a1..72bd7e50e4318 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -2,7 +2,6 @@ import { IconCheckCircle, IconChevronDown, IconDocument, IconInfo, IconPlus } fr
import { LemonButton, LemonSelectOptions, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
import { IconChevronRight } from 'lib/lemon-ui/icons'
import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -26,6 +25,8 @@ import { PlanComparisonModal } from './PlanComparison'
import { ProductPricingModal } from './ProductPricingModal'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
+export const UNSUBSCRIBE_SURVEY_ID = '018b6e13-590c-0000-decb-c727a2b3f462'
+
export const getTierDescription = (
tiers: BillingV2TierType[],
i: number,
@@ -639,7 +640,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
)}
- toggleIsPlanComparisonModalOpen()}>
+
And more...
@@ -658,7 +659,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
{product.unit}s free
, then just ${upgradePlan?.tiers?.[1]?.unit_amount_usd} per {product.unit} and{' '}
- toggleIsPlanComparisonModalOpen()}>volume discounts.
+ volume discounts.
)}
@@ -667,7 +668,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
toggleIsPlanComparisonModalOpen()}
+ onClick={toggleIsPlanComparisonModalOpen}
className="grow"
center
>
@@ -709,7 +710,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
product={product}
includeAddons={isOnboarding}
modalOpen={isPlanComparisonModalOpen}
- onClose={() => toggleIsPlanComparisonModalOpen()}
+ onClose={toggleIsPlanComparisonModalOpen}
/>
)}
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index 4de8fcfce9d8d..9de8de4d116f1 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -4,18 +4,17 @@ import { IconCheckCircle, IconWarning, IconX } from '@posthog/icons'
import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
import clsx from 'clsx'
import { useActions, useValues } from 'kea'
-import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
import { Tooltip } from 'lib/lemon-ui/Tooltip'
import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
import React from 'react'
import { getProductIcon } from 'scenes/products/Products'
-import { urls } from 'scenes/urls'
import useResizeObserver from 'use-resize-observer'
import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
import { billingLogic } from './billingLogic'
+import { UNSUBSCRIBE_SURVEY_ID } from './BillingProduct'
import { billingProductLogic } from './billingProductLogic'
import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
@@ -119,7 +118,7 @@ export const PlanComparison = ({
const { width, ref: planComparisonRef } = useResizeObserver()
const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
const currentPlanIndex = plans.findIndex((plan) => plan.current_plan)
- const { surveyID, comparisonModalHighlightedFeatureKey } = useValues(billingProductLogic({ product }))
+ const { surveyID } = useValues(billingProductLogic({ product }))
const { reportSurveyShown, setSurveyResponse } = useActions(billingProductLogic({ product }))
const upgradeButtons = plans?.map((plan, i) => {
@@ -131,18 +130,10 @@ export const PlanComparison = ({
? 'mailto:sales@posthog.com?subject=Enterprise%20plan%20request'
: !plan.included_if
? getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)
- : plan.included_if == 'has_subscription' &&
- i >= currentPlanIndex &&
- !billing?.has_active_subscription
- ? urls.organizationBilling()
: undefined
}
type={plan.current_plan || i < currentPlanIndex ? 'secondary' : 'primary'}
- status={
- plan.current_plan || (plan.included_if == 'has_subscription' && i >= currentPlanIndex)
- ? 'default'
- : 'alt'
- }
+ status={plan.current_plan ? 'default' : 'alt'}
fullWidth
center
disableClientSideRouting={!plan.contact_support}
@@ -150,7 +141,7 @@ export const PlanComparison = ({
plan.included_if == 'has_subscription' && i >= currentPlanIndex
? billing?.has_active_subscription
? 'Unsubscribe from all products to remove'
- : null
+ : 'Subscribe to any product for access'
: plan.current_plan
? 'Current plan'
: undefined
@@ -172,10 +163,6 @@ export const PlanComparison = ({
? 'Downgrade'
: plan.contact_support
? 'Get in touch'
- : plan.included_if == 'has_subscription' &&
- i >= currentPlanIndex &&
- !billing?.has_active_subscription
- ? 'View products'
: 'Subscribe'}
{!plan.current_plan && !plan.free_allocation && includeAddons && product.addons?.length > 0 && (
@@ -277,11 +264,11 @@ export const PlanComparison = ({
{fullyFeaturedPlan?.features?.map((feature, i) => (
-
- {feature.name}
-
+ {feature.name}
{plans?.map((plan) => (
diff --git a/frontend/src/scenes/billing/billingProductLogic.ts b/frontend/src/scenes/billing/billingProductLogic.ts
index acc6817cce2ea..8c4f19008d244 100644
--- a/frontend/src/scenes/billing/billingProductLogic.ts
+++ b/frontend/src/scenes/billing/billingProductLogic.ts
@@ -40,7 +40,7 @@ export const billingProductLogic = kea([
billingLoaded: true,
setShowTierBreakdown: (showTierBreakdown: boolean) => ({ showTierBreakdown }),
toggleIsPricingModalOpen: true,
- toggleIsPlanComparisonModalOpen: (highlightedFeatureKey?: string) => ({ highlightedFeatureKey }),
+ toggleIsPlanComparisonModalOpen: true,
setSurveyResponse: (surveyResponse: string, key: string) => ({ surveyResponse, key }),
reportSurveyShown: (surveyID: string, productType: string) => ({ surveyID, productType }),
reportSurveySent: (surveyID: string, surveyResponse: Record) => ({
@@ -101,12 +101,6 @@ export const billingProductLogic = kea([
setSurveyID: (_, { surveyID }) => surveyID,
},
],
- comparisonModalHighlightedFeatureKey: [
- null as string | null,
- {
- toggleIsPlanComparisonModalOpen: (_, { highlightedFeatureKey }) => highlightedFeatureKey || null,
- },
- ],
}),
selectors(({ values }) => ({
customLimitUsd: [