Add reverse proxy step to onboarding for feature flags

frontend/src/scenes/onboarding/Onboarding.tsx

@@ -13,6 +13,7 @@ import { onboardingLogic, OnboardingStepKey } from './onboardingLogic'
 import { OnboardingProductConfiguration } from './OnboardingProductConfiguration'
 import { ProductConfigOption } from './onboardingProductConfigurationLogic'
 import { OnboardingProductIntroduction } from './OnboardingProductIntroduction'
+import { OnboardingReverseProxy } from './OnboardingReverseProxy'
 import { FeatureFlagsSDKInstructions } from './sdks/feature-flags/FeatureFlagsSDKInstructions'
 import { ProductAnalyticsSDKInstructions } from './sdks/product-analytics/ProductAnalyticsSDKInstructions'
 import { SDKs } from './sdks/SDKs'
@@ -28,7 +29,8 @@ export const scene: SceneExport = {
  * Wrapper for custom onboarding content. This automatically includes billing, other products, and invite steps.
  */
 const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Element => {
-    const { currentOnboardingStep, shouldShowBillingStep, product, includeIntro } = useValues(onboardingLogic)
+    const { currentOnboardingStep, shouldShowBillingStep, shouldShowReverseProxyStep, product, includeIntro } =
+        useValues(onboardingLogic)
     const { setAllOnboardingSteps } = useActions(onboardingLogic)
     const [allSteps, setAllSteps] = useState<JSX.Element[]>([])
 
@@ -58,6 +60,10 @@ const OnboardingWrapper = ({ children }: { children: React.ReactNode }): JSX.Ele
             const IntroStep = <OnboardingProductIntroduction stepKey={OnboardingStepKey.PRODUCT_INTRO} />
             steps = [IntroStep, ...steps]
         }
+        if (shouldShowReverseProxyStep) {
+            const ReverseProxyStep = <OnboardingReverseProxy stepKey={OnboardingStepKey.REVERSE_PROXY} />
+            steps = [...steps, ReverseProxyStep]
+        }
         if (shouldShowBillingStep) {
             const BillingStep = <OnboardingBillingStep product={product} stepKey={OnboardingStepKey.PLANS} />
             steps = [...steps, BillingStep]

frontend/src/scenes/onboarding/OnboardingReverseProxy.tsx

@@ -0,0 +1,105 @@
+import { LemonCard, Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
+import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
+
+import { InviteMembersButton } from '~/layout/navigation/TopBar/AccountPopover'
+
+import { OnboardingStepKey } from './onboardingLogic'
+import { OnboardingStep } from './OnboardingStep'
+
+const proxyDocs = [
+    {
+        title: 'AWS CloudFront',
+        link: 'https://posthog.com/docs/advanced/proxy/cloudfront',
+    },
+    {
+        title: 'Caddy',
+        link: 'https://posthog.com/docs/advanced/proxy/caddy',
+    },
+    {
+        title: 'Cloudflare',
+        link: 'https://posthog.com/docs/advanced/proxy/cloudflare',
+    },
+    {
+        title: 'Kubernetes Ingress Controller',
+        link: 'https://posthog.com/docs/advanced/proxy/kubernetes-ingress-controller',
+    },
+    {
+        title: 'Netlify',
+        link: 'https://posthog.com/docs/advanced/proxy/netlify',
+    },
+    {
+        title: 'Next.js rewrites',
+        link: 'https://posthog.com/docs/advanced/proxy/nextjs',
+    },
+    {
+        title: 'Next.js middleware',
+        link: 'https://posthog.com/docs/advanced/proxy/nextjs-middleware',
+    },
+    {
+        title: 'Vercel',
+        link: 'https://posthog.com/docs/advanced/proxy/vercel',
+    },
+    {
+        title: 'Nuxt',
+        link: 'https://posthog.com/docs/advanced/proxy/nuxt',
+    },
+]
+
+export const OnboardingReverseProxy = ({ stepKey }: { stepKey: OnboardingStepKey }): JSX.Element => {
+    const { preflight } = useValues(preflightLogic)
+    const { inviteTeamMembers } = useActions(inviteLogic)
+    const { invitesToSend, canSubmit: canSubmitInvites } = useValues(inviteLogic)
+
+    return (
+        <OnboardingStep
+            title="Reverse proxy (optional)"
+            stepKey={stepKey}
+            continueText="I've already done this"
+            showSkip
+            continueAction={() =>
+                preflight?.email_service_available &&
+                invitesToSend[0]?.target_email &&
+                canSubmitInvites &&
+                inviteTeamMembers()
+            }
+        >
+            <div className="mb-6 mt-6">
+                <p>A reverse proxy allows you to send events to PostHog Cloud using your own domain.</p>
+                <p>
+                    This means that events are sent from your own domain and are less likely to be intercepted by
+                    tracking blockers. You'll be able to capture more usage data without having to self-host PostHog.
+                </p>
+                <p>
+                    Setting up a reverse proxy means setting up a service to redirect requests from a subdomain you
+                    choose (like <span className="font-mono break-keep">e.yourdomain.com</span>) to PostHog. It is best
+                    practice to use a subdomain that does not include posthog, analytics, tracking, or other similar
+                    words.
+                </p>
+                <h3>Documentation</h3>
+                <p>Here are some popular reverse proxy options:</p>
+                <ul className="list-disc list-inside ml-2">
+                    {proxyDocs.map(({ title, link }) => (
+                        <li key={title}>
+                            <Link to={link} target="_blank">
+                                {title}
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+                <LemonCard className="mt-6" hoverEffect={false}>
+                    <div className="sm:flex sm:items-start sm:justify-between">
+                        <div>
+                            <h3 className="font-bold">Need help with this step?</h3>
+                            <p className="mb-0">Invite a team member to help you get set up.</p>
+                        </div>
+                        <div className="max-w-44 mt-4 sm:mt-0">
+                            <InviteMembersButton type="secondary" />
+                        </div>
+                    </div>
+                </LemonCard>
+            </div>
+        </OnboardingStep>
+    )
+}

frontend/src/scenes/onboarding/OnboardingStep.tsx

@@ -16,6 +16,7 @@ export const OnboardingStep = ({
     showHelpButton = false,
     onSkip,
     continueAction,
+    continueText,
     continueOverride,
     hideHeader,
 }: {
@@ -27,6 +28,7 @@ export const OnboardingStep = ({
     showHelpButton?: boolean
     onSkip?: () => void
     continueAction?: () => void
+    continueText?: string
     continueOverride?: JSX.Element
     hideHeader?: boolean
 }): JSX.Element => {
@@ -113,7 +115,7 @@ export const OnboardingStep = ({
                             }}
                             sideIcon={hasNextStep ? <IconArrowRight /> : null}
                         >
-                            {!hasNextStep ? 'Finish' : 'Next'}
+                            {continueText ? continueText : !hasNextStep ? 'Finish' : 'Next'}
                         </LemonButton>
                     )}
                 </div>

frontend/src/scenes/onboarding/onboardingLogic.tsx

@@ -23,6 +23,7 @@ export enum OnboardingStepKey {
     PLANS = 'plans',
     VERIFY = 'verify',
     PRODUCT_CONFIGURATION = 'configure',
+    REVERSE_PROXY = 'proxy',
     INVITE_TEAMMATES = 'invite_teammates',
 }
 
@@ -206,6 +207,13 @@ export const onboardingLogic = kea<onboardingLogicType>([
                 return !product?.subscribed || !hasAllAddons || subscribedDuringOnboarding
             },
         ],
+        shouldShowReverseProxyStep: [
+            (s) => [s.product],
+            (product: BillingProductV2Type | null) => {
+                const productsWithReverseProxy = [ProductKey.FEATURE_FLAGS]
+                return productsWithReverseProxy.includes(product?.type as ProductKey)
+            },
+        ],
         isStepKeyInvalid: [
             (s) => [s.stepKey, s.allOnboardingSteps, s.currentOnboardingStep],
             (stepKey: string, allOnboardingSteps: AllOnboardingSteps, currentOnboardingStep: React.ReactNode | null) =>