[WEB-4423] refactor: event trackers (#7289)

* feat: event tracker helper

* feat: track click events for `data-ph-element`

* fix: handled click events

* fix: handled name

* chore: tracker element updates

* chore: remove export

* chore: tracker element type

* chore: track element and event helper.

* chore: minor improvements

* chore: minor refactors

* fix: workspace events

* fix: added slug

* fix: changes nomenclature

* fix: nomenclature

* chore: update event tracker helper types

* fix: data id

* refactor: cycle events (#7290)

* chore: update event tracker helper types

* refactor: cycle events

* refactor: cycle events

* refactor: cycle event tracker

* chore: update tracker elements

* chore: check for closest element with data-ph-element attribute

---------

Co-authored-by: Prateek Shourya <prateekshourya@Prateeks-MacBook-Pro.local>

* Refactor module events (#7291)

* chore: update event tracker helper types

* refactor: cycle events

* refactor: cycle events

* refactor: cycle event tracker

* refactor: module tracker event and element

* chore: update tracker element

* chore: revert unnecessary changes

---------

Co-authored-by: Prateek Shourya <prateekshourya@Prateeks-MacBook-Pro.local>

* refactor: global views, product tour, notifications, onboarding, users and sidebar related events

* chore: member tracker events (#7302)

* chore: member-tracker-events

* fix: constants

* refactor: update event tracker constants

* refactor: auth related event trackers (#7306)

* Chore: state events (#7307)

* chore: state events

* fix: refactor

* chore: project events (#7305)

* chore: project-events

* fix: refactor

* fix: removed hardcoded values

* fix: github redirection event

* chore: project page tracker events (#7304)

* added events for most page events

* refactor: simplify lock button event handling in PageLockControl

---------

Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>

* chore: minor cleanup and import fixes

* refactor: added tracker elements for buttons (#7308)

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>

* fix: event type

* refactor: posthog group event

* chore: removed instances of event tracker (#7309)

* refactor: remove event tracker stores and hooks

* refactor: remove event tracker store

* fix: build errors

* clean up event tracker payloads

* fix: coderabbit suggestions

---------

Co-authored-by: Prateek Shourya <prateekshourya@Prateeks-MacBook-Pro.local>
Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
Co-authored-by: Palanikannan M <akashmalinimurugu@gmail.com>
Co-authored-by: M. Palanikannan <73993394+Palanikannan1437@users.noreply.github.com>
Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>

web/ce/components/issues/header.tsx

@@ -10,6 +10,7 @@ import {
   EUserPermissionsLevel,
   SPACE_BASE_PATH,
   SPACE_BASE_URL,
+  WORK_ITEM_TRACKER_ELEMENTS,
   EProjectFeatureKey,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -21,7 +22,7 @@ import { CountChip } from "@/components/common";
 import HeaderFilters from "@/components/issues/filters";
 // helpers
 // hooks
-import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
+import { useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -42,7 +43,6 @@ export const IssuesHeader = observer(() => {
   const { currentProjectDetails, loader } = useProject();
 
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { isMobile } = usePlatformOS();
 
@@ -104,9 +104,9 @@ export const IssuesHeader = observer(() => {
         {canUserCreateIssue ? (
           <Button
             onClick={() => {
-              setTrackElement("Project work items page");
               toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
             }}
+            data-ph-element={WORK_ITEM_TRACKER_ELEMENTS.HEADER_ADD_BUTTON.WORK_ITEMS}
             size="sm"
           >
             <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>

web/ce/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx

@@ -10,7 +10,6 @@ export interface CopyMenuHelperProps {
     shouldRender: boolean;
   };
   activeLayout: string;
-  setTrackElement: (element: string) => void;
   setCreateUpdateIssueModal: (open: boolean) => void;
   setDuplicateWorkItemModal?: (open: boolean) => void;
 }

web/ce/components/pages/header/lock-control.tsx

@@ -4,7 +4,10 @@ import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
 // plane imports
+import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 import { Tooltip } from "@plane/ui";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { usePageOperations } from "@/hooks/use-page-operations";
 // store
@@ -78,6 +81,7 @@ export const PageLockControl = observer(({ page }: Props) => {
           <button
             type="button"
             onClick={toggleLock}
+            data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
             className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 transition-colors"
             aria-label="Lock"
           >
@@ -90,6 +94,7 @@ export const PageLockControl = observer(({ page }: Props) => {
         <button
           type="button"
           onClick={toggleLock}
+          data-ph-element={PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON}
           className="h-6 flex items-center gap-1 px-2 rounded text-custom-primary-100 bg-custom-primary-100/20 hover:bg-custom-primary-100/30 transition-colors"
           aria-label="Locked"
         >

web/ce/components/projects/create/root.tsx

@@ -12,7 +12,8 @@ import ProjectCommonAttributes from "@/components/project/create/common-attribut
 import ProjectCreateHeader from "@/components/project/create/header";
 import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
 // hooks
-import { useEventTracker, useProject } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web types
 import { TProject } from "@/plane-web/types/projects";
@@ -32,7 +33,6 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
   const { setToFavorite, workspaceSlug, data, onClose, handleNextStep, updateCoverImageStatus } = props;
   // store
   const { t } = useTranslation();
-  const { captureProjectEvent } = useEventTracker();
   const { addProjectToFavorites, createProject } = useProject();
   // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
@@ -70,25 +70,30 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
         if (coverImage) {
           await updateCoverImageStatus(res.id, coverImage);
         }
-        const newPayload = {
-          ...res,
-          state: "SUCCESS",
-        };
-        captureProjectEvent({
+        captureSuccess({
           eventName: PROJECT_TRACKER_EVENTS.create,
-          payload: newPayload,
+          payload: {
+            identifier: formData.identifier,
+          },
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("success"),
           message: t("project_created_successfully"),
         });
+
         if (setToFavorite) {
           handleAddToFavorites(res.id);
         }
         handleNextStep(res.id);
       })
       .catch((err) => {
+        captureError({
+          eventName: PROJECT_TRACKER_EVENTS.create,
+          payload: {
+            identifier: formData.identifier,
+          },
+        });
         if (err?.data.code === "PROJECT_NAME_ALREADY_EXIST") {
           setToast({
             type: TOAST_TYPE.ERROR,

web/ce/components/workspace/delete-workspace-section.tsx

@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 // types
+import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
 // ui
@@ -48,7 +49,11 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
                 {t("workspace_settings.settings.general.delete_workspace_description")}
               </span>
               <div>
-                <Button variant="danger" onClick={() => setDeleteWorkspaceModal(true)}>
+                <Button
+                  variant="danger"
+                  onClick={() => setDeleteWorkspaceModal(true)}
+                  data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
+                >
                   {t("workspace_settings.settings.general.delete_btn")}
                 </Button>
               </div>