feat: added user role on onboarding event (#684)

* feat: added tracker for views

* feat: added user role on onboarding event

apps/app/components/onboarding/user-details.tsx

@@ -22,9 +22,10 @@ const defaultValues: Partial<IUser> = {
 type Props = {
   user?: IUser;
   setStep: React.Dispatch<React.SetStateAction<number>>;
+  setUserRole: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
-export const UserDetails: React.FC<Props> = ({ user, setStep }) => {
+export const UserDetails: React.FC<Props> = ({ user, setStep, setUserRole }) => {
   const { setToastAlert } = useToast();
 
   const {
@@ -53,13 +54,15 @@ export const UserDetails: React.FC<Props> = ({ user, setStep }) => {
   };
 
   useEffect(() => {
-    if (user)
+    if (user) {
       reset({
         first_name: user.first_name,
         last_name: user.last_name,
         role: user.role,
       });
-  }, [user, reset]);
+      setUserRole(user.role);
+    }
+  }, [user, reset, setUserRole]);
 
   return (
     <form className="flex w-full items-center justify-center" onSubmit={handleSubmit(onSubmit)}>
@@ -101,7 +104,10 @@ export const UserDetails: React.FC<Props> = ({ user, setStep }) => {
                 render={({ field: { value, onChange } }) => (
                   <CustomSelect
                     value={value}
-                    onChange={onChange}
+                    onChange={(value: any) => {
+                      onChange(value);
+                      setUserRole(value ?? null);
+                    }}
                     label={value ? value.toString() : "Select your role"}
                     input
                     width="w-full"

apps/app/pages/onboarding.tsx

@@ -24,6 +24,7 @@ import type { NextPage, GetServerSidePropsContext } from "next";
 
 const Onboarding: NextPage = () => {
   const [step, setStep] = useState(1);
+  const [userRole, setUserRole] = useState<string | null>(null);
 
   const [workspace, setWorkspace] = useState();
 
@@ -40,7 +41,7 @@ const Onboarding: NextPage = () => {
               <Image src={Logo} height="50" alt="Plane Logo" />
             </div>
             {step === 1 ? (
-              <UserDetails user={user} setStep={setStep} />
+              <UserDetails user={user} setStep={setStep} setUserRole={setUserRole} />
             ) : step === 2 ? (
               <Workspace setStep={setStep} setWorkspace={setWorkspace} />
             ) : (
@@ -69,7 +70,7 @@ const Onboarding: NextPage = () => {
                   onClick={() => {
                     if (step === 8) {
                       userService
-                        .updateUserOnBoard()
+                        .updateUserOnBoard({ userRole })
                         .then(() => {
                           router.push("/");
                         })

apps/app/services/user.service.ts

@@ -47,10 +47,16 @@ class UserService extends APIService {
       });
   }
 
-  async updateUserOnBoard(): Promise<any> {
-    return this.patch("/api/users/me/onboard/", { is_onboarded: true })
+  async updateUserOnBoard({ userRole }: any): Promise<any> {
+    return this.patch("/api/users/me/onboard/", {
+      is_onboarded: true,
+    })
       .then((response) => {
-        if (trackEvent) trackEventServices.trackUserOnboardingCompleteEvent(response.data);
+        if (trackEvent)
+          trackEventServices.trackUserOnboardingCompleteEvent({
+            ...response.data,
+            user_role: userRole ?? "None",
+          });
         return response?.data;
       })
       .catch((error) => {