feat: make new onboarding flag work (#17699)

* redirect to products if no onboarding completed * store when someone skips all onboarding * redirect from ingestion to products if ff enabled * fix * toggle activation sidebar after complete PA onbdng
PostHog · Oct 1, 2023 · c1c7d98 · c1c7d98
1 parent dab946e
commit c1c7d98
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 9 deletions.
diff --git a/frontend/src/scenes/ingestion/IngestionWizard.tsx b/frontend/src/scenes/ingestion/IngestionWizard.tsx
@@ -23,17 +23,26 @@ import { InviteTeamPanel } from './panels/InviteTeamPanel'
 import { TeamInvitedPanel } from './panels/TeamInvitedPanel'
 import { NoDemoIngestionPanel } from './panels/NoDemoIngestionPanel'
 import { SuperpowersPanel } from 'scenes/ingestion/panels/SuperpowersPanel'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { router } from 'kea-router'
+import { urls } from 'scenes/urls'
 
 export function IngestionWizard(): JSX.Element {
     const { currentView, platform } = useValues(ingestionLogic)
     const { reportIngestionLandingSeen } = useActions(eventUsageLogic)
+    const { featureFlags } = useValues(featureFlagLogic)
 
     useEffect(() => {
         if (!platform) {
             reportIngestionLandingSeen()
         }
     }, [platform])
 
+    if (featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] === 'test') {
+        router.actions.replace(urls.products())
+    }
+
     return (
         <IngestionContainer>
             {currentView === INGESTION_VIEWS.BILLING && <BillingPanel />}

diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -5,6 +5,7 @@ import { urls } from 'scenes/urls'
 import type { onboardingLogicType } from './onboardingLogicType'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { teamLogic } from 'scenes/teamLogic'
+import { combineUrl } from 'kea-router'
 
 export interface OnboardingLogicProps {
     productKey: ProductKey | null
@@ -83,7 +84,7 @@ export const onboardingLogic = kea<onboardingLogicType>({
                 setProductKey: (_, { productKey }) => {
                     switch (productKey) {
                         case 'product_analytics':
-                            return urls.default()
+                            return combineUrl(urls.events(), { onboarding_completed: true }).url
                         case 'session_replay':
                             return urls.replay()
                         case 'feature_flags':
@@ -146,7 +147,6 @@ export const onboardingLogic = kea<onboardingLogicType>({
         },
         completeOnboarding: ({ redirectUri }) => {
             if (values.productKey) {
-                // update the current team has_completed_onboarding_for field, only writing over the current product
                 actions.updateCurrentTeam({
                     has_completed_onboarding_for: {
                         ...values.currentTeam?.has_completed_onboarding_for,

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -2,7 +2,7 @@ import { LemonButton } from '@posthog/lemon-ui'
 import { IconBarChart } from 'lib/lemon-ui/icons'
 import { SceneExport } from 'scenes/sceneTypes'
 import { BillingProductV2Type } from '~/types'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { teamLogic } from 'scenes/teamLogic'
 import { useEffect } from 'react'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -11,6 +11,7 @@ import { urls } from 'scenes/urls'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
+import { router } from 'kea-router'
 
 export const scene: SceneExport = {
     component: Products,
@@ -77,6 +78,7 @@ export function Products(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
     const { billing } = useValues(billingLogic)
     const { currentTeam } = useValues(teamLogic)
+    const { updateCurrentTeam } = useActions(teamLogic)
     const isFirstProduct = Object.keys(currentTeam?.has_completed_onboarding_for || {}).length === 0
     const products = billing?.products || []
 
@@ -105,7 +107,19 @@ export function Products(): JSX.Element {
                             ))}
                     </div>
                     <div className="mt-20">
-                        <LemonButton status="muted" to={urls.default()} size="small">
+                        <LemonButton
+                            status="muted"
+                            onClick={() => {
+                                updateCurrentTeam({
+                                    has_completed_onboarding_for: {
+                                        ...currentTeam?.has_completed_onboarding_for,
+                                        skipped_onboarding: true,
+                                    },
+                                })
+                                router.actions.replace(urls.default())
+                            }}
+                            size="small"
+                        >
                             None of these
                         </LemonButton>
                     </div>

diff --git a/frontend/src/scenes/sceneLogic.ts b/frontend/src/scenes/sceneLogic.ts
@@ -13,6 +13,8 @@ import { LoadedScene, Params, Scene, SceneConfig, SceneExport, SceneParams } fro
 import { emptySceneParams, preloadedScenes, redirects, routes, sceneConfigurations } from 'scenes/scenes'
 import { organizationLogic } from './organizationLogic'
 import { appContextLogic } from './appContextLogic'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
 
 /** Mapping of some scenes that aren't directly accessible from the sidebar to ones that are - for the sidebar. */
 const sceneNavAlias: Partial<Record<Scene, Scene>> = {
@@ -278,13 +280,28 @@ export const sceneLogic = kea<sceneLogicType>({
                     } else if (
                         teamLogic.values.currentTeam &&
                         !teamLogic.values.currentTeam.is_demo &&
-                        !teamLogic.values.currentTeam.completed_snippet_onboarding &&
                         !location.pathname.startsWith('/ingestion') &&
+                        !location.pathname.startsWith('/onboarding') &&
+                        !location.pathname.startsWith('/products') &&
                         !location.pathname.startsWith('/project/settings')
                     ) {
-                        console.warn('Ingestion tutorial not completed, redirecting to it')
-                        router.actions.replace(urls.ingestion())
-                        return
+                        if (
+                            featureFlagLogic.values.featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] ===
+                                'test' &&
+                            !Object.keys(teamLogic.values.currentTeam.has_completed_onboarding_for || {}).length
+                        ) {
+                            console.warn('No onboarding completed, redirecting to products')
+                            router.actions.replace(urls.products())
+                            return
+                        } else if (
+                            featureFlagLogic.values.featureFlags[FEATURE_FLAGS.PRODUCT_SPECIFIC_ONBOARDING] !==
+                                'test' &&
+                            !teamLogic.values.currentTeam.completed_snippet_onboarding
+                        ) {
+                            console.warn('Ingestion tutorial not completed, redirecting to it')
+                            router.actions.replace(urls.ingestion())
+                            return
+                        }
                     }
                 }
             }

diff --git a/frontend/src/scenes/teamLogic.tsx b/frontend/src/scenes/teamLogic.tsx
@@ -86,7 +86,10 @@ export const teamLogic = kea<teamLogicType>([
                                   payload.slack_incoming_webhook
                               )}`
                             : 'Webhook integration disabled'
-                    } else if (updatedAttribute === 'completed_snippet_onboarding') {
+                    } else if (
+                        updatedAttribute === 'completed_snippet_onboarding' ||
+                        updatedAttribute === 'has_completed_onboarding_for'
+                    ) {
                         message = "Congrats! You're now ready to use PostHog."
                     } else {
                         message = `${parseUpdatedAttributeName(updatedAttribute)} updated successfully!`