[WEB-4405] chore: profile settings events

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // component
 import { APITokenService } from "@plane/services";
@@ -14,6 +15,7 @@ import { SettingsHeading } from "@/components/settings";
 import { APITokenSettingsLoader } from "@/components/ui";
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
 // store hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // services
@@ -53,7 +55,12 @@ const ApiTokensPage = observer(() => {
               description={t("account_settings.api_tokens.description")}
               button={{
                 label: t("workspace_settings.settings.api_tokens.add_token"),
-                onClick: () => setIsCreateTokenModalOpen(true),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
               }}
             />
             <div>
@@ -69,7 +76,12 @@ const ApiTokensPage = observer(() => {
               description={t("account_settings.api_tokens.description")}
               button={{
                 label: t("workspace_settings.settings.api_tokens.add_token"),
-                onClick: () => setIsCreateTokenModalOpen(true),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
               }}
             />
             <div className="h-full w-full flex items-center justify-center">
@@ -81,7 +93,12 @@ const ApiTokensPage = observer(() => {
                 size="md"
                 primaryButton={{
                   text: t("workspace_settings.settings.api_tokens.add_token"),
-                  onClick: () => setIsCreateTokenModalOpen(true),
+                  onClick: () => {
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_PAT_BUTTON,
+                    });
+                    setIsCreateTokenModalOpen(true);
+                  },
                 }}
               />
             </div>

apps/web/core/components/account/deactivate-account-modal.tsx

@@ -3,10 +3,12 @@
 import React, { useState } from "react";
 import { Trash2 } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useUser } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -35,6 +37,9 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
 
     await deactivateAccount()
       .then(() => {
+        captureSuccess({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.deactivate_account,
+        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
@@ -44,13 +49,16 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
         router.push("/");
         handleClose();
       })
-      .catch((err: any) =>
+      .catch((err: any) => {
+        captureError({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.deactivate_account,
+        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: err?.error,
-        })
-      )
+        });
+      })
       .finally(() => setIsDeactivating(false));
   };
 

apps/web/core/components/api-token/delete-token-modal.tsx

@@ -3,13 +3,15 @@
 import { useState, FC } from "react";
 import { mutate } from "swr";
 // types
+import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { APITokenService } from "@plane/services";
 import { IApiToken } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
 type Props = {
   isOpen: boolean;
@@ -48,6 +50,12 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
           (prevData) => (prevData ?? []).filter((token) => token.id !== tokenId),
           false
         );
+        captureSuccess({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_deleted,
+          payload: {
+            token: tokenId,
+          },
+        });
 
         handleClose();
       })
@@ -58,6 +66,15 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
           message: err?.message ?? t("workspace_settings.settings.api_tokens.delete.error.message"),
         })
       )
+      .catch((err) => {
+        captureError({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_deleted,
+          payload: {
+            token: tokenId,
+          },
+          error: err as Error,
+        });
+      })
       .finally(() => setDeleteLoading(false));
   };
 

apps/web/core/components/api-token/modal/create-token-modal.tsx

@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import { mutate } from "swr";
 // types
+import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { APITokenService } from "@plane/services";
 import { IApiToken } from "@plane/types";
 // ui
@@ -12,6 +13,7 @@ import { renderFormattedDate, csvDownload } from "@plane/utils";
 import { CreateApiTokenForm, GeneratedTokenDetails } from "@/components/api-token";
 // fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // helpers
 // services
 
@@ -66,6 +68,12 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
           },
           false
         );
+        captureSuccess({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_created,
+          payload: {
+            token: res.id,
+          },
+        });
       })
       .catch((err) => {
         setToast({
@@ -74,6 +82,10 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
           message: err.message || err.detail,
         });
 
+        captureError({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.pat_created,
+        });
+
         throw err;
       });
   };

apps/web/core/components/api-token/token-list-item.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import { XCircle } from "lucide-react";
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { IApiToken } from "@plane/types";
 // components
 import { Tooltip } from "@plane/ui";
@@ -31,6 +32,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           <button
             onClick={() => setDeleteModalOpen(true)}
             className="absolute right-4 hidden place-items-center group-hover:grid"
+            data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.LIST_ITEM_DELETE_ICON}
           >
             <XCircle className="h-4 w-4 text-red-500" />
           </button>

apps/web/core/components/core/theme/custom-theme-selector.tsx

@@ -4,11 +4,13 @@ import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // types
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IUserTheme } from "@plane/types";
 // ui
 import { Button, InputColorPicker, setPromiseToast } from "@plane/ui";
 // hooks
+import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useUserProfile } from "@/hooks/store";
 
 type TCustomThemeSelector = {
@@ -81,6 +83,35 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
         message: () => t("failed_to_update_the_theme"),
       },
     });
