From aeb5978c9e63ba4bb5c3281ba44ef6185742f83b Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Tue, 1 Jul 2025 16:28:46 +0530 Subject: [PATCH] refactor: auth related event trackers --- packages/constants/src/event-tracker/core.ts | 16 ++++--- .../(all)/accounts/forgot-password/page.tsx | 23 +++++---- web/app/(all)/sign-up/page.tsx | 8 +--- web/app/(home)/page.tsx | 8 ++-- .../account/auth-forms/password.tsx | 37 ++++++++++----- .../account/auth-forms/unique-code.tsx | 47 +++++++++++++++---- 6 files changed, 92 insertions(+), 47 deletions(-) diff --git a/packages/constants/src/event-tracker/core.ts b/packages/constants/src/event-tracker/core.ts index e531fc27f2f..1bb180f79ca 100644 --- a/packages/constants/src/event-tracker/core.ts +++ b/packages/constants/src/event-tracker/core.ts @@ -194,7 +194,6 @@ export const MEMBER_TRACKER_EVENTS = { leave: "workspace_member_left", }, }; - export const MEMBER_TRACKER_ELEMENTS = { HEADER_ADD_BUTTON: "header_add_member_button", ACCEPT_INVITATION_BUTTON: "accept_invitation_button", @@ -207,15 +206,20 @@ export const MEMBER_TRACKER_ELEMENTS = { } as const; export const AUTH_TRACKER_EVENTS = { - navigate: { - sign_up: "navigate_to_sign_up_page", - sign_in: "navigate_to_sign_in_page", - }, code_verify: "code_verified", sign_up_with_password: "sign_up_with_password", sign_in_with_password: "sign_in_with_password", - sign_in_with_code: "sign_in_with_magic_link", forgot_password: "forgot_password_clicked", + new_code_requested: "new_code_requested", +}; +export const AUTH_TRACKER_ELEMENTS = { + NAVIGATE_TO_SIGN_UP: "navigate_to_sign_up", + FORGOT_PASSWORD_FROM_SIGNIN: "forgot_password_from_signin", + SIGNUP_FROM_FORGOT_PASSWORD: "signup_from_forgot_password", + SIGN_IN_FROM_SIGNUP: "sign_in_from_signup", + SIGN_IN_WITH_UNIQUE_CODE: "sign_in_with_unique_code", + REQUEST_NEW_CODE: "request_new_code", + VERIFY_CODE: "verify_code", }; export const GLOBAL_VIEW_TRACKER_EVENTS = { diff --git a/web/app/(all)/accounts/forgot-password/page.tsx b/web/app/(all)/accounts/forgot-password/page.tsx index a7e3e7ed407..fa9ff935859 100644 --- a/web/app/(all)/accounts/forgot-password/page.tsx +++ b/web/app/(all)/accounts/forgot-password/page.tsx @@ -9,14 +9,15 @@ import { Controller, useForm } from "react-hook-form"; // icons import { CircleCheck } from "lucide-react"; // plane imports -import { AUTH_TRACKER_EVENTS } from "@plane/constants"; +import { AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui"; import { cn, checkEmailValidity } from "@plane/utils"; // helpers import { EPageTypes } from "@/helpers/authentication.helper"; // hooks -import { useEventTracker, useInstance } from "@/hooks/store"; +import { captureError, captureSuccess } from "@/helpers/event-tracker.helper"; +import { useInstance } from "@/hooks/store"; import useTimer from "@/hooks/use-timer"; // wrappers import { AuthenticationWrapper } from "@/lib/wrappers"; @@ -45,8 +46,6 @@ const ForgotPasswordPage = observer(() => { const email = searchParams.get("email"); // plane hooks const { t } = useTranslation(); - // store hooks - const { captureEvent } = useEventTracker(); const { config } = useInstance(); // hooks const { resolvedTheme } = useTheme(); @@ -71,8 +70,11 @@ const ForgotPasswordPage = observer(() => { email: formData.email, }) .then(() => { - captureEvent(AUTH_TRACKER_EVENTS.forgot_password, { - state: "SUCCESS", + captureSuccess({ + eventName: AUTH_TRACKER_EVENTS.forgot_password, + payload: { + email: formData.email, + }, }); setToast({ type: TOAST_TYPE.SUCCESS, @@ -82,8 +84,11 @@ const ForgotPasswordPage = observer(() => { setResendCodeTimer(30); }) .catch((err) => { - captureEvent(AUTH_TRACKER_EVENTS.forgot_password, { - state: "FAILED", + captureError({ + eventName: AUTH_TRACKER_EVENTS.forgot_password, + payload: { + email: formData.email, + }, }); setToast({ type: TOAST_TYPE.ERROR, @@ -120,7 +125,7 @@ const ForgotPasswordPage = observer(() => { {t("auth.common.new_to_plane")} captureEvent(AUTH_TRACKER_EVENTS.navigate.sign_up, {})} + data-ph-element={AUTH_TRACKER_ELEMENTS.SIGNUP_FROM_FORGOT_PASSWORD} className="font-semibold text-custom-primary-100 hover:underline" > {t("auth.common.create_account")} diff --git a/web/app/(all)/sign-up/page.tsx b/web/app/(all)/sign-up/page.tsx index 786b9738437..25deaf8f167 100644 --- a/web/app/(all)/sign-up/page.tsx +++ b/web/app/(all)/sign-up/page.tsx @@ -6,14 +6,12 @@ import Link from "next/link"; // ui import { useTheme } from "next-themes"; // components -import { AUTH_TRACKER_EVENTS } from "@plane/constants"; +import { AUTH_TRACKER_ELEMENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { AuthRoot } from "@/components/account"; // constants // helpers import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper"; -// hooks -import { useEventTracker } from "@/hooks/store"; // assets import { AuthenticationWrapper } from "@/lib/wrappers"; import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg"; @@ -26,8 +24,6 @@ export type AuthType = "sign-in" | "sign-up"; const SignInPage = observer(() => { // plane hooks const { t } = useTranslation(); - // store hooks - const { captureEvent } = useEventTracker(); // hooks const { resolvedTheme } = useTheme(); @@ -54,7 +50,7 @@ const SignInPage = observer(() => { {t("auth.common.already_have_an_account")} captureEvent(AUTH_TRACKER_EVENTS.navigate.sign_in, {})} + data-ph-element={AUTH_TRACKER_ELEMENTS.SIGN_IN_FROM_SIGNUP} className="font-semibold text-custom-primary-100 hover:underline" > {t("auth.common.login")} diff --git a/web/app/(home)/page.tsx b/web/app/(home)/page.tsx index 21e5c12d07c..c9f0c485011 100644 --- a/web/app/(home)/page.tsx +++ b/web/app/(home)/page.tsx @@ -6,7 +6,7 @@ import Link from "next/link"; // ui import { useTheme } from "next-themes"; // components -import { AUTH_TRACKER_EVENTS } from "@plane/constants"; +import { AUTH_TRACKER_ELEMENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { AuthRoot } from "@/components/account"; import { PageHead } from "@/components/core"; @@ -14,7 +14,7 @@ import { PageHead } from "@/components/core"; // helpers import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper"; // hooks -import { useEventTracker, useInstance } from "@/hooks/store"; +import { useInstance } from "@/hooks/store"; // layouts import DefaultLayout from "@/layouts/default-layout"; // wrappers @@ -29,8 +29,6 @@ const HomePage = observer(() => { const { resolvedTheme } = useTheme(); // plane hooks const { t } = useTranslation(); - // hooks - const { captureEvent } = useEventTracker(); // store const { config } = useInstance(); // derived values @@ -63,7 +61,7 @@ const HomePage = observer(() => { {t("auth.common.new_to_plane")} captureEvent(AUTH_TRACKER_EVENTS.navigate.sign_up, {})} + data-ph-element={AUTH_TRACKER_ELEMENTS.NAVIGATE_TO_SIGN_UP} className="font-semibold text-custom-primary-100 hover:underline" > {t("auth.common.create_account")} diff --git a/web/core/components/account/auth-forms/password.tsx b/web/core/components/account/auth-forms/password.tsx index 3c2927418dd..6e05d0c22b4 100644 --- a/web/core/components/account/auth-forms/password.tsx +++ b/web/core/components/account/auth-forms/password.tsx @@ -6,7 +6,7 @@ import Link from "next/link"; // icons import { Eye, EyeOff, Info, X, XCircle } from "lucide-react"; // plane imports -import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_EVENTS } from "@plane/constants"; +import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_EVENTS, AUTH_TRACKER_ELEMENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { Button, Input, Spinner } from "@plane/ui"; import { getPasswordStrength } from "@plane/utils"; @@ -16,7 +16,7 @@ import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/accou // helpers import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper"; // hooks -import { useEventTracker } from "@/hooks/store"; +import { captureError, captureSuccess } from "@/helpers/event-tracker.helper"; // services import { AuthService } from "@/services/auth.service"; @@ -46,8 +46,6 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => { const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode, nextPath } = props; // plane imports const { t } = useTranslation(); - // hooks - const { captureEvent } = useEventTracker(); // ref const formRef = useRef(null); // states @@ -77,7 +75,6 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => { const redirectToUniqueCodeSignIn = async () => { handleAuthStep(EAuthSteps.UNIQUE_CODE); - captureEvent(AUTH_TRACKER_EVENTS.sign_in_with_code); }; const passwordSupport = @@ -85,7 +82,7 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => {
{isSMTPConfigured ? ( captureEvent(AUTH_TRACKER_EVENTS.forgot_password)} + data-ph-element={AUTH_TRACKER_ELEMENTS.FORGOT_PASSWORD_FROM_SIGNIN} href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`} className="text-xs font-medium text-custom-primary-100" > @@ -154,17 +151,32 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => { : true; if (isPasswordValid) { setIsSubmitting(true); - captureEvent( - mode === EAuthModes.SIGN_IN - ? AUTH_TRACKER_EVENTS.sign_in_with_password - : AUTH_TRACKER_EVENTS.sign_up_with_password - ); + captureSuccess({ + eventName: + mode === EAuthModes.SIGN_IN + ? AUTH_TRACKER_EVENTS.sign_in_with_password + : AUTH_TRACKER_EVENTS.sign_up_with_password, + payload: { + email: passwordFormData.email, + }, + }); if (formRef.current) formRef.current.submit(); // Manually submit the form if the condition is met } else { setBannerMessage(true); } }} - onError={() => setIsSubmitting(false)} + onError={() => { + setIsSubmitting(false); + captureError({ + eventName: + mode === EAuthModes.SIGN_IN + ? AUTH_TRACKER_EVENTS.sign_in_with_password + : AUTH_TRACKER_EVENTS.sign_up_with_password, + payload: { + email: passwordFormData.email, + }, + }); + }} > @@ -292,6 +304,7 @@ export const AuthPasswordForm: React.FC = observer((props: Props) => { {isSMTPConfigured && (
-