feat(core): track for notifications (#11298)

packages/frontend/core/src/components/notification/list.tsx

@@ -25,6 +25,7 @@ import type {
   MentionNotificationBodyType,
 } from '@affine/graphql';
 import { i18nTime, Trans, useI18n } from '@affine/i18n';
+import track from '@affine/track';
 import {
   CollaborationIcon,
   DeleteIcon,
@@ -176,6 +177,10 @@ const MentionNotificationItem = ({
   const memberInactived = !body.createdByUser;
 
   const handleClick = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'read',
+    });
     if (!body.workspace?.id) {
       return;
     }
@@ -189,7 +194,7 @@ const MentionNotificationItem = ({
       body.doc.blockId ? [body.doc.blockId] : undefined,
       body.doc.elementId ? [body.doc.elementId] : undefined
     );
-  }, [body, jumpToPageBlock, notificationListService, notification.id]);
+  }, [body, jumpToPageBlock, notificationListService, notification]);
 
   return (
     <div className={styles.itemContainer} onClick={handleClick}>
@@ -241,6 +246,10 @@ const InvitationReviewRequestNotificationItem = ({
   const memberInactived = !body.createdByUser;
   const workspaceInactived = !body.workspace;
   const handleClick = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'read',
+    });
     notificationListService.readNotification(notification.id).catch(err => {
       console.error(err);
     });
@@ -353,6 +362,11 @@ const InvitationReviewApprovedNotificationItem = ({
   const workspaceInactived = !body.workspace;
 
   const handleClick = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'button',
+      button: 'open',
+    });
     notificationListService.readNotification(notification.id).catch(err => {
       console.error(err);
     });
@@ -424,6 +438,10 @@ const InvitationAcceptedNotificationItem = ({
   const memberInactived = !body.createdByUser;
 
   const handleClick = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'read',
+    });
     notificationListService.readNotification(notification.id).catch(err => {
       console.error(err);
     });
@@ -476,6 +494,10 @@ const InvitationBlockedNotificationItem = ({
   const workspaceInactived = !body.workspace;
 
   const handleClick = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'read',
+    });
     notificationListService.readNotification(notification.id).catch(err => {
       console.error(err);
     });
@@ -544,6 +566,11 @@ const InvitationNotificationItem = ({
   }, [body, jumpToPage, notification.id, notificationListService]);
 
   const handleAcceptInvite = useCallback(() => {
+    track.$.sidebar.notifications.clickNotification({
+      type: notification.type,
+      item: 'button',
+      button: 'accept',
+    });
     setIsAccepting(true);
     invitationService
       .acceptInvite(inviteId)
@@ -654,12 +681,17 @@ const DeleteButton = ({
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation(); // prevent trigger the click event of the parent element
 
+      track.$.sidebar.notifications.clickNotification({
+        type: notification.type,
+        item: 'dismiss',
+      });
+
       notificationListService.readNotification(notification.id).catch(err => {
         console.error(err);
       });
       onClick?.();
     },
-    [notificationListService, notification.id, onClick]
+    [notificationListService, notification, onClick]
   );
 
   return (

packages/frontend/core/src/components/root-app-sidebar/notification-button.tsx

@@ -2,6 +2,7 @@ import { Menu } from '@affine/component';
 import { MenuItem } from '@affine/core/modules/app-sidebar/views';
 import { NotificationCountService } from '@affine/core/modules/notification';
 import { useI18n } from '@affine/i18n';
+import { track } from '@affine/track';
 import { NotificationIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useState } from 'react';
@@ -28,9 +29,17 @@ export const NotificationButton = () => {
 
   const [notificationListOpen, setNotificationListOpen] = useState(false);
 
-  const handleNotificationListOpenChange = useCallback((open: boolean) => {
+  const handleNotificationListOpenChange = useCallback(
-    setNotificationListOpen(open);
+    (open: boolean) => {
-  }, []);
+      if (open) {
+        track.$.sidebar.notifications.openInbox({
+          unreadCount: notificationCountService.count$.value,
+        });
+      }
+      setNotificationListOpen(open);
+    },
+    [notificationCountService.count$.value]
+  );
 
   return (
     <Menu

packages/frontend/track/src/events.ts

@@ -145,6 +145,10 @@ type AttachmentEvents =
 type TemplateEvents = 'openTemplateListMenu';
 // END SECTION
 
+// SECTION: notification
+type NotificationEvents = 'openInbox' | 'clickNotification';
+// END SECTION
+
 type UserEvents =
   | GeneralEvents
   | AppEvents
@@ -162,7 +166,9 @@ type UserEvents =
   | PaymentEvents
   | DNDEvents
   | AttachmentEvents
-  | TemplateEvents;
+  | TemplateEvents
+  | NotificationEvents;
+
 interface PageDivision {
   [page: string]: {
     [segment: string]: {
@@ -346,6 +352,7 @@ const PageEvents = {
     sidebar: {
       newDoc: ['quickStart'],
       template: ['openTemplateListMenu', 'quickStart'],
+      notifications: ['openInbox', 'clickNotification'],
     },
     splitViewIndicator: {
       $: ['splitViewAction', 'openInSplitView', 'openInPeekView'],
@@ -543,6 +550,12 @@ export type EventArgs = {
   inviteUserDocRole: {
     control: 'member list';
   };
+  openInbox: { unreadCount: number };
+  clickNotification: {
+    type: string;
+    item: 'read' | 'button' | 'dismiss';
+    button?: string;
+  };
 };
 
 // for type checking