github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: onboarding events added

Browse Source
This commit is contained in:
LAKHAN BAHETI 2024-05-23 12:19:16 +05:30
parent 509d5fe554
commit e44873e15a
9 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/account/auth-forms/auth-root.tsx
View File

@ -43,6 +43,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
const [isExistingEmail, setIsExistingEmail] = useState(false);
// hooks
const { config } = useInstance();
@ -101,6 +102,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
setAuthStep(EAuthSteps.PASSWORD);
}
}
setIsExistingEmail(response.existing);
})
.catch((error) => {
const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined);
@ -138,6 +140,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
<AuthUniqueCodeForm
mode={authMode}
email={email}
isExistingEmail={isExistingEmail}
handleEmailClear={() => {
setEmail("");
setAuthStep(EAuthSteps.EMAIL);

13
web/components/account/auth-forms/password.tsx
View File

@ -8,7 +8,12 @@ import { Button, Input, Spinner } from "@plane/ui";
// components
import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/account";
// constants
import { FORGOT_PASSWORD } from "@/constants/event-tracker";
import {
FORGOT_PASSWORD,
SIGN_IN_WITH_CODE,
SIGN_IN_WITH_PASSWORD,
SIGN_UP_WITH_PASSWORD,
} from "@/constants/event-tracker";
// helpers
import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper";
@ -68,6 +73,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
const redirectToUniqueCodeSignIn = async () => {
handleAuthStep(EAuthSteps.UNIQUE_CODE);
captureEvent(SIGN_IN_WITH_CODE);
};
const passwordSupport =
@ -114,7 +120,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
className="mt-5 space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "sign-in" : "sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onSubmit={() => {
setIsSubmitting(true);
captureEvent(mode === EAuthModes.SIGN_IN ? SIGN_IN_WITH_PASSWORD : SIGN_UP_WITH_PASSWORD);
}}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />

16
web/components/account/auth-forms/unique-code.tsx
View File

@ -1,10 +1,13 @@
import React, { useEffect, useState } from "react";
import { CircleCheck, XCircle } from "lucide-react";
import { Button, Input, Spinner } from "@plane/ui";
// constants
import { CODE_VERIFIED } from "@/constants/event-tracker";
// helpers
import { EAuthModes } from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper";
// hooks
import { useEventTracker } from "@/hooks/store";
import useTimer from "@/hooks/use-timer";
// services
import { AuthService } from "@/services/auth.service";
@ -15,6 +18,7 @@ const authService = new AuthService();
type TAuthUniqueCodeForm = {
mode: EAuthModes;
email: string;
isExistingEmail: boolean;
handleEmailClear: () => void;
generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>;
};
@ -30,9 +34,9 @@ const defaultValues: TUniqueCodeFormValues = {
};
export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
const { mode, email, handleEmailClear, generateEmailUniqueCode } = props;
const { mode, email, handleEmailClear, generateEmailUniqueCode, isExistingEmail } = props;
// hooks
// const { captureEvent } = useEventTracker();
const { captureEvent } = useEventTracker();
// derived values
const defaultResetTimerValue = 5;
// states
@ -73,7 +77,13 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
className="mt-5 space-y-4"
method="POST"
action={`${API_BASE_URL}/auth/${mode === EAuthModes.SIGN_IN ? "magic-sign-in" : "magic-sign-up"}/`}
onSubmit={() => setIsSubmitting(true)}
onSubmit={() => {
setIsSubmitting(true);
captureEvent(CODE_VERIFIED, {
state: "SUCCESS",
first_time: isExistingEmail,
});
}}
onError={() => setIsSubmitting(false)}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />

8
web/components/onboarding/create-workspace.tsx
View File

@ -5,7 +5,7 @@ import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
// ui
import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
// constants
import { WORKSPACE_CREATED } from "@/constants/event-tracker";
import { E_ONBOARDING, WORKSPACE_CREATED } from "@/constants/event-tracker";
import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@/constants/workspace";
// hooks
import { useEventTracker, useUserProfile, useWorkspace } from "@/hooks/store";
@ -66,10 +66,10 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
captureWorkspaceEvent({
eventName: WORKSPACE_CREATED,
payload: {
...res,
workspace_id: res.id,
state: "SUCCESS",
first_time: true,
element: "Onboarding",
element: E_ONBOARDING,
},
});
await fetchWorkspaces();
@ -81,7 +81,7 @@ export const CreateWorkspace: React.FC<Props> = (props) => {
payload: {
state: "FAILED",
first_time: true,
element: "Onboarding",
element: E_ONBOARDING,
},
});
setToast({

24
web/components/onboarding/profile-setup.tsx
View File

@ -13,7 +13,7 @@ import { PasswordStrengthMeter } from "@/components/account";
import { UserImageUploadModal } from "@/components/core";
import { OnboardingHeader, SwitchOrDeleteAccountDropdown } from "@/components/onboarding";
// constants
import { USER_DETAILS } from "@/constants/event-tracker";
import { E_ONBOARDING, USER_DETAILS, USER_PERSONALIZATION } from "@/constants/event-tracker";
// helpers
import { getPasswordStrength } from "@/helpers/password.helper";
// hooks
@ -141,7 +141,13 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
]);
captureEvent(USER_DETAILS, {
state: "SUCCESS",
element: "Onboarding",
element: E_ONBOARDING,
});
captureEvent(USER_PERSONALIZATION, {
use_case: formData.use_case,
role: formData.role,
state: "SUCCESS",
element: E_ONBOARDING,
});
setToast({
type: TOAST_TYPE.SUCCESS,
@ -155,7 +161,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
} catch {
captureEvent(USER_DETAILS, {
state: "FAILED",
element: "Onboarding",
element: E_ONBOARDING,
});
setToast({
type: TOAST_TYPE.ERROR,
@ -179,7 +185,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
} catch {
captureEvent(USER_DETAILS, {
state: "FAILED",
element: "Onboarding",
element: E_ONBOARDING,
});
setToast({
type: TOAST_TYPE.ERROR,
@ -199,9 +205,11 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
updateUserProfile(profileUpdatePayload),
totalSteps > 2 && stepChange({ profile_complete: true }),
]);
captureEvent(USER_DETAILS, {
captureEvent(USER_PERSONALIZATION, {
use_case: formData.use_case,
role: formData.role,
state: "SUCCESS",
element: "Onboarding",
element: E_ONBOARDING,
});
setToast({
type: TOAST_TYPE.SUCCESS,
@ -213,9 +221,9 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
finishOnboarding();
}
} catch {
captureEvent(USER_DETAILS, {
captureEvent(USER_PERSONALIZATION, {
state: "FAILED",
element: "Onboarding",
element: E_ONBOARDING,
});
setToast({
type: TOAST_TYPE.ERROR,

6
web/constants/event-tracker.ts
View File

@ -192,11 +192,14 @@ export const SETUP_PASSWORD = "Password setup";
export const PASSWORD_CREATE_SELECTED = "Password created";
export const PASSWORD_CREATE_SKIPPED = "Skipped to setup";
export const SIGN_IN_WITH_PASSWORD = "Sign in with password";
export const SIGN_UP_WITH_PASSWORD = "Sign up with password";
export const SIGN_IN_WITH_CODE = "Sign in with magic link";
export const FORGOT_PASSWORD = "Forgot password clicked";
export const FORGOT_PASS_LINK = "Forgot password link generated";
export const NEW_PASS_CREATED = "New password created";
// Onboarding Events
export const USER_DETAILS = "User details added";
export const USER_PERSONALIZATION = "User personalization added";
export const USER_ONBOARDING_COMPLETED = "User onboarding completed";
// Product Tour Events
export const PRODUCT_TOUR_STARTED = "Product tour started";
@ -222,3 +225,6 @@ export const SNOOZED_NOTIFICATIONS = "Snoozed notifications viewed";
export const ARCHIVED_NOTIFICATIONS = "Archived notifications viewed";
// Groups
export const GROUP_WORKSPACE = "Workspace_metrics";
//Elements
export const E_ONBOARDING = "Onboarding";

2
web/pages/accounts/forgot-password.tsx
View File

@ -115,7 +115,7 @@ const ForgotPasswordPage: NextPageWithLayout = () => {
New to Plane?{" "}
<Link
href="/"
onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
onClick={() => captureEvent(NAVIGATE_TO_SIGNUP)}
className="font-semibold text-custom-primary-100 hover:underline"
>
Create an account

6
web/pages/accounts/reset-password.tsx
View File

@ -9,6 +9,8 @@ import { Button, Input } from "@plane/ui";
// components
import { AuthBanner, PasswordStrengthMeter } from "@/components/account";
import { PageHead } from "@/components/core";
// constants
import { NEW_PASS_CREATED } from "@/constants/event-tracker";
// helpers
import {
EAuthenticationErrorCodes,
@ -19,6 +21,8 @@ import {
} from "@/helpers/authentication.helper";
import { API_BASE_URL } from "@/helpers/common.helper";
import { getPasswordStrength } from "@/helpers/password.helper";
// hooks
import { useEventTracker } from "@/hooks/store";
// layouts
import DefaultLayout from "@/layouts/default-layout";
// lib
@ -66,6 +70,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
// hooks
const { resolvedTheme } = useTheme();
const { captureEvent } = useEventTracker();
const handleShowPassword = (key: keyof typeof showPassword) =>
setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
@ -132,6 +137,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
<form
className="mt-5 space-y-4"
method="POST"
onSubmit={() => captureEvent(NEW_PASS_CREATED)}
action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
>
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />

2
web/pages/sign-in.tsx
View File

@ -51,7 +51,7 @@ const SignInPage: NextPageWithLayout = observer(() => {
New to Plane?{" "}
<Link
href="/"
onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
onClick={() => captureEvent(NAVIGATE_TO_SIGNUP)}
className="font-semibold text-custom-primary-100 hover:underline"
>
Create an account