+    updateCurrentUserThemePromise
+      .then(() => {
+        captureElementAndEvent({
+          element: {
+            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.THEME_DROPDOWN,
+          },
+          event: {
+            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.theme_updated,
+            payload: {
+              theme: payload.theme,
+            },
+            state: "SUCCESS",
+          },
+        });
+      })
+      .catch(() => {
+        captureElementAndEvent({
+          element: {
+            elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.THEME_DROPDOWN,
+          },
+          event: {
+            eventName: PROFILE_SETTINGS_TRACKER_EVENTS.theme_updated,
+            payload: {
+              theme: payload.theme,
+            },
+            state: "ERROR",
+          },
+        });
+      });
 
     return;
   };

apps/web/core/components/profile/form.tsx

@@ -6,6 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { ChevronDown, CircleUserRound, InfoIcon } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IUser, TUserProfile } from "@plane/types";
 import { Button, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
@@ -16,6 +17,7 @@ import { DeactivateAccountModal } from "@/components/account";
 import { ImagePickerPopover, UserImageUploadModal } from "@/components/core";
 // helpers
 // hooks
+import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 import { useUser, useUserProfile } from "@/hooks/store";
 
 type TUserProfileForm = {
@@ -135,6 +137,17 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
         message: () => `There was some error in updating your profile. Please try again.`,
       },
     });
+    updateUserAndProfile
+      .then(() => {
+        captureSuccess({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.update_profile,
+        });
+      })
+      .catch(() => {
+        captureError({
+          eventName: PROFILE_SETTINGS_TRACKER_EVENTS.update_profile,
+        });
+      });
   };
 
   return (
@@ -344,7 +357,12 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
           </div>
           <div className="flex flex-col gap-1">
             <div className="flex items-center justify-between pt-6 pb-8">
-              <Button variant="primary" type="submit" loading={isLoading}>
+              <Button
+                variant="primary"
+                type="submit"
+                loading={isLoading}
+                data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.SAVE_CHANGES_BUTTON}
+              >
                 {isLoading ? t("saving") : t("save_changes")}
               </Button>
             </div>
@@ -371,7 +389,11 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 <div className="flex flex-col gap-8">
                   <span className="text-sm tracking-tight">{t("deactivate_account_description")}</span>
                   <div>
-                    <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
+                    <Button
+                      variant="danger"
+                      onClick={() => setDeactivateAccountModal(true)}
+                      data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.DEACTIVATE_ACCOUNT_BUTTON}
+                    >
                       {t("deactivate_account")}
                     </Button>
                   </div>

apps/web/core/components/profile/notification/email-notification-form.tsx

@@ -2,11 +2,13 @@
 
 import React, { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IUserEmailNotificationSettings } from "@plane/types";
 // ui
 import { ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // services
+import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { UserService } from "@/services/user.service";
 // types
 interface IEmailNotificationFormProps {
@@ -31,13 +33,25 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
       await userService.updateCurrentUserEmailNotificationSettings({
         [key]: value,
       });
+      captureSuccess({
+        eventName: PROFILE_SETTINGS_TRACKER_EVENTS.notifications_updated,
+        payload: {
+          [key]: value,
+        },
+      });
       setToast({
         title: t("success"),
         type: TOAST_TYPE.SUCCESS,
         message: t("email_notification_setting_updated_successfully"),
       });
     } catch (err) {
       console.error(err);
+      captureError({
+        eventName: PROFILE_SETTINGS_TRACKER_EVENTS.notifications_updated,
+        payload: {
+          [key]: value,
+        },
+      });
       setToast({
         title: t("error"),
         type: TOAST_TYPE.ERROR,
@@ -68,6 +82,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
                   value={value}
                   onChange={(newValue) => {
                     onChange(newValue);
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.PROPERTY_CHANGES_TOGGLE,
+                    });
                     handleSettingChange("property_change", newValue);
                   }}
                   size="sm"
@@ -90,6 +107,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
                   value={value}
                   onChange={(newValue) => {
                     onChange(newValue);
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.STATE_CHANGES_TOGGLE,
+                    });
                     handleSettingChange("state_change", newValue);
                   }}
                   size="sm"
@@ -134,6 +154,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
                   value={value}
                   onChange={(newValue) => {
                     onChange(newValue);
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.COMMENTS_TOGGLE,
+                    });
                     handleSettingChange("comment", newValue);
                   }}
                   size="sm"
@@ -156,6 +179,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
                   value={value}
                   onChange={(newValue) => {
                     onChange(newValue);
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.MENTIONS_TOGGLE,
+                    });
                     handleSettingChange("mention", newValue);
                   }}
                   size="sm"