chore(core): replace with new track impl

toeverything · Aug 5, 2024 · da5e9c8 · da5e9c8
1 parent cb396d2
commit da5e9c8
Show file tree

Hide file tree

Showing 58 changed files with 429 additions and 752 deletions.
diff --git a/packages/frontend/core/src/commands/affine-navigation.tsx b/packages/frontend/core/src/commands/affine-navigation.tsx
@@ -6,7 +6,7 @@ import type { createStore } from 'jotai';
 
 import { openSettingModalAtom, openWorkspaceListModalAtom } from '../atoms';
 import type { useNavigateHelper } from '../hooks/use-navigate-helper';
-import { mixpanel, track } from '../mixpanel';
+import { track } from '../mixpanel';
 import { registerAffineCommand } from './registry';
 
 export function registerAffineNavigationCommands({
@@ -93,10 +93,7 @@ export function registerAffineNavigationCommands({
       icon: <ArrowRightBigIcon />,
       label: t['com.affine.cmdk.affine.navigation.open-account-settings'](),
       run() {
-        mixpanel.track('AccountSettingsViewed', {
-          // page:
-          segment: 'cmdk',
-        });
+        track.$.cmdk.settings.openAccountSettings();
         store.set(openSettingModalAtom, s => ({
           activeTab: 'account',
           open: !s.open,

diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/edgeless.dialog.tsx
@@ -1,6 +1,6 @@
 import { Button, FlexWrapper, notify } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { SubscriptionService } from '@affine/core/modules/cloud';
 import { useI18n } from '@affine/i18n';
 import { AiIcon } from '@blocksuite/icons/rc';
@@ -65,11 +65,7 @@ export const AIOnboardingEdgeless = () => {
   const mode = useLiveData(doc.mode$);
 
   const goToPricingPlans = useCallback(() => {
-    mixpanel.track('PlansViewed', {
-      page: 'whiteboard editor',
-      segment: 'ai onboarding',
-      module: 'whiteboard dialog',
-    });
+    track.$.aiOnboarding.dialog.viewPlans();
     setSettingModal({
       open: true,
       activeTab: 'plans',

diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx
@@ -1,7 +1,7 @@
 import { Button, IconButton, Modal } from '@affine/component';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useBlurRoot } from '@affine/core/hooks/use-blur-root';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { AuthService, SubscriptionService } from '@affine/core/modules/cloud';
 import { Trans, useI18n } from '@affine/i18n';
 import { ArrowLeftSmallIcon } from '@blocksuite/icons/rc';
@@ -116,11 +116,7 @@ export const AIOnboardingGeneral = () => {
       activeTab: 'plans',
       scrollAnchor: 'aiPricingPlan',
     });
-    mixpanel.track('PlansViewed', {
-      page: 'whiteboard editor',
-      segment: 'ai onboarding',
-      module: 'general',
-    });
+    track.$.aiOnboarding.dialog.viewPlans();
     closeAndDismiss();
   }, [closeAndDismiss, setSettingModal]);
   const onPrev = useCallback(() => {

diff --git a/packages/frontend/core/src/components/affine/auth/oauth.tsx b/packages/frontend/core/src/components/affine/auth/oauth.tsx
@@ -1,7 +1,7 @@
 import { notify, Skeleton } from '@affine/component';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { OAuthProviderType } from '@affine/graphql';
 import { GithubIcon, GoogleDuotoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -75,7 +75,7 @@ function OAuthProvider({
       notify.error({ title: 'Failed to sign in, please try again.' });
     } finally {
       setIsConnecting(false);
-      mixpanel.track('OAuth', { provider });
+      track.$.$.auth.oauth(provider);
     }
   }, [authService, provider, redirectUri]);
 

diff --git a/packages/frontend/core/src/components/affine/auth/sign-in.tsx b/packages/frontend/core/src/components/affine/auth/sign-in.tsx
@@ -3,7 +3,7 @@ import { AuthInput, ModalHeader } from '@affine/component/auth-components';
 import { Button } from '@affine/component/ui/button';
 import { authAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { Trans, useI18n } from '@affine/i18n';
 import { ArrowRightBigIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -75,9 +75,7 @@ export const SignIn: FC<AuthPanelProps> = ({
           if (hasPassword) {
             setAuthState('signInWithPassword');
           } else {
-            mixpanel.track('SignIn', {
-              email,
-            });
+            track.$.$.auth.signIn();
             await authService.sendEmailMagicLink(
               email,
               verifyToken,
@@ -93,9 +91,7 @@ export const SignIn: FC<AuthPanelProps> = ({
             challenge,
             searchParams.get('redirect_uri')
           );
-          mixpanel.track('SignUp', {
-            email,
-          });
+          track.$.$.auth.signUp();
           setAuthState('afterSignUpSendEmail');
         }
       }

diff --git a/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx b/packages/frontend/core/src/components/affine/auth/user-plan-button.tsx
@@ -1,5 +1,4 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { mixpanel } from '@affine/core/mixpanel';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useServices } from '@toeverything/infra';
@@ -44,10 +43,6 @@ export const UserPlanButton = () => {
         activeTab: 'plans',
         scrollAnchor: 'cloudPricingPlan',
       });
-      mixpanel.track('PlansViewed', {
-        segment: 'settings panel',
-        module: 'profile and badge',
-      });
     },
     [setSettingModalAtom]
   );
@@ -64,14 +59,15 @@ export const UserPlanButton = () => {
     return;
   }
 
-  const planLabel = isBeliever ? 'Believer' : (plan ?? SubscriptionPlan.Free);
+  const planLabel = isBeliever ? 'Believer' : plan ?? SubscriptionPlan.Free;
 
   return (
     <Tooltip content={t['com.affine.payment.tag-tooltips']()} side="top">
       <div
         data-is-believer={isBeliever ? 'true' : undefined}
         className={styles.userPlanButton}
         onClick={handleClick}
+        data-event-props="$.settingsPanel.profileAndBadge.viewPlans"
       >
         {planLabel}
       </div>

diff --git a/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx b/packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx
@@ -3,7 +3,7 @@ import type { ConfirmModalProps } from '@affine/component/ui/modal';
 import { ConfirmModal, Modal } from '@affine/component/ui/modal';
 import { authAtom } from '@affine/core/atoms';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { DebugLogger } from '@affine/debug';
 import { apis } from '@affine/electron-api';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -221,9 +221,7 @@ export const CreateWorkspaceModal = ({
 
   const onConfirmName = useAsyncCallback(
     async (name: string, workspaceFlavour: WorkspaceFlavour) => {
-      mixpanel.track('CreateWorkspace', {
-        workspaceFlavour,
-      });
+      track.$.$.$.createWorkspace(workspaceFlavour);
       if (loading) return;
       setLoading(true);
 

diff --git a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
@@ -4,7 +4,7 @@ import { Button, IconButton } from '@affine/component/ui/button';
 import { Modal, useConfirmModal } from '@affine/component/ui/modal';
 import { openSettingModalAtom } from '@affine/core/atoms';
 import { useDocCollectionPageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { i18nTime, Trans, useI18n } from '@affine/i18n';
@@ -108,18 +108,17 @@ const HistoryEditorPreview = ({
   mode,
   title,
 }: HistoryEditorPreviewProps) => {
-  const onSwitchToPageMode = useCallback(() => {
-    mixpanel.track('Button', {
-      resolve: 'HistorySwitchToPageMode',
-    });
-    onModeChange('page');
-  }, [onModeChange]);
-  const onSwitchToEdgelessMode = useCallback(() => {
-    mixpanel.track('Button', {
-      resolve: 'HistorySwitchToEdgelessMode',
-    });
-    onModeChange('edgeless');
-  }, [onModeChange]);
+  const { onSwitchToPageMode, onSwitchToEdgelessMode } = useMemo(
+    () => ({
+      onSwitchToPageMode: () => {
+        onModeChange('page');
+      },
+      onSwitchToEdgelessMode: () => {
+        onModeChange('edgeless');
+      },
+    }),
+    [onModeChange]
+  );
 
   const content = useMemo(() => {
     return (
@@ -129,11 +128,15 @@ const HistoryEditorPreview = ({
             <PageSwitchItem
               data-testid="switch-page-mode-button"
               active={mode === 'page'}
+              data-event-props="$.docHistory.$.switchPageMode"
+              data-event-args-type="page"
               onClick={onSwitchToPageMode}
             />
             <EdgelessSwitchItem
               data-testid="switch-edgeless-mode-button"
               active={mode === 'edgeless'}
+              data-event-props="$.docHistory.$.switchPageMode"
+              data-event-args-type="edgeless"
               onClick={onSwitchToEdgelessMode}
             />
           </StyledEditorModeSwitch>
@@ -229,9 +232,7 @@ const PlanPrompt = () => {
       activeTab: 'plans',
       scrollAnchor: 'cloudPricingPlan',
     });
-    mixpanel.track('PlansViewed', {
-      segment: 'doc history',
-    });
+    track.$.docHistory.$.viewPlans();
   }, [setSettingModalAtom]);
 
   const t = useI18n();
@@ -562,9 +563,7 @@ export const GlobalPageHistoryModal = () => {
   const workspace = useService(WorkspaceService).workspace;
   const handleOpenChange = useCallback(
     (open: boolean) => {
-      mixpanel.track('Button', {
-        resolve: open ? 'OpenPageHistoryModal' : 'ClosePageHistoryModal',
-      });
+      track.$.docHistory.$[open ? 'open' : 'close']();
       setState(prev => ({
         ...prev,
         open,

diff --git a/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx b/packages/frontend/core/src/components/affine/quota-reached-modal/cloud-quota-modal.tsx
@@ -1,6 +1,6 @@
 import { ConfirmModal } from '@affine/component/ui/modal';
 import { openQuotaModalAtom, openSettingModalAtom } from '@affine/core/atoms';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { UserQuotaService } from '@affine/core/modules/cloud';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
@@ -50,11 +50,7 @@ export const CloudQuotaModal = () => {
       scrollAnchor: 'cloudPricingPlan',
     });
 
-    mixpanel.track('PlansViewed', {
-      segment: 'payment wall',
-      category: 'payment wall storage',
-    });
-
+    track.$.paywall.storage.viewPlans();
     setOpen(false);
   }, [setOpen, setSettingModalAtom]);
 

diff --git a/...ages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx b/...ages/frontend/core/src/components/affine/setting-modal/account-setting/ai-usage-panel.tsx
@@ -1,7 +1,7 @@
 import { Button, ErrorMessage, Skeleton } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { openSettingModalAtom } from '@affine/core/atoms';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import {
   ServerConfigService,
   SubscriptionService,
@@ -47,12 +47,7 @@ export const AIUsagePanel = () => {
       open: true,
       activeTab: 'billing',
     });
-    mixpanel.track('BillingViewed', {
-      segment: 'settings panel',
-      module: 'account usage list',
-      control: 'change plan button',
-      type: 'ai subscription',
-    });
+    track.$.settingsPanel.accountUsage.changePlan({ type: 'ai' });
   }, [setOpenSettingModal]);
 
   if (loading) {

diff --git a/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx
@@ -6,7 +6,7 @@ import {
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { mixpanel } from '@affine/core/mixpanel';
+import { track } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons/rc';
 import {
@@ -38,9 +38,7 @@ export const UserAvatar = () => {
   const handleUpdateUserAvatar = useAsyncCallback(
     async (file: File) => {
       try {
-        mixpanel.track('UploadAvatar', {
-          userId: account.id,
-        });
+        track.$.settingsPanel.accountSettings.uploadAvatar();
         await session.uploadAvatar(file);
         notify.success({ title: 'Update user avatar success' });
       } catch (e) {
@@ -51,18 +49,16 @@ export const UserAvatar = () => {
         });
       }
     },
-    [account, session]
+    [session]
   );
 
   const handleRemoveUserAvatar = useAsyncCallback(
     async (e: MouseEvent<HTMLButtonElement>) => {
-      mixpanel.track('RemoveAvatar', {
-        userId: account.id,
-      });
+      track.$.settingsPanel.accountSettings.removeAvatar();
       e.stopPropagation();
       await session.removeAvatar();
     },
-    [account, session]
+    [session]
   );
 
   return (
@@ -104,9 +100,7 @@ export const AvatarAndName = () => {
     }
 
     try {
-      mixpanel.track('UpdateUsername', {
-        userId: account.id,
-      });
+      track.$.settingsPanel.accountSettings.updateUserName();
       await session.updateLabel(input);
     } catch (e) {
       notify.error({
@@ -161,12 +155,7 @@ const StoragePanel = () => {
 
   const setSettingModalAtom = useSetAtom(openSettingModalAtom);
   const onUpgrade = useCallback(() => {
-    mixpanel.track('PlansViewed', {
-      segment: 'settings panel',
-      module: 'account usage list',
-      control: 'cloud storage upgrade button',
-      type: 'cloud subscription',
-    });
+    track.$.settingsPanel.accountUsage.changePlan({ type: 'pro' });
     setSettingModalAtom({
       open: true,
       activeTab: 'plans',