Added PostHog events to dev onboarding

Author: csansoon

apps/web/src/app/(onboarding)/onboarding/choice/page.tsx

@@ -12,7 +12,7 @@ import { ROUTES } from '$/services/routes'
 import { useHover } from '@latitude-data/web-ui/browser'
 import { cn } from '@latitude-data/web-ui/utils'
 
-type OnboardingChoice = 'scratch' | 'existing' | null
+type OnboardingChoice = 'product_engineer' | 'developer' | null
 
 function ChoiceCard({
   icon,
@@ -66,12 +66,12 @@ export default function OnboardingChoicePage() {
   })
 
   const handleStartFromScratch = useCallback(() => {
-    setOnboardingChoice('scratch')
+    setOnboardingChoice('product_engineer')
     router.push(ROUTES.onboarding.promptEngineering.pasteYourPrompt)
   }, [setOnboardingChoice, router])
 
   const handleExistingProject = useCallback(() => {
-    setOnboardingChoice('existing')
+    setOnboardingChoice('developer')
     router.push(ROUTES.onboarding.install)
   }, [setOnboardingChoice, router])
 

apps/web/src/app/(onboarding)/onboarding/install/_components/InviteDeveloperModal.tsx

@@ -15,6 +15,8 @@ import { Text } from '@latitude-data/web-ui/atoms/Text'
 import { TableSkeleton } from '@latitude-data/web-ui/molecules/TableSkeleton'
 import useUsers from '$/stores/users'
 import useCurrentWorkspace from '$/stores/currentWorkspace'
+import useLatitudeAction from '$/hooks/useLatitudeAction'
+import { publishEventAction } from '$/actions/events/publishEventAction'
 import { useCallback, useState } from 'react'
 
 function NewUserRow({
@@ -75,10 +77,17 @@ export default function InviteDeveloperModal({
 }) {
   const { data: workspace } = useCurrentWorkspace()
   const { data: users, isLoading, invite } = useUsers()
+  const { execute: publishEvent } = useLatitudeAction(publishEventAction)
 
   const onInviteUser = useCallback(
-    (name: string, email: string) => invite({ name, email }),
-    [invite],
+    (name: string, email: string) => {
+      invite({ name, email })
+      publishEvent({
+        eventType: 'onboardingUserInvited',
+        payload: { invitedEmail: email },
+      })
+    },
+    [invite, publishEvent],
   )
 
   return (

apps/web/src/app/(onboarding)/onboarding/install/_lib/OnboardingInstallProvider.tsx

@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { getOnboardingResources } from '$/data-access/onboarding'
 import { redirect } from 'next/navigation'
 import { ROUTES } from '$/services/routes'
-import { OnboardingInstallProvider } from './_lib/OnboardingInstallProvider'
+import { ProjectProvider } from '$/app/providers/ProjectProvider'
 
 export default async function OnboardingInstallLayout({
   children,
@@ -16,9 +16,5 @@ export default async function OnboardingInstallLayout({
     return redirect(ROUTES.onboarding.choice)
   }
 
-  return (
-    <OnboardingInstallProvider project={project}>
-      {children}
-    </OnboardingInstallProvider>
-  )
+  return <ProjectProvider project={project}>{children}</ProjectProvider>
 }

apps/web/src/app/(onboarding)/onboarding/install/layout.tsx

@@ -1,22 +1,23 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { Button } from '@latitude-data/web-ui/atoms/Button'
 import { Icon } from '@latitude-data/web-ui/atoms/Icons'
 import { Text } from '@latitude-data/web-ui/atoms/Text'
 import useLatitudeAction from '$/hooks/useLatitudeAction'
 import { skipOnboardingAction } from '$/actions/onboarding/skip'
+import { publishEventAction } from '$/actions/events/publishEventAction'
 import InviteDeveloperModal from './_components/InviteDeveloperModal'
 import {
   useLocalStorage,
   AppLocalStorage,
 } from '@latitude-data/web-ui/hooks/useLocalStorage'
 import useApiKeys from '$/stores/apiKeys'
-import { useOnboardingInstall } from './_lib/OnboardingInstallProvider'
 import { FrameworkDefinition, FRAMEWORKS } from './frameworks'
 import InstallationModal from './_components/InstallationModal'
 import { useHover } from '@latitude-data/web-ui/browser'
 import { cn } from '@latitude-data/web-ui/utils'
+import { useCurrentProject } from '$/app/providers/ProjectProvider'
 
 function FrameworkCard({
   framework,
@@ -58,6 +59,7 @@ export default function OnboardingInstallPage() {
   const [inviteModalOpen, setInviteModalOpen] = useState(false)
   const { execute: skipOnboarding, isPending: isSkipping } =
     useLatitudeAction(skipOnboardingAction)
+  const { execute: publishEvent } = useLatitudeAction(publishEventAction)
   const { setValue: setReplayOnboarding } = useLocalStorage<boolean>({
     key: AppLocalStorage.replayOnboarding,
     defaultValue: false,
@@ -66,8 +68,12 @@ export default function OnboardingInstallPage() {
   const [selectedFramework, setSelectedFramework] =
     useState<FrameworkDefinition | null>(null)
 
+  useEffect(() => {
+    publishEvent({ eventType: 'installOnboardingPageVisited' })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
   const { data: apiKeys } = useApiKeys()
-  const { project } = useOnboardingInstall()
+  const { project } = useCurrentProject()
 
   const firstApiKey = apiKeys?.[0]
 

apps/web/src/app/(onboarding)/onboarding/install/page.tsx

@@ -757,6 +757,23 @@ export type PasteYourPromptOnboardingCompleted = LatitudeEventGeneric<
   }
 >
 
+export type InstallOnboardingPageVisited = LatitudeEventGeneric<
+  'installOnboardingPageVisited',
+  {
+    workspaceId: number
+    userEmail: string
+  }
+>
+
+export type OnboardingUserInvited = LatitudeEventGeneric<
+  'onboardingUserInvited',
+  {
+    workspaceId: number
+    userEmail: string
+    invitedEmail: string
+  }
+>
+
 export type IssueCreatedEvent = LatitudeEventGeneric<
   'issueCreated',
   {
@@ -995,6 +1012,8 @@ export type LatitudeEvent =
   | GenerateDatasetOnboardingPageVisited
   | RunExperimentOnboardingPageVisited
   | PasteYourPromptOnboardingCompleted
+  | InstallOnboardingPageVisited
+  | OnboardingUserInvited
   | IssueCreatedEvent
   | IssueUpdatedEvent
   | IssueDeletedEvent
@@ -1083,6 +1102,8 @@ export interface IEventsHandlers {
   generateDatasetOnboardingPageVisited: EventHandler<GenerateDatasetOnboardingPageVisited>[]
   runExperimentOnboardingPageVisited: EventHandler<RunExperimentOnboardingPageVisited>[]
   pasteYourPromptOnboardingCompleted: EventHandler<PasteYourPromptOnboardingCompleted>[]
+  installOnboardingPageVisited: EventHandler<InstallOnboardingPageVisited>[]
+  onboardingUserInvited: EventHandler<OnboardingUserInvited>[]
   issueCreated: EventHandler<IssueCreatedEvent>[]
   issueUpdated: EventHandler<IssueUpdatedEvent>[]
   issueDeleted: EventHandler<IssueDeletedEvent>[]

packages/core/src/events/events.d.ts

@@ -110,6 +110,8 @@ export const EventHandlers: IEventsHandlers = {
   generateDatasetOnboardingPageVisited: [],
   runExperimentOnboardingPageVisited: [],
   pasteYourPromptOnboardingCompleted: [],
+  installOnboardingPageVisited: [],
+  onboardingUserInvited: [],
   issueCreated: [],
   issueUpdated: [],
   issueDeleted: [],