snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { AlertOctagonOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useInstance } from "@/hooks/store/use-instance";
+// 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 = observer(function CreateOrJoinWorkspaces(props: Props) {
+  const { invitations, stepChange, finishOnboarding } = props;
+  // states
+  const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
+  // store hooks
+  const { data: user } = useUser();
+  const { config } = useInstance();
+  // derived values
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? 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="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
+          {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
+            <Invitations
+              invitations={invitations}
+              handleNextStep={handleNextStep}
+              handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
+            />
+          ) : currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE ? (
+            !isWorkspaceCreationDisabled ? (
+              <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="mt-4 flex w-full items-start justify-center gap-2.5 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-6 py-4 text-13 leading-5 text-accent-secondary">
+                  <AlertOctagonOutline className="mt-1 size-5 flex-shrink-0" />
+                  <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,275 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// constants
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } 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, Spinner } from "@plane/ui";
+import { validateWorkspaceName, validateSlug } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+type Props = {
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  user: IUser | undefined;
+  invitedWorkspaces: number;
+  handleCurrentViewChange: () => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspace = observer(function CreateWorkspace(props: 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;
+
+    try {
+      const res = await workspaceService.workspaceSlugCheck(formData.slug);
+      if (res?.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        const workspaceResponse = await createWorkspace(formData);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("workspace_creation.toast.success.title"),
+          message: t("workspace_creation.toast.success.message"),
+        });
+        await fetchWorkspaces();
+        await completeStep(workspaceResponse.id);
+      } else setSlugError(true);
+    } catch (_error) {
+      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="ghost"
+            size="xl"
+            className="flex w-full items-center gap-2 bg-surface-2 text-14"
+            onClick={handleCurrentViewChange}
+          >
+            I want to join invited workspaces{" "}
+            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
+              {invitedWorkspaces}
+            </span>
+          </Button>
+          <div className="mx-auto mt-4 flex items-center sm:w-96">
+            <hr className="w-full border-strong" />
+            <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+            <hr className="w-full border-strong" />
+          </div>
+        </>
+      )}
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">{t("workspace_creation.heading")}</h3>
+        <p className="font-medium text-placeholder">{t("workspace_creation.subheading")}</p>
+      </div>
+      <form className="mx-auto mt-2 w-full space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) => validateWorkspaceName(value, true),
+              maxLength: {
+                value: 80,
+                message: t("workspace_creation.errors.validation.name_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div className="relative flex items-center rounded-md">
+                <Field name="name" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      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}
+                      autoFocus
+                    />
+                  </InputGroup>
+                </Field>
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
+        </div>
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            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 } }) => (
+              <Field name="slug" invalid={invalidSlug || Boolean(errors.slug)}>
+                <InputGroup size="2xl">
+                  <span className="text-13 whitespace-nowrap">{window && window.location.host}/</span>
+                  <Input
+                    size="2xl"
+                    id="slug"
+                    name="slug"
+                    type="text"
+                    value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                    onChange={(e) => {
+                      const validation = validateSlug(e.target.value);
+                      if (validation === true) setInvalidSlug(false);
+                      else setInvalidSlug(true);
+                      onChange(e.target.value.toLowerCase());
+                    }}
+                    ref={ref}
+                    placeholder={t("workspace_creation.form.url.placeholder")}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <hr className="w-full border-strong" />
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            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-placeholder">
+                        {t("workspace_creation.form.organization_size.placeholder")}
+                      </span>
+                    )
+                  }
+                  buttonClassName="border border-subtle bg-layer-2 !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-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+        <Button variant="primary" type="submit" size="xl" 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,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PlaneLockup } from "@plane/propel/icons";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TOnboardingStep } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+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 = observer(function OnboardingHeader(props: OnboardingHeaderProps) {
+  const { currentStep, updateCurrentStep, hasInvitations } = props;
+  // store hooks
+  const { data: user } = useUser();
+  const { config: instanceConfig } = useInstance();
+  const isSelfManaged = instanceConfig?.is_self_managed;
+
+  // 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(isSelfManaged ? EOnboardingSteps.PROFILE_SETUP : EOnboardingSteps.USE_CASE_SETUP);
+        break;
+    }
+  };
+
+  // can go back
+  const canGoBack = ![EOnboardingSteps.PROFILE_SETUP, EOnboardingSteps.INVITE_MEMBERS].includes(currentStep);
+
+  // step order for progress tracking — include INVITE_MEMBERS if user is currently on it
+  const showInviteStep = !hasInvitations || currentStep === EOnboardingSteps.INVITE_MEMBERS;
+  const stepOrder: TOnboardingStep[] = [
+    EOnboardingSteps.PROFILE_SETUP,
+    ...(isSelfManaged ? [] : [EOnboardingSteps.ROLE_SETUP, EOnboardingSteps.USE_CASE_SETUP]),
+    EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN,
+    ...(showInviteStep ? [EOnboardingSteps.INVITE_MEMBERS] : []),
+  ];
+
+  // derived values
+  const currentStepNumber = stepOrder.indexOf(currentStep) + 1;
+  const totalSteps = stepOrder.length;
+  const userName = user?.display_name
+    ? user?.display_name
+    : user?.first_name
+      ? `${user?.first_name} ${user?.last_name ?? ""}`
+      : user?.email;
+
+  return (
+    <div className="sticky top-0 z-10 flex flex-col gap-4">
+      <div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-t-lg bg-surface-1">
+        <Tooltip label={`${currentStepNumber}/${totalSteps}`} side="bottom" align="end">
+          <div
+            className="h-full bg-accent-primary transition-all duration-700 ease-out"
+            style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
+          />
+        </Tooltip>
+      </div>
+      <div className={cn("flex w-full items-center justify-between gap-6 px-6", canGoBack && "pr-6 pl-4")}>
+        <div className="flex items-center gap-2.5">
+          {canGoBack && (
+            <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
+              <ChevronLeftOutline className="size-6 text-placeholder" />
+            </button>
+          )}
+          <PlaneLockup height={20} width={95} className="text-primary" />
+        </div>
+        <SwitchAccountDropdown fullName={userName} />
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { ROLE } from "@plane/constants";
+// types
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+// ui
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+// helpers
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export function Invitations(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 });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error) {
+      console.error(error);
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div className="space-y-4">
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">You are invited!</h3>
+        <p className="font-medium text-placeholder">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-sm border border-subtle p-3.5 hover:bg-surface-2`}
+                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-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
+                </div>
+                <span className="pointer-events-none flex-shrink-0">
+                  <Checkbox checked={isSelected} aria-label={invitedWorkspace?.name ?? "Select workspace invitation"} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <Button
+        variant="primary"
+        size="xl"
+        className="w-full"
+        onClick={submitInvitations}
+        disabled={isJoiningWorkspaces || !invitationsRespond.length}
+      >
+        {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-strong" />
+        <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+        <hr className="w-full border-strong" />
+      </div>
+      <Button
+        variant="ghost"
+        size="xl"
+        className="w-full bg-surface-2 text-14"
+        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,409 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 { AddOutline, ChevronDownOutline, CloseCircleOutline, TickOutline } from "@makeplane/propel/icons";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } 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 { Spinner } from "@plane/ui";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// 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 = observer(function InviteMemberInput(props: InviteMemberFormProps) {
+  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 } }) => (
+              <Field name="input" invalid={Boolean(errors.emails?.[index]?.email)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id={`emails.${index}.email`}
+                    name={`emails.${index}.email`}
+                    type="text"
+                    value={value}
+                    onChange={(event) => {
+                      emailOnChange(event);
+                      onChange(event);
+                    }}
+                    ref={ref}
+                    placeholder={placeholderEmails[index % placeholderEmails.length]}
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </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 border-[0.5px] border-strong px-2.5 py-2 text-13"
+                >
+                  <span
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDownOutline
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
+                    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 truncate rounded-sm px-1 py-1.5 select-none ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center gap-2 p-1 text-wrap">
+                            <div className="flex flex-col">
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <TickOutline 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-sm group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <CloseCircleOutline className="h-5 w-5 pl-0.5 text-placeholder" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export function InviteMembers(props: Props) {
+  const { finishOnboarding, 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 () => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+        await nextStep();
+      })
+      .catch((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 h-full w-full">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mx-auto mt-6 flex w-full flex-col items-center justify-center p-8 md:w-4/5">
+          <div className="mx-auto w-4/5 space-y-1 py-4 text-center">
+            <h3 className="text-24 font-bold text-primary">Invite your teammates</h3>
+            <p className="font-medium text-placeholder">
+              Work in plane happens best with your team. Invite them now to use Plane to its potential.
+            </p>
+          </div>
+          <form
+            className="mx-auto mt-2 w-full space-y-4"
+            onSubmit={handleSubmit(onSubmit)}
+            onKeyDown={(e) => {
+              if (e.code === "Enter") e.preventDefault();
+            }}
+          >
+            <div className="w-full py-4 text-13">
+              <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+                <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+                <div className="col-span-4 px-1 text-13 font-medium text-secondary">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="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+                onClick={appendField}
+              >
+                <AddOutline className="h-4 w-4" />
+                Add another
+              </button>
+            </div>
+            <div className="mx-auto flex w-full max-w-96 flex-col items-center justify-center gap-4 px-8 sm:px-2">
+              <Button
+                variant="primary"
+                type="submit"
+                size="xl"
+                className="w-full"
+                disabled={isInvitationDisabled || !isValid || isSubmitting}
+              >
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+              <Button variant="ghost" size="xl" 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,562 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { E_PASSWORD_STRENGTH } 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 { PasswordStrengthIndicator, Spinner } from "@plane/ui";
+// components
+import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// hooks
+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: [],
+};
+
+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 = observer(function ProfileSetup(props: 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 });
+  };
+
+  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 && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        updateUserProfile(profileUpdatePayload),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      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 {
+      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) {
+        } else {
+          setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
+        }
+      });
+    } catch {
+      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 && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      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 {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!url) return;
+    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="mt-6 flex w-full flex-col items-center justify-center p-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="mx-auto mt-2 w-full 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="flex items-center justify-center space-y-1">
+                <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 top-0 left-0 flex h-full w-full items-center justify-center rounded-full bg-accent-primary text-24 font-medium text-on-color uppercase">
+                          {watch("first_name")[0] ?? "R"}
+                        </div>
+                      </div>
+                      <div className="pt-1 text-13 font-medium text-accent-secondary hover:text-tertiary">
+                        Choose image
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="relative mr-3 h-16 w-16 overflow-hidden">
+                      <img
+                        src={getFileURL(userAvatar ?? "")}
+                        className="absolute top-0 left-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 gap-4 sm:grid-cols-2">
+                <div className="space-y-1">
+                  <label
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                    htmlFor="first_name"
+                  >
+                    First name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="first_name"
+                    rules={{
+                      required: "First name is required",
+                      validate: validatePersonName,
+                      maxLength: {
+                        value: 50,
+                        message: "First name must be within 50 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Field name="first_name" invalid={Boolean(errors.first_name)}>
+                        <InputGroup size="2xl">
+                          <Input
+                            size="2xl"
+                            id="first_name"
+                            name="first_name"
+                            type="text"
+                            value={value}
+                            autoFocus
+                            onChange={onChange}
+                            ref={ref}
+                            placeholder="Wilbur"
+                            autoComplete="on"
+                          />
+                        </InputGroup>
+                      </Field>
+                    )}
+                  />
+                  {errors.first_name && (
+                    <span className="text-13 text-danger-primary">{errors.first_name.message}</span>
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <label
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                    htmlFor="last_name"
+                  >
+                    Last name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="last_name"
+                    rules={{
+                      required: "Last name is required",
+                      validate: validatePersonName,
+                      maxLength: {
+                        value: 50,
+                        message: "Last name must be within 50 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Field name="last_name" invalid={Boolean(errors.last_name)}>
+                        <InputGroup size="2xl">
+                          <Input
+                            size="2xl"
+                            id="last_name"
+                            name="last_name"
+                            type="text"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            placeholder="Wright"
+                            autoComplete="on"
+                          />
+                        </InputGroup>
+                      </Field>
+                    )}
+                  />
+                  {errors.last_name && <span className="text-13 text-danger-primary">{errors.last_name.message}</span>}
+                </div>
+              </div>
+
+              {/* setting up password for the first time */}
+              {!isPasswordAlreadySetup && (
+                <>
+                  <div className="space-y-1">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                      Set a password ({t("common.optional")})
+                    </label>
+                    <Controller
+                      control={control}
+                      name="password"
+                      rules={{
+                        required: false,
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Field name="password" invalid={Boolean(errors.password)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              type={showPassword.password ? "text" : "password"}
+                              name="password"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder="New password..."
+                              onFocus={() => setIsPasswordInputFocused(true)}
+                              onBlur={() => setIsPasswordInputFocused(false)}
+                              autoComplete="new-password"
+                              aria-label="New password..."
+                            />
+                            <button
+                              type="button"
+                              className="grid size-5 place-items-center"
+                              onClick={() => handleShowPassword("password")}
+                            >
+                              {showPassword.password ? (
+                                <HideOutline className="size-4 text-placeholder" />
+                              ) : (
+                                <ShowOutline className="size-4 text-placeholder" />
+                              )}
+                            </button>
+                          </InputGroup>
+                        </Field>
+                      )}
+                    />
+                    <PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-13 font-medium text-tertiary" 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 } }) => (
+                        <Field name="confirm_password" invalid={Boolean(errors.confirm_password)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              type={showPassword.retypePassword ? "text" : "password"}
+                              name="confirm_password"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder={t("auth.common.password.confirm_password.placeholder")}
+                              autoComplete="new-password"
+                              aria-label={t("auth.common.password.confirm_password.placeholder")}
+                            />
+                            <button
+                              type="button"
+                              className="grid size-5 place-items-center"
+                              onClick={() => handleShowPassword("retypePassword")}
+                            >
+                              {showPassword.retypePassword ? (
+                                <HideOutline className="size-4 text-placeholder" />
+                              ) : (
+                                <ShowOutline className="size-4 text-placeholder" />
+                              )}
+                            </button>
+                          </InputGroup>
+                        </Field>
+                      )}
+                    />
+                    {errors.confirm_password && (
+                      <span className="text-13 text-danger-primary">{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-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                  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 overflow-auto py-2 break-all">
+                      {USER_ROLE.map((userRole) => (
+                        <div
+                          key={userRole}
+                          className={cn(
+                            "shrink-0 rounded border-[0.5px] px-3 py-1.5 text-13 font-medium hover:cursor-pointer hover:bg-surface-2",
+                            {
+                              "border-accent-strong": value === userRole,
+                              "border-strong": value !== userRole,
+                            }
+                          )}
+                          onClick={() => onChange(userRole)}
+                        >
+                          {userRole}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                />
+                {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
+              </div>
+              <div className="space-y-1">
+                <label
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                  htmlFor="use_case"
+                >
+                  What is your domain expertise? Choose one or more.
+                </label>
+                <Controller
+                  control={control}
+                  name="use_case"
+                  rules={{
+                    required: "Please select at least one option",
+                    validate: (value) => (value && value.length > 0) || "Please select at least one option",
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
+                      {USER_DOMAIN.map((userDomain) => {
+                        const isSelected = value?.includes(userDomain) || false;
+                        return (
+                          <div
+                            key={userDomain}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 ${
+                              isSelected ? "border-accent-strong" : "border-strong"
+                            } rounded px-3 py-1.5 text-13 font-medium`}
+                            onClick={() => {
+                              const currentValue = value || [];
+                              if (isSelected) {
+                                onChange(currentValue.filter((item) => item !== userDomain));
+                              } else {
+                                onChange([...currentValue, userDomain]);
+                              }
+                            }}
+                          >
+                            {userDomain}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                />
+                {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
+              </div>
+            </>
+          )}
+          <Button variant="primary" type="submit" size="xl" 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,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceMemberInvitation, TOnboardingStep, TOnboardingSteps, TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+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 = observer(function OnboardingRoot({ invitations = [] }: Props) {
+  const [currentStep, setCurrentStep] = useState<TOnboardingStep>(EOnboardingSteps.PROFILE_SETUP);
+  // store hooks
+  const { data: user } = useUser();
+  const { data: userProfile, updateUserProfile, finishUserOnboarding } = useUserProfile();
+  const { workspaces } = useWorkspace();
+  const { config: instanceConfig } = useInstance();
+
+  const workspacesList = Object.values(workspaces ?? {});
+  const isSelfManaged = instanceConfig?.is_self_managed;
+
+  // Calculate total steps based on whether invitations are available
+  const hasInvitations = invitations.length > 0;
+
+  // complete onboarding
+  const finishOnboarding = useCallback(async () => {
+    if (!user) return;
+    try {
+      await finishUserOnboarding();
+    } catch (_error) {
+      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:
+          if (isSelfManaged) {
+            // Skip role & use case steps for self-hosted
+            stepChange({ profile_complete: true });
+            if (workspacesList.length > 0) finishOnboarding();
+            else setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+          } else {
+            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, isSelfManaged]
+  );
+
+  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 h-full flex-col">
+      {/* 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,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+interface OnboardingStepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingStepIndicatorProps) {
+  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("-ml-0.5 h-1.5 w-full", {
+            "bg-success-primary": isCompleted,
+            "bg-surface-1": !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-13 font-medium text-tertiary">
+        {currentStep} of {totalSteps} steps
+      </div>
+      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">{renderIndicators()}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+export function CommonOnboardingHeader({ title, description }: Props) {
+  return (
+    <div className="space-y-2 text-left">
+      <h1 className="text-h4-semibold text-primary">{title}</h1>
+      <p className="text-body-md-regular text-tertiary">{description}</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./header";

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  isChecked: boolean;
+  handleChange: (checked: boolean) => void;
+};
+
+export function MarketingConsent({ isChecked, handleChange }: Props) {
+  return (
+    <div className="flex items-center justify-center gap-1.5">
+      <button
+        type="button"
+        onClick={() => handleChange(!isChecked)}
+        className={`flex size-4 items-center justify-center rounded-sm border-2 ${
+          isChecked ? "border-accent-strong bg-accent-primary" : "border-strong"
+        }`}
+      >
+        {isChecked && <TickOutline className="h-3 w-3 text-on-color" />}
+      </button>
+      <span className="text-13 text-tertiary">I agree to Plane marketing communications</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { ImageOutline } from "@makeplane/propel/icons";
+// plane imports
+import { E_PASSWORD_STRENGTH } 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, validatePersonName } from "@plane/utils";
+// components
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+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 = observer(function ProfileSetupStep({ handleStepChange }: Props) {
+  // states
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store hooks
+  const { data: user, updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  const { config: instanceConfig } = useInstance();
+  // 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 {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    updateUserProfile({
+      has_marketing_email_consent: formData.has_marketing_email_consent,
+    });
+    await handleSubmitUserDetail(formData);
+    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="flex size-12 items-center justify-center rounded-full bg-accent-primary text-18 font-semibold text-on-color"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          {userAvatar ? (
+            <img
+              src={getFileURL(userAvatar ?? "")}
+              onClick={() => setIsImageUploadModalOpen(true)}
+              alt={user?.display_name}
+              className="h-full w-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 px-2 py-1 text-13 text-tertiary hover:text-secondary"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          <ImageOutline className="size-4" />
+          <span className="text-13">{userAvatar ? "Change image" : "Upload image"}</span>
+        </button>
+      </div>
+
+      <div className="flex w-full flex-col gap-6">
+        {/* Name Input */}
+        <div className="flex flex-col gap-2">
+          <label
+            className="block text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="first_name"
+          >
+            Name
+          </label>
+          <Controller
+            control={control}
+            name="first_name"
+            rules={{
+              required: "Name is required",
+              validate: validatePersonName,
+              maxLength: {
+                value: 50,
+                message: "Name must be within 50 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 rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                  {
+                    "border-strong": !errors.first_name,
+                    "border-danger-strong": errors.first_name,
+                  }
+                )}
+                placeholder="Enter your full name"
+                autoComplete="on"
+              />
+            )}
+          />
+          {errors.first_name && <span className="text-13 text-danger-primary">{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="xl" disabled={isButtonDisabled}>
+        Continue
+      </Button>
+
+      {/* Marketing Consent */}
+      {!instanceConfig?.is_self_managed && (
+        <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,133 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import { ChevronDownOutline, LockOutline } from "@makeplane/propel/icons";
+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 function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, disabled = false }: SetPasswordRootProps) {
+  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-placeholder 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 overflow-hidden rounded-lg bg-surface-2 transition-all duration-300 ease-in-out`}>
+      <div
+        className={cn(
+          "flex items-center justify-between px-3 py-2 text-13 transition-colors duration-200",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          isExpanded && "pb-1"
+        )}
+        onClick={handleToggleExpand}
+      >
+        <div className="flex items-center gap-1 text-tertiary">
+          <LockOutline className="size-3" />
+          <span className="font-medium">Set a password</span>
+          <span>{`(Optional)`}</span>
+        </div>
+        <div className="flex items-center gap-2 text-placeholder">
+          <ChevronDownOutline className={chevronIconClasses} />
+        </div>
+      </div>
+
+      <div className={expandedContentClasses}>
+        {/* Password input */}
+        <div className="flex transform flex-col gap-2 pt-1 transition-all duration-300 ease-in-out">
+          <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="transform text-13 font-medium text-tertiary transition-all delay-75 duration-300 ease-in-out">
+            Confirm password
+          </div>
+
+          {/* Confirm password input */}
+          <div className="transform transition-all delay-100 duration-300 ease-in-out">
+            <PasswordInput
+              id="confirm-password"
+              value={passwordState.confirmPassword}
+              onChange={(value) => handlePasswordChange("confirmPassword", value)}
+              placeholder="Confirm password"
+              className="transition-all duration-200"
+            />
+            {hasPasswordMismatch && <p className="mt-1 text-11 text-danger-primary">Passwords do not match</p>}
+            {isPasswordValid && <p className="mt-1 text-11 text-success-primary">✓ Passwords match</p>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { PenTool } from "lucide-react";
+import {
+  CubeOutline,
+  MonitorOutline,
+  RefreshOutline,
+  RocketOutline,
+  TickOutline,
+  ViewsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+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";
+// 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: CubeOutline },
+  { id: "engineering-manager", label: "Engineering Manager", icon: ViewsOutline },
+  { id: "designer", label: "Designer", icon: PenTool },
+  { id: "developer", label: "Developer", icon: MonitorOutline },
+  { id: "founder-executive", label: "Founder/Executive", icon: RocketOutline },
+  { id: "operations-manager", label: "Operations Manager", icon: RefreshOutline },
+  { id: "others", label: "Others", icon: CubeOutline },
+];
+
+const defaultValues = {
+  role: "",
+};
+
+export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange }: Props) {
+  // 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 }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    await handleSubmitUserPersonalization(formData);
+    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-body-sm-semibold text-placeholder">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={`flex w-full items-center justify-between rounded-lg border px-3 py-2 transition-all duration-200 ${
+                      isSelected
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
+                    }`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Icon className="size-3.5" />
+                      <span className="text-body-sm-semibold">{role.label}</span>
+                    </div>
+                    {isSelected && (
+                      <>
+                        <button
+                          className={`border-blue-500 flex size-4 items-center justify-center rounded-sm border-2 bg-accent-primary`}
+                        >
+                          <TickOutline className="h-3 w-3 text-on-color" />
+                        </button>
+                      </>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
+      </div>
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});

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

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, 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;
+};
+
+function OnboardingStepContent({ currentStep, invitations, handleStepChange }: Props) {
+  switch (currentStep) {
+    case EOnboardingSteps.PROFILE_SETUP:
+      return <ProfileSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.ROLE_SETUP:
+      return <RoleSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.USE_CASE_SETUP:
+      return <UseCaseSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+      return <WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.INVITE_MEMBERS:
+      return <InviteTeamStep handleStepChange={handleStepChange} />;
+    default:
+      return null;
+  }
+}
+
+export function OnboardingStepRoot(props: Props) {
+  const { currentStep } = 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]);
+
+  return (
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
+      <div className="flex min-h-full items-center justify-center p-8">
+        <div className="w-full max-w-[24rem]">
+          <OnboardingStepContent {...props} />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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";
+import { usePopper } from "react-popper";
+import { AddOutline, ChevronDownOutline, CloseCircleOutline, TickOutline } from "@makeplane/propel/icons";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EOnboardingSteps } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// 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 = observer(function InviteMemberInput(props: InviteMemberFormProps) {
+  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 } }) => (
+              <Field name="input" invalid={Boolean(errors.emails?.[index]?.email)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id={`emails.${index}.email`}
+                    name={`emails.${index}.email`}
+                    type="text"
+                    value={value}
+                    onChange={(event) => {
+                      emailOnChange(event);
+                      onChange(event);
+                    }}
+                    ref={ref}
+                    placeholder={placeholderEmails[index % placeholderEmails.length]}
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </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 border-[0.5px] border-strong px-2.5 py-2 text-13"
+                >
+                  <span
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDownOutline
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
+                    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 truncate rounded-sm px-1 py-1.5 select-none ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center gap-2 p-1 text-wrap">
+                            <div className="flex flex-col">
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <TickOutline 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-sm group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <CloseCircleOutline className="h-5 w-5 pl-0.5 text-placeholder" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const InviteTeamStep = observer(function InviteTeamStep(props: 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 () => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+        await nextStep();
+      })
+      .catch((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 py-4 text-13">
+        <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+          <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+          <div className="col-span-4 px-1 text-13 font-medium text-secondary">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="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+          onClick={appendField}
+        >
+          <AddOutline className="h-4 w-4" />
+          Add another
+        </button>
+      </div>
+      <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 px-8 sm:px-2">
+        <Button
+          variant="primary"
+          type="submit"
+          size="xl"
+          className="w-full"
+          disabled={isInvitationDisabled || !isValid || isSubmitting}
+        >
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button variant="ghost" size="xl" 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,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

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

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { USE_CASES } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TickOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// 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: [] as string[],
+};
+
+export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepChange }: Props) {
+  // 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 ? profile.use_case.split(". ") : [],
+    },
+    mode: "onChange",
+  });
+
+  // handle submit
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        // totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  // on submit
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    await handleSubmitUserPersonalization(formData);
+    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-body-sm-semibold text-placeholder">Select one or more</p>
+
+        <Controller
+          control={control}
+          name="use_case"
+          rules={{
+            required: "Please select at least one option",
+            validate: (value) => (value && value.length > 0) || "Please select at least one option",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <div className="flex flex-col gap-3">
+              {USE_CASES.map((useCase) => {
+                const isSelected = value?.includes(useCase) || false;
+                return (
+                  <button
+                    key={useCase}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const currentValue = value || [];
+                      if (isSelected) {
+                        // Remove from array
+                        onChange(currentValue.filter((item) => item !== useCase));
+                      } else {
+                        // Add to array
+                        onChange([...currentValue, useCase]);
+                      }
+                    }}
+                    className={`flex w-full items-center gap-2 rounded-lg border px-3 py-2 transition-all duration-200 ${
+                      isSelected
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
+                    }`}
+                  >
+                    <span
+                      className={cn(`flex size-4 items-center justify-center rounded-sm border-2`, {
+                        "border-accent-strong bg-accent-primary": isSelected,
+                        "border-strong": !isSelected,
+                      })}
+                    >
+                      <TickOutline
+                        className={cn("h-3 w-3 text-on-color", {
+                          "opacity-100": isSelected,
+                          "opacity-0": !isSelected,
+                        })}
+                      />
+                    </span>
+
+                    <span className="text-body-sm-regular">{useCase}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="ghost" onClick={handleSkip} className="w-full" size="xl">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});

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

@@ -0,0 +1,304 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { TickCircleOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } 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, validateWorkspaceName, validateSlug } from "@plane/utils";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// 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 = observer(function WorkspaceCreateStep({
+  user,
+  onComplete,
+  handleCurrentViewChange,
+  hasInvitations = false,
+}: Props) {
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { config } = useInstance();
+  const { updateUserProfile } = useUserProfile();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
+
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? 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;
+
+    try {
+      const res = (await workspaceService.workspaceSlugCheck(formData.slug)) as { status: boolean };
+      if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_creation.toast.success.title"),
+            message: t("workspace_creation.toast.success.message"),
+          });
+          await fetchWorkspaces();
+          await completeStep(workspaceResponse.id);
+          onComplete(formData.organization_size === "Just myself");
+        } catch {
+          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 (isWorkspaceCreationDisabled) {
+    return (
+      <div className="flex flex-col gap-10">
+        <span className="text-center text-14 text-tertiary">
+          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={(e) => {
+        void handleSubmit(handleCreateWorkspace)(e);
+      }}
+    >
+      <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-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) => validateWorkspaceName(value, true),
+              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 rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                    {
+                      "border-strong": !errors.name,
+                      "border-danger-strong": errors.name,
+                    }
+                  )}
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                />
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            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 w-full items-center rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                  {
+                    "border-strong": !errors.name,
+                    "border-danger-strong": errors.name,
+                  }
+                )}
+              >
+                <span className={cn("rounded-md pr-0 whitespace-nowrap text-secondary")}>
+                  {window && window.location.host}/
+                </span>
+                <input
+                  id="slug"
+                  name="slug"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    const validation = validateSlug(e.target.value);
+                    if (validation === true) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  placeholder={t("workspace_creation.form.url.placeholder")}
+                  className={cn(
+                    "ring-none w-full rounded-md border-none bg-surface-1 px-3 py-0 pl-0 text-secondary outline-none placeholder:text-placeholder"
+                  )}
+                />
+              </div>
+            )}
+          />
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            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={`flex items-center justify-between gap-1 rounded-lg border px-3 py-2 text-13 transition-all duration-200 ${
+                          isSelected
+                            ? "border-subtle bg-layer-1 text-secondary"
+                            : "border-subtle text-tertiary hover:border-strong"
+                        }`}
+                      >
+                        <TickCircleOutline className={cn("size-4 text-placeholder", isSelected && "text-secondary")} />
+
+                        <span className="font-medium">{size}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+        </Button>
+        {hasInvitations && (
+          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
+            Join existing workspace
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+});

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create";
+export * from "./join-invites";
+export * from "./root";

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

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { ROLE } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// local components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export function WorkspaceJoinInvitesStep(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 });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error: any) {
+      console.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 border-subtle px-3 py-2 hover:bg-surface-2`}
+                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-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
+                </div>
+                <span className="pointer-events-none flex-shrink-0">
+                  <Checkbox checked={isSelected} aria-label={invitedWorkspace?.name ?? "Select workspace invitation"} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button
+          variant="primary"
+          size="xl"
+          className="w-full"
+          onClick={submitInvitations}
+          disabled={isJoiningWorkspaces || !invitationsRespond.length}
+        >
+          {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button
+          variant="ghost"
+          size="xl"
+          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,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function WorkspaceSetupStep({ invitations, handleStepChange }: Props) {
+  // 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,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 = observer(function SwitchAccountDropdown(props: TSwitchAccountDropdownProps) {
+  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="z-10 flex items-center gap-x-2.5 rounded-lg bg-layer-1 px-2 py-1.5">
+          <div className="flex size-6 items-center justify-center rounded-full bg-success-primary text-13 font-semibold text-on-color capitalize">
+            {user?.avatar_url ? (
+              <img
+                src={getFileURL(user?.avatar_url)}
+                alt={user?.display_name}
+                className="h-full w-full rounded-full object-cover"
+              />
+            ) : (
+              <>{fullName?.[0] ?? "R"}</>
+            )}
+          </div>
+          <span className="text-13 font-medium text-secondary">{displayName}</span>
+        </Menu.Button>
+        <Transition
+          as="div"
+          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 right-0 z-10 mt-2 min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-13 shadow-raised-200">
+            <Menu.Item
+              as="button"
+              type="button"
+              className={({ active }) =>
+                cn("w-full rounded-sm px-1 py-1.5 text-left whitespace-nowrap text-danger-primary", {
+                  "bg-layer-1": 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,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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 function SwitchAccountModal(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-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-surface-1 text-left shadow-raised-200 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-accent-primary/20 p-4">
+                        <ArrowRightLeft className="h-5 w-5 text-accent-primary" aria-hidden="true" />
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-y-6 py-3">
+                      <Dialog.Title as="h3" className="text-20 leading-6 font-medium text-primary">
+                        Switch account
+                      </Dialog.Title>
+                      {userData?.email && (
+                        <div className="text-14 font-regular text-secondary">
+                          If you have signed up via <span className="text-accent-primary">{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="secondary" size="lg" 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/root.tsx

@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { PlaneLockup } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// assets
+import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
+import IssuesTour from "@/app/assets/onboarding/issues.webp?url";
+import ModulesTour from "@/app/assets/onboarding/modules.webp?url";
+import PagesTour from "@/app/assets/onboarding/pages.webp?url";
+import ViewsTour from "@/app/assets/onboarding/views.webp?url";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { TourSidebar } from "./sidebar";
+
+export type TOnboardingTourProps = {
+  onComplete: () => void;
+};
+
+export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
+
+const TOUR_STEPS: {
+  key: TTourSteps;
+  title: string;
+  description: string;
+  image: string;
+  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 = observer(function TourRoot(props: TOnboardingTourProps) {
+  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="w-4/5 overflow-hidden rounded-[10px] bg-surface-1 md:w-1/2 lg:w-2/5">
+          <div className="h-full overflow-hidden">
+            <div className="grid h-64 place-items-center bg-accent-primary">
+              <PlaneLockup className="h-10 w-auto text-on-color" />
+            </div>
+            <div className="flex flex-col overflow-y-auto p-6">
+              <h3 className="font-semibold sm:text-18">
+                Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
+              </h3>
+              <p className="mt-3 text-13 text-secondary">
+                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-12 flex items-center gap-6">
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      setStep("work-items");
+                    }}
+                  >
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
+                    onClick={() => {
+                      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-surface-1 sm:h-3/4 md:w-1/2 lg:w-3/5">
+          <button
+            type="button"
+            className="fixed top-[19%] right-[9%] z-10 translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border border-strong bg-surface-1 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            onClick={onComplete}
+          >
+            <CloseOutline className="border-strong- h-3 w-3 text-primary" />
+          </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-accent-primary sm:h-3/5 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
+              <img src={currentStep?.image} className="h-full w-full object-cover" 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-18">{currentStep?.title}</h3>
+              <p className="mt-3 text-13 text-secondary">{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="secondary" 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={() => {
+                      onComplete();
+                      toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create your first project
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});

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

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { CyclesOutline, ModuleOutline, PagesOutline, ViewsOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+// types
+import type { TTourSteps } from "./root";
+
+const sidebarOptions: {
+  key: TTourSteps;
+  label: string;
+  Icon: React.FC<ISvgIcons>;
+}[] = [
+  {
+    key: "work-items",
+    label: "Work items",
+    Icon: WorkItemsOutline,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    Icon: CyclesOutline,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    Icon: ModuleOutline,
+  },
+  {
+    key: "views",
+    label: "Views",
+    Icon: ViewsOutline,
+  },
+  {
+    key: "pages",
+    label: "Pages",
+    Icon: PagesOutline,
+  },
+];
+
+type Props = {
+  step: TTourSteps;
+  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
+};
+
+export function TourSidebar({ step, setStep }: Props) {
+  return (
+    <div className="col-span-3 hidden bg-surface-2 p-8 lg:block">
+      <h3 className="text-16 font-medium">
+        Let{"'"}s get started!
+        <br />
+        Get more out of Plane.
+      </h3>
+      <div className="mt-8 space-y-5">
+        {sidebarOptions.map((option) => (
+          // oxlint-disable-next-line jsx_a11y/click-events-have-key-events
+          <h5
+            key={option.key}
+            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pr-2 pl-3 text-13 font-medium capitalize ${
+              step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
+            }`}
+            onClick={() => setStep(option.key)}
+            // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
+            role="button"
+          >
+            <option.Icon className="h-4 w-4" aria-hidden="true" />
+            {option.label}
+          </h5>
+        ))}
+      </div>
+    </div>
+  );
+}