feat: Experiment with language on billing pages in app

cypress/e2e/billingUpgradeCTA.cy.ts

@@ -0,0 +1,57 @@
+import { decideResponse } from '../fixtures/api/decide'
+import * as fflate from 'fflate'
+
+// Mainly testing to make sure events are fired as expected
+
+describe('Billing Upgrade CTA', () => {
+    beforeEach(() => {
+        cy.intercept('**/decide/*', (req) =>
+            req.reply(
+                decideResponse({
+                    'billing-upgrade-language': 'credit_card',
+                })
+            )
+        )
+
+        cy.intercept('/api/billing-v2/', { fixture: 'api/billing-v2/billing-v2-unsubscribed.json' })
+    })
+
+    it('Check that events are being sent on each page visit', () => {
+        cy.visit('/organization/billing')
+        cy.get('[data-attr=product_analytics-upgrade-cta] .LemonButton__content').should('have.text', 'Add credit card')
+        cy.window().then((win) => {
+            const events = (win as any)._cypress_posthog_captures
+
+            const matchingEvents = events.filter((event) => event.event === 'billing CTA shown')
+            // One for each product card
+            expect(matchingEvents.length).to.equal(4)
+        })
+
+        // Mock billing response with subscription
+        cy.intercept('/api/billing-v2/', { fixture: 'api/billing-v2/billing-v2.json' })
+        cy.reload()
+
+        cy.get('[data-attr=session_replay-upgrade-cta] .LemonButton__content').should('have.text', 'Add paid plan')
+        cy.intercept('POST', '**/e/?compression=gzip-js*').as('capture3')
+        cy.window().then((win) => {
+            const events = (win as any)._cypress_posthog_captures
+
+            const matchingEvents = events.filter((event) => event.event === 'billing CTA shown')
+            expect(matchingEvents.length).to.equal(4)
+        })
+
+        cy.intercept('/api/billing-v2/', { fixture: 'api/billing-v2/billing-v2-unsubscribed.json' })
+        // 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.intercept('POST', '**/e/?compression=gzip-js*').as('capture4')
+        cy.window().then((win) => {
+            const events = (win as any)._cypress_posthog_captures
+
+            const matchingEvents = events.filter((event) => event.event === 'billing CTA shown')
+            expect(matchingEvents.length).to.equal(3)
+        })
+    })
+})

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/components/BillingUpgradeCTA.tsx

@@ -0,0 +1,13 @@
+import { useActions } from 'kea'
+import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
+import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
+import { useEffect } from 'react'
+
+export function BillingUpgradeCTA({ children, ...props }: LemonButtonProps): JSX.Element {
+    const { reportBillingCTAShown } = useActions(eventUsageLogic)
+    useEffect(() => {
+        reportBillingCTAShown()
+    }, [])
+
+    return <LemonButton {...props}>{children}</LemonButton>
+}

frontend/src/lib/constants.tsx

@@ -202,6 +202,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
     NEW_EXPERIMENTS_UI: 'new-experiments-ui', // owner: @jurajmajerik #team-feature-success
     SESSION_REPLAY_V3_INGESTION_PLAYBACK: 'session-replay-v3-ingestion-playback', // owner: @benjackwhite
     SESSION_REPLAY_FILTER_ORDERING: 'session-replay-filter-ordering', // owner: #team-replay

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

