[PAY-1457] Add amplitude analytics to chat features (#3627)

packages/common/src/context/appContext.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react'
+
+import { AnalyticsEvent, AllTrackingEvents } from 'models/Analytics'
+
+type AppContextType = {
+  analytics: {
+    track: (event: AnalyticsEvent, callback?: () => void) => Promise<void>
+    make: <T extends AllTrackingEvents>(
+      event: T
+    ) => {
+      eventName: string
+      properties: any
+    }
+  }
+}
+
+export const AppContext = createContext<AppContextType | null>(null)
+
+export const useAppContext = () => {
+  const context = useContext(AppContext)
+  if (!context) {
+    throw new Error('useAppContext has to be used within <AppContext.Provider>')
+  }
+
+  return context
+}

packages/common/src/context/index.ts

@@ -0,0 +1 @@
+export * from './appContext'

packages/common/src/hooks/chats/useCanSendMessage.ts

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
 
 import { User } from 'models/User'
-import { CommonState } from 'store/index'
+import { ChatPermissionAction, CommonState } from 'store/index'
 import {
   getCanSendMessage,
   getOtherChatUsers
@@ -12,14 +12,20 @@ import { useProxySelector } from '..'
 /**
  * Returns whether or not the current user can send messages to the current chat
  */
-export const useCanSendMessage = (currentChatId?: string) => {
+export const useCanSendMessage = (
+  currentChatId?: string
+): {
+  canSendMessage: boolean
+  callToAction: ChatPermissionAction
+  // Explicitly define type as undefinable since users could be empty
+  firstOtherUser: User | undefined
+} => {
   const users = useProxySelector(
     (state) => getOtherChatUsers(state, currentChatId),
     [currentChatId]
   )
 
-  // Explicitly define type as undefinable since users could be empty
-  const firstOtherUser: User | undefined = users[0]
+  const firstOtherUser = users[0]
 
   const { canSendMessage, callToAction } = useSelector((state: CommonState) =>
     getCanSendMessage(state, {

packages/common/src/hooks/chats/useSetInboxPermissions.ts

@@ -4,7 +4,9 @@ import type { AudiusSdk } from '@audius/sdk'
 import { ChatPermission } from '@audius/sdk'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { Name } from 'models/Analytics'
 import { Status } from 'models/Status'
+import { useAppContext } from 'src/context/appContext'
 import { accountSelectors } from 'store/account'
 import { chatActions, chatSelectors } from 'store/pages'
 
@@ -22,6 +24,9 @@ export const useSetInboxPermissions = ({
   audiusSdk
 }: useSetInboxPermissionsProps) => {
   const dispatch = useDispatch()
+  const {
+    analytics: { track, make }
+  } = useAppContext()
   const permissions = useSelector(getUserChatPermissions)
   const userId = useSelector(getUserId)
   const currentPermission = permissions?.permits
@@ -57,13 +62,25 @@ export const useSetInboxPermissions = ({
           const sdk = await audiusSdk()
           await sdk.chats.permit({ permit: permission })
           setPermissionStatus(Status.SUCCESS)
+          track(
+            make({
+              eventName: Name.CHANGE_INBOX_SETTINGS_SUCCESS,
+              permission
+            })
+          )
         } catch (e) {
           console.error('Error saving chat permissions:', e)
           setPermissionStatus(Status.ERROR)
+          track(
+            make({
+              eventName: Name.CHANGE_INBOX_SETTINGS_FAILURE,
+              permission
+            })
+          )
         }
       }
     },
-    [audiusSdk, permissionStatus]
+    [audiusSdk, track, make, permissionStatus]
   )
 
   // Save local permission state to backend. Useful in scenarios where we

packages/common/src/index.ts

@@ -1,5 +1,6 @@
 export * from './api'
 export * from './audius-query'
+export * from './context'
 export * from './models'
 export * from './utils'
 export * from './services'

packages/common/src/models/Analytics.ts

@@ -1,3 +1,5 @@
+import { ChatPermission } from '@audius/sdk'
+
 import { FeedFilter } from 'models/FeedFilter'
 import { ID, PlayableType } from 'models/Identifiers'
 import { MonitorPayload, ServiceMonitorType } from 'models/Services'
@@ -319,7 +321,24 @@ export enum Name {
   CONNECT_WALLET_NEW_WALLET_CONNECTED = 'Connect Wallet: New Wallet Connected',
   CONNECT_WALLET_ALREADY_ASSOCIATED = 'Connect Wallet: Already Associated',
   CONNECT_WALLET_ASSOCIATION_ERROR = 'Connect Wallet: Association Error',
-  CONNECT_WALLET_ERROR = 'Connect Wallet: Error'
+  CONNECT_WALLET_ERROR = 'Connect Wallet: Error',
+
+  // Chat
+  CREATE_CHAT_SUCCESS = 'Create Chat: Success',
+  CREATE_CHAT_FAILURE = 'Create Chat: Failure',
+  SEND_MESSAGE_SUCCESS = 'Send Message: Success',
+  SEND_MESSAGE_FAILURE = 'Send Message: Failure',
+  DELETE_CHAT_SUCCESS = 'Delete Chat: Success',
+  DELETE_CHAT_FAILURE = 'Delete Chat: Failure',
+  BLOCK_USER_SUCCESS = 'Block User: Success',
+  BLOCK_USER_FAILURE = 'Block User: Failure',
+  CHANGE_INBOX_SETTINGS_SUCCESS = 'Change Inbox Settings: Success',
+  CHANGE_INBOX_SETTINGS_FAILURE = 'Change Inbox Settings: Failure',
+  SEND_MESSAGE_REACTION_SUCCESS = 'Send Message Reaction: Success',
+  SEND_MESSAGE_REACTION_FAILURE = 'Send Message Reaction: Failure',
+  MESSAGE_UNFURL_TRACK = 'Message Unfurl: Track',
+  MESSAGE_UNFURL_PLAYLIST = 'Message Unfurl: Playlist',
+  TIP_UNLOCKED_CHAT = 'Unlocked Chat: Tip'
 }
 
 type PageView = {
@@ -1512,6 +1531,73 @@ type ConnectWalletError = {
   error: string
 }
 
+type CreateChatSuccess = {
+  eventName: Name.CREATE_CHAT_SUCCESS
+}
+
+type CreateChatFailure = {
+  eventName: Name.CREATE_CHAT_FAILURE
+}
+
+type SendMessageSuccess = {
+  eventName: Name.SEND_MESSAGE_SUCCESS
+}
+
+type SendMessageFailure = {
+  eventName: Name.SEND_MESSAGE_FAILURE
+}
+
+type DeleteChatSuccess = {
+  eventName: Name.DELETE_CHAT_SUCCESS
+}
+
+type DeleteChatFailure = {
+  eventName: Name.DELETE_CHAT_FAILURE
+}
+
+type BlockUserSuccess = {
+  eventName: Name.BLOCK_USER_SUCCESS
+  blockedUserId: ID
+}
+
+type BlockUserFailure = {
+  eventName: Name.BLOCK_USER_FAILURE
+  blockedUserId: ID
+}
+
+type ChangeInboxSettingsSuccess = {
+  eventName: Name.CHANGE_INBOX_SETTINGS_SUCCESS
+  permission: ChatPermission
+}
+
+type ChangeInboxSettingsFailure = {
+  eventName: Name.CHANGE_INBOX_SETTINGS_FAILURE
+  permission: ChatPermission
+}
+
+type SendMessageReactionSuccess = {
+  eventName: Name.SEND_MESSAGE_REACTION_SUCCESS
+  reaction: string | null
+}
+
+type SendMessageReactionFailure = {
+  eventName: Name.SEND_MESSAGE_REACTION_FAILURE
+  reaction: string | null
+}
+
+type MessageUnfurlTrack = {
+  eventName: Name.MESSAGE_UNFURL_TRACK
+}
+
+type MessageUnfurlPlaylist = {
+  eventName: Name.MESSAGE_UNFURL_PLAYLIST
+}
+
+type TipUnlockedChat = {
+  eventName: Name.TIP_UNLOCKED_CHAT
+  recipientUserId: ID
+}
+
 export type BaseAnalyticsEvent = { type: typeof ANALYTICS_TRACK_EVENT }
 
 export type AllTrackingEvents =
@@ -1714,3 +1800,19 @@ export type AllTrackingEvents =
   | ConnectWalletAlreadyAssociated
   | ConnectWalletAssociationError
   | ConnectWalletError
+  | SendMessageSuccess
+  | CreateChatSuccess
+  | CreateChatFailure
+  | SendMessageSuccess
+  | SendMessageFailure
+  | DeleteChatSuccess
+  | DeleteChatFailure
+  | BlockUserSuccess
+  | BlockUserFailure
+  | ChangeInboxSettingsSuccess
+  | ChangeInboxSettingsFailure
+  | SendMessageReactionSuccess
+  | SendMessageReactionFailure
+  | MessageUnfurlTrack
+  | MessageUnfurlPlaylist
+  | TipUnlockedChat