plane/web/pages/onboarding/index.tsx
Aaryan Khandelwal db75eced0a chore: deactivate user option added (#2841)
* dev: deactivate user option added

* chore: new layout for profile settings

* fix: build errors

* fix: user profile activity
2023-12-07 19:59:35 +05:30

203 lines
7.0 KiB
TypeScript

import { useEffect, useState, ReactElement, Fragment } from "react";
import Image from "next/image";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
import { useTheme } from "next-themes";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { WorkspaceService } from "services/workspace.service";
// hooks
import useUserAuth from "hooks/use-user-auth";
// layouts
import DefaultLayout from "layouts/default-layout";
import { UserAuthWrapper } from "layouts/auth-layout";
// components
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
// ui
import { Avatar, Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// types
import { IUser, TOnboardingSteps } from "types";
import { NextPageWithLayout } from "types/app";
import { ChevronDown } from "lucide-react";
import { Menu, Transition } from "@headlessui/react";
import { DeactivateAccountModal } from "components/account";
import { useRouter } from "next/router";
// services
const workspaceService = new WorkspaceService();
const OnboardingPage: NextPageWithLayout = observer(() => {
const [step, setStep] = useState<number | null>(null);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const {
user: { currentUser, updateCurrentUser, updateUserOnBoard },
workspace: workspaceStore,
} = useMobxStore();
const router = useRouter();
const user = currentUser ?? undefined;
const workspaces = workspaceStore.workspaces;
const { setTheme } = useTheme();
const {} = useUserAuth("onboarding");
const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS_LIST", () =>
workspaceService.userWorkspaceInvitations()
);
// handle step change
const stepChange = async (steps: Partial<TOnboardingSteps>) => {
if (!user) return;
const payload: Partial<IUser> = {
onboarding_step: {
...user.onboarding_step,
...steps,
},
};
await updateCurrentUser(payload);
};
// complete onboarding
const finishOnboarding = async () => {
if (!user || !workspaces) return;
await updateUserOnBoard();
router.replace(`/${workspaces[0].slug}`);
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
useEffect(() => {
const handleStepChange = async () => {
if (!user || !invitations) return;
const onboardingStep = user.onboarding_step;
if (!onboardingStep.workspace_join && !onboardingStep.workspace_create && step !== 1) setStep(1);
if (onboardingStep.workspace_join || onboardingStep.workspace_create) {
if (!onboardingStep.profile_complete && step !== 2) setStep(2);
}
if (
onboardingStep.profile_complete &&
(onboardingStep.workspace_join || onboardingStep.workspace_create) &&
!onboardingStep.workspace_invite &&
step !== 3
)
setStep(3);
};
handleStepChange();
}, [user, invitations, step]);
return (
<>
<DeactivateAccountModal isOpen={showDeleteModal} onClose={() => setShowDeleteModal(false)} />
{user && step !== null ? (
<div className={`bg-onboarding-gradient-100 h-full flex flex-col fixed w-full`}>
<div className="sm:pt-14 sm:pb-8 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
<div className="w-full flex items-center justify-between font-semibold ">
<div className="text-3xl flex items-center gap-x-1">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" height={30} width={30} />
Plane
</div>
<div className="pr-4 flex gap-x-2 items-center">
{step != 1 && (
<Avatar
name={workspaces ? workspaces[0].name : "N"}
size={35}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
/>
)}
<div>
{step != 1 && (
<p className="text-sm text-custom-text-200 font-medium">
{currentUser?.first_name} {currentUser?.last_name}
</p>
)}
<Menu>
<Menu.Button className={"flex items-center gap-x-2"}>
<span className="text-base font-medium">{user.email}</span>
<ChevronDown className="h-4 w-4 text-custom-text-300" />
</Menu.Button>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Menu.Items className={"absolute translate-x-full"}>
<Menu.Item>
<div
className="absolute pr-28 hover:cursor-pointer bg-onboarding-background-200 mr-auto mt-2 rounded-md text-custom-text-300 text-base font-normal p-3 shadow-sm border border-custom-border-200"
onClick={() => {
setShowDeleteModal(true);
}}
>
Delete
</div>
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
</div>
</div>
<div className="w-full h-full lg:w-4/5 xl:w-3/4 bg-onboarding-gradient-100 pt-4 px-4 sm:w-4/5 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 overflow-auto">
<div className={`h-full w-full bg-onboarding-gradient-200 rounded-t-md overflow-auto`}>
{step === 1 ? (
<JoinWorkspaces
setTryDiffAccount={() => {
setShowDeleteModal(true);
}}
finishOnboarding={finishOnboarding}
stepChange={stepChange}
/>
) : step === 2 ? (
<UserDetails user={user} />
) : (
<InviteMembers
finishOnboarding={finishOnboarding}
stepChange={stepChange}
user={user}
workspace={workspaces?.[0]}
/>
)}
</div>
</div>
</div>
) : (
<div className="h-screen w-full grid place-items-center">
<Spinner />
</div>
)}
</>
);
});
OnboardingPage.getLayout = function getLayout(page: ReactElement) {
return (
<UserAuthWrapper>
<DefaultLayout>{page}</DefaultLayout>
</UserAuthWrapper>
);
};
export default OnboardingPage;