Add tracking events for user info change and login screen

src/components/Main/Authentication/index.tsx

@@ -1,9 +1,11 @@
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { SLACK_WORKSPACE_URL } from "../../../constants";
 import { openURLInDefaultBrowser } from "../../../utils/actions/openURLInDefaultBrowser";
+import { sendTrackingEvent } from "../../../utils/actions/sendTrackingEvent";
 import { SlackLogoIcon } from "../../common/icons/16px/SlackLogoIcon";
 import { DigmaLoginLogo } from "../../common/icons/DigmaLoginLogo";
 import { Toggle } from "../../common/v3/Toggle";
+import { trackingEvents } from "../tracking";
 import { Login } from "./Login";
 import { Registration } from "./Registration";
 import * as s from "./styles";
@@ -30,6 +32,10 @@ const AuthenticationComponent = () => {
     setLoginSuccessMessage("");
   };
 
+  useEffect(() => {
+    sendTrackingEvent(trackingEvents.LOGIN_SCREEN_VIEWED);
+  }, []);
+
   return (
     <s.Container>
       <s.ContentContainer>

src/components/Main/index.tsx

@@ -5,7 +5,10 @@ import { history } from "../../containers/Main/history";
 import { useGlobalStore } from "../../containers/Main/stores/useGlobalStore";
 import { dispatcher } from "../../dispatcher";
 import { HistoryEntryLocation } from "../../history/History";
+import { usePrevious } from "../../hooks/usePrevious";
 import { logger } from "../../logging";
+import { trackingEvents as globalTrackingEvents } from "../../trackingEvents";
+import { sendTrackingEvent } from "../../utils/actions/sendTrackingEvent";
 import { Navigation } from "../Navigation";
 import { TAB_IDS } from "../Navigation/Tabs/types";
 import { Scope } from "../common/App/types";
@@ -44,6 +47,8 @@ export const Main = () => {
   const environment = useGlobalStore.use.environment();
   const scope = useGlobalStore.use.scope();
   const userInfo = useGlobalStore.use.userInfo();
+  const userId = userInfo?.id;
+  const previousUserId = usePrevious(userId);
   const backendInfo = useGlobalStore.use.backendInfo();
   const { goTo } = useHistory();
   const updateBrowserLocation = useBrowserLocationUpdater();
@@ -159,9 +164,17 @@ export const Main = () => {
     window.sendMessageToDigma({
       action: actions.INITIALIZE
     });
-  }, [userInfo?.id]);
+  }, [userId]);
 
-  if (!userInfo?.id && backendInfo?.centralize) {
+  useEffect(() => {
+    if (previousUserId !== userId) {
+      sendTrackingEvent(globalTrackingEvents.USER_ID_CHANGED, {
+        userId
+      });
+    }
+  }, [previousUserId, userId]);
+
+  if (!userId && backendInfo?.centralize) {
     return <Authentication />;
   }
 

src/components/Main/tracking.ts

@@ -15,7 +15,8 @@ export const trackingEvents = addPrefix(
     PROMOTION_REGISTRATION_CLOSED_CLICKED:
       "promotion registration close button clicked",
     PROMOTION_DISCARDED: "promotion discarded",
-    PROMOTION_REGISTRATION_OPENED: "promotion registration form opened"
+    PROMOTION_REGISTRATION_OPENED: "promotion registration form opened",
+    LOGIN_SCREEN_VIEWED: "login screen viewed"
   },
   " "
 );

src/trackingEvents.ts

@@ -5,5 +5,6 @@ export const trackingEvents = {
   ERROR_SCREEN_REFRESH_BUTTON_CLICKED: "error screen refresh button clicked",
   PAGINATION_BUTTON_CLICKED: "pagination button clicked",
   CAROUSEL_NAVIGATION_BUTTON_CLICKED: "carousel navigation button clicked",
-  CAROUSEL_PAGE_BUTTON_CLICKED: "carousel page button clicked"
+  CAROUSEL_PAGE_BUTTON_CLICKED: "carousel page button clicked",
+  USER_ID_CHANGED: "user id changed"
 };