From 6866357f8a61060ee3a326c8d2337f6c75dbf424 Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Tue, 1 Jul 2025 16:50:00 +0530
Subject: [PATCH 1/2] chore: state events

---
 packages/constants/src/event-tracker/core.ts  |  5 ++
 .../project-states/create-update/create.tsx   | 48 +++++++-----------
 .../project-states/create-update/update.tsx   | 49 +++++++------------
 .../components/project-states/group-item.tsx  |  3 +-
 .../project-states/options/delete.tsx         | 47 ++++++++----------
 .../project-states/state-delete-modal.tsx     | 15 +++---
 .../project-states/state-item-title.tsx       |  3 +-
 7 files changed, 73 insertions(+), 97 deletions(-)

diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
index e531fc27f2f..d093203dfdb 100644
--- a/packages/constants/src/event-tracker/core.ts
+++ b/packages/constants/src/event-tracker/core.ts
@@ -176,6 +176,11 @@ export const STATE_TRACKER_EVENTS = {
   update: "state_updated",
   delete: "state_deleted",
 };
+export const STATE_TRACKER_ELEMENTS = {
+  STATE_GROUP_ADD_BUTTON: "state_group_add_button",
+  STATE_LIST_CROSS_BUTTON: "state_list_cross_button",
+  STATE_LIST_EDIT_BUTTON: "state_list_edit_button",
+};
 
 export const PROJECT_PAGE_TRACKER_EVENTS = {
   create: "project_page_created",
diff --git a/web/core/components/project-states/create-update/create.tsx b/web/core/components/project-states/create-update/create.tsx
index 821ea8eb656..2fb9ed00226 100644
--- a/web/core/components/project-states/create-update/create.tsx
+++ b/web/core/components/project-states/create-update/create.tsx
@@ -2,13 +2,13 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { EventProps, STATE_TRACKER_EVENTS, STATE_GROUPS } from "@plane/constants";
+import { STATE_TRACKER_EVENTS, STATE_GROUPS } from "@plane/constants";
 import { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { StateForm } from "@/components/project-states";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type TStateCreate = {
   groupKey: TStateGroups;
@@ -19,17 +19,10 @@ type TStateCreate = {
 
 export const StateCreate: FC<TStateCreate> = observer((props) => {
   const { groupKey, shouldTrackEvents, createStateCallback, handleClose } = props;
-  // hooks
-  const { captureProjectStateEvent, setTrackElement } = useEventTracker();
+
   // states
   const [loader, setLoader] = useState(false);
 
-  const captureEventIfEnabled = (props: EventProps) => {
-    if (shouldTrackEvents) {
-      captureProjectStateEvent(props);
-    }
-  };
-
   const onCancel = () => {
     setLoader(false);
     handleClose();
@@ -38,19 +31,15 @@ export const StateCreate: FC<TStateCreate> = observer((props) => {
   const onSubmit = async (formData: Partial<IState>) => {
     if (!groupKey) return { status: "error" };
 
-    if (shouldTrackEvents) {
-      setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
-    }
     try {
-      const stateResponse = await createStateCallback({ ...formData, group: groupKey });
-      captureEventIfEnabled({
-        eventName: STATE_TRACKER_EVENTS.create,
-        payload: {
-          ...stateResponse,
-          state: "SUCCESS",
-          element: "Project settings states page",
-        },
-      });
+      await createStateCallback({ ...formData, group: groupKey });
+      if (shouldTrackEvents)
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.create,
+          payload: {
+            state_group: groupKey,
+          },
+        });
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -60,14 +49,13 @@ export const StateCreate: FC<TStateCreate> = observer((props) => {
       return { status: "success" };
     } catch (error) {
       const errorStatus = error as unknown as { status: number; data: { error: string } };
-      captureEventIfEnabled({
-        eventName: STATE_TRACKER_EVENTS.create,
-        payload: {
-          ...formData,
-          state: "FAILED",
-          element: "Project settings states page",
-        },
-      });
+      if (shouldTrackEvents)
+        captureError({
+          eventName: STATE_TRACKER_EVENTS.create,
+          payload: {
+            state_group: groupKey,
+          },
+        });
       if (errorStatus?.status === 400) {
         setToast({
           type: TOAST_TYPE.ERROR,
diff --git a/web/core/components/project-states/create-update/update.tsx b/web/core/components/project-states/create-update/update.tsx
index d4377402114..a3817d9c06e 100644
--- a/web/core/components/project-states/create-update/update.tsx
+++ b/web/core/components/project-states/create-update/update.tsx
@@ -2,13 +2,13 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { EventProps, STATE_TRACKER_EVENTS } from "@plane/constants";
+import { STATE_TRACKER_EVENTS } from "@plane/constants";
 import { IState, TStateOperationsCallbacks } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { StateForm } from "@/components/project-states";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type TStateUpdate = {
   state: IState;
@@ -19,8 +19,6 @@ type TStateUpdate = {
 
 export const StateUpdate: FC<TStateUpdate> = observer((props) => {
   const { state, updateStateCallback, shouldTrackEvents, handleClose } = props;
-  // hooks
-  const { captureProjectStateEvent, setTrackElement } = useEventTracker();
   // states
   const [loader, setLoader] = useState(false);
 
@@ -29,28 +27,19 @@ export const StateUpdate: FC<TStateUpdate> = observer((props) => {
     handleClose();
   };
 
-  const captureEventIfEnabled = (props: EventProps) => {
-    if (shouldTrackEvents) {
-      captureProjectStateEvent(props);
-    }
-  };
-
   const onSubmit = async (formData: Partial<IState>) => {
     if (!state.id) return { status: "error" };
 
-    if (shouldTrackEvents) {
-      setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
-    }
     try {
-      const stateResponse = await updateStateCallback(state.id, formData);
-      captureEventIfEnabled({
-        eventName: STATE_TRACKER_EVENTS.update,
-        payload: {
-          ...stateResponse,
-          state: "SUCCESS",
-          element: "Project settings states page",
-        },
-      });
+      await updateStateCallback(state.id, formData);
+      if (shouldTrackEvents) {
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.update,
+          payload: {
+            state_group: state.group,
+          },
+        });
+      }
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
@@ -73,14 +62,14 @@ export const StateUpdate: FC<TStateUpdate> = observer((props) => {
           title: "Error!",
           message: "State could not be updated. Please try again.",
         });
-        captureEventIfEnabled({
-          eventName: STATE_TRACKER_EVENTS.update,
-          payload: {
-            ...formData,
-            state: "FAILED",
-            element: "Project settings states page",
-          },
-        });
+        if (shouldTrackEvents) {
+          captureError({
+            eventName: STATE_TRACKER_EVENTS.update,
+            payload: {
+              state_group: state.group,
+            },
+          });
+        }
         return { status: "error" };
       }
     }
diff --git a/web/core/components/project-states/group-item.tsx b/web/core/components/project-states/group-item.tsx
index bcb08c006c2..82a68a4d66c 100644
--- a/web/core/components/project-states/group-item.tsx
+++ b/web/core/components/project-states/group-item.tsx
@@ -4,7 +4,7 @@ import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, Plus } from "lucide-react";
 // plane imports
-import { EIconSize } from "@plane/constants";
+import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 import { StateGroupIcon } from "@plane/ui";
@@ -81,6 +81,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
         </div>
         <button
           type="button"
+          data-ph-element={STATE_TRACKER_ELEMENTS.STATE_GROUP_ADD_BUTTON}
           className={cn(
             "flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
             (!isEditable || createState) && "cursor-not-allowed text-custom-text-400 hover:text-custom-text-400"
diff --git a/web/core/components/project-states/options/delete.tsx b/web/core/components/project-states/options/delete.tsx
index 8a1aa35400b..3a31f67ce40 100644
--- a/web/core/components/project-states/options/delete.tsx
+++ b/web/core/components/project-states/options/delete.tsx
@@ -4,12 +4,12 @@ import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { Loader, X } from "lucide-react";
 // plane imports
-import { EventProps, STATE_TRACKER_EVENTS } from "@plane/constants";
+import { STATE_TRACKER_EVENTS, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { IState, TStateOperationsCallbacks } from "@plane/types";
 import { AlertModalCore, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TStateDelete = {
@@ -23,45 +23,39 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
   const { totalStates, state, deleteStateCallback, shouldTrackEvents } = props;
   // hooks
   const { isMobile } = usePlatformOS();
-  const { captureProjectStateEvent, setTrackElement } = useEventTracker();
   // states
   const [isDeleteModal, setIsDeleteModal] = useState(false);
   const [isDelete, setIsDelete] = useState(false);
   // derived values
   const isDeleteDisabled = state.default ? true : totalStates === 1 ? true : false;
 
-  const captureEventIfEnabled = (props: EventProps) => {
-    if (shouldTrackEvents) {
-      captureProjectStateEvent(props);
-    }
-  };
-
   const handleDeleteState = async () => {
     if (isDeleteDisabled) return;
-    if (shouldTrackEvents) {
-      setTrackElement("PROJECT_SETTINGS_STATE_PAGE");
-    }
+
     setIsDelete(true);
 
     try {
       await deleteStateCallback(state.id);
-      captureEventIfEnabled({
-        eventName: STATE_TRACKER_EVENTS.delete,
-        payload: {
-          ...state,
-          state: "SUCCESS",
-        },
-      });
+      if (shouldTrackEvents) {
+        captureSuccess({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: state.id,
+          },
+        });
+      }
+
       setIsDelete(false);
     } catch (error) {
       const errorStatus = error as unknown as { status: number; data: { error: string } };
-      captureEventIfEnabled({
-        eventName: STATE_TRACKER_EVENTS.delete,
-        payload: {
-          ...state,
-          state: "FAILED",
-        },
-      });
+      if (shouldTrackEvents) {
+        captureError({
+          eventName: STATE_TRACKER_EVENTS.delete,
+          payload: {
+            id: state.id,
+          },
+        });
+      }
       if (errorStatus.status === 400) {
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -107,6 +101,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
         )}
         disabled={isDeleteDisabled}
         onClick={() => setIsDeleteModal(true)}
+        data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_CROSS_BUTTON}
       >
         <Tooltip
           tooltipContent={
diff --git a/web/core/components/project-states/state-delete-modal.tsx b/web/core/components/project-states/state-delete-modal.tsx
index f98291563f6..afa277a03f2 100644
--- a/web/core/components/project-states/state-delete-modal.tsx
+++ b/web/core/components/project-states/state-delete-modal.tsx
@@ -10,7 +10,8 @@ import type { IState } from "@plane/types";
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 // hooks
-import { useEventTracker, useProjectState } from "@/hooks/store";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useProjectState } from "@/hooks/store";
 
 type TStateDeleteModal = {
   isOpen: boolean;
@@ -24,8 +25,6 @@ export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) =>
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // router
   const { workspaceSlug } = useParams();
-  // store hooks
-  const { captureProjectStateEvent } = useEventTracker();
   const { deleteState } = useProjectState();
 
   const handleClose = () => {
@@ -40,11 +39,10 @@ export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) =>
 
     await deleteState(workspaceSlug.toString(), data.project_id, data.id)
       .then(() => {
-        captureProjectStateEvent({
+        captureSuccess({
           eventName: STATE_TRACKER_EVENTS.delete,
           payload: {
-            ...data,
-            state: "SUCCESS",
+            id: data.id,
           },
         });
         handleClose();
@@ -63,11 +61,10 @@ export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) =>
             title: "Error!",
             message: "State could not be deleted. Please try again.",
           });
-        captureProjectStateEvent({
+        captureError({
           eventName: STATE_TRACKER_EVENTS.delete,
           payload: {
-            ...data,
-            state: "FAILED",
+            id: data.id,
           },
         });
       })
diff --git a/web/core/components/project-states/state-item-title.tsx b/web/core/components/project-states/state-item-title.tsx
index 6dafe5163ed..3ef343340a3 100644
--- a/web/core/components/project-states/state-item-title.tsx
+++ b/web/core/components/project-states/state-item-title.tsx
@@ -2,7 +2,7 @@ import { SetStateAction } from "react";
 import { observer } from "mobx-react";
 import { GripVertical, Pencil } from "lucide-react";
 // plane imports
-import { EIconSize } from "@plane/constants";
+import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { IState, TStateOperationsCallbacks } from "@plane/types";
 import { StateGroupIcon } from "@plane/ui";
 // local imports
@@ -70,6 +70,7 @@ export const StateItemTitle = observer((props: TStateItemTitleProps) => {
             <button
               className="flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-text-200 hover:text-custom-text-100"
               onClick={() => setUpdateStateModal(true)}
+              data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_EDIT_BUTTON}
             >
               <Pencil className="w-3 h-3" />
             </button>

From b0df7529c52172fa0825f59c809c23ea8dfbcfff Mon Sep 17 00:00:00 2001
From: gakshita <akshitagoyal1516@gmail.com>
Date: Tue, 1 Jul 2025 17:03:08 +0530
Subject: [PATCH 2/2] fix: refactor

---
 packages/constants/src/event-tracker/core.ts                | 2 +-
 web/core/components/project-states/create-update/create.tsx | 3 ++-
 web/core/components/project-states/create-update/update.tsx | 2 ++
 web/core/components/project-states/options/delete.tsx       | 2 +-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts
index d093203dfdb..58ec638bb1a 100644
--- a/packages/constants/src/event-tracker/core.ts
+++ b/packages/constants/src/event-tracker/core.ts
@@ -178,7 +178,7 @@ export const STATE_TRACKER_EVENTS = {
 };
 export const STATE_TRACKER_ELEMENTS = {
   STATE_GROUP_ADD_BUTTON: "state_group_add_button",
-  STATE_LIST_CROSS_BUTTON: "state_list_cross_button",
+  STATE_LIST_DELETE_BUTTON: "state_list_delete_button",
   STATE_LIST_EDIT_BUTTON: "state_list_edit_button",
 };
 
diff --git a/web/core/components/project-states/create-update/create.tsx b/web/core/components/project-states/create-update/create.tsx
index 2fb9ed00226..25972f7c00b 100644
--- a/web/core/components/project-states/create-update/create.tsx
+++ b/web/core/components/project-states/create-update/create.tsx
@@ -32,12 +32,13 @@ export const StateCreate: FC<TStateCreate> = observer((props) => {
     if (!groupKey) return { status: "error" };
 
     try {
-      await createStateCallback({ ...formData, group: groupKey });
+      const response = await createStateCallback({ ...formData, group: groupKey });
       if (shouldTrackEvents)
         captureSuccess({
           eventName: STATE_TRACKER_EVENTS.create,
           payload: {
             state_group: groupKey,
+            id: response.id,
           },
         });
       setToast({
diff --git a/web/core/components/project-states/create-update/update.tsx b/web/core/components/project-states/create-update/update.tsx
index a3817d9c06e..b242f900cc3 100644
--- a/web/core/components/project-states/create-update/update.tsx
+++ b/web/core/components/project-states/create-update/update.tsx
@@ -37,6 +37,7 @@ export const StateUpdate: FC<TStateUpdate> = observer((props) => {
           eventName: STATE_TRACKER_EVENTS.update,
           payload: {
             state_group: state.group,
+            id: state.id,
           },
         });
       }
@@ -67,6 +68,7 @@ export const StateUpdate: FC<TStateUpdate> = observer((props) => {
             eventName: STATE_TRACKER_EVENTS.update,
             payload: {
               state_group: state.group,
+              id: state.id,
             },
           });
         }
diff --git a/web/core/components/project-states/options/delete.tsx b/web/core/components/project-states/options/delete.tsx
index 3a31f67ce40..9d9b9524b99 100644
--- a/web/core/components/project-states/options/delete.tsx
+++ b/web/core/components/project-states/options/delete.tsx
@@ -101,7 +101,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
         )}
         disabled={isDeleteDisabled}
         onClick={() => setIsDeleteModal(true)}
-        data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_CROSS_BUTTON}
+        data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_DELETE_BUTTON}
       >
         <Tooltip
           tooltipContent={