Refactor module events

packages/constants/src/event-tracker/core.ts

@@ -25,21 +25,6 @@ export const getProjectEventPayload = (payload: any) => ({
   element: payload.element,
 });
 
-export const getModuleEventPayload = (payload: any) => ({
-  workspace_id: payload.workspace_id,
-  project_id: payload.project,
-  module_id: payload.id,
-  created_at: payload.created_at,
-  updated_at: payload.updated_at,
-  start_date: payload.start_date,
-  target_date: payload.target_date,
-  module_status: payload.status,
-  lead_id: payload.lead,
-  changed_properties: payload.changed_properties,
-  member_ids: payload.members,
-  state: payload.state,
-  element: payload.element,
-});
 
 export const getPageEventPayload = (payload: any) => ({
   workspace_id: payload.workspace_id,
@@ -160,12 +145,24 @@ export const MODULE_TRACKER_EVENTS = {
   delete: "module_deleted",
   favorite: "module_favorited",
   unfavorite: "module_unfavorited",
+  archive: "module_archived",
+  restore: "module_restored",
   link: {
     create: "module_link_created",
     update: "module_link_updated",
     delete: "module_link_deleted",
   },
 };
+export const MODULE_TRACKER_ELEMENTS = {
+  RIGHT_HEADER_ADD_BUTTON: "right_header_add_module_button",
+  EMPTY_STATE_ADD_BUTTON: "empty_state_add_module_button",
+  COMMAND_PALETTE_ADD_ITEM: "command_palette_add_module_item",
+  RIGHT_SIDEBAR: "module_right_sidebar",
+  QUICK_ACTIONS: "module_quick_actions",
+  CONTEXT_MENU: "module_context_menu",
+  LIST_ITEM: "module_list_item",
+  CARD_ITEM: "module_card_item",
+} as const;
 
 export const WORK_ITEM_TRACKER_EVENTS = {
   create: "work_item_created",

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

@@ -3,14 +3,14 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { ModuleViewHeader } from "@/components/modules";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs";
@@ -22,7 +22,6 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
   const { loader } = useProject();
@@ -55,8 +54,8 @@ export const ModulesListHeader: React.FC = observer(() => {
           <Button
             variant="primary"
             size="sm"
+            data-ph-element={MODULE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
             onClick={() => {
-              setTrackElement("Modules page");
               toggleCreateModuleModal(true);
             }}
           >

web/ce/helpers/command-palette.ts

@@ -1,5 +1,5 @@
 // types
-import { CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CYCLE_TRACKER_ELEMENTS, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
 import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
 // store
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -47,7 +47,10 @@ export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
     m: {
       title: "Create a new module",
       description: "Create a new module in the current project",
-      action: () => toggleCreateModuleModal(true),
+      action: () => {
+        toggleCreateModuleModal(true);
+        captureClick({ elementName: MODULE_TRACKER_ELEMENTS.COMMAND_PALETTE_ADD_ITEM });
+      },
     },
     q: {
       title: "Create a new cycle",

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

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

web/core/components/modules/analytics-sidebar/root.tsx

@@ -12,6 +12,7 @@ import {
   EUserPermissionsLevel,
   EEstimateSystem,
   MODULE_TRACKER_EVENTS,
+  MODULE_TRACKER_ELEMENTS,
 } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
@@ -22,15 +23,10 @@ import { Loader, LayersIcon, CustomSelect, ModuleStatusIcon, TOAST_TYPE, setToas
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
 import { DateRangeDropdown, MemberDropdown } from "@/components/dropdowns";
-import {
-  ArchiveModuleModal,
-  DeleteModuleModal,
-  CreateUpdateModuleLinkModal,
-  ModuleAnalyticsProgress,
-  ModuleLinksList,
-} from "@/components/modules";
+import { CreateUpdateModuleLinkModal, ModuleAnalyticsProgress, ModuleLinksList } from "@/components/modules";
+import { captureElementAndEvent, captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
-import { useModule, useEventTracker, useProjectEstimates, useUserPermissions } from "@/hooks/store";
+import { useModule, useProjectEstimates, useUserPermissions } from "@/hooks/store";
 // plane web constants
 const defaultValues: Partial<IModule> = {
   lead_id: "",
@@ -50,8 +46,6 @@ type Props = {
 export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { moduleId, handleClose, isArchived } = props;
   // states
-  const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
-  const [archiveModuleModal, setArchiveModuleModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
   const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
   // router
@@ -62,7 +56,6 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { allowPermissions } = useUserPermissions();
 
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
-  const { captureModuleEvent, captureEvent } = useEventTracker();
   const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
 
   // derived values
@@ -79,15 +72,22 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
     updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data)
       .then((res) => {
-        captureModuleEvent({
-          eventName: MODULE_TRACKER_EVENTS.update,
-          payload: { ...res, changed_properties: Object.keys(data)[0], element: "Right side-peek", state: "SUCCESS" },
+        captureElementAndEvent({
+          element: {
+            elementName: MODULE_TRACKER_ELEMENTS.RIGHT_SIDEBAR,
+          },
+          event: {
+            eventName: MODULE_TRACKER_EVENTS.update,
+            payload: { id: res.id },
+            state: "SUCCESS",
+          },
         });
       })
-      .catch(() => {
-        captureModuleEvent({
+      .catch((error) => {
+        captureError({
           eventName: MODULE_TRACKER_EVENTS.update,
-          payload: { ...data, state: "FAILED" },
+          payload: { id: moduleId },
+          error,
         });
       });
   };
@@ -97,36 +97,51 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
 
     const payload = { metadata: {}, ...formData };
 
-    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload).then(() =>
-      captureEvent(MODULE_TRACKER_EVENTS.link.create, {
-        module_id: moduleId,
-        state: "SUCCESS",
-      })
-    );
+    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload)
+      .then(() =>
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.create,
+          payload: { id: moduleId },
+        })
+      )
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.create,
+          payload: { id: moduleId },
+          error,
+        });
+      });
   };
 
   const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
     if (!workspaceSlug || !projectId || !module) return;
 
     const payload = { metadata: {}, ...formData };
 
-    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload).then(
-      () =>
-        captureEvent(MODULE_TRACKER_EVENTS.link.update, {
-          module_id: moduleId,
-          state: "SUCCESS",
+    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload)
+      .then(() =>
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.update,
+          payload: { id: moduleId },
         })
-    );
+      )
+      .catch((error) => {
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.update,
+          payload: { id: moduleId },
+          error,
+        });
+      });
   };
 
   const handleDeleteLink = async (linkId: string) => {
     if (!workspaceSlug || !projectId || !module) return;
 
     deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId)
       .then(() => {
-        captureEvent(MODULE_TRACKER_EVENTS.link.delete, {
-          module_id: moduleId,
-          state: "SUCCESS",
+        captureSuccess({
+          eventName: MODULE_TRACKER_EVENTS.link.delete,
+          payload: { id: moduleId },
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -140,6 +155,10 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           title: "Error!",
           message: "Some error occurred",
         });
+        captureError({
+          eventName: MODULE_TRACKER_EVENTS.link.delete,
+          payload: { id: moduleId },
+        });
       });
   };
 
@@ -213,16 +232,6 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
         createLink={handleCreateLink}
         updateLink={handleUpdateLink}
       />
-      {workspaceSlug && projectId && (
-        <ArchiveModuleModal
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          moduleId={moduleId}
-          isOpen={archiveModuleModal}
-          handleClose={() => setArchiveModuleModal(false)}
-        />
-      )}
-      <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
       <>
         <div
           className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 pt-5`}

web/core/components/modules/delete-module-modal.tsx

@@ -10,8 +10,10 @@ import type { IModule } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
+// helpers
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
-import { useEventTracker, useModule } from "@/hooks/store";
+import { useModule } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 
 type Props = {
@@ -28,7 +30,6 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   const router = useAppRouter();
   const { workspaceSlug, projectId, moduleId, peekModule } = useParams();
   // store hooks
-  const { captureModuleEvent } = useEventTracker();
   const { deleteModule } = useModule();
   const { t } = useTranslation();
 
@@ -51,9 +52,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           title: "Success!",
           message: "Module deleted successfully.",
         });
-        captureModuleEvent({
+        captureSuccess({
           eventName: MODULE_TRACKER_EVENTS.delete,
-          payload: { ...data, state: "SUCCESS" },
+          payload: { id: data.id },
         });
       })
       .catch((errors) => {
@@ -66,9 +67,10 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           type: TOAST_TYPE.ERROR,
           message: currentError.i18n_message && t(currentError.i18n_message),
         });
-        captureModuleEvent({
+        captureError({
           eventName: MODULE_TRACKER_EVENTS.delete,
-          payload: { ...data, state: "FAILED" },
+          payload: { id: data.id },
+          error: errors,
         });
       })
       .finally(() => handleClose());

web/core/components/modules/links/list-item.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { Copy, Pencil, Trash2 } from "lucide-react";
 // plane types
+import { MODULE_TRACKER_ELEMENTS } from "@plane/constants";
 import { ILinkDetails } from "@plane/types";
 // plane ui
 import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
@@ -58,6 +59,7 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
             <button
               type="button"
               className="grid place-items-center p-1 hover:bg-custom-background-80"
+              data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -77,6 +79,7 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
             <button
               type="button"
               className="grid place-items-center p-1 hover:bg-custom-background-80"
+              data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();