feat: Experiment with language on billing pages in app

frontend/src/lib/constants.tsx

@@ -208,6 +208,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
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/scenes/UpgradeModal.tsx

@@ -1,8 +1,11 @@
 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 posthog from 'posthog-js'
 
+import { billingLogic } from './billing/billingLogic'
 import { sceneLogic } from './sceneLogic'
 import { urls } from './urls'
 
@@ -11,6 +14,8 @@ export function UpgradeModal(): JSX.Element {
     const { hideUpgradeModal } = useActions(sceneLogic)
 
     const [featureName, featureCaption] = upgradeModalFeatureNameAndCaption ?? []
+    const { featureFlags } = useValues(featureFlagLogic)
+    const { billing } = useValues(billingLogic)
 
     return (
         <LemonModal
@@ -28,7 +33,13 @@ 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?.customer_id
+                            ? 'Add credit card'
+                            : 'Upgrade'}{' '}
+                        now
                     </LemonButton>
                 </>
             }
@@ -39,7 +50,14 @@ 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?.customer_id
+                    ? 'Add credit card'
+                    : 'Upgrade'}{' '}
+                to get access to this and other powerful enhancements.
+            </p>
         </LemonModal>
     )
 }

frontend/src/scenes/billing/Billing.tsx

@@ -9,13 +9,15 @@ 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 { useEffect } from 'react'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { SceneExport } from 'scenes/sceneTypes'
@@ -49,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())
@@ -317,7 +320,12 @@ 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?.customer_id
+                            ? 'Add credit card to all products'
+                            : 'Upgrade to all'}{' '}
                     </LemonButton>
                 )}
             </div>

frontend/src/scenes/billing/BillingProduct.tsx

@@ -2,6 +2,7 @@ import { IconPlus } from '@posthog/icons'
 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,
@@ -221,6 +222,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
@@ -615,7 +617,15 @@ 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?.customer_id
+                                            ? 'Add credit card to'
+                                            : 'Upgrade to'}{' '}
+                                        get sweet features such as:
                                     </p>
                                     <div>
                                         {additionalFeaturesOnUpgradedPlan?.map((feature, i) => {
@@ -697,7 +707,12 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
                                         className="grow"
                                         center
                                     >
-                                        Upgrade
+                                        {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                                            ? 'Subscribe'
+                                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                                              !billing?.customer_id
+                                            ? 'Add credit card'
+                                            : 'Upgrade'}
                                     </LemonButton>
                                 </div>
                             </div>

frontend/src/scenes/billing/PlanComparison.tsx

@@ -4,8 +4,10 @@ import { IconWarning, IconX } from '@posthog/icons'
 import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { IconCheckmark } from 'lib/lemon-ui/icons'
 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'
@@ -113,6 +115,7 @@ export const PlanComparison = ({
     const { billing, redirectPath } = useValues(billingLogic)
     const { width, ref: planComparisonRef } = useResizeObserver()
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const upgradeButtons = plans?.map((plan) => {
         return (
@@ -131,7 +134,16 @@ export const PlanComparison = ({
                         }
                     }}
                 >
-                    {plan.current_plan ? 'Current plan' : 'Subscribe'}
+                    {plan.current_plan
+                        ? 'Current plan'
+                        : 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?.customer_id
+                        ? 'Add credit card'
+                        : 'Upgrade'}
                 </LemonButton>
                 {!plan.current_plan && !plan.free_allocation && includeAddons && product.addons?.length > 0 && (
                     <p className="text-center ml-0 mt-2 mb-0">
@@ -140,7 +152,14 @@ export const PlanComparison = ({
                             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?.customer_id
+                                ? 'add credit card'
+                                : 'upgrade'}{' '}
+                            without addons
                         </Link>
                     </p>
                 )}

frontend/src/scenes/onboarding/OnboardingBillingStep.tsx

@@ -1,8 +1,10 @@
 import { LemonBanner, LemonButton } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { StarHog } from 'lib/components/hedgehogs'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { IconCheckCircleOutline } from 'lib/lemon-ui/icons'
 import { Spinner } from 'lib/lemon-ui/Spinner'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { useState } from 'react'
 import { getUpgradeProductLink } from 'scenes/billing/billing-utils'
@@ -29,6 +31,7 @@ export const OnboardingBillingStep = ({
     const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
     const plan = currentAndUpgradePlans?.upgradePlan
     const currentPlan = currentAndUpgradePlans?.currentPlan
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const [showPlanComp, setShowPlanComp] = useState(false)
 
@@ -50,7 +53,12 @@ export const OnboardingBillingStep = ({
                             reportBillingUpgradeClicked(product.type)
                         }}
                     >
-                        Subscribe to Paid Plan
+                        {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                            ? 'Subscribe to paid plan'
+                            : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'credit_card' &&
+                              !billing?.customer_id
+                            ? 'Add credit card to get paid features'
+                            : 'Upgrade to paid plan'}
                     </LemonButton>
                 )
             }
@@ -63,7 +71,14 @@ export const OnboardingBillingStep = ({
                                 <div className="flex gap-x-4">
                                     <IconCheckCircleOutline className="text-success text-3xl mb-6" />
                                     <div>
-                                        <h3 className="text-lg font-bold mb-1 text-left">Subscribe successful</h3>
+                                        <h3 className="text-lg font-bold mb-1 text-left">
+                                            {featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] === 'subscribe'
+                                                ? 'Subscribe successful'
+                                                : featureFlags[FEATURE_FLAGS.BILLING_UPGRADE_LANGUAGE] ===
+                                                      'credit_card' && !billing?.customer_id
+                                                ? 'Successfully added credit card'
+                                                : 'Upgrade successful'}
+                                        </h3>
                                         <p className="mx-0 mb-0">You're all ready to use {product.name}.</p>
                                     </div>
                                 </div>