[WEB-4603] feat: add missing event trackers

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx

@@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { EProjectFeatureKey } from "@plane/constants";
+import { EProjectFeatureKey, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { ViewListHeader } from "@/components/views";
@@ -34,7 +34,12 @@ export const ProjectViewsHeader = observer(() => {
         <Header.RightItem>
           <ViewListHeader />
           <div>
-            <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
+            <Button
+              data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
+              variant="primary"
+              size="sm"
+              onClick={() => toggleCreateViewModal(true)}
+            >
               Add view
             </Button>
           </div>

apps/web/app/(all)/accounts/set-password/page.tsx

@@ -9,14 +9,15 @@ import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import { Eye, EyeOff } from "lucide-react";
 // plane imports
-import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button, Input, PasswordStrengthIndicator, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { getPasswordStrength } from "@plane/utils";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
 // hooks
+import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
 import { useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // wrappers
@@ -67,6 +68,12 @@ const SetPasswordPage = observer(() => {
   const { resolvedTheme } = useTheme();
   const { data: user, handleSetPassword } = useUser();
 
+  useEffect(() => {
+    captureView({
+      elementName: AUTH_TRACKER_ELEMENTS.SET_PASSWORD_FORM,
+    });
+  }, []);
+
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -93,14 +100,19 @@ const SetPasswordPage = observer(() => {
       e.preventDefault();
       if (!csrfToken) throw new Error("csrf token not found");
       await handleSetPassword(csrfToken, { password: passwordFormData.password });
+      captureSuccess({
+        eventName: AUTH_TRACKER_EVENTS.password_created,
+      });
       router.push("/");
     } catch (error: unknown) {
       let message = undefined;
       if (error instanceof Error) {
         const err = error as Error & { error?: string };
         message = err.error;
       }
-
+      captureError({
+        eventName: AUTH_TRACKER_EVENTS.password_created,
+      });
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("common.errors.default.title"),
@@ -116,8 +128,7 @@ const SetPasswordPage = observer(() => {
   const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
 
   return (
-    // TODO: change to EPageTypes.SET_PASSWORD
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+    <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
       <div className="relative w-screen h-screen overflow-hidden">
         <div className="absolute inset-0 z-0">
           <Image

apps/web/ce/helpers/command-palette.ts

@@ -4,6 +4,7 @@ import {
   MODULE_TRACKER_ELEMENTS,
   PROJECT_PAGE_TRACKER_ELEMENTS,
   PROJECT_TRACKER_ELEMENTS,
+  PROJECT_VIEW_TRACKER_ELEMENTS,
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
@@ -78,7 +79,10 @@ export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
     v: {
       title: "Create a new view",
       description: "Create a new view in the current project",
-      action: () => toggleCreateViewModal(true),
+      action: () => {
+        toggleCreateViewModal(true);
+        captureClick({ elementName: PROJECT_VIEW_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
+      },
     },
     backspace: {
       title: "Bulk delete work items",

apps/web/core/components/command-palette/actions/project-actions.tsx

@@ -3,7 +3,12 @@
 import { Command } from "cmdk";
 import { ContrastIcon, FileText, Layers } from "lucide-react";
 // hooks
-import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import {
+  CYCLE_TRACKER_ELEMENTS,
+  MODULE_TRACKER_ELEMENTS,
+  PROJECT_PAGE_TRACKER_ELEMENTS,
+  PROJECT_VIEW_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { DiceIcon } from "@plane/ui";
 // hooks
 import { useCommandPalette } from "@/hooks/store";
@@ -55,6 +60,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
       </Command.Group>
       <Command.Group heading="View">
         <Command.Item
+          data-ph-element={PROJECT_VIEW_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM}
           onSelect={() => {
             closePalette();
             toggleCreateViewModal(true);

apps/web/core/components/global/product-updates/footer.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { getButtonStyling } from "@plane/ui";
@@ -23,6 +24,7 @@ export const ProductUpdatesFooter = () => {
           <circle cx={1} cy={1} r={1} />
         </svg>
         <a
+          data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
           href="https://go.plane.so/p-changelog"
           target="_blank"
           className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"

apps/web/core/components/global/product-updates/modal.tsx

@@ -1,10 +1,13 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
+import { USER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { ProductUpdatesFooter } from "@/components/global";
+// helpers
+import { captureView } from "@/helpers/event-tracker.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 // plane web components
@@ -20,6 +23,12 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
   const { t } = useTranslation();
   const { config } = useInstance();
 
+  useEffect(() => {
+    if (isOpen) {
+      captureView({ elementName: USER_TRACKER_ELEMENTS.PRODUCT_CHANGELOG_MODAL });
+    }
+  }, [isOpen]);
+
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
       <ProductUpdatesHeader />
@@ -32,6 +41,7 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
             <div className="text-sm text-custom-text-200">
               {t("please_visit")}
               <a
+                data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
                 href="https://go.plane.so/p-changelog"
                 target="_blank"
                 className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"

apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { EIssueFilterType } from "@plane/constants";
+import { EIssueFilterType, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, IIssueFilterOptions } from "@plane/types";
 // hooks
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -95,6 +95,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
           display_filters: issueFilters?.displayFilters,
           display_properties: issueFilters?.displayProperties,
         }}
+        trackerElement={PROJECT_VIEW_TRACKER_ELEMENTS.CYCLE_HEADER_SAVE_AS_VIEW_BUTTON}
       />
     </Header>
   );

apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx

@@ -11,6 +11,7 @@ import {
   EIssueFilterType,
   EUserPermissions,
   EUserPermissionsLevel,
+  GLOBAL_VIEW_TRACKER_ELEMENTS,
   GLOBAL_VIEW_TRACKER_EVENTS,
 } from "@plane/constants";
 import { EIssuesStoreType, EViewAccess, IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
@@ -189,6 +190,7 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
           isAuthorizedUser={isAuthorizedUser}
           setIsModalOpen={setIsModalOpen}
           handleUpdateView={handleUpdateView}
+          trackerElement={GLOBAL_VIEW_TRACKER_ELEMENTS.HEADER_SAVE_VIEW_BUTTON}
         />
       ) : (
         <></>

apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { EIssueFilterType } from "@plane/constants";
+import { EIssueFilterType, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, IIssueFilterOptions } from "@plane/types";
 // hooks
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -94,6 +94,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
           display_filters: issueFilters?.displayFilters,
           display_properties: issueFilters?.displayProperties,
         }}
+        trackerElement={PROJECT_VIEW_TRACKER_ELEMENTS.MODULE_HEADER_SAVE_AS_VIEW_BUTTON}
       />
     </Header>
   );

apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx

@@ -1,7 +1,12 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  EIssueFilterType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  PROJECT_VIEW_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { EIssuesStoreType, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -94,6 +99,7 @@ export const ProjectAppliedFiltersRoot: React.FC<TProjectAppliedFiltersRootProps
               display_filters: issueFilters?.displayFilters,
               display_properties: issueFilters?.displayProperties,
             }}
+            trackerElement={PROJECT_VIEW_TRACKER_ELEMENTS.PROJECT_HEADER_SAVE_AS_VIEW_BUTTON}
           />
         )}
       </Header.RightItem>

apps/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx

@@ -6,7 +6,12 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
-import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  EIssueFilterType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+  PROJECT_VIEW_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { EIssuesStoreType, EViewAccess, IIssueFilterOptions } from "@plane/types";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -145,6 +150,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
           isAuthorizedUser={isAuthorizedUser}
           setIsModalOpen={setIsModalOpen}
           handleUpdateView={handleUpdateView}
+          trackerElement={PROJECT_VIEW_TRACKER_ELEMENTS.HEADER_SAVE_VIEW_BUTTON}
         />
       </Header.RightItem>
     </Header>

apps/web/core/components/issues/issue-layouts/save-filter-view.tsx

@@ -14,10 +14,11 @@ interface ISaveFilterView {
     display_filters?: IIssueDisplayFilterOptions;
     display_properties?: IIssueDisplayProperties;
   };
+  trackerElement: string;
 }
 
 export const SaveFilterView: FC<ISaveFilterView> = (props) => {
-  const { workspaceSlug, projectId, filterParams } = props;
+  const { workspaceSlug, projectId, filterParams, trackerElement } = props;
 
   const [viewModal, setViewModal] = useState<boolean>(false);
 
@@ -31,7 +32,7 @@ export const SaveFilterView: FC<ISaveFilterView> = (props) => {
         onClose={() => setViewModal(false)}
       />
 
-      <Button size="sm" onClick={() => setViewModal(true)}>
+      <Button size="sm" onClick={() => setViewModal(true)} data-ph-element={trackerElement}>
         Save View
       </Button>
     </div>

apps/web/core/components/onboarding/profile-setup.tsx

@@ -6,7 +6,12 @@ import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
-import { E_PASSWORD_STRENGTH, ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
+import {
+  AUTH_TRACKER_EVENTS,
+  E_PASSWORD_STRENGTH,
+  ONBOARDING_TRACKER_ELEMENTS,
+  USER_TRACKER_EVENTS,
+} from "@plane/constants";
 // types
 import { useTranslation } from "@plane/i18n";
 import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
@@ -123,7 +128,18 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
 
   const handleSetPassword = async (password: string) => {
     const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
-    await authService.setPassword(token, { password });
+    await authService
+      .setPassword(token, { password })
+      .then(() => {
+        captureSuccess({
+          eventName: AUTH_TRACKER_EVENTS.password_created,
+        });
+      })
+      .catch(() => {
+        captureError({
+          eventName: AUTH_TRACKER_EVENTS.password_created,
+        });
+      });
   };
 
   const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
@@ -180,7 +196,18 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
       await Promise.all([
         updateCurrentUser(userDetailsPayload),
         formData.password && handleSetPassword(formData.password),
-      ]).then(() => setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION));
+      ]).then(() => {
+        if (formData.password) {
+          captureView({
+            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SELECTED,
+          });
+        } else {
+          captureView({
+            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SKIPPED,
+          });
+        }
+        setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
+      });
     } catch {
       captureError({
         eventName: USER_TRACKER_EVENTS.add_details,

apps/web/core/components/views/delete-view-modal.tsx

@@ -4,9 +4,12 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 // types
+import { PROJECT_VIEW_TRACKER_EVENTS } from "@plane/constants";
 import { IProjectView } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectView } from "@/hooks/store";
 
@@ -45,14 +48,26 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "View deleted successfully.",
         });
+        captureSuccess({
+          eventName: PROJECT_VIEW_TRACKER_EVENTS.delete,
+          payload: {
+            view_id: data.id,
+          },
+        });
       })
-      .catch(() =>
+      .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: "View could not be deleted. Please try again.",
-        })
-      )
+        });
+        captureError({
+          eventName: PROJECT_VIEW_TRACKER_EVENTS.delete,
+          payload: {
+            view_id: data.id,
+          },
+        });
+      })
       .finally(() => {
         setIsDeleteLoading(false);
       });