refactor(fe): Update Workspace Join Request Sent mixpanel event

2025-04-21 10:12:01 +01:00
parent ae77daa5cf 5aac348b77
commit c5fcbb6a01
9 changed files with 50 additions and 18 deletions
@@ -4,7 +4,7 @@
    <div v-if="!showEmptyState" class="flex flex-col gap-4">
      <ProjectsMoveToWorkspaceAlert
        v-if="isWorkspacesEnabled"
-        @move-project="(id) => onMoveProject(id)"
+        @move-project="(id) => onMoveProject(id, 'projects')"
      />
      <div class="flex items-center gap-2 mb-2">
        <Squares2X2Icon class="h-5 w-5" />
@@ -66,7 +66,7 @@
      <ProjectsDashboardFilled
        :projects="projects"
        show-workspace-link
-        @move-project="(id) => onMoveProject(id)"
+        @move-project="(id) => onMoveProject(id, 'project_card')"
      />
      <InfiniteLoading
        :settings="{ identifier: infiniteLoaderId }"
@@ -91,6 +91,7 @@ import type { Nullable, Optional, StreamRoles } from '@speckle/shared'
 import { useDebouncedTextInput, type InfiniteLoaderState } from '@speckle/ui-components'
 import { MagnifyingGlassIcon, Squares2X2Icon } from '@heroicons/vue/24/outline'
 import { useUserProjectsUpdatedTracking } from '~~/lib/user/composables/projectUpdates'
