plane/web/components/onboarding/user-details.tsx

import React, { useState } from "react";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import { Controller, useForm } from "react-hook-form";
import { Camera, User2 } from "lucide-react";
import { Button, Input } from "@plane/ui";
// components
import { UserImageUploadModal } from "components/core";
import { OnboardingSidebar, OnboardingStepIndicator } from "components/onboarding";
// constants
import { USER_DETAILS } from "constants/event-tracker";
// hooks
import { useEventTracker, useUser, useWorkspace } from "hooks/store";
// assets
import IssuesSvg from "public/onboarding/onboarding-issues.webp";
// services
import { FileService } from "services/file.service";
// types
import { IUser } from "@plane/types";

const defaultValues: Partial<IUser> = {
  first_name: "",
  avatar: "",
  use_case: undefined,
};

type Props = {
  user?: IUser;
  setUserName: (name: string) => void;
};

const USE_CASES = [
  "Build Products",
  "Manage Feedbacks",
  "Service delivery",
  "Field force management",
  "Code Repository Integration",
  "Bug Tracking",
  "Test Case Management",
  "Resource allocation",
];

const fileService = new FileService();

export const UserDetails: React.FC<Props> = observer((props) => {
  const { user, setUserName } = props;
  // states
  const [isRemoving, setIsRemoving] = useState(false);
  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
  // store hooks
  const { updateCurrentUser } = useUser();
  const { workspaces } = useWorkspace();
  const { captureEvent } = useEventTracker();
  // derived values
  const workspaceName = workspaces ? Object.values(workspaces)?.[0]?.name : "New Workspace";
  // form info
  const {
    getValues,
    handleSubmit,
    control,
    watch,
    setValue,
    formState: { errors, isSubmitting, isValid },
  } = useForm<IUser>({
    defaultValues,
    mode: "onChange",
  });

  const onSubmit = async (formData: IUser) => {
    if (!user) return;

    const payload: Partial<IUser> = {
      ...formData,
      first_name: formData.first_name.split(" ")[0],
      last_name: formData.first_name.split(" ")[1],
      use_case: formData.use_case,
      onboarding_step: {
        ...user.onboarding_step,
        profile_complete: true,
      },
    };

    await updateCurrentUser(payload)
      .then(() => {
        captureEvent(USER_DETAILS, {
          use_case: formData.use_case,
          state: "SUCCESS",
          element: "Onboarding",
        });
      })
      .catch(() => {
        captureEvent(USER_DETAILS, {
          use_case: formData.use_case,
          state: "FAILED",
          element: "Onboarding",
        });
      });
  };
  const handleDelete = (url: string | null | undefined) => {
    if (!url) return;

    setIsRemoving(true);
    fileService.deleteUserFile(url).finally(() => {
      setValue("avatar", "");
      setIsRemoving(false);
    });
  };

  return (
    <div className="flex h-full w-full space-y-7 overflow-y-auto sm:space-y-10 ">
      <div className="fixed hidden h-full w-1/5 max-w-[320px] lg:block">
        <Controller
          control={control}
          name="first_name"
          render={({ field: { value } }) => (
            <OnboardingSidebar
              userFullName={value.length === 0 ? undefined : value}
              showProject
              workspaceName={workspaceName}
            />
          )}
        />
      </div>
      <Controller
        control={control}
        name="avatar"
        render={({ field: { onChange, value } }) => (
          <UserImageUploadModal
            isOpen={isImageUploadModalOpen}
            onClose={() => setIsImageUploadModalOpen(false)}
            isRemoving={isRemoving}
            handleDelete={() => handleDelete(getValues("avatar"))}
            onSuccess={(url) => {
              onChange(url);
              setIsImageUploadModalOpen(false);
            }}
            value={value && value.trim() !== "" ? value : null}
          />
        )}
      />
      <div className="ml-auto flex w-full flex-col justify-between lg:w-2/3 ">
        <div className="mx-auto flex flex-col px-7 pt-3 md:px-0 lg:w-4/5">
          <form onSubmit={handleSubmit(onSubmit)} className="ml-auto  md:w-11/12">
            <div className="flex items-center justify-between">
              <p className="text-xl font-semibold sm:text-2xl">What do we call you? </p>
              <OnboardingStepIndicator step={2} />
            </div>
            <div className="mt-6 flex w-full ">
              <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                {!watch("avatar") || watch("avatar") === "" ? (
                  <div className="relative mr-3 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-full bg-onboarding-background-300 hover:cursor-pointer">
                    <div className="absolute -right-1 bottom-1 flex h-6 w-6 items-center justify-center rounded-full border border-onboarding-border-100 bg-onboarding-background-100">
                      <Camera className="h-4 w-4 stroke-onboarding-background-400" />
                    </div>
                    <User2 className="h-10 w-10 fill-onboarding-background-400 stroke-onboarding-background-300" />
                  </div>
                ) : (
                  <div className="relative mr-3 h-16 w-16 overflow-hidden">
                    <img
                      src={watch("avatar")}
                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
                      onClick={() => setIsImageUploadModalOpen(true)}
                      alt={user?.display_name}
                    />
                  </div>
                )}
              </button>

              <div className="flex flex-col gap-1">
                <div className="my-2 mr-10 flex w-full rounded-md bg-onboarding-background-200 text-sm">
                  <Controller
                    control={control}
                    name="first_name"
                    rules={{
                      required: "Name is required",
                      maxLength: {
                        value: 24,
                        message: "Name must be within 24 characters.",
                      },
                    }}
                    render={({ field: { value, onChange, ref } }) => (
                      <Input
                        id="first_name"
                        name="first_name"
                        type="text"
                        value={value}
                        autoFocus
                        onChange={(event) => {
                          setUserName(event.target.value);
                          onChange(event);
                        }}
                        ref={ref}
                        hasError={Boolean(errors.first_name)}
                        placeholder="Enter your full name..."
                        className="w-full border-onboarding-border-100 focus:border-custom-primary-100"
                      />
                    )}
                  />
                </div>
                {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
              </div>
            </div>
            <div className="mb-10 mt-14">
              <Controller
                control={control}
                name="first_name"
                render={({ field: { value } }) => (
                  <p className="p-0 text-xl font-medium text-onboarding-text-200 sm:text-2xl">
                    And how will you use Plane{value.length > 0 ? ", " : ""}
                    {value}?
                  </p>
                )}
              />

              <p className="my-3 text-sm font-medium text-onboarding-text-300">Choose just one</p>

              <Controller
                control={control}
                name="use_case"
                render={({ field: { value, onChange } }) => (
                  <div className="flex flex-wrap overflow-auto break-all">
                    {USE_CASES.map((useCase) => (
                      <div
                        key={useCase}
                        className={`mb-3 flex-shrink-0 border hover:cursor-pointer hover:bg-onboarding-background-300/30 ${
                          value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
                        } mr-3 rounded-sm p-3 text-sm font-medium`}
                        onClick={() => onChange(useCase)}
                      >
                        {useCase}
                      </div>
                    ))}
                  </div>
                )}
              />
            </div>

            <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
              {isSubmitting ? "Updating..." : "Continue"}
            </Button>
          </form>
        </div>
        <div className="relative bottom-0 ml-auto flex  justify-end md:w-11/12">
          <Image src={IssuesSvg} className="h-[w-2/3] w-2/3 object-cover" alt="issue-image" />
        </div>
      </div>
    </div>
  );
});