feat: Move onboarding into the app

frontend/src/layout/navigation-3000/navigationLogic.tsx

@@ -6,6 +6,7 @@ import {
     IconGraph,
     IconHome,
     IconLive,
+    IconLogomark,
     IconNotebook,
     IconPeople,
     IconPieChart,
@@ -58,7 +59,14 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
     path(['layout', 'navigation-3000', 'navigationLogic']),
     props({} as { inputElement?: HTMLInputElement | null }),
     connect(() => ({
-        values: [sceneLogic, ['sceneConfig'], navigationLogic, ['mobileLayout'], teamLogic, ['currentTeam']],
+        values: [
+            sceneLogic,
+            ['sceneConfig'],
+            navigationLogic,
+            ['mobileLayout'],
+            teamLogic,
+            ['currentTeam', 'hasOnboardedAnyProduct'],
+        ],
         actions: [navigationLogic, ['closeAccountPopover']],
     })),
     actions({
@@ -324,76 +332,95 @@ export const navigation3000Logic = kea<navigation3000LogicType>([
                 dashboardsModel.selectors.dashboardsLoading,
                 dashboardsModel.selectors.pinnedDashboards,
                 s.currentTeam,
+                s.hasOnboardedAnyProduct,
             ],
-            (featureFlags, dashboardsLoading, pinnedDashboards, currentTeam): NavbarItem[][] => {
+            (
+                featureFlags,
+                dashboardsLoading,
+                pinnedDashboards,
+                currentTeam,
+                hasOnboardedAnyProduct
+            ): NavbarItem[][] => {
                 const isUsingSidebar = featureFlags[FEATURE_FLAGS.POSTHOG_3000_NAV]
                 const hasOnboardedFeatureFlags = currentTeam?.has_completed_onboarding_for?.[ProductKey.FEATURE_FLAGS]
-                return [
-                    [
-                        {
-                            identifier: Scene.ProjectHomepage,
-                            label: 'Home',
-                            icon: <IconHome />,
-                            to: urls.projectHomepage(),
-                        },
-                        {
-                            identifier: Scene.Dashboards,
-                            label: 'Dashboards',
-                            icon: <IconDashboard />,
-                            logic: isUsingSidebar ? dashboardsSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.dashboards(),
-                            sideAction: {
-                                identifier: 'pinned-dashboards-dropdown',
-                                dropdown: {
-                                    overlay: (
-                                        <LemonMenuOverlay
-                                            items={[
-                                                {
-                                                    title: 'Pinned dashboards',
-                                                    items: pinnedDashboards.map((dashboard) => ({
-                                                        label: dashboard.name,
-                                                        to: urls.dashboard(dashboard.id),
-                                                    })),
-                                                    footer: dashboardsLoading && (
-                                                        <div className="px-2 py-1 text-text-secondary-3000">
-                                                            <Spinner /> Loading…
-                                                        </div>
-                                                    ),
-                                                },
-                                            ]}
-                                        />
-                                    ),
-                                    placement: 'bottom-end',
-                                },
+                const sectionOne: NavbarItem[] = [
+                    {
+                        identifier: Scene.Dashboards,
+                        label: 'Dashboards',
+                        icon: <IconDashboard />,
+                        logic: isUsingSidebar ? dashboardsSidebarLogic : undefined,
+                        to: isUsingSidebar ? undefined : urls.dashboards(),
+                        sideAction: {
+                            identifier: 'pinned-dashboards-dropdown',
+                            dropdown: {
+                                overlay: (
+                                    <LemonMenuOverlay
+                                        items={[
+                                            {
+                                                title: 'Pinned dashboards',
+                                                items: pinnedDashboards.map((dashboard) => ({
+                                                    label: dashboard.name,
+                                                    to: urls.dashboard(dashboard.id),
+                                                })),
+                                                footer: dashboardsLoading && (
+                                                    <div className="px-2 py-1 text-text-secondary-3000">
+                                                        <Spinner /> Loading…
+                                                    </div>
+                                                ),
+                                            },
+                                        ]}
+                                    />
+                                ),
+                                placement: 'bottom-end',
                             },
                         },
-                        {
-                            identifier: Scene.Notebooks,
-                            label: 'Notebooks',
-                            icon: <IconNotebook />,
-                            to: urls.notebooks(),
-                        },
-                        {
-                            identifier: Scene.DataManagement,
-                            label: 'Data management',
-                            icon: <IconDatabase />,
-                            logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.eventDefinitions(),
-                        },
-                        {
-                            identifier: Scene.PersonsManagement,
-                            label: 'People',
-                            icon: <IconPeople />,
-                            logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
-                            to: isUsingSidebar ? undefined : urls.persons(),
-                        },
-                        {
-                            identifier: Scene.Events,
-                            label: 'Activity',
-                            icon: <IconLive />,
-                            to: urls.events(),
-                        },
-                    ],
+                    },
+                    {
+                        identifier: Scene.Notebooks,
+                        label: 'Notebooks',
+                        icon: <IconNotebook />,
+                        to: urls.notebooks(),
+                    },
+                    {
+                        identifier: Scene.DataManagement,
+                        label: 'Data management',
+                        icon: <IconDatabase />,
+                        logic: isUsingSidebar ? dataManagementSidebarLogic : undefined,
+                        to: isUsingSidebar ? undefined : urls.eventDefinitions(),
+                    },
+                    {
+                        identifier: Scene.PersonsManagement,
+                        label: 'People',
+                        icon: <IconPeople />,
+                        logic: isUsingSidebar ? personsAndGroupsSidebarLogic : undefined,
+                        to: isUsingSidebar ? undefined : urls.persons(),
+                    },
+                    {
+                        identifier: Scene.Events,
+                        label: 'Activity',
+                        icon: <IconLive />,
+                        to: urls.events(),
+                    },
+                ]
+
+                sectionOne.unshift(
+                    hasOnboardedAnyProduct
+                        ? {
+                              identifier: Scene.ProjectHomepage,
+                              label: 'Home',
+                              icon: <IconHome />,
+                              to: urls.projectHomepage(),
+                          }
+                        : {
+                              identifier: Scene.Products,
+                              label: 'Welcome to PostHog',
+                              icon: <IconLogomark />,
+                              to: urls.products(),
+                          }
+                )
+
+                return [
+                    sectionOne,
                     [
                         {
                             identifier: Scene.SavedInsights,

frontend/src/scenes/appScenes.ts

@@ -70,7 +70,6 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.Canvas]: () => import('./notebooks/NotebookCanvasScene'),
     [Scene.Products]: () => import('./products/Products'),
     [Scene.Onboarding]: () => import('./onboarding/Onboarding'),
-    [Scene.OnboardingProductIntroduction]: () => import('./onboarding/OnboardingProductIntroduction'),
     [Scene.Settings]: () => import('./settings/SettingsScene'),
     [Scene.MoveToPostHogCloud]: () => import('./moveToPostHogCloud/MoveToPostHogCloud'),
 }

frontend/src/scenes/billing/PlanComparison.tsx

@@ -1,18 +1,17 @@
 import './PlanComparison.scss'
 
-import { LemonButton, LemonModal, LemonTag, Link } from '@posthog/lemon-ui'
+import { LemonModal, LemonTag } from '@posthog/lemon-ui'
 import clsx from 'clsx'
-import { useActions, useValues } from 'kea'
+import { useValues } from 'kea'
 import { IconCheckmark, IconClose, IconWarning } from 'lib/lemon-ui/icons'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
-import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import React from 'react'
 import { getProductIcon } from 'scenes/products/Products'
 import useResizeObserver from 'use-resize-observer'
 
 import { BillingProductV2AddonType, BillingProductV2Type, BillingV2FeatureType, BillingV2PlanType } from '~/types'
 
-import { convertLargeNumberToWords, getUpgradeProductLink } from './billing-utils'
+import { convertLargeNumberToWords } from './billing-utils'
 import { billingLogic } from './billingLogic'
 
 export function PlanIcon({
@@ -109,44 +108,9 @@ export const PlanComparison = ({
         return null
     }
     const fullyFeaturedPlan = plans[plans.length - 1]
-    const { reportBillingUpgradeClicked } = useActions(eventUsageLogic)
-    const { redirectPath, billing } = useValues(billingLogic)
+    const { billing } = useValues(billingLogic)
     const { width, ref: planComparisonRef } = useResizeObserver()
 
-    const upgradeButtons = plans?.map((plan) => {
-        return (
-            <td key={`${plan.plan_key}-cta`} className="PlanTable__td__upgradeButton">
-                <LemonButton
-                    to={getUpgradeProductLink(product, plan.plan_key || '', redirectPath, includeAddons)}
-                    type={plan.current_plan ? 'secondary' : 'primary'}
-                    status={plan.current_plan ? 'default' : 'alt'}
-                    fullWidth
-                    center
-                    disableClientSideRouting
-                    disabled={plan.current_plan}
-                    onClick={() => {
-                        if (!plan.current_plan) {
-                            reportBillingUpgradeClicked(product.type)
-                        }
-                    }}
-                >
-                    {plan.current_plan ? 'Current plan' : 'Subscribe'}
-                </LemonButton>
-                {!plan.current_plan && 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
-                        </Link>
-                    </p>
-                )}
-            </td>
-        )
-    })
-
     return (
         <table className="PlanComparison w-full table-fixed" ref={planComparisonRef}>
             <thead>
@@ -160,15 +124,6 @@ export const PlanComparison = ({
                 </tr>
             </thead>
             <tbody>
-                {/* Pricing section */}
-                <tr>
-                    <th
-                        colSpan={3}
-                        className="PlanTable__th__section bg-side text-muted justify-left rounded text-left mb-2"
-                    >
-                        <span>Pricing</span>
-                    </th>
-                </tr>
                 <tr className="PlanTable__tr__border">
                     <td className="font-bold">Monthly base price</td>
                     {plans?.map((plan) => (
@@ -222,20 +177,10 @@ export const PlanComparison = ({
                     })}
 
                 <tr>
-                    <td />
-                    {upgradeButtons}
-                </tr>
-                <tr>
-                    <th colSpan={3} className="PlanTable__th__section bg-side justify-left rounded text-left mb-2">
-                        <div className="flex items-center gap-x-2 my-2">
-                            {getProductIcon(product.icon_key, 'text-2xl')}
-                            <Tooltip title={product.description}>
-                                <span className="font-bold">{product.name}</span>
-                            </Tooltip>
-                        </div>
+                    <th colSpan={1} className="PlanTable__th__section rounded text-left">
+                        <h3 className="mt-6 mb-2">Product Features:</h3>
                     </th>
                 </tr>
-
                 {fullyFeaturedPlan?.features?.map((feature, i) => (
                     <tr
                         key={`tr-${feature.key}`}
@@ -270,12 +215,12 @@ export const PlanComparison = ({
                 {!billing?.has_active_subscription && (
                     <>
                         <tr>
-                            <th colSpan={3} className="PlanTable__th__section rounded text-left">
-                                <p className="mt-6 mb-2 italic text-center text-muted">
+                            <th colSpan={1} className="PlanTable__th__section rounded text-left">
+                                <h3 className="mt-6 mb-2">
                                     <Tooltip title="Organizations with any paid subscription get access to additional features.">
                                         Included platform features:
                                     </Tooltip>
-                                </p>
+                                </h3>
                             </th>
                         </tr>
                         {billing?.products

frontend/src/scenes/onboarding/Onboarding.stories.tsx

@@ -47,7 +47,7 @@ export const _OnboardingSDKs = (): JSX.Element => {
     useEffect(() => {
         const product: BillingProductV2Type = billingJson.products[1] as unknown as BillingProductV2Type
         setProduct(product)
-        router.actions.push(urls.onboarding(ProductKey.SESSION_REPLAY) + '?step=sdks')
+        router.actions.push(urls.onboarding(ProductKey.SESSION_REPLAY) + '?step=install')
     }, [])
     return <App />
 }
@@ -64,45 +64,8 @@ export const _OnboardingBilling = (): JSX.Element => {
     const { setProduct } = useActions(onboardingLogic)
 
     useEffect(() => {
-        setProduct(billingJson.products[1] as unknown as BillingProductV2Type)
-        router.actions.push(urls.onboarding(ProductKey.SESSION_REPLAY, OnboardingStepKey.BILLING))
-    }, [])
-    return <App />
-}
-
-export const _OnboardingOtherProducts = (): JSX.Element => {
-    useStorybookMocks({
-        get: {
-            '/api/billing-v2/': {
-                ...billingJson,
-            },
-        },
-    })
-
-    const { setProduct } = useActions(onboardingLogic)
-
-    useEffect(() => {
-        setProduct(billingJson.products[1] as unknown as BillingProductV2Type)
-        router.actions.push(urls.onboarding(ProductKey.SESSION_REPLAY, OnboardingStepKey.OTHER_PRODUCTS))
-    }, [])
-    return <App />
-}
-_OnboardingOtherProducts.tags = ['test-skip'] // FIXME: For some reason this is captured correctly the first time, but then is written over a second time with SDKs view
-
-export const _OnboardingProductIntroduction = (): JSX.Element => {
-    useStorybookMocks({
-        get: {
-            '/api/billing-v2/': {
-                ...billingJson,
-            },
-        },
-    })
-
-    const { setProduct } = useActions(onboardingLogic)
-
-    useEffect(() => {
-        setProduct(billingJson.products[0])
-        router.actions.push(urls.onboardingProductIntroduction(ProductKey.PRODUCT_ANALYTICS))
+        setProduct(billingUnsubscribedJson.products[1] as unknown as BillingProductV2Type)
+        router.actions.push(urls.onboarding(ProductKey.SESSION_REPLAY, OnboardingStepKey.PLANS))
     }, [])
     return <App />
 }