make isFirstProductOnboarding reusable

PostHog · Jan 26, 2024 · 10f9329 · 10f9329
1 parent 3514b4e
commit 10f9329
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/frontend/src/scenes/onboarding/OnboardingStep.tsx b/frontend/src/scenes/onboarding/OnboardingStep.tsx
@@ -6,7 +6,6 @@ import { PhonePairHogs } from 'lib/components/hedgehogs'
 import { supportLogic } from 'lib/components/Support/supportLogic'
 import { IconArrowLeft, IconArrowRight } from 'lib/lemon-ui/icons'
 import React from 'react'
-import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
 import { ProductKey } from '~/types'
@@ -38,12 +37,8 @@ export const OnboardingStep = ({
     backActionOverride?: () => void
     hedgehog?: JSX.Element
 }): JSX.Element => {
-    const { hasNextStep, hasPreviousStep, productKey } = useValues(onboardingLogic)
+    const { hasNextStep, hasPreviousStep, productKey, isFirstProductOnboarding } = useValues(onboardingLogic)
     const { completeOnboarding, goToNextStep, goToPreviousStep } = useActions(onboardingLogic)
-    const { currentTeam } = useValues(teamLogic)
-    const isFirstProductOnboarding = !Object.keys(currentTeam?.has_completed_onboarding_for || {}).some(
-        (key) => currentTeam?.has_completed_onboarding_for?.[key] === true
-    )
     const { openSupportForm } = useActions(supportLogic)
 
     const hedgehogToRender = React.cloneElement(hedgehog || <PhonePairHogs />, {

diff --git a/frontend/src/scenes/onboarding/onboardingLogic.tsx b/frontend/src/scenes/onboarding/onboardingLogic.tsx
@@ -154,6 +154,14 @@ export const onboardingLogic = kea<onboardingLogicType>([
                 (stepKey && allOnboardingSteps.length > 0 && !currentOnboardingStep) ||
                 (!stepKey && allOnboardingSteps.length > 0),
         ],
+        isFirstProductOnboarding: [
+            (s) => [s.currentTeam],
+            (currentTeam) => {
+                return !Object.keys(currentTeam?.has_completed_onboarding_for || {}).some(
+                    (key) => currentTeam?.has_completed_onboarding_for?.[key] === true
+                )
+            },
+        ],
     }),
     listeners(({ actions, values }) => ({
         loadBillingSuccess: () => {

diff --git a/frontend/src/scenes/onboarding/sdks/SDKs.tsx b/frontend/src/scenes/onboarding/sdks/SDKs.tsx
@@ -5,7 +5,6 @@ import { LaptopHog1 } from 'lib/components/hedgehogs'
 import { useWindowSize } from 'lib/hooks/useWindowSize'
 import { useEffect } from 'react'
 import React from 'react'
-import { teamLogic } from 'scenes/teamLogic'
 
 import { InviteMembersButton } from '~/layout/navigation/TopBar/AccountPopover'
 import { ProductKey, SDKInstructionsMap } from '~/types'
@@ -44,11 +43,9 @@ export function SDKs({
         panel,
         hasSnippetEvents,
     } = useValues(sdksLogic)
-    const { productKey, product } = useValues(onboardingLogic)
-    const { currentTeam } = useValues(teamLogic)
+    const { productKey, product, isFirstProductOnboarding } = useValues(onboardingLogic)
     const { width } = useWindowSize()
     const minimumSideBySideSize = 768
-    const isFirstProduct = Object.keys(currentTeam?.has_completed_onboarding_for || {}).length === 0
 
     useEffect(() => {
         setAvailableSDKInstructionsMap(sdkInstructionMap)
@@ -58,13 +55,13 @@ export function SDKs({
         width && setShowSideBySide(width > minimumSideBySideSize)
     }, [width])
 
-    return !isFirstProduct && hasSnippetEvents === null ? (
+    return !isFirstProductOnboarding && hasSnippetEvents === null ? (
         <OnboardingStep title="Checking for snippet installation..." stepKey={stepKey} hedgehog={<LaptopHog1 />}>
             <div className="flex justify-center mt-6">
                 <Spinner className="text-xl" />
             </div>
         </OnboardingStep>
-    ) : !isFirstProduct && hasSnippetEvents ? (
+    ) : !isFirstProductOnboarding && hasSnippetEvents ? (
         <OnboardingStep
             title={`Huzzah! You've already installed PostHog.js.`}
             stepKey={stepKey}

diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
@@ -7,7 +7,7 @@ import { LemonCard } from 'lib/lemon-ui/LemonCard/LemonCard'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { billingLogic } from 'scenes/billing/billingLogic'
-import { getProductUri } from 'scenes/onboarding/onboardingLogic'
+import { getProductUri, onboardingLogic } from 'scenes/onboarding/onboardingLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
@@ -134,17 +134,18 @@ export function ProductCard({
 
 export function Products(): JSX.Element {
     const { billing } = useValues(billingLogic)
-    const { currentTeam } = useValues(teamLogic)
-    const isFirstProduct = Object.keys(currentTeam?.has_completed_onboarding_for || {}).length === 0
+    const { isFirstProductOnboarding } = useValues(onboardingLogic)
     const products = billing?.products || []
 
     return (
         <div className="flex flex-col flex-1 w-full h-full p-6 items-center justify-center bg-mid">
             <div className="mb-8">
-                <h1 className="text-center text-4xl">Pick your {isFirstProduct ? 'first' : 'next'} product.</h1>
+                <h1 className="text-center text-4xl">
+                    Pick your {isFirstProductOnboarding ? 'first' : 'next'} product.
+                </h1>
                 <p className="text-center">
-                    Pick your {isFirstProduct ? 'first' : 'next'} product to get started with. You can set up any others
-                    you'd like later.
+                    Pick your {isFirstProductOnboarding ? 'first' : 'next'} product to get started with. You can set up
+                    any others you'd like later.
                 </p>
             </div>
             {products.length > 0 ? (