@@ -45,6 +45,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 => {
@@ -82,14 +83,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,12 @@ export const eventUsageLogic = kea<eventUsageLogicType>([
         reportCommandBarSearchResultOpened: (type: ResultType) => ({ type }),
         reportCommandBarActionSearch: (query: string) => ({ query }),
         reportCommandBarActionResultExecuted: (resultDisplay) => ({ resultDisplay }),
+        reportBillingCTAShown: true,
     }),
     listeners(({ values }) => ({
+        reportBillingCTAShown: () => {
+            posthog.capture('billing CTA shown')
+        },
         reportAxisUnitsChanged: (properties) => {
             posthog.capture('axis units changed', properties)
         },

frontend/src/scenes/UpgradeModal.tsx

@@ -17,10 +17,10 @@ export function UpgradeModal(): JSX.Element {
                     isGrandfathered={upgradeModalIsGrandfathered ?? undefined}
                     background={false}
                 >
-                    <>
+                    <div className="pr-7">
                         You should have access to this feature already. If you are still seeing this modal, please let
                         us know 🙂
-                    </>
+                    </div>
                 </PayGateMini>
             </div>
         </LemonModal>

frontend/src/scenes/billing/Billing.tsx

@@ -6,15 +6,18 @@ import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { Field, Form } from 'kea-forms'
 import { router } from 'kea-router'
+import { BillingUpgradeCTA } from 'lib/components/BillingUpgradeCTA'
 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 { 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'
@@ -48,6 +51,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())
@@ -310,14 +314,22 @@ export function Billing(): JSX.Element {
             <div className="flex justify-between mt-4">
                 <h2>Products</h2>
                 {isOnboarding && upgradeAllProductsLink && (
-                    <LemonButton
+                    <BillingUpgradeCTA
                         type="primary"
                         icon={<IconPlus />}
                         to={upgradeAllProductsLink}
                         disableClientSideRouting
                     >
-                        Upgrade all
-                    </LemonButton>
+                        {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'}{' '}
+                    </BillingUpgradeCTA>
                 )}
             </div>
             <LemonDivider className="mt-2 mb-8" />

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,7 +2,8 @@ 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 { BillingUpgradeCTA } from 'lib/components/BillingUpgradeCTA'
+import { FEATURE_FLAGS, 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'
@@ -211,6 +212,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
     } = useActions(billingProductLogic({ product, productRef }))
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
 
+    const { featureFlags } = useValues(featureFlagLogic)
     const upgradePlan = currentAndUpgradePlans?.upgradePlan
     const currentPlan = currentAndUpgradePlans?.currentPlan
     const downgradePlan = currentAndUpgradePlans?.downgradePlan
@@ -609,8 +611,18 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                             {additionalFeaturesOnUpgradedPlan?.length > 0 ? (
                                 <>
                                     <p className="ml-0 max-w-200">
-                                        {!upgradePlan ? 'You now' : `Upgrade to the ${upgradePlan.name} plan 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) => {
@@ -682,7 +694,8 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                     ) : (
                                         upgradePlan.included_if !== 'has_subscription' &&
                                         !upgradePlan.unit_amount_usd && (
-                                            <LemonButton
+                                            <BillingUpgradeCTA
+                                                data-attr={`${product.type}-upgrade-cta`}
                                                 to={getUpgradeProductLink(
                                                     product,
                                                     upgradeToPlanKey || '',
@@ -698,8 +711,16 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                                 className="grow"
                                                 center
                                             >
-                                                Upgrade
-                                            </LemonButton>
+                                                {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'}
+                                            </BillingUpgradeCTA>
                                         )
                                     )}
                                 </div>

frontend/src/scenes/billing/PlanComparison.tsx

@@ -1,12 +1,14 @@
 import './PlanComparison.scss'
 
 import { IconCheckCircle, IconWarning, IconX } from '@posthog/icons'
-import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
-import { UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
+import { BillingUpgradeCTA } from 'lib/components/BillingUpgradeCTA'
+import { FEATURE_FLAGS, UNSUBSCRIBE_SURVEY_ID } from 'lib/constants'
 import { dayjs } from 'lib/dayjs'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import React from 'react'
 import { getProductIcon } from 'scenes/products/Products'
@@ -119,6 +121,7 @@ export const PlanComparison = ({
     const { billing, redirectPath } = useValues(billingLogic)
     const { width, ref: planComparisonRef } = useResizeObserver()
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
     const currentPlanIndex = plans.findIndex((plan) => plan.current_plan)
     const { surveyID, comparisonModalHighlightedFeatureKey } = useValues(billingProductLogic({ product }))
     const { reportSurveyShown, setSurveyResponse } = useActions(billingProductLogic({ product }))
@@ -131,7 +134,7 @@ export const PlanComparison = ({
     const upgradeButtons = plans?.map((plan, i) => {
         return (
             <td key={`${plan.plan_key}-cta`} className="PlanTable__td__upgradeButton">
-                <LemonButton
+                <BillingUpgradeCTA
                     to={
                         plan.contact_support
                             ? 'mailto:[email protected]?subject=Enterprise%20plan%20request'
@@ -182,16 +185,36 @@ export const PlanComparison = ({
                           i >= currentPlanIndex &&
                           !billing?.has_active_subscription
                         ? 'View products'
-                        : 'Subscribe'}
-                </LemonButton>
+                        : plan.free_allocation && !plan.tiers
+                        ? 'Select' // Free plan
+                        : 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'}
+                </BillingUpgradeCTA>
                 {!plan.current_plan && !plan.free_allocation && includeAddons && product.addons?.length > 0 && (
                     <p className="text-center ml-0 mt-2 mb-0">
                         <Link
                             to={`/api/billing-v2/activation?products=${product.type}:${plan.plan_key}&redirect_path=${redirectPath}`}
                             className="text-muted text-xs"
                             disableClientSideRouting
                         >
-                            or subscribe without addons
+                            or{' '}
+                            {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'}{' '}
+                            without addons
                         </Link>
                     </p>
                 )}