feat: init

apps/web/core/components/onboarding/create-or-join-workspaces.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { OctagonAlert } from "lucide-react";
+// plane imports
+import type { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// plane web helpers
+import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+// local imports
+import { CreateWorkspace } from "./create-workspace";
+import { Invitations } from "./invitations";
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+export enum ECreateOrJoinWorkspaceViews {
+  WORKSPACE_CREATE = "WORKSPACE_CREATE",
+  WORKSPACE_JOIN = "WORKSPACE_JOIN",
+}
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  totalSteps: number;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  finishOnboarding: () => Promise<void>;
+};
+
+export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
+  const { invitations, totalSteps, stepChange, finishOnboarding } = props;
+  // states
+  const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
+  // store hooks
+  const { data: user } = useUser();
+  // derived values
+  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+
+  useEffect(() => {
+    if (invitations.length > 0) {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN);
+    } else {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE);
+    }
+  }, [invitations]);
+
+  const handleNextStep = async () => {
+    if (!user) return;
+
+    await finishOnboarding();
+  };
+
+  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 flex-col w-full items-center justify-center p-8 mt-6">
+          {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
+            <Invitations
+              invitations={invitations}
+              handleNextStep={handleNextStep}
+              handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
+            />
+          ) : currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE ? (
+            isWorkspaceCreationEnabled ? (
+              <CreateWorkspace
+                stepChange={stepChange}
+                user={user ?? undefined}
+                invitedWorkspaces={invitations.length}
+                handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN)}
+              />
+            ) : (
+              <div className="flex h-96 w-full items-center justify-center">
+                <div className="flex gap-2.5 w-full items-start justify-center text-sm leading-5 mt-4 px-6 py-4 rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-custom-primary-200">
+                  <OctagonAlert className="flex-shrink-0 size-5 mt-1" />
+                  <span>
+                    You don&apos;t seem to have any invites to a workspace and your instance admin has restricted
+                    creation of new workspaces. Please ask a workspace owner or admin to invite you to a workspace first
+                    and come back to this screen to join.
+                  </span>
+                </div>
+              </div>
+            )
+          ) : (
+            <div className="flex h-96 w-full items-center justify-center">
+              <LogoSpinner />
+            </div>
+          )}
+        </div>
+      </div>
+      <SwitchAccountDropdown />
+    </div>
+  );
+});

apps/web/core/components/onboarding/create-workspace.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// constants
+import {
+  ORGANIZATION_SIZE,
+  RESTRICTED_URLS,
+  WORKSPACE_TRACKER_EVENTS,
+  WORKSPACE_TRACKER_ELEMENTS,
+} from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
+// ui
+import { CustomSelect, Input, Spinner } from "@plane/ui";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+
+type Props = {
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  user: IUser | undefined;
+  invitedWorkspaces: number;
+  handleCurrentViewChange: () => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspace: React.FC<Props> = observer((props) => {
+  const { stepChange, user, invitedWorkspaces, handleCurrentViewChange } = props;
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { updateUserProfile } = useUserProfile();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({
+    defaultValues: {
+      name: "",
+      slug: "",
+      organization_size: "",
+    },
+    mode: "onChange",
+  });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    if (isSubmitting) return;
+
+    await workspaceService
+      .workspaceSlugCheck(formData.slug)
+      .then(async (res) => {
+        if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+          setSlugError(false);
+
+          await createWorkspace(formData)
+            .then(async (workspaceResponse) => {
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: t("workspace_creation.toast.success.title"),
+                message: t("workspace_creation.toast.success.message"),
+              });
+              captureSuccess({
+                eventName: WORKSPACE_TRACKER_EVENTS.create,
+                payload: { slug: formData.slug },
+              });
+              await fetchWorkspaces();
+              await completeStep(workspaceResponse.id);
+            })
+            .catch(() => {
+              captureError({
+                eventName: WORKSPACE_TRACKER_EVENTS.create,
+                payload: { slug: formData.slug },
+                error: new Error("Error creating workspace"),
+              });
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("workspace_creation.toast.error.title"),
+                message: t("workspace_creation.toast.error.message"),
+              });
+            });
+        } else setSlugError(true);
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("workspace_creation.toast.error.title"),
+          message: t("workspace_creation.toast.error.message"),
+        })
+      );
+  };
+
+  const completeStep = async (workspaceId: string) => {
+    if (!user) return;
+    const payload: Partial<TOnboardingSteps> = {
+      workspace_create: true,
+      workspace_join: true,
+    };
+
+    await stepChange(payload);
+    await updateUserProfile({
+      last_workspace_id: workspaceId,
+    });
+    await fetchCurrentUserSettings();
+  };
+
+  const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
+  return (
+    <div className="space-y-4">
+      {!!invitedWorkspaces && (
+        <>
+          <Button
+            variant="link-neutral"
+            size="lg"
+            className="w-full flex items-center gap-2 text-base bg-custom-background-90"
+            onClick={handleCurrentViewChange}
+          >
+            I want to join invited workspaces{" "}
+            <span className="bg-custom-primary-200 h-4 w-4 flex items-center justify-center rounded-sm text-xs font-medium text-white">
+              {invitedWorkspaces}
+            </span>
+          </Button>
+          <div className="mx-auto mt-4 flex items-center sm:w-96">
+            <hr className="w-full border-custom-border-300" />
+            <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
+            <hr className="w-full border-custom-border-300" />
+          </div>
+        </>
+      )}
+      <div className="text-center space-y-1 py-4 mx-auto">
+        <h3 className="text-3xl font-bold text-custom-text-100">{t("workspace_creation.heading")}</h3>
+        <p className="font-medium text-custom-text-400">{t("workspace_creation.subheading")}</p>
+      </div>
+      <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
+        <div className="space-y-1">
+          <label
+            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) =>
+                /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+              maxLength: {
+                value: 80,
+                message: t("workspace_creation.errors.validation.name_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div className="relative flex items-center rounded-md">
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={(event) => {
+                    onChange(event.target.value);
+                    setValue("name", event.target.value);
+                    setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                      shouldValidate: true,
+                    });
+                  }}
+                  placeholder={t("workspace_creation.form.name.placeholder")}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  className="w-full border-custom-border-300 placeholder:text-custom-text-400"
+                  autoFocus
+                />
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
+        </div>
+        <div className="space-y-1">
+          <label
+            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="slug"
+          >
+            {t("workspace_creation.form.url.label")}
+          </label>
+          <Controller
+            control={control}
+            name="slug"
+            rules={{
+              required: t("common.errors.required"),
+              maxLength: {
+                value: 48,
+                message: t("workspace_creation.errors.validation.url_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div
+                className={`relative flex items-center rounded-md border-[0.5px] px-3 ${
+                  invalidSlug ? "border-red-500" : "border-custom-border-300"
+                }`}
+              >
+                <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
+                <Input
+                  id="slug"
+                  name="slug"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder={t("workspace_creation.form.url.placeholder")}
+                  className="w-full border-none !px-0"
+                />
+              </div>
+            )}
+          />
+          <p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+          )}
+          {invalidSlug && (
+            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
+        </div>
+        <hr className="w-full border-custom-border-300" />
+        <div className="space-y-1">
+          <label
+            className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="organization_size"
+          >
+            {t("workspace_creation.form.organization_size.label")}
+          </label>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: t("common.errors.required") }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
+                      <span className="text-custom-text-400">
+                        {t("workspace_creation.form.organization_size.placeholder")}
+                      </span>
+                    )
+                  }
+                  buttonClassName="!border-[0.5px] !border-custom-border-300 !shadow-none !rounded-md"
+                  input
+                >
+                  {ORGANIZATION_SIZE.map((item) => (
+                    <CustomSelect.Option key={item} value={item}>
+                      {item}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+        <Button
+          data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
+          variant="primary"
+          type="submit"
+          size="lg"
+          className="w-full"
+          disabled={isButtonDisabled}
+        >
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+        </Button>
+      </form>
+    </div>
+  );
+});

apps/web/core/components/onboarding/header.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { ChevronLeft } from "lucide-react";
+// plane imports
+import { PlaneLockup } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TOnboardingStep } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+type OnboardingHeaderProps = {
+  currentStep: EOnboardingSteps;
+  updateCurrentStep: (step: EOnboardingSteps) => void;
+  hasInvitations: boolean;
+};
+
+export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
+  const { currentStep, updateCurrentStep, hasInvitations } = props;
+  // store hooks
+  const { data: user } = useUser();
+
+  // handle step back
+  const handleStepBack = () => {
+    switch (currentStep) {
+      case EOnboardingSteps.ROLE_SETUP:
+        updateCurrentStep(EOnboardingSteps.PROFILE_SETUP);
+        break;
+      case EOnboardingSteps.USE_CASE_SETUP:
+        updateCurrentStep(EOnboardingSteps.ROLE_SETUP);
+        break;
+      case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+        updateCurrentStep(EOnboardingSteps.USE_CASE_SETUP);
+        break;
+    }
+  };
+
+  // can go back
+  const canGoBack = ![EOnboardingSteps.PROFILE_SETUP, EOnboardingSteps.INVITE_MEMBERS].includes(currentStep);
+
+  // Get current step number for progress tracking
+  const getCurrentStepNumber = (): number => {
+    const stepOrder: TOnboardingStep[] = [
+      EOnboardingSteps.PROFILE_SETUP,
+      EOnboardingSteps.ROLE_SETUP,
+      EOnboardingSteps.USE_CASE_SETUP,
+      ...(hasInvitations
+        ? [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN]
+        : [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, EOnboardingSteps.INVITE_MEMBERS]),
+    ];
+    return stepOrder.indexOf(currentStep) + 1;
+  };
+
+  // derived values
+  const currentStepNumber = getCurrentStepNumber();
+  const totalSteps = hasInvitations ? 4 : 5; // 4 if invites available, 5 if not
+  const userName = user?.display_name ?? `${user?.first_name} ${user?.last_name}` ?? user?.email;
+
+  return (
+    <div className="flex flex-col gap-4 sticky top-0 z-10">
+      <div className="h-1.5 rounded-t-lg w-full bg-custom-background-100 overflow-hidden cursor-pointer">
+        <Tooltip tooltipContent={`${currentStepNumber}/${totalSteps}`} position="bottom-end">
+          <div
+            className="h-full bg-custom-primary-100 transition-all duration-700 ease-out"
+            style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
+          />
+        </Tooltip>
+      </div>
+      <div className={cn("flex items-center justify-between gap-6 w-full px-6", canGoBack && "pl-4 pr-6")}>
+        <div className="flex items-center gap-2.5">
+          {canGoBack && (
+            <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
+              <ChevronLeft className="size-6 text-custom-text-400" />
+            </button>
+          )}
+          <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+        </div>
+        <SwitchAccountDropdown fullName={userName} />
+      </div>
+    </div>
+  );
+});

