Upgrade to create more {featureInfo.name}
) : (- Please upgrade your {productWithFeature.name} plan to create more {featureInfo.name} + Upgrade your {productWithFeature.name} plan to create more {featureInfo.name}
)}{featureInfo.description}
-{renderGateVariantMessage(gateVariant, productWithFeature, isAddonProduct)}
+{renderGateVariantMessage(gateVariant, productWithFeature, billing, featureFlags, isAddonProduct)}
) } @@ -242,6 +263,8 @@ const renderUsageLimitMessage = ( const renderGateVariantMessage = ( gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud' | null, productWithFeature: BillingProductV2AddonType | BillingProductV2Type, + billing: BillingV2Type | null, + featureFlags: FeatureFlagsSet, isAddonProduct?: boolean ): JSX.Element => { if (gateVariant === 'move-to-cloud') { @@ -252,7 +275,13 @@ const renderGateVariantMessage = ( Subscribe to the {productWithFeature?.name} addon to use this feature. ) + } else if ( + featureFlags[FEATURE_FLAGS.SUBSCRIBE_TO_ALL_PRODUCTS] === 'test' && + billing?.subscription_level === 'free' + ) { + return <>Upgrade to use this feature. } + return ( <> Upgrade your {productWithFeature?.name} plan to use this feature. diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx index c4009ae7d77d6..92327684c1fc2 100644 --- a/frontend/src/lib/constants.tsx +++ b/frontend/src/lib/constants.tsx @@ -206,6 +206,7 @@ export const FEATURE_FLAGS = { PERSONLESS_EVENTS_NOT_SUPPORTED: 'personless-events-not-supported', // owner: @raquelmsmith SESSION_REPLAY_UNIVERSAL_FILTERS: 'session-replay-universal-filters', // owner: #team-replay ALERTS: 'alerts', // owner: github.com/nikitaevg + SUBSCRIBE_TO_ALL_PRODUCTS: 'subscribe-to-all-products', // owner: #team-growth ERROR_TRACKING: 'error-tracking', // owner: #team-replay SETTINGS_BOUNCE_RATE_PAGE_VIEW_MODE: 'settings-bounce-rate-page-view-mode', // owner: @robbie-c SURVEYS_BRANCHING_LOGIC: 'surveys-branching-logic', // owner: @jurajmajerik #team-feature-success diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx index 9ce2a5eb28fa2..c49bf90d79933 100644 --- a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx +++ b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.tsx @@ -19,6 +19,7 @@ export interface LemonBannerProps { className?: string /** If provided, the banner will be dismissed and hidden when the key is set in localStorage. */ dismissKey?: string + hideIcon?: boolean } /** Generic alert message. */ @@ -29,6 +30,7 @@ export function LemonBanner({ action, className, dismissKey = '', + hideIcon = false, }: LemonBannerProps): JSX.Element | null { const logic = lemonBannerLogic({ dismissKey }) const { isDismissed } = useValues(logic) @@ -49,11 +51,12 @@ export function LemonBanner({ return (| + {platformAndSupportPlans?.map((plan) => ( + |
+ {plan.name}+ |
+ ))}
+ |
| Monthly {product.tiered && 'base '} price | + {platformAndSupportPlans?.map((plan) => { + const { prorationAmount, isProrated } = getProration({ + timeRemainingInSeconds, + timeTotalInSeconds, + amountUsd: plan.unit_amount_usd, + hasActiveSubscription: billing?.has_active_subscription, + }) + return ( +
+ {getPlanDescription(plan)}
+ {isProrated && (
+ + {getProrationMessage(prorationAmount, plan.unit_amount_usd)} + + )} + |
+ )
+ })}
+ |
| + {upgradeButtons} + | ||
|
+
+ {getProductIcon(includedProduct.name, includedProduct.icon_key, 'text-2xl')}
+
+ |
+ ||
|---|---|---|
|
+ |
+ {includedPlans?.map((plan) => (
+
+ |
+ )}
+
+ |
+
|
+ {includeAddons && currentProduct.addons?.length > 0 && (
+ + {currentProduct.name} + + )} +Priced per {currentProduct.unit} + |
+ {currentProduct.plans?.map((plan) => (
+
+ |
+ ))}
+ |||
|---|---|---|---|---|
|
+
+ {feature.name}
+
+ |
+ {currentProduct.plans?.map((plan) => (
+
+ |
+ ))}
+ |||
+ Available add-ons:+ |
+ ||||
|
+
+ + Priced per {addon.unit} + + |
+ {plans?.map((plan, i) => {
+ // If the parent plan is free, the addon isn't available
+ return !addon.inclusion_only ? (
+ plan.free_allocation && !plan.tiers ? (
+
+ + Not available on this plan. + + |
+ ) : (
+
+ |
+ )
+ ) : plan.free_allocation && !plan.tiers ? (
+
+ |
+ ) : (
+
+ |
+ )
+ })}
+
+ setShowTiers(false)} className="text-xs"> + Hide volume discounts + +
+ + ) : ( + <> ++ + First {convertLargeNumberToWords(plan?.tiers?.[0].up_to || 0, null)} {addon.unit}s free + + , then just ${plan?.tiers?.[1].unit_amount_usd}. +
++ setShowTiers(true)} className="text-xs"> + Show volume discounts + +
+ + ) +} diff --git a/frontend/src/scenes/billing/Billing.tsx b/frontend/src/scenes/billing/Billing.tsx index c6cb267ffd255..7052186af73f6 100644 --- a/frontend/src/scenes/billing/Billing.tsx +++ b/frontend/src/scenes/billing/Billing.tsx @@ -8,20 +8,24 @@ import { Field, Form } from 'kea-forms' import { router } from 'kea-router' import { SurprisedHog } from 'lib/components/hedgehogs' import { supportLogic } from 'lib/components/Support/supportLogic' +import { FEATURE_FLAGS } from 'lib/constants' import { dayjs } from 'lib/dayjs' import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' import { LemonBanner } from 'lib/lemon-ui/LemonBanner' import { LemonLabel } from 'lib/lemon-ui/LemonLabel/LemonLabel' import { SpinnerOverlay } from 'lib/lemon-ui/Spinner/Spinner' import { Tooltip } from 'lib/lemon-ui/Tooltip' +import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { useEffect } from 'react' import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic' import { SceneExport } from 'scenes/sceneTypes' import { urls } from 'scenes/urls' +import { BillingCTAHero } from './BillingCTAHero' import { BillingHero } from './BillingHero' import { billingLogic } from './billingLogic' import { BillingProduct } from './BillingProduct' +import { UnsubscribeCard } from './UnsubscribeCard' export const scene: SceneExport = { component: Billing, @@ -42,6 +46,7 @@ export function Billing(): JSX.Element { const { reportBillingV2Shown } = useActions(billingLogic) const { preflight, isCloudOrDev } = useValues(preflightLogic) const { openSupportForm } = useActions(supportLogic) + const { featureFlags } = useValues(featureFlagLogic) if (preflight && !isCloudOrDev) { router.actions.push(urls.default()) @@ -87,8 +92,9 @@ export function Billing(): JSX.Element { } const products = billing?.products + const platformAndSupportProduct = products?.find((product) => product.type === 'platform_and_support') return ( -