chore: add user personalization step to onboarding profile setup screen.

web/components/onboarding/profile-setup.tsx

@@ -24,6 +24,8 @@ import { FileService } from "@/services/file.service";
 // assets
 import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
 import ProfileSetupLight from "public/onboarding/profile-setup-light.svg";
+import UserPersonalizationDark from "public/onboarding/user-personalization-dark.svg";
+import UserPersonalizationLight from "public/onboarding/user-personalization-light.svg";
 
 type TProfileSetupFormValues = {
   first_name: string;
@@ -31,6 +33,7 @@ type TProfileSetupFormValues = {
   avatar?: string | null;
   password?: string;
   confirm_password?: string;
+  role?: string;
   use_case?: string;
 };
 
@@ -40,6 +43,7 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
   avatar: "",
   password: undefined,
   confirm_password: undefined,
+  role: undefined,
   use_case: undefined,
 };
 
@@ -50,15 +54,25 @@ type Props = {
   finishOnboarding: () => Promise<void>;
 };
 
-const USE_CASES = [
+enum EProfileSetupSteps {
-  "Build Products",
+  ALL = "ALL",
-  "Manage Feedbacks",
+  USER_DETAILS = "USER_DETAILS",
-  "Service delivery",
+  USER_PERSONALIZATION = "USER_PERSONALIZATION",
-  "Field force management",
+}
-  "Code Repository Integration",
+
-  "Bug Tracking",
+const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
-  "Test Case Management",
+
-  "Resource allocation",
+const USER_DOMAIN = [
+  "Engineering",
+  "Product",
+  "Marketing",
+  "Sales",
+  "Operations",
+  "Legal",
+  "Finance",
+  "Human Resources",
+  "Project",
+  "Other",
 ];
 
 const fileService = new FileService();
@@ -67,6 +81,9 @@ const authService = new AuthService();
 export const ProfileSetup: React.FC<Props> = observer((props) => {
   const { user, totalSteps, stepChange, finishOnboarding } = props;
   // states
+  const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
+    user?.is_password_autoset ? EProfileSetupSteps.USER_DETAILS : EProfileSetupSteps.ALL
+  );
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
@@ -95,37 +112,25 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     mode: "onChange",
   });
 
-  const handleUserDetailUpdate = async (data: Partial<IUser>) => {
-    await updateCurrentUser(data);
-  };
-
-  const handleUserProfileUpdate = async (data: Partial<TUserProfile>) => {
-    await updateUserProfile(data);
-  };
-
   const handleSetPassword = async (password: string) => {
     const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
     await authService.setPassword(token, { password });
   };
 
