[WEB-4405] chore: workspace settings events

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { IWebhook } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
@@ -14,6 +14,7 @@ import { PageHead } from "@/components/core";
 import { SettingsContentWrapper } from "@/components/settings";
 import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useUserPermissions, useWebhook, useWorkspace } from "@/hooks/store";
 
 const WebhookDetailsPage = observer(() => {
@@ -55,13 +56,26 @@ const WebhookDetailsPage = observer(() => {
     };
     await updateWebhook(workspaceSlug.toString(), formData.id, payload)
       .then(() => {
+        captureSuccess({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
+          payload: {
+            webhook: formData.id,
+          },
+        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Webhook updated successfully.",
         });
       })
       .catch((error) => {
+        captureError({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_updated,
+          payload: {
+            webhook: formData.id,
+          },
+          error: error as Error,
+        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",

apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens";
@@ -15,6 +15,7 @@ import { SettingsContentWrapper, SettingsHeading } from "@/components/settings";
 import { WebhookSettingsLoader } from "@/components/ui";
 import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
 // hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 import { useUserPermissions, useWebhook, useWorkspace } from "@/hooks/store";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
@@ -71,7 +72,12 @@ const WebhooksListPage = observer(() => {
           description={t("workspace_settings.settings.webhooks.description")}
           button={{
             label: t("workspace_settings.settings.webhooks.add_webhook"),
-            onClick: () => setShowCreateWebhookModal(true),
+            onClick: () => {
+              captureClick({
+                elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_WEBHOOK_BUTTON,
+              });
+              setShowCreateWebhookModal(true);
+            },
           }}
         />
         {Object.keys(webhooks).length > 0 ? (
@@ -89,7 +95,12 @@ const WebhooksListPage = observer(() => {
                 size="md"
                 primaryButton={{
                   text: t("workspace_settings.settings.webhooks.add_webhook"),
-                  onClick: () => setShowCreateWebhookModal(true),
+                  onClick: () => {
+                    captureClick({
+                      elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_WEBHOOK_BUTTON,
+                    });
+                    setShowCreateWebhookModal(true);
+                  },
                 }}
               />
             </div>

apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx

@@ -5,6 +5,8 @@ import {
   SUBSCRIPTION_REDIRECTION_URLS,
   SUBSCRIPTION_WITH_BILLING_FREQUENCY,
   TALK_TO_SALES_URL,
+  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
+  WORKSPACE_SETTINGS_TRACKER_EVENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
@@ -16,6 +18,7 @@ import { DiscountInfo } from "@/components/license/modal/card/discount-info";
 import { getUpgradeButtonStyle } from "@/components/workspace/billing/subscription";
 import { TPlanDetail } from "@/constants/plans";
 // local imports
+import { captureSuccess } from "@/helpers/event-tracker.helper";
 import { PlanFrequencyToggle } from "./frequency-toggle";
 
 type TPlanDetailProps = {
@@ -49,6 +52,12 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
     const frequency = billingFrequency ?? "year";
     // Get the redirection URL based on the subscription type and billing frequency
     const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[subscriptionType][frequency] ?? TALK_TO_SALES_URL;
+    captureSuccess({
+      eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.upgrade_plan_redirected,
+      payload: {
+        subscriptionType,
+      },
+    });
     // Open the URL in a new tab
     window.open(redirectUrl, "_blank");
   };
@@ -101,7 +110,15 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
 
       {/* Subscription button */}
       <div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
-        <button onClick={handleRedirection} className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}>
+        <button
+          onClick={handleRedirection}
+          className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}
+          data-ph-element={
+            isSubscriptionActive
+              ? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
+              : WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_TALK_TO_SALES_BUTTON
+          }
+        >
           {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
         </button>
       </div>

apps/web/core/components/exporter/export-form.tsx

@@ -1,9 +1,16 @@
 import { useState } from "react";
 import { intersection } from "lodash";
 import { Controller, useForm } from "react-hook-form";
-import { EUserPermissions, EUserPermissionsLevel, EXPORTERS_LIST } from "@plane/constants";
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EXPORTERS_LIST,
+  WORKSPACE_SETTINGS_TRACKER_EVENTS,
+  WORKSPACE_SETTINGS_TRACKER_ELEMENTS,
+} from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button, CustomSearchSelect, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useProject, useUser, useUserPermissions } from "@/hooks/store";
 import { ProjectExportService } from "@/services/project/project-export.service";
 
@@ -73,6 +80,12 @@ export const ExportForm = (props: Props) => {
         .then(() => {
           mutateServices();
           setExportLoading(false);
+          captureSuccess({
+            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
+            payload: {
+              provider: formData.provider.provider,
+            },
+          });
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
@@ -88,8 +101,15 @@ export const ExportForm = (props: Props) => {
             }),
           });
         })
-        .catch(() => {
+        .catch((error) => {
           setExportLoading(false);
+          captureError({
+            eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.csv_exported,
+            payload: {
+              provider: formData.provider.provider,
+            },
+            error: error as Error,
+          });
           setToast({
             type: TOAST_TYPE.ERROR,
             title: t("error"),
@@ -163,7 +183,12 @@ export const ExportForm = (props: Props) => {
         </div>
       </div>
       <div className="flex items-center justify-between ">
-        <Button variant="primary" type="submit" loading={exportLoading}>
+        <Button
+          variant="primary"
+          type="submit"
+          loading={exportLoading}
+          data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.EXPORT_BUTTON}
+        >
           {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
         </Button>
       </div>

apps/web/core/components/web-hooks/create-webhook-modal.tsx

@@ -3,13 +3,15 @@
 import React, { useState } from "react";
 import { useParams } from "next/navigation";
 // types
+import { WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { csvDownload } from "@plane/utils";
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import useKeypress from "@/hooks/use-keypress";
 // components
 import { WebhookForm } from "./form";
@@ -67,6 +69,12 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
 
     await createWebhook(workspaceSlug.toString(), payload)
       .then(({ webHook, secretKey }) => {
+        captureSuccess({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_created,
+          payload: {
+            webhook: formData?.url,
+          },
+        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: t("workspace_settings.settings.webhooks.toasts.created.title"),
@@ -79,6 +87,13 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
         csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
       })
       .catch((error) => {
+        captureError({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_created,
+          payload: {
+            webhook: formData?.url,
+          },
+          error: error as Error,
+        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: t("workspace_settings.settings.webhooks.toasts.not_created.title"),

apps/web/core/components/web-hooks/delete-webhook-modal.tsx

@@ -3,8 +3,10 @@
 import React, { FC, useState } from "react";
 import { useParams } from "next/navigation";
 // ui
+import { WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWebhook } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 
@@ -35,20 +37,33 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
 
     removeWebhook(workspaceSlug.toString(), webhookId.toString())
       .then(() => {
+        captureSuccess({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_deleted,
+          payload: {
+            webhook: webhookId,
+          },
+        });
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
           message: "Webhook deleted successfully.",
         });
         router.replace(`/${workspaceSlug}/settings/webhooks/`);
       })
-      .catch((error) =>
+      .catch((error) => {
+        captureError({
+          eventName: WORKSPACE_SETTINGS_TRACKER_EVENTS.webhook_deleted,
+          payload: {
+            webhook: webhookId,
+          },
+          error: error as Error,
+        });
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message: error?.error ?? "Something went wrong. Please try again.",
-        })
-      )
+        });
+      })
       .finally(() => setIsDeleting(false));
   };
 

apps/web/core/components/web-hooks/form/delete-section.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/ui";
 
 type Props = {
@@ -36,7 +37,11 @@ export const WebhookDeleteSection: React.FC<Props> = (props) => {
                   webhook.
                 </span>
                 <div>
-                  <Button variant="danger" onClick={openDeleteModal}>
+                  <Button
+                    variant="danger"
+                    onClick={openDeleteModal}
+                    data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DELETE_BUTTON}
+                  >
                     Delete webhook
                   </Button>
                 </div>

apps/web/core/components/web-hooks/form/form.tsx

@@ -3,6 +3,7 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IWebhook, TWebhookEventTypes } from "@plane/types";
 // hooks
@@ -93,7 +94,11 @@ export const WebhookForm: FC<Props> = observer((props) => {
       {data ? (
         <div className="pt-0 space-y-5">
           <WebhookSecretKey data={data} />
-          <Button type="submit" loading={isSubmitting}>
+          <Button
+            type="submit"
+            loading={isSubmitting}
+            data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_UPDATE_BUTTON}
+          >
             {isSubmitting ? t("updating") : t("update")}
           </Button>
         </div>

apps/web/core/components/web-hooks/form/toggle.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import { Control, Controller } from "react-hook-form";
+// constants
+import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { IWebhook } from "@plane/types";
 // ui
 import { ToggleSwitch } from "@plane/ui";
-// types
+// hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
 
 interface IWebHookToggle {
   control: Control<IWebhook, any>;
@@ -20,6 +23,9 @@ export const WebhookToggle = ({ control }: IWebHookToggle) => (
         <ToggleSwitch
           value={value}
           onChange={(val: boolean) => {
+            captureClick({
+              elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DETAILS_PAGE_TOGGLE_SWITCH,
+            });
             onChange(val);
           }}
           size="sm"