feat: Experiment with language on billing pages in app

cypress/e2e/billingUpgrade.cy.ts

@@ -0,0 +1,79 @@
+import { decideResponse } from '../fixtures/api/decide'
+import * as fflate from 'fflate'
+
+// Mainly testing to make sure events are fired as expected
+
+describe('Exporting Insights', () => {
+    beforeEach(() => {
+        cy.intercept('https://app.posthog.com/decide/*', (req) =>
+            req.reply(
+                decideResponse({
+                    'billing-upgrade-language': 'credit_card',
+                })
+            )
+        )
+
+        cy.intercept('POST', '**/e/?compression=gzip-js*').as('capture')
+    })
+
+    it('Check that events are being sent on each page visit', () => {
+        // Navigate to any page
+        cy.visit('/insights')
+        // Try to create a new project
+        cy.get('[data-attr=breadcrumb-project').click()
+        cy.get('[data-attr=new-project-button').click()
+        cy.get('[data-attr=upgrade-modal]').should('be.visible')
+        cy.wait('@capture').then(({ request }) => {
+            const data = new Uint8Array(request.body)
+            const decoded = fflate.strFromU8(fflate.decompressSync(data))
+            const decodedJSON = JSON.parse(decoded)
+
+            const matchingEvents = decodedJSON.filter((event) => event.event === 'report subscription status')
+            expect(matchingEvents.length).to.equal(1)
+            expect(matchingEvents[0].properties.has_active_subscription).to.equal(false)
+        })
+
+        cy.visit('/organization/billing')
+        cy.wait('@capture').then(({ request }) => {
+            const data = new Uint8Array(request.body)
+            const decoded = fflate.strFromU8(fflate.decompressSync(data))
+            const decodedJSON = JSON.parse(decoded)
+
+            const matchingEvents = decodedJSON.filter((event) => event.event === 'report subscription status')
+            expect(matchingEvents.length).to.equal(1)
+            expect(matchingEvents[0].properties.has_active_subscription).to.equal(false)
+        })
+
+        // Mock billing response with subscription
+        cy.intercept('/api/billing-v2/', { fixture: 'api/billing-v2/billing-v2.json' })
+        cy.reload()
+        cy.wait('@capture').then(({ request }) => {
+            const data = new Uint8Array(request.body)
+            const decoded = fflate.strFromU8(fflate.decompressSync(data))
+            const decodedJSON = JSON.parse(decoded)
+
+            const matchingEvents = decodedJSON
+                .filter((event) => event.event === 'report subscription status')
+                .sort((eventA, eventB) => (new Date(eventA.timestamp) < new Date(eventB.timestamp) ? 1 : -1))
+            expect(matchingEvents.length).to.equal(2)
+            expect(matchingEvents[0].properties.has_active_subscription).to.equal(true)
+        })
+
+        // Navigate to the onboarding billing step
+        cy.visit('/products')
+        cy.get('[data-attr=product_analytics-onboarding-card]').click()
+        cy.get('[data-attr=onboarding-breadcrumbs] > :nth-child(5)').click()
+        cy.wait('@capture').then(({ request }) => {
+            const data = new Uint8Array(request.body)
+            const decoded = fflate.strFromU8(fflate.decompressSync(data))
+            const decodedJSON = JSON.parse(decoded)
+
+            const matchingEvents = decodedJSON
+                .filter((event) => event.event === 'report subscription status')
+                .sort((eventA, eventB) => (new Date(eventA.timestamp) < new Date(eventB.timestamp) ? 1 : -1))
+            expect(matchingEvents.length).to.equal(2)
+            console.log(matchingEvents)
+            expect(matchingEvents[0].properties.has_active_subscription).to.equal(true)
+        })
+    })
+})

frontend/src/layout/navigation/ProjectSwitcher.tsx

