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: [