feat: support addon features for paygate mini (#21352)

* support addon features for paygate mini

* improve addon language

* fix

* Update UI snapshots for `chromium` (2)

* Update UI snapshots for `webkit` (2)

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (2)

* fix

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

frontend/src/lib/components/PayGateMini/PayGateMini.tsx

@@ -4,7 +4,6 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import { lowercaseFirstLetter } from 'lib/utils'
 import posthog from 'posthog-js'
 import { useEffect } from 'react'
 import { billingLogic } from 'scenes/billing/billingLogic'
@@ -20,7 +19,10 @@ import { payGateMiniLogic } from './payGateMiniLogic'
 export interface PayGateMiniProps {
     feature: AvailableFeature
     currentUsage?: number
-    children: React.ReactNode
+    /**
+     * The content to show when the feature is available. Will show nothing if children is undefined.
+     */
+    children?: React.ReactNode
     overrideShouldShowGate?: boolean
     className?: string
     background?: boolean
@@ -41,7 +43,7 @@ export function PayGateMini({
     background = true,
     isGrandfathered,
 }: PayGateMiniProps): JSX.Element | null {
-    const { productWithFeature, featureInfo, featureAvailableOnOrg, gateVariant } = useValues(
+    const { productWithFeature, featureInfo, featureAvailableOnOrg, gateVariant, isAddonProduct } = useValues(
         payGateMiniLogic({ featureKey: feature, currentUsage })
     )
     const { preflight } = useValues(preflightLogic)
@@ -67,7 +69,9 @@ export function PayGateMini({
         return null // Don't show anything if paid features are explicitly disabled
     }
 
-    return featureFlags[FEATURE_FLAGS.SUBSCRIBE_FROM_PAYGATE] === 'test' ? (
+    return featureFlags[FEATURE_FLAGS.SUBSCRIBE_FROM_PAYGATE] === 'test' &&
+        // we don't support plan comparisons for addons yet, so we'll use the variant that just sends them to the billing page
+        !isAddonProduct ? (
         gateVariant && productWithFeature && featureInfo && !overrideShouldShowGate ? (
             <div
                 className={clsx(
@@ -108,6 +112,10 @@ export function PayGateMini({
                         <p>
                             {gateVariant === 'move-to-cloud' ? (
                                 <>This feature is only available on PostHog Cloud.</>
+                            ) : isAddonProduct ? (
+                                <>
+                                    Subscribe to the <b>{productWithFeature?.name}</b> addon to use this feature.
+                                </>
                             ) : (
                                 <>
                                     Upgrade your <b>{productWithFeature?.name}</b> plan to use this feature.
@@ -174,16 +182,22 @@ export function PayGateMini({
                     </p>
                 </div>
             ) : (
-                <p>
-                    {gateVariant === 'move-to-cloud' ? (
-                        <>On PostHog Cloud, you can </>
-                    ) : (
-                        <>
-                            Upgrade your <b>{productWithFeature?.name}</b> plan to{' '}
-                        </>
-                    )}
-                    {featureInfo.description ? lowercaseFirstLetter(featureInfo.description) : 'use this feature.'}
-                </p>
+                <>
+                    <p>{featureInfo.description}</p>
+                    <p>
+                        {gateVariant === 'move-to-cloud' ? (
+                            <>This feature is only available on PostHog Cloud.</>
+                        ) : isAddonProduct ? (
+                            <>
+                                Subscribe to the <b>{productWithFeature?.name}</b> addon to use this feature.
+                            </>
+                        ) : (
+                            <>
+                                Upgrade your <b>{productWithFeature?.name}</b> plan to use this feature.
+                            </>
+                        )}
+                    </p>
+                </>
             )}
             {isGrandfathered && (
                 <div className="flex gap-x-2 bg-side p-4 rounded text-left mb-4">

frontend/src/lib/components/PayGateMini/PayGateMiniButton.tsx

@@ -5,22 +5,28 @@ import { billingProductLogic } from 'scenes/billing/billingProductLogic'
 import { PlanComparisonModal } from 'scenes/billing/PlanComparison'
 import { urls } from 'scenes/urls'
 
-import { BillingProductV2Type, BillingV2FeatureType } from '~/types'
+import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType } from '~/types'
 
 export const PayGateMiniButton = ({
     product,
     gateVariant,
     featureInfo,
     onClick,
 }: {
-    product: BillingProductV2Type
+    product: BillingProductV2Type | BillingProductV2AddonType
     featureInfo: BillingV2FeatureType
     gateVariant: 'add-card' | 'contact-sales' | 'move-to-cloud'
     onClick?: () => void
 }): JSX.Element => {
     const { isPlanComparisonModalOpen } = useValues(billingProductLogic({ product }))
     const { toggleIsPlanComparisonModalOpen } = useActions(billingProductLogic({ product }))
 
+    // We know that the product is a BillingProductV2Type because that's the only
+    // type that can be used here from the PayGateMini component. But TypeScript doesn't
+    // know that, so we need to cast it to the correct type, and it's simpler to do this
+    // here than in the PayGateMini component.
+    const typedProduct = product as BillingProductV2Type
+
     return (
         <>
             <LemonButton
@@ -53,7 +59,7 @@ export const PayGateMiniButton = ({
             </LemonButton>
             <PlanComparisonModal
                 key={`modal-${featureInfo.key}`}
-                product={product}
+                product={typedProduct}
                 modalOpen={isPlanComparisonModalOpen}
                 onClose={() => toggleIsPlanComparisonModalOpen()}
             />

frontend/src/lib/components/PayGateMini/payGateMiniLogic.tsx

@@ -3,7 +3,7 @@ import { billingLogic } from 'scenes/billing/billingLogic'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { userLogic } from 'scenes/userLogic'
 
-import { AvailableFeature } from '~/types'
+import { AvailableFeature, BillingProductV2AddonType, BillingProductV2Type } from '~/types'
 
 import type { payGateMiniLogicType } from './payGateMiniLogicType'
 
@@ -35,8 +35,22 @@ export const payGateMiniLogic = kea<payGateMiniLogicType>([
     selectors(({ values, props }) => ({
         productWithFeature: [
             (s) => [s.billing],
-            (billing) =>
-                billing?.products?.find((product) => product.features?.some((f) => f.key === props.featureKey)),
+            (billing) => {
+                let foundProduct: BillingProductV2Type | BillingProductV2AddonType | undefined =
+                    billing?.products?.find((product) => product.features?.some((f) => f.key === props.featureKey))
+                if (!foundProduct) {
+                    const allAddons = billing?.products?.map((product) => product.addons).flat() || []
+                    foundProduct = allAddons.find((addon) => addon.features?.some((f) => f.key === props.featureKey))
+                }
+                return foundProduct
+            },
+        ],
+        isAddonProduct: [
+            (s) => [s.billing, s.productWithFeature],
+            (billing, productWithFeature) =>
+                billing?.products?.some((product) =>
+                    product.addons?.some((addon) => addon.type === productWithFeature?.type)
+                ),
         ],
         featureInfo: [
             (s) => [s.productWithFeature],

frontend/src/mocks/fixtures/_billing_v2.tsx

@@ -334,6 +334,17 @@ export const billingJson: BillingV2Type = {
                 {
                     name: 'Group analytics',
                     inclusion_only: false,
+                    features: [
+                        {
+                            key: 'group_analytics',
+                            name: 'Group analytics',
+                            description:
+                                'Associate events with a group - such as a company, community, or project - and analyze them in that context.',
+                            unit: null,
+                            limit: null,
+                            note: null,
+                        },
+                    ],
                     description:
                         'Associate events with a group or entity - such as a company, community, or project. Analyze these events as if they were sent by that entity itself. Great for B2B, marketplaces, and more.',
                     price_description: null,
@@ -514,6 +525,17 @@ export const billingJson: BillingV2Type = {
                 {
                     name: 'Data pipelines',
                     inclusion_only: false,
+                    features: [
+                        {
+                            key: 'data_pipelines',
+                            name: 'Data pipelines',
+                            description:
+                                'Get your PostHog data into your data warehouse or other tools like BigQuery, Redshift, Customer.io, and more.',
+                            unit: null,
+                            limit: null,
+                            note: null,
+                        },
+                    ],
                     description:
                         'Get your PostHog data into your data warehouse or other tools like BigQuery, Redshift, Customer.io, and more.',
                     price_description: null,

frontend/src/scenes/billing/Billing.stories.tsx

@@ -118,6 +118,7 @@ export const BillingUnsubscribeModal_DataPipelines = (): JSX.Element => {
             usage_key: '',
             contact_support: false,
             inclusion_only: false,
+            features: [],
         },
     ]
 

frontend/src/scenes/plugins/tabs/batch-exports/BatchExportsTab.tsx

@@ -6,9 +6,7 @@ import { AvailableFeature } from '~/types'
 export function BatchExportsTab(): JSX.Element {
     return (
         <>
-            <PayGateMini feature={AvailableFeature.DATA_PIPELINES}>
-                <></>
-            </PayGateMini>
+            <PayGateMini feature={AvailableFeature.DATA_PIPELINES} />
             <BatchExportsList /> {/* We always show enabled batch exports */}
         </>
     )

frontend/src/types.ts

@@ -1446,6 +1446,7 @@ export interface BillingProductV2AddonType {
     usage_key?: string
     free_allocation?: number | null
     percentage_usage?: number
+    features: BillingV2FeatureType[]
 }
 export interface BillingV2Type {
     customer_id: string