@@ -46,6 +46,7 @@ export function ProjectSwitcherOverlay({ onClickInside }: { onClickInside?: () =
                 fullWidth
                 disabled={!!projectCreationForbiddenReason}
                 tooltip={projectCreationForbiddenReason}
+                data-attr="new-project-button"
                 onClick={() => {
                     onClickInside?.()
                     guardAvailableFeature(

frontend/src/lib/constants.tsx

@@ -201,6 +201,7 @@ export const FEATURE_FLAGS = {
     REPLAY_SIMILAR_RECORDINGS: 'session-replay-similar-recordings', // owner: #team-replay
     SAVED_NOT_PINNED: 'saved-not-pinned', // owner: #team-replay
     EXPORTS_SIDEPANEL: 'exports-sidepanel', // owner: #team-product-analytics
+    BILLING_UPGRADE_LANGUAGE: 'billing-upgrade-language', // owner: @biancayang
     SESSION_REPLAY_V3_INGESTION_PLAYBACK: 'session-replay-v3-ingestion-playback', // owner: @benjackwhite
     SESSION_REPLAY_FILTER_ORDERING: 'session-replay-filter-ordering', // owner: @team-replay
     SESSION_REPLAY_LINKED_VARIANTS: 'session-replay-linked-variants', // owner: #team-replay

frontend/src/lib/lemon-ui/LemonModal/LemonModal.tsx

@@ -44,6 +44,7 @@ export interface LemonModalProps {
     forceAbovePopovers?: boolean
     contentRef?: React.RefCallback<HTMLDivElement>
     overlayRef?: React.RefCallback<HTMLDivElement>
+    'data-attr'?: string
 }
 
 export const LemonModalHeader = ({ children, className }: LemonModalInnerProps): JSX.Element => {
@@ -80,14 +81,15 @@ export function LemonModal({
     contentRef,
     overlayRef,
     hideCloseButton = false,
+    'data-attr': dataAttr,
 }: LemonModalProps): JSX.Element {
     const nodeRef = useRef(null)
     const [ignoredOverlayClickCount, setIgnoredOverlayClickCount] = useState(0)
 
     useEffect(() => setIgnoredOverlayClickCount(0), [hasUnsavedInput]) // Reset when there no longer is unsaved input
 
     const modalContent = (
-        <div ref={nodeRef} className="LemonModal__container">
+        <div ref={nodeRef} className="LemonModal__container" data-attr={dataAttr}>
             {closable && !hideCloseButton && (
                 // The key causes the div to be re-rendered, which restarts the animation,
                 // providing immediate visual feedback on click

frontend/src/lib/utils/eventUsageLogic.ts

@@ -507,8 +507,14 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportCommandBarSearchResultOpened: (type: ResultType) => ({ type }),
         reportCommandBarActionSearch: (query: string) => ({ query }),
         reportCommandBarActionResultExecuted: (resultDisplay) => ({ resultDisplay }),
+        reportSubscriptionStatus: (hasActiveSubscription: boolean) => ({ hasActiveSubscription }),
     }),
     listeners(({ values }) => ({
+        reportSubscriptionStatus: ({ hasActiveSubscription }) => {
+            posthog.capture('report subscription status', {
+                has_active_subscription: hasActiveSubscription,
+            })
+        },
         reportAxisUnitsChanged: (properties) => {
             posthog.capture('axis units changed', properties)
         },

frontend/src/scenes/UpgradeModal.tsx

@@ -1,8 +1,13 @@
 import { LemonButton, LemonModal } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { capitalizeFirstLetter } from 'lib/utils'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import posthog from 'posthog-js'
+import { useEffect } from 'react'
 
+import { billingLogic } from './billing/billingLogic'
 import { sceneLogic } from './sceneLogic'
 import { urls } from './urls'
 
@@ -11,9 +16,18 @@ export function UpgradeModal(): JSX.Element {
     const { hideUpgradeModal } = useActions(sceneLogic)
 
     const [featureName, featureCaption] = upgradeModalFeatureNameAndCaption ?? []
+    const { featureFlags } = useValues(featureFlagLogic)
+    const { billing } = useValues(billingLogic)
+
+    const { reportSubscriptionStatus } = useActions(eventUsageLogic)
+
+    useEffect(() => {
+        reportSubscriptionStatus(billing?.has_active_subscription || false)
+    }, [])
 
     return (
         <LemonModal
+            data-attr="upgrade-modal"
             title="Unleash PostHog's full power"
             footer={
                 <>
@@ -28,7 +42,16 @@ export function UpgradeModal(): JSX.Element {
                             posthog.capture('upgrade modal pricing interaction')
                         }}
                     >
-                        Upgrade now
+                        {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                            ? 'Subscribe'
+                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                              !billing?.has_active_subscription
+                            ? 'Add credit card'
+                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                              billing?.has_active_subscription
+                            ? 'Add paid plan'
+                            : 'Upgrade'}{' '}
+                        now
                     </LemonButton>
                 </>
             }
@@ -39,7 +62,18 @@ export function UpgradeModal(): JSX.Element {
                 <b>{featureName && capitalizeFirstLetter(featureName)}</b> is an advanced PostHog feature.
             </p>
             {featureCaption && <p>{featureCaption}</p>}
-            <p className="mb-0">Upgrade and get access to this, as well as to other powerful enhancements.</p>
+            <p className="mb-0">
+                {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                    ? 'Subscribe'
+                    : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                      !billing?.has_active_subscription
+                    ? 'Add a credit card'
+                    : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                      billing?.has_active_subscription
+                    ? 'Add paid plan'
+                    : 'Upgrade'}{' '}
+                to get access to this and other powerful enhancements.
+            </p>
         </LemonModal>
     )
 }

frontend/src/scenes/billing/Billing.tsx

@@ -9,13 +9,16 @@ import { router } from 'kea-router'
 import { SurprisedHog } from 'lib/components/hedgehogs'
 import { PageHeader } from 'lib/components/PageHeader'
 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 { IconCheckCircleOutline } from 'lib/lemon-ui/icons'
 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 { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { useEffect } from 'react'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -49,6 +52,8 @@ export function Billing(): JSX.Element {
     const { reportBillingV2Shown } = useActions(billingLogic)
     const { preflight, isCloudOrDev } = useValues(preflightLogic)
     const { openSupportForm } = useActions(supportLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
+    const { reportSubscriptionStatus } = useActions(eventUsageLogic)
 
     if (preflight && !isCloudOrDev) {
         router.actions.push(urls.default())
@@ -60,6 +65,10 @@ export function Billing(): JSX.Element {
         }
     }, [!!billing])
 
+    useEffect(() => {
+        reportSubscriptionStatus(billing?.has_active_subscription || false)
+    }, [])
+
     const { ref, size } = useResizeBreakpoints({
         0: 'small',
         1000: 'medium',
@@ -317,7 +326,15 @@ export function Billing(): JSX.Element {
                         to={upgradeAllProductsLink}
                         disableClientSideRouting
                     >
-                        Upgrade all
+                        {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                            ? 'Subscribe to all'
+                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                              !billing?.has_active_subscription
+                            ? 'Add credit card to all products'
+                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                              billing?.has_active_subscription
+                            ? 'Add all products to plan'
+                            : 'Upgrade to all'}{' '}
                     </LemonButton>
                 )}
             </div>

frontend/src/scenes/billing/BillingHero.tsx

@@ -1,10 +1,17 @@
 import './BillingHero.scss'
 
+import { useValues } from 'kea'
 import { BlushingHog } from 'lib/components/hedgehogs'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import useResizeObserver from 'use-resize-observer'
 
+import { billingLogic } from './billingLogic'
+
 export const BillingHero = (): JSX.Element => {
     const { width, ref: billingHeroRef } = useResizeObserver()
+    const { featureFlags } = useValues(featureFlagLogic)
+    const { billing } = useValues(billingLogic)
 
     return (
         <div className="BillingHero" ref={billingHeroRef}>
@@ -13,8 +20,17 @@ export const BillingHero = (): JSX.Element => {
                 <h1 className="ingestion-title">Get the whole hog.</h1>
                 <h1 className="ingestion-title text-danger">Only pay for what you use.</h1>
                 <p className="mt-2 mb-0">
-                    Add your credit card details to get access to premium product and platform features. Set billing
-                    limits as low as $0 to control spend.
+                    {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                        ? 'Subscribe'
+                        : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                          !billing?.has_active_subscription
+                        ? 'Add your credit card'
+                        : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                          billing?.has_active_subscription
+                        ? 'Add the paid plan'
+                        : 'Upgrade'}{' '}
+                    to get access to premium product and platform features. Set billing limits as low as $0 to control
+                    spend.
                 </p>
             </div>
             {width && width > 500 && (

frontend/src/scenes/billing/BillingProduct.tsx

@@ -2,6 +2,7 @@ import { IconCheckCircle, IconChevronDown, IconInfo, IconPlus } from '@posthog/i
 import { LemonButton, LemonSelectOptions, LemonTable, LemonTag, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
 import { IconArticle, IconCheckCircleOutline, IconChevronRight } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -214,6 +215,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
     } = useActions(billingProductLogic({ product, productRef }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
 
+    const { featureFlags } = useValues(featureFlagLogic)
     const showUpgradeCTA = !product.subscribed && !product.contact_support && product.plans?.length
     const upgradePlan = currentAndUpgradePlans?.upgradePlan
     const currentPlan = currentAndUpgradePlans?.currentPlan
@@ -610,7 +612,18 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                             {additionalFeaturesOnUpgradedPlan?.length > 0 ? (
                                 <>
                                     <p className="ml-0 max-w-200">
-                                        {product.subscribed ? 'You now' : 'Upgrade to'} get sweet features such as:
+                                        {product.subscribed
+                                            ? 'You now'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                                            ? 'Subscribe to'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                                              !billing?.has_active_subscription
+                                            ? 'Add a credit card to'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                                              billing?.has_active_subscription
+                                            ? 'Add paid plan'
+                                            : 'Upgrade to'}{' '}
+                                        get sweet features such as:
                                     </p>
                                     <div>
                                         {additionalFeaturesOnUpgradedPlan?.map((feature, i) => {
@@ -691,8 +704,17 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                         }}
                                         className="grow"
                                         center
+                                        data-attr={`upgrade-button-${product.type}`}
                                     >
-                                        Upgrade
+                                        {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                                            ? 'Subscribe'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                                              !billing?.has_active_subscription
+                                            ? 'Add credit card'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                                              billing?.has_active_subscription
+                                            ? 'Add paid plan'
+                                            : 'Upgrade'}
                                     </LemonButton>
                                 </div>
                             </div>