+import { useMixpanel } from '~/lib/core/composables/mp'

 graphql(`
  fragment ProjectsDashboard_UserProjectCollection on UserProjectCollection {
@@ -193,7 +194,15 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
  }
 }

-const onMoveProject = (projectId: string) => {
+const mixpanel = useMixpanel()
+
+const onMoveProject = (projectId: string, location: string) => {
+  mixpanel.track('Move Project CTA Clicked', {
+    location,
+    // eslint-disable-next-line camelcase
+    workspace_id:
+      projects.value?.items.find((p) => p.id === projectId)?.workspace?.id || undefined
+  })
  emittedProjectId.value = projectId
  showMoveProjectDialog.value = true
 }
@@ -56,8 +56,8 @@ watch(
  showBanner,
  (newVal) => {
    if (newVal) {
-      mixpanel.track('Workspace Limit Announcement Banner Viewed', {
-        source: 'promo-banner'
+      mixpanel.track('New Workspaces Explainer Banner Viewed', {
+        location: 'promo_banner'
      })
    }
  },
@@ -69,6 +69,9 @@ const handleDismiss = async () => {
 }

 const handleReadAnnouncement = async () => {
+  mixpanel.track('New Workspaces Explainer Banner CTA Clicked', {
+    location: 'promo_banner'
+  })
  await navigateTo(
    'https://speckle.systems/blog/projects-get-a-new-home-and-pricing-plans',
    {
@@ -28,6 +28,7 @@
        v-for="workspace in discoverableWorkspacesAndJoinRequests"
        :key="`discoverable-${workspace.id}`"
        :workspace="workspace"
+        location="workspace_join_page"
      />
      <div class="mt-2 w-full flex flex-col gap-2">
        <FormButton
@@ -22,7 +22,7 @@
        v-if="workspace"
        :icon="Squares2X2Icon"
        :workspace-info="workspace"
-        @show-move-projects-dialog="showMoveProjectsDialog = true"
+        @show-move-projects-dialog="onMoveProject"
        @show-new-project-dialog="openNewProject = true"
        @show-invite-dialog="showInviteDialog = true"
      />
@@ -61,7 +61,7 @@
          :can-create-project="canCreateProject"
          :can-move-project-to-workspace="canMoveProjectToWorkspace"
          @new-project="openNewProject = true"
-          @move-project="showMoveProjectsDialog = true"
+          @move-project="onMoveProject"
        />
      </section>

@@ -101,6 +101,7 @@ import { workspaceRoute } from '~/lib/common/helpers/route'
 import { useBillingActions } from '~/lib/billing/composables/actions'
 import { useWorkspacesWizard } from '~/lib/workspaces/composables/wizard'
 import type { WorkspaceWizardState } from '~/lib/workspaces/helpers/types'
+import { useMixpanel } from '~/lib/core/composables/mp'

 graphql(`
  fragment WorkspaceProjectList_Workspace on Workspace {
@@ -227,6 +228,17 @@ const clearSearch = () => {

 const hasFinalized = ref(false)

+const mixpanel = useMixpanel()
+
+const onMoveProject = () => {
+  mixpanel.track('Move Project CTA Clicked', {
+    location: 'workspace',
+    // eslint-disable-next-line camelcase
+    workspace_id: props.workspaceSlug
+  })
+  showMoveProjectsDialog.value = true
+}
+
 onResult((queryResult) => {
  if (
    queryResult.data?.workspaceBySlug.creationState?.completed === false &&
@@ -47,6 +47,7 @@ type WorkspaceWithStatus = LimitedWorkspace & {
 const props = defineProps<{
  workspace: WorkspaceWithStatus
  showDismissButton?: boolean
+  location?: string
 }>()

 const { requestToJoinWorkspace, dismissDiscoverableWorkspace } =
@@ -54,14 +55,14 @@ const { requestToJoinWorkspace, dismissDiscoverableWorkspace } =
 const mixpanel = useMixpanel()

 const onRequest = () => {
-  requestToJoinWorkspace(props.workspace.id)
+  requestToJoinWorkspace(props.workspace.id, props.location || 'discovery_card')
 }

 const onDismiss = async () => {
  await dismissDiscoverableWorkspace(props.workspace.id)
  mixpanel.track('Workspace Discovery Banner Dismissed', {
    workspaceId: props.workspace.id,
-    location: 'discovery card',
+    location: 'discovery_card',
    // eslint-disable-next-line camelcase
    workspace_id: props.workspace.id
  })
@@ -14,6 +14,7 @@
        :key="workspace.id"
        :workspace="workspace"
        show-dismiss-button
+        location="workspace_switcher"
      />
    </div>
  </LayoutDialog>
@@ -31,12 +31,12 @@ const invite = computed(() => ({

 const handleRequest = async (accept: boolean) => {
  if (accept) {
-    await requestToJoinWorkspace(props.workspace.id)
+    await requestToJoinWorkspace(props.workspace.id, 'discovery banner')
  } else {
    await dismissDiscoverableWorkspace(props.workspace.id)
    mixpanel.track('Workspace Discovery Banner Dismissed', {
      workspaceId: props.workspace.id,
-      location: 'discovery banner',
+      location: 'discovery_banner',
      // eslint-disable-next-line camelcase
      workspace_id: props.workspace.id
    })
@@ -130,7 +130,7 @@ export const useDiscoverableWorkspaces = () => {
    () => discoverableWorkspacesCount.value + discoverableJoinRequestsCount.value
  )

-  const requestToJoinWorkspace = async (workspaceId: string) => {
+  const requestToJoinWorkspace = async (workspaceId: string, location: string) => {
    const cache = apollo.cache
    const activeUserId = activeUser.value?.id

@@ -177,7 +177,7 @@ export const useDiscoverableWorkspaces = () => {

      mixpanel.track('Workspace Join Request Sent', {
        workspaceId,
-        location: 'onboarding',
+        location,
        // eslint-disable-next-line camelcase
        workspace_id: workspaceId
      })
@@ -85,6 +85,7 @@ import type { LayoutMenuItem } from '~~/lib/layout/helpers/components'
 import { EllipsisHorizontalIcon } from '@heroicons/vue/24/solid'
 import { HorizontalDirection } from '~~/lib/common/composables/window'
 import { useCopyProjectLink } from '~~/lib/projects/composables/projectManagement'
+import { useMixpanel } from '~/lib/core/composables/mp'

 graphql(`
  fragment ProjectPageProject on Project {
@@ -146,6 +147,7 @@ const route = useRoute()
 const router = useRouter()
 const copyProjectLink = useCopyProjectLink()
 const { isLoggedIn } = useActiveUser()
+const mixpanel = useMixpanel()

 const projectId = computed(() => route.params.id as string)
 const token = computed(() => route.query.token as Optional<string>)
@@ -322,6 +324,13 @@ const disableLegacyMoveProjectButton = computed(
  () => !project.value?.permissions.canMoveToWorkspace.authorized
 )

+const onMoveProject = () => {
+  mixpanel.track('Move Project CTA Clicked', {
+    location: 'project'
+  })
+  showMoveDialog.value = true
+}
+
 const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) => {
  const { item } = params

@@ -330,12 +339,8 @@ const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) =>
      copyProjectLink(projectId.value)
      break
    case ActionTypes.Move:
-      showMoveDialog.value = true
+      onMoveProject()
      break
  }
 }
-
-const onMoveProject = () => {
-  showMoveDialog.value = true
-}
 </script>