-  const onSubmit = async (formData: TProfileSetupFormValues) => {
+  const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
-    if (!user) return;
-
     const userDetailsPayload: Partial<IUser> = {
       first_name: formData.first_name,
       last_name: formData.last_name,
       avatar: formData.avatar,
     };
-
     const profileUpdatePayload: Partial<TUserProfile> = {
       use_case: formData.use_case,
+      role: formData.role,
     };
-
     try {
       await Promise.all([
-        handleUserDetailUpdate(userDetailsPayload),
+        updateCurrentUser(userDetailsPayload),
-        handleUserProfileUpdate(profileUpdatePayload),
+        updateUserProfile(profileUpdatePayload),
-        formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
         stepChange({ profile_complete: true }),
       ]).then(() => {
         captureEvent(USER_DETAILS, {
@@ -137,7 +142,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
           title: "Success",
           message: "Profile setup completed!",
         });
-        if (totalSteps === 1) {
+        // For Invited Users, they will skip all other steps and finish onboarding.
+        if (totalSteps <= 2) {
           finishOnboarding();
         }
       });
@@ -154,6 +160,71 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     }
   };
 
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar: formData.avatar,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password ? handleSetPassword(formData.password) : Promise.resolve(),
+      ]).then(() => setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION));
+    } catch {
+      captureEvent(USER_DETAILS, {
+        state: "FAILED",
+        element: "Onboarding",
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([updateUserProfile(profileUpdatePayload), stepChange({ profile_complete: true })]).then(() => {
+        captureEvent(USER_DETAILS, {
+          state: "SUCCESS",
+          element: "Onboarding",
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "Profile setup completed!",
+        });
+        // For Invited Users, they will skip all other steps and finish onboarding.
+        if (totalSteps <= 2) {
+          finishOnboarding();
+        }
+      });
+    } catch {
+      captureEvent(USER_DETAILS, {
+        state: "FAILED",
+        element: "Onboarding",
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
+  };
+
   const handleDelete = (url: string | null | undefined) => {
     if (!url) return;
 
@@ -172,6 +243,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
   const isValidPassword = (password: string, confirmPassword?: string) =>
     getPasswordStrength(password) >= 3 && password === confirmPassword;
 
+  // Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
+  // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
   const isButtonDisabled = useMemo(
     () =>
       isValid &&
@@ -187,23 +260,33 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     [isValid, isPasswordAlreadySetup, isSignUpUsingMagicCode, password, confirmPassword]
   );
 
+  const isCurrentStepUserPersonalization = profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION;
+
   return (
     <div className="flex h-full w-full">
       <div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
         <div className="flex items-center justify-between">
-          <OnboardingHeader currentStep={1} totalSteps={totalSteps} />
+          <OnboardingHeader currentStep={isCurrentStepUserPersonalization ? 2 : 1} totalSteps={totalSteps} />
           <div className="shrink-0 lg:hidden">
             <SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
           </div>
         </div>
         <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
           <div className="text-center space-y-1 py-4 mx-auto">
-            <h3 className="text-3xl font-bold text-onboarding-text-100">Welcome to Plane!</h3>
+            <h3 className="text-3xl font-bold text-onboarding-text-100">
+              {isCurrentStepUserPersonalization
+                ? `Looking good${user?.first_name && `, ${user.first_name}`}!`
+                : "Welcome to Plane!"}
+            </h3>
             <p className="font-medium text-onboarding-text-400">
-              Let’s setup your profile, tell us a bit about yourself.
+              {isCurrentStepUserPersonalization
+                ? "Let’s personalize Plane for you."
+                : "Let’s setup your profile, tell us a bit about yourself."}
             </p>
           </div>
           <form onSubmit={handleSubmit(onSubmit)} className="w-full mx-auto mt-2 space-y-4 sm:w-96">
+            {profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
+              <>
                 <Controller
                   control={control}
                   name="avatar"
@@ -395,9 +478,41 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     )}
                   </div>
                 )}
+              </>
+            )}
+            {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
+              <>
+                <div className="space-y-1">
+                  <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="role">
+                    What role are you working on? Choose one.
+                  </label>
+                  <Controller
+                    control={control}
+                    name="role"
+                    rules={{
+                      required: "This field is required",
+                    }}
+                    render={({ field: { value, onChange } }) => (
+                      <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                        {USER_ROLE.map((userRole) => (
+                          <div
+                            key={userRole}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
+                              value === userRole ? "border-custom-primary-100" : "border-onboarding-border-100"
+                            } rounded px-3 py-1.5 text-sm font-medium`}
+                            onClick={() => onChange(userRole)}
+                          >
+                            {userRole}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  />
+                  {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+                </div>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="use_case">
-                How will you use Plane? Choose one.
+                    What is your domain expertise? Choose one.
                   </label>
                   <Controller
                     control={control}
@@ -407,15 +522,15 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     }}
                     render={({ field: { value, onChange } }) => (
                       <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
-                    {USE_CASES.map((useCase) => (
+                        {USER_DOMAIN.map((userDomain) => (
                           <div
-                        key={useCase}
+                            key={userDomain}
                             className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
-                          value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
+                              value === userDomain ? "border-custom-primary-100" : "border-onboarding-border-100"
                             } rounded px-3 py-1.5 text-sm font-medium`}
-                        onClick={() => onChange(useCase)}
+                            onClick={() => onChange(userDomain)}
                           >
-                        {useCase}
+                            {userDomain}
                           </div>
                         ))}
                       </div>
@@ -423,6 +538,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                   />
                   {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
                 </div>
+              </>
+            )}
             <Button
               variant="primary"
               type="submit"
@@ -439,11 +556,19 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
       <div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
         <SwitchOrDeleteAccountDropdown fullName={`${watch("first_name")} ${watch("last_name")}`} />
         <div className="absolute inset-0 z-0">
+          {profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION ? (
+            <Image
+              src={resolvedTheme === "dark" ? UserPersonalizationDark : UserPersonalizationLight}
+              className="h-screen w-auto float-end object-cover"
+              alt="User Personalization"
+            />
+          ) : (
             <Image
               src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetupLight}
               className="h-screen w-auto float-end object-cover"
               alt="Profile setup"
             />
+          )}
         </div>
       </div>
     </div>

web/pages/onboarding/index.tsx

@@ -91,8 +91,16 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
   };
 
   useEffect(() => {
-    if (workspacesList && workspacesList?.length > 0) setTotalSteps(1);
+    // If user is already invited to a workspace, only show profile setup steps.
+    if (workspacesList && workspacesList?.length > 0) {
+      // If password is auto set then show two different steps for profile setup, else merge them.
+      if (user?.is_password_autoset) setTotalSteps(2);
+      else setTotalSteps(1);
+    } else {
+      // If password is auto set then total steps will increase to 4 due to extra step at profile setup stage.
+      if (user?.is_password_autoset) setTotalSteps(4);
       else setTotalSteps(3);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -122,7 +130,7 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
       }
 
       // For Invited Users, they will skip all other steps.
-      if (totalSteps && totalSteps === 1) return;
+      if (totalSteps && totalSteps <= 2) return;
 
       if (onboardingStep.profile_complete && !(onboardingStep.workspace_join || onboardingStep.workspace_create)) {
         setStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);