apps/web/core/components/onboarding/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/invitations.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React, { useState } from "react";
+// plane imports
+import { ROLE, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+// types
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+// ui
+import { Checkbox, Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+// helpers
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export const Invitations: React.FC<Props> = (props) => {
+  const { invitations, handleNextStep, handleCurrentViewChange } = props;
+  // states
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  // store hooks
+  const { fetchWorkspaces } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  const submitInvitations = async () => {
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
+
+    if (invitationsRespond.length <= 0 && !invitation?.role) return;
+
+    setIsJoiningWorkspaces(true);
+
+    try {
+      await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
+      captureSuccess({
+        eventName: MEMBER_TRACKER_EVENTS.accept,
+        payload: {
+          member_id: invitation?.id,
+        },
+      });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error: any) {
+      console.error(error);
+      captureError({
+        eventName: MEMBER_TRACKER_EVENTS.accept,
+        payload: {
+          member_id: invitation?.id,
+        },
+        error: error,
+      });
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div className="space-y-4">
+      <div className="text-center space-y-1 py-4 mx-auto">
+        <h3 className="text-3xl font-bold text-custom-text-100">You are invited!</h3>
+        <p className="font-medium text-custom-text-400">Accept the invites to collaborate with your team.</p>
+      </div>
+      <div>
+        {invitations &&
+          invitations.length > 0 &&
+          invitations.map((invitation) => {
+            const isSelected = invitationsRespond.includes(invitation.id);
+            const invitedWorkspace = invitation.workspace;
+            return (
+              <div
+                key={invitation.id}
+                className={`flex cursor-pointer items-center gap-2 rounded border p-3.5 border-custom-border-200 hover:bg-custom-background-90`}
+                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+              >
+                <div className="flex-shrink-0">
+                  <WorkspaceLogo
+                    logo={invitedWorkspace?.logo_url}
+                    name={invitedWorkspace?.name}
+                    classNames="size-9 flex-shrink-0"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                </div>
+                <span className={`flex-shrink-0`}>
+                  <Checkbox checked={isSelected} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={submitInvitations}
+        disabled={isJoiningWorkspaces || !invitationsRespond.length}
+        data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_JOIN_WORKSPACE}
+      >
+        {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
+      </Button>
+      <div className="mx-auto mt-4 flex items-center sm:w-96">
+        <hr className="w-full border-custom-border-300" />
+        <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400">or</p>
+        <hr className="w-full border-custom-border-300" />
+      </div>
+      <Button
+        variant="link-neutral"
+        size="lg"
+        className="w-full text-base bg-custom-background-90"
+        onClick={handleCurrentViewChange}
+        disabled={isJoiningWorkspaces}
+      >
+        Create your own workspace
+      </Button>
+    </div>
+  ) : (
+    <div>No Invitations found</div>
+  );
+};

apps/web/core/components/onboarding/invite-members.tsx

@@ -0,0 +1,419 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import type {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+// icons
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace } from "@plane/types";
+// ui
+import { Input, Spinner } from "@plane/ui";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+// components
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+type Props = {
+  finishOnboarding: () => Promise<void>;
+  totalSteps: number;
+  user: IUser | undefined;
+  workspace: IWorkspace | undefined;
+};
+
+type EmailRole = {
+  email: string;
+  role: EUserPermissions;
+  role_active: boolean;
+};
+
+type FormValues = {
+  emails: EmailRole[];
+};
+
+type InviteMemberFormProps = {
+  index: number;
+  remove: UseFieldArrayRemove;
+  control: Control<FormValues, any>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+  watch: UseFormWatch<FormValues>;
+  field: FieldArrayWithId<FormValues, "emails", "id">;
+  fields: FieldArrayWithId<FormValues, "emails", "id">[];
+  errors: any;
+  isInvitationDisabled: boolean;
+  setIsInvitationDisabled: (value: boolean) => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+const placeholderEmails = [
+  "charlie.taylor@frstflt.com",
+  "octave.chanute@frstflt.com",
+  "george.spratt@frstflt.com",
+  "frank.coffyn@frstflt.com",
+  "amos.root@frstflt.com",
+  "edward.deeds@frstflt.com",
+  "charles.m.manly@frstflt.com",
+  "glenn.curtiss@frstflt.com",
+  "thomas.selfridge@frstflt.com",
+  "albert.zahm@frstflt.com",
+];
+const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
+  const {
+    control,
+    index,
+    fields,
+    remove,
+    errors,
+    isInvitationDisabled,
+    setIsInvitationDisabled,
+    setValue,
+    getValues,
+    watch,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation();
+
+  const email = watch(`emails.${index}.email`);
+
+  const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === "") {
+      const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
+      if (validEmail) {
+        setIsInvitationDisabled(false);
+      } else {
+        setIsInvitationDisabled(true);
+      }
+
+      if (getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, false);
+      }
+    } else {
+      if (!getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, true);
+      }
+      if (isInvitationDisabled && emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(false);
+      } else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(true);
+      }
+    }
+  };
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <div className="group relative grid grid-cols-10 gap-4">
+        <div className="col-span-6 ml-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.email`}
+            rules={{
+              pattern: {
+                value: emailRegex,
+                message: "Invalid Email ID",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id={`emails.${index}.email`}
+                name={`emails.${index}.email`}
+                type="text"
+                value={value}
+                onChange={(event) => {
+                  emailOnChange(event);
+                  onChange(event);
+                }}
+                ref={ref}
+                hasError={Boolean(errors.emails?.[index]?.email)}
+                placeholder={placeholderEmails[index % placeholderEmails.length]}
+                className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
+                autoComplete="off"
+              />
+            )}
+          />
+        </div>
+        <div className="col-span-4 mr-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.role`}
+            rules={{ required: true }}
+            render={({ field: { value, onChange } }) => (
+              <Listbox
+                as="div"
+                value={value}
+                onChange={(val) => {
+                  onChange(val);
+                  setValue(`emails.${index}.role_active`, true);
+                }}
+                className="w-full flex-shrink-0 text-left"
+              >
+                <Listbox.Button
+                  type="button"
+                  ref={setReferenceElement}
+                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
+                >
+                  <span
+                    className={`text-sm ${
+                      !getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
+                    } sm:text-sm`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDown
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`)
+                        ? "stroke-onboarding-text-400"
+                        : "stroke-onboarding-text-100"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    {Object.entries(ROLE_DETAILS).map(([key, value]) => (
+                      <Listbox.Option
+                        as="div"
+                        key={key}
+                        value={parseInt(key)}
+                        className={({ active, selected }) =>
+                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center text-wrap gap-2 p-1">
+                            <div className="flex flex-col">
+                              <div className="text-sm font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <Check className="h-4 w-4 shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
+              </Listbox>
+            )}
+          />
+        </div>
+        {fields.length > 1 && (
+          <button
+            type="button"
+            className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-sm">🤥</span>{" "}
+          <span className="mt-1 text-xs text-red-500">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const InviteMembers: React.FC<Props> = (props) => {
+  const { finishOnboarding, totalSteps, workspace } = props;
+
+  const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
+
+  const {
+    control,
+    watch,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const nextStep = async () => {
+    await finishOnboarding();
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspace) return;
+
+    let payload = { ...formData };
+    payload = { emails: payload.emails.filter((email) => email.email !== "") };
+
+    await workspaceService
+      .inviteWorkspace(workspace.slug, {
+        emails: payload.emails.map((email) => ({
+          email: email.email,
+          role: email.role,
+        })),
+      })
+      .then(async () => {
+        captureSuccess({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            workspace: workspace.slug,
+          },
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+
+        await nextStep();
+      })
+      .catch((err) => {
+        captureError({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            workspace: workspace.slug,
+          },
+          error: err,
+        });
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.error,
+        });
+      });
+  };
+
+  const appendField = () => {
+    append({ email: "", role: 15, role_active: false });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append(
+        [
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+        ],
+        {
+          focusIndex: 0,
+        }
+      );
+    }
+  }, [fields, append]);
+
+  return (
+    <div className="flex w-full h-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 flex-col w-full items-center justify-center p-8 mt-6 md:w-4/5 mx-auto">
+          <div className="text-center space-y-1 py-4 mx-auto w-4/5">
+            <h3 className="text-3xl font-bold text-custom-text-100">Invite your teammates</h3>
+            <p className="font-medium text-custom-text-400">
+              Work in plane happens best with your team. Invite them now to use Plane to its potential.
+            </p>
+          </div>
+          <form
+            className="w-full mx-auto mt-2 space-y-4"
+            onSubmit={handleSubmit(onSubmit)}
+            onKeyDown={(e) => {
+              if (e.code === "Enter") e.preventDefault();
+            }}
+          >
+            <div className="w-full text-sm py-4">
+              <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
+                <div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
+                <div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
+              </div>
+              <div className="mb-3 space-y-3 sm:space-y-4">
+                {fields.map((field, index) => (
+                  <InviteMemberInput
+                    watch={watch}
+                    getValues={getValues}
+                    setValue={setValue}
+                    isInvitationDisabled={isInvitationDisabled}
+                    setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
+                    control={control}
+                    errors={errors}
+                    field={field}
+                    fields={fields}
+                    index={index}
+                    remove={remove}
+                    key={field.id}
+                  />
+                ))}
+              </div>
+              <button
+                type="button"
+                className="flex items-center mx-8 gap-1.5 bg-transparent text-sm font-medium text-custom-primary-100 outline-custom-primary-100"
+                onClick={appendField}
+              >
+                <Plus className="h-4 w-4" strokeWidth={2} />
+                Add another
+              </button>
+            </div>
+            <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full max-w-96">
+              <Button
+                variant="primary"
+                type="submit"
+                size="lg"
+                className="w-full"
+                disabled={isInvitationDisabled || !isValid || isSubmitting}
+                data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_INVITE_MEMBER}
+              >
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+              <Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
+                I’ll do it later
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <SwitchAccountDropdown />
+    </div>
+  );
+};

apps/web/core/components/onboarding/profile-setup.tsx

@@ -0,0 +1,577 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+import {
+  AUTH_TRACKER_EVENTS,
+  E_PASSWORD_STRENGTH,
+  ONBOARDING_TRACKER_ELEMENTS,
+  USER_TRACKER_EVENTS,
+} from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
+// ui
+import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
+// components
+import { getFileURL, getPasswordStrength } from "@plane/utils";
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// constants
+// helpers
+// hooks
+import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+
+type TProfileSetupFormValues = {
+  first_name: string;
+  last_name: string;
+  avatar_url?: string | null;
+  password?: string;
+  confirm_password?: string;
+  role?: string;
+  use_case?: string;
+};
+
+const defaultValues: Partial<TProfileSetupFormValues> = {
+  first_name: "",
+  last_name: "",
+  avatar_url: "",
+  password: undefined,
+  confirm_password: undefined,
+  role: undefined,
+  use_case: undefined,
+};
+
+type Props = {
+  user?: IUser;
+  totalSteps: number;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  finishOnboarding: () => Promise<void>;
+};
+
+enum EProfileSetupSteps {
+  ALL = "ALL",
+  USER_DETAILS = "USER_DETAILS",
+  USER_PERSONALIZATION = "USER_PERSONALIZATION",
+}
+
+const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
+
+const USER_DOMAIN = [
+  "Engineering",
+  "Product",
+  "Marketing",
+  "Sales",
+  "Operations",
+  "Legal",
+  "Finance",
+  "Human Resources",
+  "Project",
+  "Other",
+];
+
+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 [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    getValues,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      first_name: user?.first_name,
+      last_name: user?.last_name,
+      avatar_url: user?.avatar_url,
+    },
+    mode: "onChange",
+  });
+  // derived values
+  const userAvatar = watch("avatar_url");
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleSetPassword = async (password: string) => {
+    const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+    await authService
+      .setPassword(token, { password })
+      .then(() => {
+        captureSuccess({
+          eventName: AUTH_TRACKER_EVENTS.password_created,
+        });
+      })
+      .catch(() => {
+        captureError({
+          eventName: AUTH_TRACKER_EVENTS.password_created,
+        });
+      });
+  };
+
+  const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        updateUserProfile(profileUpdatePayload),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      captureSuccess({
+        eventName: USER_TRACKER_EVENTS.add_details,
+        payload: {
+          use_case: formData.use_case,
+          role: formData.role,
+        },
+      });
+      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 {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password && handleSetPassword(formData.password),
+      ]).then(() => {
+        if (formData.password) {
+          captureView({
+            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SELECTED,
+          });
+        } else {
+          captureView({
+            elementName: ONBOARDING_TRACKER_ELEMENTS.PASSWORD_CREATION_SKIPPED,
+          });
+        }
+        setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
+      });
+    } catch {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      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),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      captureSuccess({
+        eventName: USER_TRACKER_EVENTS.add_details,
+        payload: {
+          use_case: formData.use_case,
+          role: formData.role,
+        },
+      });
+      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 {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    captureView({
+      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
+    });
+    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;
+    setValue("avatar_url", "");
+  };
+
+  // derived values
+  const isPasswordAlreadySetup = !user?.is_password_autoset;
+  const currentPassword = watch("password") || undefined;
+  const currentConfirmPassword = watch("confirm_password") || undefined;
+
+  const isValidPassword = useMemo(() => {
+    if (currentPassword) {
+      if (
+        currentPassword === currentConfirmPassword &&
+        getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }, [currentPassword, currentConfirmPassword]);
+
+  // 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 =
+    !isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
+
+  return (
+    <div className="flex h-full w-full">
+      <div className="flex flex-col w-full items-center justify-center p-8 mt-6">
+        <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_url"
+                render={({ field: { onChange, value } }) => (
+                  <UserImageUploadModal
+                    isOpen={isImageUploadModalOpen}
+                    onClose={() => setIsImageUploadModalOpen(false)}
+                    handleRemove={async () => handleDelete(getValues("avatar_url"))}
+                    onSuccess={(url) => {
+                      onChange(url);
+                      setIsImageUploadModalOpen(false);
+                    }}
+                    value={value && value.trim() !== "" ? value : null}
+                  />
+                )}
+              />
+              <div className="space-y-1 flex items-center justify-center">
+                <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                  {!userAvatar || userAvatar === "" ? (
+                    <div className="flex flex-col items-center justify-between">
+                      <div className="relative h-14 w-14 overflow-hidden">
+                        <div className="absolute left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-white text-3xl font-medium bg-[#9747FF] uppercase">
+                          {watch("first_name")[0] ?? "R"}
+                        </div>
+                      </div>
+                      <div className="pt-1 text-sm font-medium text-custom-primary-300 hover:text-custom-primary-400">
+                        Choose image
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="relative mr-3 h-16 w-16 overflow-hidden">
+                      <img
+                        src={getFileURL(userAvatar ?? "")}
+                        className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                        onClick={() => setIsImageUploadModalOpen(true)}
+                        alt={user?.display_name}
+                      />
+                    </div>
+                  )}
+                </button>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <label
+                    className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    htmlFor="first_name"
+                  >
+                    First name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="first_name"
+                    rules={{
+                      required: "First name is required",
+                      maxLength: {
+                        value: 24,
+                        message: "First name must be within 24 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        type="text"
+                        value={value}
+                        autoFocus
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.first_name)}
+                        placeholder="Wilbur"
+                        className="w-full border-custom-border-300"
+                        autoComplete="on"
+                      />
+                    )}
+                  />
+                  {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+                </div>
+                <div className="space-y-1">
+                  <label
+                    className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                    htmlFor="last_name"
+                  >
+                    Last name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="last_name"
+                    rules={{
+                      required: "Last name is required",
+                      maxLength: {
+                        value: 24,
+                        message: "Last name must be within 24 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="last_name"
+                        name="last_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.last_name)}
+                        placeholder="Wright"
+                        className="w-full border-custom-border-300"
+                        autoComplete="on"
+                      />
+                    )}
+                  />
+                  {errors.last_name && <span className="text-sm text-red-500">{errors.last_name.message}</span>}
+                </div>
+              </div>
+
+              {/* setting up password for the first time */}
+              {!isPasswordAlreadySetup && (
+                <>
+                  <div className="space-y-1">
+                    <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                      Set a password ({t("common.optional")})
+                    </label>
+                    <Controller
+                      control={control}
+                      name="password"
+                      rules={{
+                        required: false,
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <div className="relative flex items-center rounded-md">
+                          <Input
+                            type={showPassword.password ? "text" : "password"}
+                            name="password"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            hasError={Boolean(errors.password)}
+                            placeholder="New password..."
+                            className="w-full border-[0.5px] border-custom-border-300 pr-12 placeholder:text-custom-text-400"
+                            onFocus={() => setIsPasswordInputFocused(true)}
+                            onBlur={() => setIsPasswordInputFocused(false)}
+                            autoComplete="on"
+                          />
+                          {showPassword.password ? (
+                            <EyeOff
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => handleShowPassword("password")}
+                            />
+                          ) : (
+                            <Eye
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => handleShowPassword("password")}
+                            />
+                          )}
+                        </div>
+                      )}
+                    />
+                    <PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+                      {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
+                    </label>
+                    <Controller
+                      control={control}
+                      name="confirm_password"
+                      rules={{
+                        required: watch("password") ? true : false,
+                        validate: (value) =>
+                          watch("password") ? (value === watch("password") ? true : "Passwords don't match") : true,
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <div className="relative flex items-center rounded-md">
+                          <Input
+                            type={showPassword.retypePassword ? "text" : "password"}
+                            name="confirm_password"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            hasError={Boolean(errors.confirm_password)}
+                            placeholder={t("auth.common.password.confirm_password.placeholder")}
+                            className="w-full border-custom-border-300 pr-12 placeholder:text-custom-text-400"
+                          />
+                          {showPassword.retypePassword ? (
+                            <EyeOff
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => handleShowPassword("retypePassword")}
+                            />
+                          ) : (
+                            <Eye
+                              className="absolute right-3 h-4 w-4 stroke-custom-text-400 hover:cursor-pointer"
+                              onClick={() => handleShowPassword("retypePassword")}
+                            />
+                          )}
+                        </div>
+                      )}
+                    />
+                    {errors.confirm_password && (
+                      <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
+                    )}
+                  </div>
+                </>
+              )}
+            </>
+          )}
+
+          {/* user role once the password is set */}
+          {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
+            <>
+              <div className="space-y-1">
+                <label
+                  className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  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-custom-background-90 ${
+                            value === userRole ? "border-custom-primary-100" : "border-custom-border-300"
+                          } 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-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+                  htmlFor="use_case"
+                >
+                  What is your domain expertise? Choose one.
+                </label>
+                <Controller
+                  control={control}
+                  name="use_case"
+                  rules={{
+                    required: "This field is required",
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <div className="flex flex-wrap gap-2 py-2 overflow-auto break-all">
+                      {USER_DOMAIN.map((userDomain) => (
+                        <div
+                          key={userDomain}
+                          className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${
+                            value === userDomain ? "border-custom-primary-100" : "border-custom-border-300"
+                          } rounded px-3 py-1.5 text-sm font-medium`}
+                          onClick={() => onChange(userDomain)}
+                        >
+                          {userDomain}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                />
+                {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+              </div>
+            </>
+          )}
+          <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+});

apps/web/core/components/onboarding/root.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import type { FC } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { USER_TRACKER_EVENTS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceMemberInvitation, TOnboardingStep, TOnboardingSteps, TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// helpers
+import { captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// local components
+import { OnboardingHeader } from "./header";
+import { OnboardingStepRoot } from "./steps";
+
+type Props = {
+  invitations?: IWorkspaceMemberInvitation[];
+};
+
+export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
+  const [currentStep, setCurrentStep] = useState<TOnboardingStep>(EOnboardingSteps.PROFILE_SETUP);
+  // store hooks
+  const { data: user } = useUser();
+  const { data: userProfile, updateUserProfile, finishUserOnboarding } = useUserProfile();
+  const { workspaces } = useWorkspace();
+
+  const workspacesList = Object.values(workspaces ?? {});
+
+  // Calculate total steps based on whether invitations are available
+  const hasInvitations = invitations.length > 0;
+
+  // complete onboarding
+  const finishOnboarding = useCallback(async () => {
+    if (!user) return;
+
+    await finishUserOnboarding()
+      .then(() => {
+        captureSuccess({
+          eventName: USER_TRACKER_EVENTS.onboarding_complete,
+          payload: {
+            email: user.email,
+            user_id: user.id,
+          },
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Failed",
+          message: "Failed to finish onboarding, Please try again later.",
+        });
+      });
+  }, [user, finishUserOnboarding]);
+
+  // handle step change
+  const stepChange = useCallback(
+    async (steps: Partial<TOnboardingSteps>) => {
+      if (!user) return;
+
+      const payload: Partial<TUserProfile> = {
+        onboarding_step: {
+          ...userProfile.onboarding_step,
+          ...steps,
+        },
+      };
+
+      await updateUserProfile(payload);
+    },
+    [user, userProfile, updateUserProfile]
+  );
+
+  const handleStepChange = useCallback(
+    (step: EOnboardingSteps, skipInvites?: boolean) => {
+      switch (step) {
+        case EOnboardingSteps.PROFILE_SETUP:
+          setCurrentStep(EOnboardingSteps.ROLE_SETUP);
+          break;
+        case EOnboardingSteps.ROLE_SETUP:
+          setCurrentStep(EOnboardingSteps.USE_CASE_SETUP);
+          break;
+        case EOnboardingSteps.USE_CASE_SETUP:
+          stepChange({ profile_complete: true });
+          if (workspacesList.length > 0) finishOnboarding();
+          else setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+          break;
+        case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+          if (skipInvites) finishOnboarding();
+          else {
+            setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
+            stepChange({ workspace_create: true });
+          }
+          break;
+        case EOnboardingSteps.INVITE_MEMBERS:
+          stepChange({ workspace_invite: true });
+          finishOnboarding();
+          break;
+      }
+    },
+    [stepChange, finishOnboarding, workspacesList]
+  );
+
+  const updateCurrentStep = (step: EOnboardingSteps) => setCurrentStep(step);
+
+  useEffect(() => {
+    const handleInitialStep = () => {
+      if (
+        userProfile?.onboarding_step?.profile_complete &&
+        !userProfile?.onboarding_step?.workspace_create &&
+        !userProfile?.onboarding_step?.workspace_join
+      ) {
+        setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+      }
+      if (
+        userProfile?.onboarding_step?.profile_complete &&
+        userProfile?.onboarding_step?.workspace_create &&
+        !userProfile?.onboarding_step?.workspace_invite
+      ) {
+        setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
+      }
+    };
+
+    handleInitialStep();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header with progress */}
+      <OnboardingHeader
+        currentStep={currentStep}
+        updateCurrentStep={updateCurrentStep}
+        hasInvitations={hasInvitations}
+      />
+
+      {/* Main content area */}
+      <OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} />
+    </div>
+  );
+});

apps/web/core/components/onboarding/step-indicator.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+interface OnboardingStepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = ({ currentStep, totalSteps }) => {
+  const renderIndicators = () => {
+    const indicators = [];
+
+    for (let i = 0; i < totalSteps; i++) {
+      const isCompleted = i < currentStep;
+      const isActive = i === currentStep - 1;
+      const isFirstStep = i === 0;
+      const isLastStep = i === totalSteps - 1;
+
+      indicators.push(
+        <div
+          key={`line-${i}`}
+          className={cn("h-1.5 -ml-0.5 w-full", {
+            "bg-green-700": isCompleted,
+            "bg-custom-background-100": !isCompleted,
+            "rounded-l-full": isFirstStep,
+            "rounded-r-full": isLastStep || isActive,
+            "z-10": isActive,
+          })}
+        />
+      );
+    }
+
+    return indicators;
+  };
+
+  return (
+    <div className="flex flex-col justify-center">
+      <div className="text-sm text-custom-text-300 font-medium">
+        {currentStep} of {totalSteps} steps
+      </div>
+      <div className="flex items-center justify-center my-0.5 mx-1 w-40 lg:w-52">{renderIndicators()}</div>
+    </div>
+  );
+};

apps/web/core/components/onboarding/steps/common/header.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import type { FC } from "react";
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+export const CommonOnboardingHeader: FC<Props> = ({ title, description }) => (
+  <div className="text-left space-y-2">
+    <h1 className="text-2xl font-semibold text-custom-text-200">{title}</h1>
+    <p className="text-base text-custom-text-300">{description}</p>
+  </div>
+);

apps/web/core/components/onboarding/steps/common/index.ts

@@ -0,0 +1 @@
+export * from "./header";

apps/web/core/components/onboarding/steps/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/steps/profile/consent.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import type { FC } from "react";
+import { Check } from "lucide-react";
+
+type Props = {
+  isChecked: boolean;
+  handleChange: (checked: boolean) => void;
+};
+
+export const MarketingConsent: FC<Props> = ({ isChecked, handleChange }) => (
+  <div className="flex items-center justify-center gap-1.5">
+    <button
+      type="button"
+      onClick={() => handleChange(!isChecked)}
+      className={`size-4 rounded border-2 flex items-center justify-center ${
+        isChecked ? "bg-custom-primary-100 border-custom-primary-100" : "border-custom-border-300"
+      }`}
+    >
+      {isChecked && <Check className="w-3 h-3 text-white" />}
+    </button>
+    <span className="text-sm text-custom-text-300">I agree to Plane marketing communications</span>
+  </div>
+);

apps/web/core/components/onboarding/steps/profile/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/steps/profile/root.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import type { FC } from "react";
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { ImageIcon } from "lucide-react";
+// plane imports
+import { E_PASSWORD_STRENGTH, ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn, getFileURL, getPasswordStrength } from "@plane/utils";
+// components
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// helpers
+import { captureError, captureView } from "@/helpers/event-tracker.helper";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+// local components
+import { CommonOnboardingHeader } from "../common";
+import { MarketingConsent } from "./consent";
+import { SetPasswordRoot } from "./set-password";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+export type TProfileSetupFormValues = {
+  first_name: string;
+  last_name: string;
+  avatar_url?: string | null;
+  password?: string;
+  confirm_password?: string;
+  role?: string;
+  use_case?: string;
+  has_marketing_email_consent?: boolean;
+};
+
+const authService = new AuthService();
+
+const defaultValues: Partial<TProfileSetupFormValues> = {
+  first_name: "",
+  last_name: "",
+  avatar_url: "",
+  password: undefined,
+  confirm_password: undefined,
+  has_marketing_email_consent: true,
+};
+
+export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+  // states
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store hooks
+  const { data: user, updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    getValues,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      first_name: user?.first_name,
+      last_name: user?.last_name,
+      avatar_url: user?.avatar_url,
+    },
+    mode: "onChange",
+  });
+  // derived values
+  const userAvatar = watch("avatar_url");
+
+  const handleSetPassword = async (password: string) => {
+    const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+    await authService.setPassword(token, { password });
+  };
+
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password && handleSetPassword(formData.password),
+      ]);
+    } catch {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    captureView({
+      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
+    });
+    updateUserProfile({
+      has_marketing_email_consent: formData.has_marketing_email_consent,
+    });
+    await handleSubmitUserDetail(formData).then(() => {
+      handleStepChange(EOnboardingSteps.PROFILE_SETUP);
+    });
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!url) return;
+    setValue("avatar_url", "");
+  };
+
+  // derived values
+  const isPasswordAlreadySetup = !user?.is_password_autoset;
+  const currentPassword = watch("password") || undefined;
+  const currentConfirmPassword = watch("confirm_password") || undefined;
+
+  const isValidPassword = useMemo(() => {
+    if (currentPassword) {
+      if (
+        currentPassword === currentConfirmPassword &&
+        getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }, [currentPassword, currentConfirmPassword]);
+
+  // 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 =
+    !isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="Create your profile." description="This is how you will appear in Plane." />
+
+      {/* Profile Picture Section */}
+      <Controller
+        control={control}
+        name="avatar_url"
+        render={({ field: { onChange, value } }) => (
+          <UserImageUploadModal
+            isOpen={isImageUploadModalOpen}
+            onClose={() => setIsImageUploadModalOpen(false)}
+            handleRemove={async () => handleDelete(getValues("avatar_url"))}
+            onSuccess={(url) => {
+              onChange(url);
+              setIsImageUploadModalOpen(false);
+            }}
+            value={value && value.trim() !== "" ? value : null}
+          />
+        )}
+      />
+      <div className="flex items-center gap-4">
+        <button
+          className="size-12 rounded-full bg-[#028375] flex items-center justify-center text-white font-semibold text-xl"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          {userAvatar ? (
+            <img
+              src={getFileURL(userAvatar ?? "")}
+              onClick={() => setIsImageUploadModalOpen(true)}
+              alt={user?.display_name}
+              className="w-full h-full rounded-full object-cover"
+            />
+          ) : (
+            <>{watch("first_name")[0] ?? "R"}</>
+          )}
+        </button>
+        <input type="file" className="hidden" id="profile-image-input" />
+        <button
+          className="flex items-center gap-1.5 text-custom-text-300 hover:text-custom-text-200 text-sm px-2 py-1"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          <ImageIcon className="size-4" />
+          <span className="text-sm">{userAvatar ? "Change image" : "Upload image"}</span>
+        </button>
+      </div>
+
+      <div className="flex flex-col gap-6 w-full">
+        {/* Name Input */}
+        <div className="flex flex-col gap-2">
+          <label
+            className="block text-sm font-medium text-custom-text-300 after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="first_name"
+          >
+            Name
+          </label>
+          <Controller
+            control={control}
+            name="first_name"
+            rules={{
+              required: "Name is required",
+              maxLength: {
+                value: 24,
+                message: "Name must be within 24 characters.",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <input
+                ref={ref}
+                id="first_name"
+                name="first_name"
+                type="text"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                autoFocus
+                className={cn(
+                  "w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
+                  {
+                    "border-custom-border-300": !errors.first_name,
+                    "border-red-500": errors.first_name,
+                  }
+                )}
+                placeholder="Enter your full name"
+                autoComplete="on"
+              />
+            )}
+          />
+          {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+        </div>
+
+        {/* setting up password for the first time */}
+        {!isPasswordAlreadySetup && (
+          <SetPasswordRoot
+            onPasswordChange={(password) => setValue("password", password)}
+            onConfirmPasswordChange={(confirm_password) => setValue("confirm_password", confirm_password)}
+          />
+        )}
+      </div>
+      {/* Continue Button */}
+      <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+        Continue
+      </Button>
+
+      {/* Marketing Consent */}
+      <MarketingConsent
+        isChecked={!!watch("has_marketing_email_consent")}
+        handleChange={(has_marketing_email_consent) =>
+          setValue("has_marketing_email_consent", has_marketing_email_consent)
+        }
+      />
+    </form>
+  );
+});

apps/web/core/components/onboarding/steps/profile/set-password.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useState, useCallback, useMemo } from "react";
+import { Lock, ChevronDown } from "lucide-react";
+import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+interface PasswordState {
+  password: string;
+  confirmPassword: string;
+}
+
+interface SetPasswordRootProps {
+  onPasswordChange?: (password: string) => void;
+  onConfirmPasswordChange?: (confirmPassword: string) => void;
+  disabled?: boolean;
+}
+
+export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
+  onPasswordChange,
+  onConfirmPasswordChange,
+  disabled = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [passwordState, setPasswordState] = useState<PasswordState>({
+    password: "",
+    confirmPassword: "",
+  });
+
+  const handleToggleExpand = useCallback(() => {
+    if (disabled) return;
+    setIsExpanded((prev) => !prev);
+  }, [disabled]);
+
+  const handlePasswordChange = useCallback(
+    (field: keyof PasswordState, value: string) => {
+      setPasswordState((prev) => {
+        const newState = { ...prev, [field]: value };
+
+        // Notify parent component when password changes
+        if (field === "password" && onPasswordChange) {
+          onPasswordChange(value);
+        }
+        if (field === "confirmPassword" && onConfirmPasswordChange) {
+          onConfirmPasswordChange(value);
+        }
+
+        return newState;
+      });
+    },
+    [onPasswordChange, onConfirmPasswordChange]
+  );
+
+  const isPasswordValid = useMemo(() => {
+    const { password, confirmPassword } = passwordState;
+    return password.length >= 8 && password === confirmPassword;
+  }, [passwordState]);
+
+  const hasPasswordMismatch = useMemo(() => {
+    const { password, confirmPassword } = passwordState;
+    return confirmPassword.length > 0 && password !== confirmPassword;
+  }, [passwordState]);
+
+  const chevronIconClasses = useMemo(
+    () =>
+      `w-4 h-4 text-custom-text-400 transition-transform duration-300 ease-in-out ${isExpanded ? "rotate-180" : "rotate-0"}`,
+    [isExpanded]
+  );
+
+  const expandedContentClasses = useMemo(
+    () =>
+      `flex flex-col gap-4 transition-all duration-300 ease-in-out overflow-hidden px-3 ${
+        isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+      }`,
+    [isExpanded]
+  );
+
+  return (
+    <div
+      className={`flex flex-col rounded-lg overflow-hidden transition-all duration-300 ease-in-out bg-custom-background-90`}
+    >
+      <div
+        className={cn(
+          "flex items-center justify-between transition-colors duration-200 px-3 py-2 text-sm",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          isExpanded && "pb-1"
+        )}
+        onClick={handleToggleExpand}
+      >
+        <div className="flex items-center gap-1 text-custom-text-300">
+          <Lock className="size-3" />
+          <span className="font-medium">Set a password</span>
+          <span>{`(Optional)`}</span>
+        </div>
+        <div className="flex items-center gap-2 text-custom-text-400">
+          <ChevronDown className={chevronIconClasses} />
+        </div>
+      </div>
+
+      <div className={expandedContentClasses}>
+        {/* Password input */}
+        <div className="flex flex-col gap-2 transform transition-all duration-300 ease-in-out pt-1">
+          <PasswordInput
+            id="password"
+            value={passwordState.password}
+            onChange={(value) => handlePasswordChange("password", value)}
+            placeholder="Set a password"
+            className="transition-all duration-200"
+          />
+          {passwordState.password.length > 0 && <PasswordStrengthIndicator password={passwordState.password} />}
+        </div>
+
+        <div className="flex flex-col gap-2 pb-2">
+          {/* Confirm password label */}
+          <div className="text-custom-text-300 font-medium transform transition-all duration-300 ease-in-out delay-75 text-sm">
+            Confirm password
+          </div>
+
+          {/* Confirm password input */}
+          <div className="transform transition-all duration-300 ease-in-out delay-100">
+            <PasswordInput
+              id="confirm-password"
+              value={passwordState.confirmPassword}
+              onChange={(value) => handlePasswordChange("confirmPassword", value)}
+              placeholder="Confirm password"
+              className="transition-all duration-200"
+            />
+            {hasPasswordMismatch && <p className="text-xs text-red-500 mt-1">Passwords do not match</p>}
+            {isPasswordValid && <p className="text-xs text-green-500 mt-1">✓ Passwords match</p>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/core/components/onboarding/steps/role/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/steps/role/root.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Box, Check, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
+// plane imports
+import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// helpers
+import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local components
+import { CommonOnboardingHeader } from "../common";
+import type { TProfileSetupFormValues } from "../profile/root";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+const ROLES = [
+  { id: "product-manager", label: "Product Manager", icon: Box },
+  { id: "engineering-manager", label: "Engineering Manager", icon: ViewsIcon },
+  { id: "designer", label: "Designer", icon: PenTool },
+  { id: "developer", label: "Developer", icon: Monitor },
+  { id: "founder-executive", label: "Founder/Executive", icon: Rocket },
+  { id: "operations-manager", label: "Operations Manager", icon: RefreshCw },
+  { id: "others", label: "Others", icon: Box },
+];
+
+const defaultValues = {
+  role: "",
+};
+
+export const RoleSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+  // store hooks
+  const { data: profile, updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      role: profile?.role,
+    },
+    mode: "onChange",
+  });
+
+  // handle submit
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        // totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      captureSuccess({
+        eventName: USER_TRACKER_EVENTS.add_details,
+        payload: {
+          use_case: formData.use_case,
+          role: formData.role,
+        },
+      });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    captureView({
+      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
+    });
+    await handleSubmitUserPersonalization(formData).then(() => {
+      handleStepChange(EOnboardingSteps.ROLE_SETUP);
+    });
+  };
+
+  const handleSkip = () => {
+    handleStepChange(EOnboardingSteps.ROLE_SETUP);
+  };
+
+  const isButtonDisabled = !isSubmitting && isValid ? false : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="What's your role?" description="Let's set up Plane for how you work." />
+      {/* Role Selection */}
+      <div className="flex flex-col gap-3">
+        <p className="text-sm font-medium text-custom-text-400">Select one</p>
+        <Controller
+          control={control}
+          name="role"
+          rules={{
+            required: "This field is required",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <div className="flex flex-col gap-3">
+              {ROLES.map((role) => {
+                const Icon = role.icon;
+                const isSelected = value === role.id;
+
+                return (
+                  <button
+                    key={role.id}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onChange(role.id);
+                    }}
+                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
+                      isSelected
+                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
+                        : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                    }`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Icon className="size-3.5" />
+                      <span className="font-medium">{role.label}</span>
+                    </div>
+                    {isSelected && (
+                      <>
+                        <button
+                          className={`size-4 rounded border-2 flex items-center justify-center bg-blue-500 border-blue-500`}
+                        >
+                          <Check className="w-3 h-3 text-white" />
+                        </button>
+                      </>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+      </div>
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});

apps/web/core/components/onboarding/steps/root.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { FC } from "react";
+import { useEffect, useMemo, useRef } from "react";
+// plane imports
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// local components
+import { ProfileSetupStep } from "./profile";
+import { RoleSetupStep } from "./role";
+import { InviteTeamStep } from "./team";
+import { UseCaseSetupStep } from "./usecase";
+import { WorkspaceSetupStep } from "./workspace";
+
+type Props = {
+  currentStep: EOnboardingSteps;
+  invitations: IWorkspaceMemberInvitation[];
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+export const OnboardingStepRoot: FC<Props> = (props) => {
+  const { currentStep, invitations, handleStepChange } = props;
+  // ref for the scrollable container
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // scroll to top when step changes
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+  }, [currentStep]);
+
+  // memoized step component mapping
+  const stepComponents = useMemo(
+    () => ({
+      [EOnboardingSteps.PROFILE_SETUP]: <ProfileSetupStep handleStepChange={handleStepChange} />,
+      [EOnboardingSteps.ROLE_SETUP]: <RoleSetupStep handleStepChange={handleStepChange} />,
+      [EOnboardingSteps.USE_CASE_SETUP]: <UseCaseSetupStep handleStepChange={handleStepChange} />,
+      [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN]: (
+        <WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />
+      ),
+      [EOnboardingSteps.INVITE_MEMBERS]: <InviteTeamStep handleStepChange={handleStepChange} />,
+    }),
+    [handleStepChange, invitations]
+  );
+
+  return (
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-full p-8">
+        <div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
+      </div>
+    </div>
+  );
+};

apps/web/core/components/onboarding/steps/team/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/steps/team/root.tsx

@@ -0,0 +1,415 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import type {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+// icons
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// types
+import { EOnboardingSteps } from "@plane/types";
+// ui
+import { Input, Spinner } from "@plane/ui";
+// constants
+// helpers
+
+// hooks
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+// components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+type EmailRole = {
+  email: string;
+  role: EUserPermissions;
+  role_active: boolean;
+};
+
+type FormValues = {
+  emails: EmailRole[];
+};
+
+type InviteMemberFormProps = {
+  index: number;
+  remove: UseFieldArrayRemove;
+  control: Control<FormValues, any>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+  watch: UseFormWatch<FormValues>;
+  field: FieldArrayWithId<FormValues, "emails", "id">;
+  fields: FieldArrayWithId<FormValues, "emails", "id">[];
+  errors: any;
+  isInvitationDisabled: boolean;
+  setIsInvitationDisabled: (value: boolean) => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+const placeholderEmails = [
+  "charlie.taylor@frstflt.com",
+  "octave.chanute@frstflt.com",
+  "george.spratt@frstflt.com",
+  "frank.coffyn@frstflt.com",
+  "amos.root@frstflt.com",
+  "edward.deeds@frstflt.com",
+  "charles.m.manly@frstflt.com",
+  "glenn.curtiss@frstflt.com",
+  "thomas.selfridge@frstflt.com",
+  "albert.zahm@frstflt.com",
+];
+const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
+  const {
+    control,
+    index,
+    fields,
+    remove,
+    errors,
+    isInvitationDisabled,
+    setIsInvitationDisabled,
+    setValue,
+    getValues,
+    watch,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation();
+
+  const email = watch(`emails.${index}.email`);
+
+  const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === "") {
+      const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
+      if (validEmail) {
+        setIsInvitationDisabled(false);
+      } else {
+        setIsInvitationDisabled(true);
+      }
+
+      if (getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, false);
+      }
+    } else {
+      if (!getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, true);
+      }
+      if (isInvitationDisabled && emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(false);
+      } else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(true);
+      }
+    }
+  };
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <div className="group relative grid grid-cols-10 gap-4">
+        <div className="col-span-6">
+          <Controller
+            control={control}
+            name={`emails.${index}.email`}
+            rules={{
+              pattern: {
+                value: emailRegex,
+                message: "Invalid Email ID",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id={`emails.${index}.email`}
+                name={`emails.${index}.email`}
+                type="text"
+                value={value}
+                onChange={(event) => {
+                  emailOnChange(event);
+                  onChange(event);
+                }}
+                ref={ref}
+                hasError={Boolean(errors.emails?.[index]?.email)}
+                placeholder={placeholderEmails[index % placeholderEmails.length]}
+                className="w-full border-custom-border-300 text-xs placeholder:text-custom-text-400 sm:text-sm"
+                autoComplete="off"
+              />
+            )}
+          />
+        </div>
+        <div className="col-span-4 mr-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.role`}
+            rules={{ required: true }}
+            render={({ field: { value, onChange } }) => (
+              <Listbox
+                as="div"
+                value={value}
+                onChange={(val) => {
+                  onChange(val);
+                  setValue(`emails.${index}.role_active`, true);
+                }}
+                className="w-full flex-shrink-0 text-left"
+              >
+                <Listbox.Button
+                  type="button"
+                  ref={setReferenceElement}
+                  className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-custom-border-300"
+                >
+                  <span
+                    className={`text-sm ${
+                      !getValues(`emails.${index}.role_active`) ? "text-custom-text-400" : "text-custom-text-100"
+                    } sm:text-sm`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDown
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`)
+                        ? "stroke-onboarding-text-400"
+                        : "stroke-onboarding-text-100"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-custom-border-300 bg-custom-background-100 shadow-sm focus:outline-none"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    {Object.entries(ROLE_DETAILS).map(([key, value]) => (
+                      <Listbox.Option
+                        as="div"
+                        key={key}
+                        value={parseInt(key)}
+                        className={({ active, selected }) =>
+                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center text-wrap gap-2 p-1">
+                            <div className="flex flex-col">
+                              <div className="text-sm font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <Check className="h-4 w-4 shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
+              </Listbox>
+            )}
+          />
+        </div>
+        {fields.length > 1 && (
+          <button
+            type="button"
+            className="absolute right-0 hidden place-items-center self-center rounded group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <XCircle className="h-5 w-5 pl-0.5 text-custom-text-400" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-sm">🤥</span>{" "}
+          <span className="mt-1 text-xs text-red-500">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const InviteTeamStep: React.FC<Props> = observer((props) => {
+  const { handleStepChange } = props;
+
+  const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
+
+  const { workspaces } = useWorkspace();
+  const workspacesList = Object.values(workspaces ?? {});
+  const workspace = workspacesList[0];
+
+  const {
+    control,
+    watch,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const nextStep = async () => {
+    await handleStepChange(EOnboardingSteps.INVITE_MEMBERS);
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspace) return;
+
+    let payload = { ...formData };
+    payload = { emails: payload.emails.filter((email) => email.email !== "") };
+
+    await workspaceService
+      .inviteWorkspace(workspace.slug, {
+        emails: payload.emails.map((email) => ({
+          email: email.email,
+          role: email.role,
+        })),
+      })
+      .then(async () => {
+        captureSuccess({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            workspace: workspace.slug,
+          },
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+
+        await nextStep();
+      })
+      .catch((err) => {
+        captureError({
+          eventName: MEMBER_TRACKER_EVENTS.invite,
+          payload: {
+            workspace: workspace.slug,
+          },
+          error: err,
+        });
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.error,
+        });
+      });
+  };
+
+  const appendField = () => {
+    append({ email: "", role: 15, role_active: false });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append(
+        [
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+        ],
+        {
+          focusIndex: 0,
+        }
+      );
+    }
+  }, [fields, append]);
+
+  return (
+    <form
+      className="flex flex-col gap-10"
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(e) => {
+        if (e.code === "Enter") e.preventDefault();
+      }}
+    >
+      <CommonOnboardingHeader
+        title="Invite your teammates"
+        description="Work in plane happens best with your team. Invite them now to use Plane to its potential."
+      />
+      <div className="w-full text-sm py-4">
+        <div className="group relative grid grid-cols-10 gap-4 mx-8 py-2">
+          <div className="col-span-6 px-1 text-sm text-custom-text-200 font-medium">Email</div>
+          <div className="col-span-4 px-1 text-sm text-custom-text-200 font-medium">Role</div>
+        </div>
+        <div className="mb-3 space-y-3 sm:space-y-4">
+          {fields.map((field, index) => (
+            <InviteMemberInput
+              watch={watch}
+              getValues={getValues}
+              setValue={setValue}
+              isInvitationDisabled={isInvitationDisabled}
+              setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
+              control={control}
+              errors={errors}
+              field={field}
+              fields={fields}
+              index={index}
+              remove={remove}
+              key={field.id}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          className="flex items-center mx-8 gap-1.5 bg-transparent text-sm font-medium text-custom-primary-100 outline-custom-primary-100"
+          onClick={appendField}
+        >
+          <Plus className="h-4 w-4" strokeWidth={2} />
+          Add another
+        </button>
+      </div>
+      <div className="flex flex-col mx-auto px-8 sm:px-2 items-center justify-center gap-4 w-full">
+        <Button
+          variant="primary"
+          type="submit"
+          size="lg"
+          className="w-full"
+          disabled={isInvitationDisabled || !isValid || isSubmitting}
+          data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_INVITE_MEMBER}
+        >
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button variant="link-neutral" size="lg" className="w-full" onClick={nextStep}>
+          I’ll do it later
+        </Button>
+      </div>
+    </form>
+  );
+});

apps/web/core/components/onboarding/steps/usecase/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/steps/usecase/root.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Check } from "lucide-react";
+// plane imports
+import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS, USE_CASES } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// helpers
+import { captureError, captureSuccess, captureView } from "@/helpers/event-tracker.helper";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { CommonOnboardingHeader } from "../common";
+import type { TProfileSetupFormValues } from "../profile/root";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+const defaultValues = {
+  use_case: "",
+};
+
+export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+  // store hooks
+  const { data: profile, updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      use_case: profile?.use_case,
+    },
+    mode: "onChange",
+  });
+
+  // handle submit
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        // totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      captureSuccess({
+        eventName: USER_TRACKER_EVENTS.add_details,
+        payload: {
+          use_case: formData.use_case,
+        },
+      });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      captureError({
+        eventName: USER_TRACKER_EVENTS.add_details,
+      });
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  // on submit
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    captureView({
+      elementName: ONBOARDING_TRACKER_ELEMENTS.PROFILE_SETUP_FORM,
+    });
+    await handleSubmitUserPersonalization(formData).then(() => {
+      handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
+    });
+  };
+
+  // handle skip
+  const handleSkip = () => {
+    handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
+  };
+
+  // derived values
+  const isButtonDisabled = !isSubmitting && isValid ? false : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="What brings you to Plane?" description="Tell us your goals and team size." />
+
+      {/* Use Case Selection */}
+      <div className="flex flex-col gap-3">
+        <p className="text-sm font-medium text-custom-text-400">Select any</p>
+
+        <Controller
+          control={control}
+          name="use_case"
+          rules={{
+            required: "This field is required",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <div className="flex flex-col gap-3">
+              {USE_CASES.map((useCase) => {
+                const isSelected = value === useCase;
+                return (
+                  <button
+                    key={useCase}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onChange(useCase);
+                    }}
+                    className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
+                      isSelected
+                        ? "border-custom-primary-100 bg-custom-primary-10 text-custom-primary-100"
+                        : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                    }`}
+                  >
+                    <span
+                      className={cn(`size-4 rounded border-2 flex items-center justify-center`, {
+                        "bg-custom-primary-100 border-custom-primary-100": isSelected,
+                        "border-custom-border-300": !isSelected,
+                      })}
+                    >
+                      <Check
+                        className={cn("w-3 h-3 text-white", {
+                          "opacity-100": isSelected,
+                          "opacity-0": !isSelected,
+                        })}
+                      />
+                    </span>
+
+                    <span className="font-medium">{useCase}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="lg" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="link-neutral" onClick={handleSkip} className="w-full" size="lg">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});

apps/web/core/components/onboarding/steps/workspace/create.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { CircleCheck } from "lucide-react";
+// plane imports
+import {
+  ORGANIZATION_SIZE,
+  RESTRICTED_URLS,
+  WORKSPACE_TRACKER_ELEMENTS,
+  WORKSPACE_TRACKER_EVENTS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn } from "@plane/utils";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// plane-web imports
+import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+import { WorkspaceService } from "@/plane-web/services";
+// local components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  user: IUser | undefined;
+  onComplete: (skipInvites?: boolean) => void;
+  handleCurrentViewChange: () => void;
+  hasInvitations?: boolean;
+};
+
+const workspaceService = new WorkspaceService();
+
+export const WorkspaceCreateStep: React.FC<Props> = observer(
+  ({ user, onComplete, handleCurrentViewChange, hasInvitations = false }) => {
+    // states
+    const [slugError, setSlugError] = useState(false);
+    const [invalidSlug, setInvalidSlug] = useState(false);
+    // plane hooks
+    const { t } = useTranslation();
+    // store hooks
+    const { updateUserProfile } = useUserProfile();
+    const { fetchCurrentUserSettings } = useUserSettings();
+    const { createWorkspace, fetchWorkspaces } = useWorkspace();
+
+    const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+
+    // form info
+    const {
+      handleSubmit,
+      control,
+      setValue,
+      formState: { errors, isSubmitting, isValid },
+    } = useForm<IWorkspace>({
+      defaultValues: {
+        name: "",
+        slug: "",
+        organization_size: "",
+      },
+      mode: "onChange",
+    });
+
+    const handleCreateWorkspace = async (formData: IWorkspace) => {
+      if (isSubmitting) return;
+
+      await workspaceService
+        .workspaceSlugCheck(formData.slug)
+        .then(async (res) => {
+          if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+            setSlugError(false);
+            await createWorkspace(formData)
+              .then(async (workspaceResponse) => {
+                setToast({
+                  type: TOAST_TYPE.SUCCESS,
+                  title: t("workspace_creation.toast.success.title"),
+                  message: t("workspace_creation.toast.success.message"),
+                });
+                captureSuccess({
+                  eventName: WORKSPACE_TRACKER_EVENTS.create,
+                  payload: { slug: formData.slug },
+                });
+                await fetchWorkspaces();
+                await completeStep(workspaceResponse.id);
+                onComplete(formData.organization_size === "Just myself");
+              })
+              .catch(() => {
+                captureError({
+                  eventName: WORKSPACE_TRACKER_EVENTS.create,
+                  payload: { slug: formData.slug },
+                  error: new Error("Error creating workspace"),
+                });
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: t("workspace_creation.toast.error.title"),
+                  message: t("workspace_creation.toast.error.message"),
+                });
+              });
+          } else setSlugError(true);
+        })
+        .catch(() =>
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("workspace_creation.toast.error.title"),
+            message: t("workspace_creation.toast.error.message"),
+          })
+        );
+    };
+
+    const completeStep = async (workspaceId: string) => {
+      if (!user) return;
+      await updateUserProfile({
+        last_workspace_id: workspaceId,
+      });
+      await fetchCurrentUserSettings();
+    };
+
+    const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
+    if (!isWorkspaceCreationEnabled) {
+      return (
+        <div className="flex flex-col gap-10">
+          <span className="text-center text-base text-custom-text-300">
+            You don&apos;t seem to have any invites to a workspace and your instance admin has restricted creation of
+            new workspaces. Please ask a workspace owner or admin to invite you to a workspace first and come back to
+            this screen to join.
+          </span>
+        </div>
+      );
+    }
+    return (
+      <form className="flex flex-col gap-10" onSubmit={handleSubmit(handleCreateWorkspace)}>
+        <CommonOnboardingHeader title="Create your workspace" description="All your work — unified." />
+
+        <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <label
+              className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+              htmlFor="name"
+            >
+              {t("workspace_creation.form.name.label")}
+            </label>
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("common.errors.required"),
+                validate: (value) =>
+                  /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+                maxLength: {
+                  value: 80,
+                  message: t("workspace_creation.errors.validation.name_length"),
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <div className="relative flex items-center rounded-md">
+                  <input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={(event) => {
+                      onChange(event.target.value);
+                      setValue("name", event.target.value);
+                      setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                        shouldValidate: true,
+                      });
+                    }}
+                    placeholder="Enter workspace name"
+                    ref={ref}
+                    className={cn(
+                      "w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 placeholder:text-custom-text-400 focus:border-transparent transition-all duration-200",
+                      {
+                        "border-custom-border-300": !errors.name,
+                        "border-red-500": errors.name,
+                      }
+                    )}
+                    autoFocus
+                  />
+                </div>
+              )}
+            />
+            {errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
+          </div>
+          <div className="flex flex-col gap-2">
+            <label
+              className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+              htmlFor="slug"
+            >
+              {t("workspace_creation.form.url.label")}
+            </label>
+            <Controller
+              control={control}
+              name="slug"
+              rules={{
+                required: t("common.errors.required"),
+                maxLength: {
+                  value: 48,
+                  message: t("workspace_creation.errors.validation.url_length"),
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <div
+                  className={cn(
+                    "flex items-center w-full px-3 py-2 text-custom-text-200 border border-custom-border-300 rounded-md bg-custom-background-100 focus:outline-none focus:ring-2 focus:ring-custom-primary-100 focus:border-transparent transition-all duration-200",
+                    {
+                      "border-custom-border-300": !errors.name,
+                      "border-red-500": errors.name,
+                    }
+                  )}
+                >
+                  <span className={cn("pr-0 text-custom-text-200 rounded-md whitespace-nowrap")}>
+                    {window && window.location.host}/
+                  </span>
+                  <input
+                    id="slug"
+                    name="slug"
+                    type="text"
+                    value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                    onChange={(e) => {
+                      if (/^[a-zA-Z0-9_-]+$/.test(e.target.value)) setInvalidSlug(false);
+                      else setInvalidSlug(true);
+                      onChange(e.target.value.toLowerCase());
+                    }}
+                    ref={ref}
+                    placeholder={t("workspace_creation.form.url.placeholder")}
+                    className={cn(
+                      "w-full px-3 py-0 pl-0 text-custom-text-200 border-none ring-none outline-none rounded-md bg-custom-background-100 placeholder:text-custom-text-400"
+                    )}
+                  />
+                </div>
+              )}
+            />
+            <p className="text-sm text-custom-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
+            {slugError && (
+              <p className="-mt-3 text-sm text-red-500">
+                {t("workspace_creation.errors.validation.url_already_taken")}
+              </p>
+            )}
+            {invalidSlug && (
+              <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            )}
+            {errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
+          </div>
+          <div className="flex flex-col gap-2">
+            <label
+              className="text-sm text-custom-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+              htmlFor="organization_size"
+            >
+              {t("workspace_creation.form.organization_size.label")}
+            </label>
+            <div className="w-full">
+              <Controller
+                name="organization_size"
+                control={control}
+                rules={{ required: t("common.errors.required") }}
+                render={({ field: { value, onChange } }) => (
+                  <div className="flex flex-wrap gap-3">
+                    {ORGANIZATION_SIZE.map((size) => {
+                      const isSelected = value === size;
+                      return (
+                        <button
+                          key={size}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onChange(size);
+                          }}
+                          className={`text-sm px-3 py-2 rounded-lg border transition-all duration-200 flex gap-1 items-center justify-between ${
+                            isSelected
+                              ? "border-custom-border-200 bg-custom-background-80 text-custom-text-200"
+                              : "border-custom-border-200 hover:border-custom-border-300 text-custom-text-300"
+                          }`}
+                        >
+                          <CircleCheck
+                            className={cn("size-4 text-custom-text-400", isSelected && "text-custom-text-200")}
+                          />
+
+                          <span className="font-medium">{size}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              />
+              {errors.organization_size && (
+                <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <Button
+            data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
+            variant="primary"
+            type="submit"
+            size="lg"
+            className="w-full"
+            disabled={isButtonDisabled}
+          >
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+          </Button>
+          {hasInvitations && (
+            <Button variant="link-neutral" size="lg" className="w-full" onClick={handleCurrentViewChange}>
+              Join existing workspace
+            </Button>
+          )}
+        </div>
+      </form>
+    );
+  }
+);

apps/web/core/components/onboarding/steps/workspace/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./join-invites";
+export * from "./root";

apps/web/core/components/onboarding/steps/workspace/join-invites.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import React, { useState } from "react";
+// plane imports
+import { MEMBER_TRACKER_ELEMENTS, MEMBER_TRACKER_EVENTS, ROLE } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { Checkbox, Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// helpers
+import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+// local components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export const WorkspaceJoinInvitesStep: React.FC<Props> = (props) => {
+  const { invitations, handleNextStep, handleCurrentViewChange } = props;
+  // states
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  // store hooks
+  const { fetchWorkspaces } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+
+  // handle invitation
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  // submit invitations
+  const submitInvitations = async () => {
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
+
+    if (invitationsRespond.length <= 0 && !invitation?.role) return;
+
+    setIsJoiningWorkspaces(true);
+
+    try {
+      await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
+      captureSuccess({
+        eventName: MEMBER_TRACKER_EVENTS.accept,
+        payload: {
+          member_id: invitation?.id,
+        },
+      });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error: any) {
+      console.error(error);
+      captureError({
+        eventName: MEMBER_TRACKER_EVENTS.accept,
+        payload: {
+          member_id: invitation?.id,
+        },
+        error: error,
+      });
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div className="flex flex-col gap-10">
+      <CommonOnboardingHeader title="Join invites or create a workspace" description="All your work — unified." />
+      <div className="flex flex-col gap-3">
+        {invitations &&
+          invitations.length > 0 &&
+          invitations.map((invitation) => {
+            const isSelected = invitationsRespond.includes(invitation.id);
+            const invitedWorkspace = invitation.workspace;
+            return (
+              <div
+                key={invitation.id}
+                className={`flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 border-custom-border-200 hover:bg-custom-background-90`}
+                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+              >
+                <div className="flex-shrink-0">
+                  <WorkspaceLogo
+                    logo={invitedWorkspace?.logo_url}
+                    name={invitedWorkspace?.name}
+                    classNames="size-8 flex-shrink-0 rounded-lg"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
+                </div>
+                <span className={`flex-shrink-0`}>
+                  <Checkbox checked={isSelected} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={submitInvitations}
+          disabled={isJoiningWorkspaces || !invitationsRespond.length}
+          data-ph-element={MEMBER_TRACKER_ELEMENTS.ONBOARDING_JOIN_WORKSPACE}
+        >
+          {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button
+          variant="link-neutral"
+          size="lg"
+          className="w-full"
+          onClick={handleCurrentViewChange}
+          disabled={isJoiningWorkspaces}
+        >
+          Create new workspace
+        </Button>
+      </div>
+    </div>
+  ) : (
+    <div>No Invitations found</div>
+  );
+};

apps/web/core/components/onboarding/steps/workspace/root.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { ECreateOrJoinWorkspaceViews, EOnboardingSteps } from "@plane/types";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// local components
+import { WorkspaceCreateStep, WorkspaceJoinInvitesStep } from "./";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+export const WorkspaceSetupStep: React.FC<Props> = observer(({ invitations, handleStepChange }) => {
+  // states
+  const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
+  // store hooks
+  const { data: user } = useUser();
+
+  useEffect(() => {
+    if (invitations.length > 0) {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN);
+    } else {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE);
+    }
+  }, [invitations]);
+
+  return (
+    <>
+      {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
+        <WorkspaceJoinInvitesStep
+          invitations={invitations}
+          handleNextStep={async () => {
+            handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, true);
+          }}
+          handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
+        />
+      ) : (
+        <WorkspaceCreateStep
+          user={user}
+          onComplete={(skipInvites) => handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, skipInvites)}
+          handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN)}
+          hasInvitations={invitations.length > 0}
+        />
+      )}
+    </>
+  );
+});

apps/web/core/components/onboarding/switch-account-dropdown.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Menu, Transition } from "@headlessui/react";
+// ui
+import { cn, getFileURL } from "@plane/utils";
+// helpers
+// hooks
+import { useUser } from "@/hooks/store/user";
+// components
+import { SwitchAccountModal } from "./switch-account-modal";
+
+type TSwitchAccountDropdownProps = {
+  fullName?: string;
+};
+
+export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((props) => {
+  const { fullName } = props;
+  // states
+  const [showSwitchAccountModal, setShowSwitchAccountModal] = useState(false);
+  // store hooks
+  const { data: user } = useUser();
+
+  const displayName = user?.first_name
+    ? `${user?.first_name} ${user?.last_name ?? ""}`
+    : fullName && fullName.trim().length > 0
+      ? fullName
+      : user?.email;
+
+  if (!displayName && !fullName) return null;
+
+  return (
+    <>
+      <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
+      <Menu as="div" className="relative">
+        <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-custom-background-90 z-10">
+          <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-white font-semibold text-sm capitalize">
+            {user?.avatar_url ? (
+              <img
+                src={getFileURL(user?.avatar_url)}
+                alt={user?.display_name}
+                className="w-full h-full rounded-full object-cover"
+              />
+            ) : (
+              <>{fullName?.[0] ?? "R"}</>
+            )}
+          </div>
+          <span className="text-sm font-medium text-custom-text-200">{displayName}</span>
+        </Menu.Button>
+        <Transition
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
+        >
+          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
+            <Menu.Item
+              as="button"
+              type="button"
+              className={({ active }) =>
+                cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
+                  "bg-custom-background-80": active,
+                })
+              }
+              onClick={() => setShowSwitchAccountModal(true)}
+            >
+              Wrong e-mail address?
+            </Menu.Item>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+});

apps/web/core/components/onboarding/switch-account-modal.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import React, { useState } from "react";
+
+import { useTheme } from "next-themes";
+import { ArrowRightLeft } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const SwitchAccountModal: React.FC<Props> = (props) => {
+  const { isOpen, onClose } = props;
+  // states
+  const [switchingAccount, setSwitchingAccount] = useState(false);
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { data: userData, signOut } = useUser();
+
+  const { setTheme } = useTheme();
+
+  const handleClose = () => {
+    setSwitchingAccount(false);
+    onClose();
+  };
+
+  const handleSwitchAccount = async () => {
+    setSwitchingAccount(true);
+
+    await signOut()
+      .then(() => {
+        setTheme("system");
+        router.push("/");
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      )
+      .finally(() => setSwitchingAccount(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
+                <div className="p-6 pb-1">
+                  <div className="flex gap-x-4">
+                    <div className="flex items-start">
+                      <div className="grid place-items-center rounded-full bg-custom-primary-100/20 p-4">
+                        <ArrowRightLeft className="h-5 w-5 text-custom-primary-100" aria-hidden="true" />
+                      </div>
+                    </div>
+                    <div className="flex flex-col py-3 gap-y-6">
+                      <Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-custom-text-100">
+                        Switch account
+                      </Dialog.Title>
+                      {userData?.email && (
+                        <div className="text-base font-normal text-custom-text-200">
+                          If you have signed up via <span className="text-custom-primary-100">{userData.email}</span>{" "}
+                          un-intentionally, you can switch your account to a different one from here.
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
+                  <Button variant="accent-primary" onClick={handleSwitchAccount} disabled={switchingAccount}>
+                    {switchingAccount ? "Switching..." : "Switch account"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

apps/web/core/components/onboarding/tour/index.ts

@@ -0,0 +1 @@
+export * from "./root";

apps/web/core/components/onboarding/tour/root.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import type { StaticImageData } from "next/image";
+import Image from "next/image";
+import { X } from "lucide-react";
+// plane imports
+import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { PlaneLockup } from "@plane/propel/icons";
+// helpers
+import { captureClick } from "@/helpers/event-tracker.helper";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUser } from "@/hooks/store/user";
+// assets
+import CyclesTour from "@/public/onboarding/cycles.webp";
+import IssuesTour from "@/public/onboarding/issues.webp";
+import ModulesTour from "@/public/onboarding/modules.webp";
+import PagesTour from "@/public/onboarding/pages.webp";
+import ViewsTour from "@/public/onboarding/views.webp";
+// local imports
+import { TourSidebar } from "./sidebar";
+
+type Props = {
+  onComplete: () => void;
+};
+
+export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
+
+const TOUR_STEPS: {
+  key: TTourSteps;
+  title: string;
+  description: string;
+  image: StaticImageData;
+  prevStep?: TTourSteps;
+  nextStep?: TTourSteps;
+}[] = [
+  {
+    key: "work-items",
+    title: "Plan with work items",
+    description:
+      "The work item is the building block of the Plane. Most concepts in Plane are either associated with work items and their properties.",
+    image: IssuesTour,
+    nextStep: "cycles",
+  },
+  {
+    key: "cycles",
+    title: "Move with cycles",
+    description:
+      "Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
+    image: CyclesTour,
+    prevStep: "work-items",
+    nextStep: "modules",
+  },
+  {
+    key: "modules",
+    title: "Break into modules",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
+    image: ModulesTour,
+    prevStep: "cycles",
+    nextStep: "views",
+  },
+  {
+    key: "views",
+    title: "Views",
+    description:
+      "Create custom filters to display only the work items that matter to you. Save and share your filters in just a few clicks.",
+    image: ViewsTour,
+    prevStep: "modules",
+    nextStep: "pages",
+  },
+  {
+    key: "pages",
+    title: "Document with pages",
+    description: "Use Pages to quickly jot down work items when you're in a meeting or starting a day.",
+    image: PagesTour,
+    prevStep: "views",
+  },
+];
+
+export const TourRoot: React.FC<Props> = observer((props) => {
+  const { onComplete } = props;
+  // states
+  const [step, setStep] = useState<TTourSteps>("welcome");
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { data: currentUser } = useUser();
+
+  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
+  const currentStep = TOUR_STEPS[currentStepIndex];
+
+  return (
+    <>
+      {step === "welcome" ? (
+        <div className="h-3/4 w-4/5 overflow-hidden rounded-[10px] bg-custom-background-100 md:w-1/2 lg:w-2/5">
+          <div className="h-full overflow-hidden">
+            <div className="grid h-3/5 place-items-center bg-custom-primary-100">
+              <PlaneLockup className="h-10 w-auto text-custom-text-100" />
+            </div>
+            <div className="flex h-2/5 flex-col overflow-y-auto p-6">
+              <h3 className="font-semibold sm:text-xl">
+                Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
+              </h3>
+              <p className="mt-3 text-sm text-custom-text-200">
+                We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
+                started by creating a project.
+              </p>
+              <div className="flex h-full items-end">
+                <div className="mt-8 flex items-center gap-6">
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.START_BUTTON,
+                      });
+                      setStep("work-items");
+                    }}
+                  >
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="bg-transparent text-xs font-medium text-custom-primary-100 outline-custom-text-100"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.SKIP_BUTTON,
+                      });
+                      onComplete();
+                    }}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-custom-background-100 sm:h-3/4 md:w-1/2 lg:w-3/5">
+          <button
+            type="button"
+            className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            onClick={onComplete}
+          >
+            <X className="h-3 w-3 text-custom-text-100" />
+          </button>
+          <TourSidebar step={step} setStep={setStep} />
+          <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
+            <div
+              className={`flex h-1/2 items-end overflow-hidden bg-custom-primary-100 sm:h-3/5 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
+              <Image src={currentStep?.image} alt={currentStep?.title} />
+            </div>
+            <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
+              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
+              <p className="mt-3 text-sm text-custom-text-200">{currentStep?.description}</p>
+              <div className="mt-3 flex h-full items-end justify-between gap-4">
+                <div className="flex items-center gap-4">
+                  {currentStep?.prevStep && (
+                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                      Back
+                    </Button>
+                  )}
+                  {currentStep?.nextStep && (
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
+                      Next
+                    </Button>
+                  )}
+                </div>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      captureClick({
+                        elementName: PRODUCT_TOUR_TRACKER_ELEMENTS.CREATE_PROJECT_BUTTON,
+                      });
+                      onComplete();
+                      toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create your first project
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

apps/web/core/components/onboarding/tour/sidebar.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+// icons
+import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+// types
+import type { TTourSteps } from "./root";
+
+const sidebarOptions: {
+  key: TTourSteps;
+  label: string;
+  Icon: any;
+}[] = [
+  {
+    key: "work-items",
+    label: "Work items",
+    Icon: WorkItemsIcon,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    Icon: CycleIcon,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    Icon: ModuleIcon,
+  },
+  {
+    key: "views",
+    label: "Views",
+    Icon: ViewsIcon,
+  },
+  {
+    key: "pages",
+    label: "Pages",
+    Icon: PageIcon,
+  },
+];
+
+type Props = {
+  step: TTourSteps;
+  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
+};
+
+export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
+  <div className="col-span-3 hidden bg-custom-background-90 p-8 lg:block">
+    <h3 className="text-lg font-medium">
+      Let{"'"}s get started!
+      <br />
+      Get more out of Plane.
+    </h3>
+    <div className="mt-8 space-y-5">
+      {sidebarOptions.map((option) => (
+        <h5
+          key={option.key}
+          className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pl-3 pr-2 text-sm font-medium capitalize ${
+            step === option.key
+              ? "border-custom-primary-100 text-custom-primary-100"
+              : "border-transparent text-custom-text-200"
+          }`}
+          onClick={() => setStep(option.key)}
+          role="button"
+        >
+          <option.Icon className="h-4 w-4" aria-hidden="true" />
+          {option.label}
+        </h5>
+      ))}
+    </div>
+  </div>
+);