Added billig mixpanel events (#3521)

packages/frontend-2/lib/billing/composables/actions.ts

@@ -5,14 +5,21 @@ import type {
   BillingInterval
 } from '~/lib/common/generated/gql/graphql'
 import { settingsBillingCancelCheckoutSessionMutation } from '~/lib/settings/graphql/mutations'
+import { useMixpanel } from '~/lib/core/composables/mp'
 
 export const useBillingActions = () => {
+  const mixpanel = useMixpanel()
   const { client: apollo } = useApolloClient()
   const { mutate: cancelCheckoutSessionMutation } = useMutation(
     settingsBillingCancelCheckoutSessionMutation
   )
 
   const billingPortalRedirect = async (workspaceId: string) => {
+    mixpanel.track('Billing Portal Button Clicked', {
+      // eslint-disable-next-line camelcase
+      workspace_id: workspaceId
+    })
+
     // We need to fetch this on click because the link expires very quickly
     const result = await apollo.query({
       query: settingsWorkspaceBillingCustomerPortalQuery,
@@ -31,6 +38,12 @@ export const useBillingActions = () => {
     workspaceId: string
   }) => {
     const { plan, cycle, workspaceId } = args
+    mixpanel.track('Upgrade Button Clicked', {
+      plan,
+      cycle,
+      // eslint-disable-next-line camelcase
+      workspace_id: workspaceId
+    })
     window.location.href = `/api/v1/billing/workspaces/${workspaceId}/checkout-session/${plan}/${cycle}`
   }
 
@@ -38,6 +51,11 @@ export const useBillingActions = () => {
     await cancelCheckoutSessionMutation({
       input: { sessionId, workspaceId }
     })
+
+    mixpanel.track('Checkout Session Cancelled', {
+      // eslint-disable-next-line camelcase
+      workspace_id: workspaceId
+    })
   }
 
   return {

packages/frontend-2/lib/common/generated/gql/gql.ts

@@ -327,7 +327,7 @@ const documents = {
     "\n  fragment LinkableComment on Comment {\n    id\n    viewerResources {\n      modelId\n      versionId\n      objectId\n    }\n  }\n": types.LinkableCommentFragmentDoc,
     "\n  fragment UseWorkspaceInviteManager_PendingWorkspaceCollaborator on PendingWorkspaceCollaborator {\n    id\n    token\n    workspaceId\n    workspaceSlug\n    user {\n      id\n    }\n  }\n": types.UseWorkspaceInviteManager_PendingWorkspaceCollaboratorFragmentDoc,
     "\n  fragment WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator on WorkspaceCollaborator {\n    id\n    role\n  }\n": types.WorkspaceMixpanelUpdateGroup_WorkspaceCollaboratorFragmentDoc,
-    "\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n": types.WorkspaceMixpanelUpdateGroup_WorkspaceFragmentDoc,
+    "\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    plan {\n      status\n      name\n    }\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n": types.WorkspaceMixpanelUpdateGroup_WorkspaceFragmentDoc,
     "\n  mutation UpdateRole($input: WorkspaceRoleUpdateInput!) {\n    workspaceMutations {\n      updateRole(input: $input) {\n        team {\n          items {\n            id\n            role\n          }\n        }\n      }\n    }\n  }\n": types.UpdateRoleDocument,
     "\n  mutation InviteToWorkspace(\n    $workspaceId: String!\n    $input: [WorkspaceInviteCreateInput!]!\n  ) {\n    workspaceMutations {\n      invites {\n        batchCreate(workspaceId: $workspaceId, input: $input) {\n          id\n          invitedTeam {\n            ...SettingsWorkspacesMembersInvitesTable_PendingWorkspaceCollaborator\n          }\n        }\n      }\n    }\n  }\n": types.InviteToWorkspaceDocument,
     "\n  mutation CreateWorkspace($input: WorkspaceCreateInput!) {\n    workspaceMutations {\n      create(input: $input) {\n        id\n        ...SettingsDialog_Workspace\n      }\n    }\n  }\n": types.CreateWorkspaceDocument,
@@ -1622,7 +1622,7 @@ export function graphql(source: "\n  fragment WorkspaceMixpanelUpdateGroup_Works
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    plan {\n      status\n      name\n    }\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment WorkspaceMixpanelUpdateGroup_Workspace on Workspace {\n    id\n    name\n    description\n    domainBasedMembershipProtectionEnabled\n    discoverabilityEnabled\n    plan {\n      status\n      name\n    }\n    team {\n      totalCount\n      items {\n        ...WorkspaceMixpanelUpdateGroup_WorkspaceCollaborator\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

packages/frontend-2/lib/workspaces/composables/mixpanel.ts

@@ -21,6 +21,10 @@ graphql(`
     description
     domainBasedMembershipProtectionEnabled
     discoverabilityEnabled
+    plan {
+      status
+      name
+    }
     team {
       totalCount
       items {
@@ -61,7 +65,9 @@ export const useWorkspacesMixpanel = () => {
       teamMemberCount: roleCount[Roles.Workspace.Member],
       teamGuestCount: roleCount[Roles.Workspace.Guest],
       // eslint-disable-next-line camelcase
-      server_id: resolveMixpanelServerId(window.location.hostname)
+      server_id: resolveMixpanelServerId(window.location.hostname),
+      planName: workspace.plan?.name || '',
+      planStatus: workspace.plan?.status || ''
     }
 
     mixpanel.get_group('workspace_id', workspace.id).set(input)