chore: onboarding (#2790)

* style: onboarding light version

* style: dark mode

* fix: onboarding gradient

* refactor: imports

* chore: add use case field in users api

* feat: delete account

* fix: delete modal points alignment

* feat: usecase in profile

* fix: build error

* fix: typos & hardcoded strings

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
This commit is contained in:
Lakhan Baheti 2023-11-20 19:31:19 +05:30 committed by GitHub
parent 61d4e2e016
commit f1de05e4de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 2674 additions and 580 deletions

View File

@ -59,6 +59,7 @@ class UserMeSerializer(BaseSerializer):
"username", "username",
"theme", "theme",
"last_workspace_id", "last_workspace_id",
"use_case",
] ]
read_only_fields = fields read_only_fields = fields

View File

@ -176,6 +176,24 @@ module.exports = {
}, },
backdrop: "rgba(0, 0, 0, 0.25)", backdrop: "rgba(0, 0, 0, 0.25)",
}, },
onboarding: {
background: {
100: convertToRGB("--color-onboarding-background-100"),
200: convertToRGB("--color-onboarding-background-200"),
300: convertToRGB("--color-onboarding-background-300"),
400: convertToRGB("--color-onboarding-background-400"),
},
text: {
100: convertToRGB("--color-onboarding-text-100"),
200: convertToRGB("--color-onboarding-text-200"),
300: convertToRGB("--color-onboarding-text-300"),
400: convertToRGB("--color-onboarding-text-400"),
},
border: {
100: convertToRGB("--color-onboarding-border-100"),
200: convertToRGB("--color-onboarding-border-200"),
},
},
}, },
keyframes: { keyframes: {
leftToaster: { leftToaster: {
@ -353,6 +371,10 @@ module.exports = {
80: "18rem", 80: "18rem",
96: "21.6rem", 96: "21.6rem",
}, },
backgroundImage: {
"onboarding-gradient-primary": "var( --gradient-onboarding-primary)",
"onboarding-gradient-secondary": "var( --gradient-onboarding-secondary)",
},
}, },
fontFamily: { fontFamily: {
custom: ["Inter", "sans-serif"], custom: ["Inter", "sans-serif"],

View File

@ -0,0 +1,138 @@
// react
import React, { useState } from "react";
// next
import { useRouter } from "next/router";
// components
import { Button } from "@plane/ui";
// hooks
import useToast from "hooks/use-toast";
// services
import { AuthService } from "services/auth.service";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// icons
import { AlertTriangle } from "lucide-react";
import { UserService } from "services/user.service";
type Props = {
isOpen: boolean;
onClose: () => void;
};
const authService = new AuthService();
const userService = new UserService();
const DeleteAccountModal: React.FC<Props> = (props) => {
const { isOpen, onClose } = props;
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const router = useRouter();
const { setToastAlert } = useToast();
const handleSignOut = async () => {
await authService
.signOut()
.then(() => {
router.push("/");
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Failed to sign out. Please try again.",
})
);
};
const handleDeleteAccount = async () => {
setIsDeleteLoading(true);
await userService
.deleteAccount()
.then(() => {
setToastAlert({
type: "success",
title: "Success!",
message: "Account deleted successfully.",
});
router.push("/");
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.data?.error,
})
);
setIsDeleteLoading(false);
};
const handleClose = () => {
onClose();
};
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-onboarding-background-200 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-[40rem]">
<div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="">
<div className="flex items-center gap-x-4">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<Dialog.Title as="h3" className="text-2xl font-medium leading-6 text-onboarding-text-100">
Not the right workspace?
</Dialog.Title>
</div>
<div className="mt-6 px-4">
<ul className="text-onboarding-text-300 list-disc font-normal text-base">
<li>Delete this account if you have another and wont use this account.</li>
<li>Switch to another account if youd like to come back to this account another time.</li>
</ul>
</div>
</div>
</div>
<div className="flex items-center justify-end gap-4 p-4 mb-2 sm:px-6">
<span className="text-sm font-medium hover:cursor-pointer" onClick={handleSignOut}>
Switch account
</span>
<button
className="py-1.5 px-3 font-medium rounded-sm text-red-500 border border-red-500 text-sm "
onClick={handleDeleteAccount}
>
{isDeleteLoading ? "Deleting..." : "Delete account"}
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
);
};
export default DeleteAccountModal;

View File

@ -7,6 +7,9 @@ import { AuthService } from "services/auth.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useTimer from "hooks/use-timer"; import useTimer from "hooks/use-timer";
// icons
import { XCircle } from "lucide-react";
import { useTheme } from "next-themes";
// types // types
type EmailCodeFormValues = { type EmailCodeFormValues = {
@ -23,6 +26,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
const [isCodeResending, setIsCodeResending] = useState(false); const [isCodeResending, setIsCodeResending] = useState(false);
const [errorResendingCode, setErrorResendingCode] = useState(false); const [errorResendingCode, setErrorResendingCode] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [sentEmail, setSentEmail] = useState<string>("");
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer(); const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
@ -52,6 +56,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
await authService await authService
.emailCode({ email }) .emailCode({ email })
.then((res) => { .then((res) => {
console.log(res);
setSentEmail(email);
setValue("key", res.key); setValue("key", res.key);
setCodeSent(true); setCodeSent(true);
}) })
@ -88,10 +94,6 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
const emailOld = getValues("email"); const emailOld = getValues("email");
useEffect(() => {
setErrorResendingCode(false);
}, [emailOld]);
useEffect(() => { useEffect(() => {
const submitForm = (e: KeyboardEvent) => { const submitForm = (e: KeyboardEvent) => {
if (!codeSent && e.key === "Enter") { if (!codeSent && e.key === "Enter") {
@ -99,29 +101,54 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
handleSubmit(onSubmit)().then(() => { handleSubmit(onSubmit)().then(() => {
setResendCodeTimer(30); setResendCodeTimer(30);
}); });
} else if (
codeSent &&
sentEmail != getValues("email") &&
getValues("email").length > 0 &&
(e.key === "Enter" || e.key === "Tab")
) {
e.preventDefault();
console.log("resend");
onSubmit({ email: getValues("email") }).then(() => {
setCodeResent(true);
});
} }
}; };
if (!codeSent) { window.addEventListener("keydown", submitForm);
window.addEventListener("keydown", submitForm);
}
return () => { return () => {
window.removeEventListener("keydown", submitForm); window.removeEventListener("keydown", submitForm);
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [handleSubmit, codeSent]); }, [handleSubmit, codeSent, sentEmail]);
return ( return (
<> <>
{(codeSent || codeResent) && ( {codeSent || codeResent ? (
<p className="text-center mt-4"> <>
We have sent the sign in code. <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
<br /> Moving to the runway
Please check your inbox at <span className="font-medium">{watch("email")}</span> </h1>
</p> <div className="text-center text-sm text-onboarding-text-200 mt-3">
<p>Paste the code you got at </p>
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{sentEmail} </span>
<span className="text-onboarding-text-200">below.</span>
</div>
</>
) : (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
Lets get you prepped!
</h1>
<p className="text-center text-sm text-onboarding-text-200 mt-3">
This whole thing will take less than two minutes.
</p>
<p className="text-center text-sm text-onboarding-text-200 mt-1">Promise!</p>
</>
)} )}
<form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
<form className="mt-5 sm:w-96 mx-auto">
<div className="space-y-1"> <div className="space-y-1">
<Controller <Controller
control={control} control={control}
@ -134,86 +161,101 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
) || "Email address is not valid", ) || "Email address is not valid",
}} }}
render={({ field: { value, onChange, ref } }) => ( render={({ field: { value, onChange, ref } }) => (
<Input <div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
id="email" <Input
name="email" id="email"
type="email" name="email"
value={value} type="email"
onChange={onChange} value={value}
ref={ref} onChange={onChange}
hasError={Boolean(errors.email)} ref={ref}
placeholder="Enter your email address..." hasError={Boolean(errors.email)}
className="border-custom-border-300 h-[46px] w-full" placeholder="orville.wright@firstflight.com"
/> className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
/>
{value.length > 0 && (
<XCircle
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
onClick={() => setValue("email", "")}
/>
)}
</div>
)} )}
/> />
</div> </div>
{codeSent && ( {codeSent && (
<> <>
<Controller <div>
control={control} {codeResent && sentEmail === getValues("email") ? (
name="token" <div className="text-sm my-2.5 text-onboarding-text-300 m-0">
rules={{ You got a new code at <span className="font-semibold text-custom-primary-80">{sentEmail}</span>.
required: "Code is required", </div>
}} ) : sentEmail != getValues("email") && getValues("email").length > 0 ? (
render={({ field: { value, onChange, ref } }) => ( <div className="text-sm my-2.5 text-onboarding-text-300 m-0">
<Input Hit enter
id="token" <span> </span>or <span className="italic">Tab</span> to get a new code
name="token" </div>
type="token"
value={value ?? ""}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.token)}
placeholder="Enter code..."
className="border-custom-border-300 h-[46px] w-full"
/>
)}
/>
<button
type="button"
className={`flex w-full justify-end text-xs outline-none ${
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
} `}
onClick={() => {
setIsCodeResending(true);
onSubmit({ email: getValues("email") }).then(() => {
setCodeResent(true);
setIsCodeResending(false);
setResendCodeTimer(30);
});
}}
disabled={isResendDisabled}
>
{resendCodeTimer > 0 ? (
<span className="text-right">Request new code in {resendCodeTimer} seconds</span>
) : isCodeResending ? (
"Sending new code..."
) : errorResendingCode ? (
"Please try again later"
) : ( ) : (
<span className="font-medium">Resend code</span> <div className="my-4" />
)} )}
</button> </div>
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
<Controller
control={control}
name="token"
rules={{
required: "Code is required",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="token"
name="token"
type="token"
value={value ?? ""}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.token)}
placeholder="get-set-fly"
className="border-onboarding-border-100 h-[46px] w-full"
/>
)}
/>
</div>
</> </>
)} )}
{codeSent ? ( {codeSent ? (
<Button <div className="my-4">
variant="primary" {" "}
type="submit" <Button
className="w-full" variant="primary"
size="xl" type="submit"
onClick={handleSubmit(handleSignin)} className="w-full"
disabled={!isValid && isDirty} size="xl"
loading={isLoading} onClick={handleSubmit(handleSignin)}
> disabled={!isValid && isDirty}
{isLoading ? "Signing in..." : "Sign in"} loading={isLoading}
</Button> >
{isLoading ? "Signing in..." : "Next step"}
</Button>
<div className="w-[70%] my-4 mx-auto">
<p className="text-xs text-onboarding-text-300">
When you click the button above, you agree with our{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
terms and conditions of service.
</a>{" "}
</p>
</div>
</div>
) : ( ) : (
<Button <Button
variant="primary" variant="primary"
className="w-full" className="w-full mt-4"
size="xl" size="xl"
onClick={() => { onClick={() => {
handleSubmit(onSubmit)().then(() => { handleSubmit(onSubmit)().then(() => {
@ -223,7 +265,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
disabled={!isValid && isDirty} disabled={!isValid && isDirty}
loading={isSubmitting} loading={isSubmitting}
> >
{isSubmitting ? "Sending code..." : "Send sign in code"} {isSubmitting ? "Sending code..." : "Send unique code"}
</Button> </Button>
)} )}
</form> </form>

View File

@ -1,4 +1,6 @@
// react
import { useEffect, useState, FC } from "react"; import { useEffect, useState, FC } from "react";
// next
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -41,14 +43,16 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
<Link <Link
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`} href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
> >
<button className="flex w-full items-center justify-center gap-2 rounded border border-custom-border-300 p-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-custom-background-80 h-[46px]"> <button
className={`flex w-full items-center justify-center gap-2 hover:bg-onboarding-background-300 rounded border border-onboarding-border-200 p-2 text-sm font-medium text-custom-text-100 duration-300 h-[46px]`}
>
<Image <Image
src={theme === "dark" ? githubWhiteImage : githubBlackImage} src={theme === "dark" ? githubWhiteImage : githubBlackImage}
height={20} height={20}
width={20} width={20}
alt="GitHub Logo" alt="GitHub Logo"
/> />
<span>Sign in with GitHub</span> <span className="text-onboarding-text-200">Sign in with GitHub</span>
</button> </button>
</Link> </Link>
</div> </div>

View File

@ -29,7 +29,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
theme: "outline", theme: "outline",
size: "large", size: "large",
logo_alignment: "center", logo_alignment: "center",
width: 360, width: 384,
text: "signin_with", text: "signin_with",
} as GsiButtonConfiguration // customization attributes } as GsiButtonConfiguration // customization attributes
); );

View File

@ -0,0 +1,269 @@
import React, { useEffect } from "react";
import { Avatar, DiceIcon, PhotoFilterIcon } from "@plane/ui";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// react-hook-form
import { Control, Controller, UseFormSetValue, UseFormWatch } from "react-hook-form";
// types
import { IWorkspace } from "types";
// icons
import {
BarChart2,
Briefcase,
CheckCircle,
ChevronDown,
ContrastIcon,
FileText,
LayersIcon,
LayoutGrid,
PenSquare,
Search,
Settings,
} from "lucide-react";
const workspaceLinks = [
{
Icon: LayoutGrid,
name: "Dashboard",
},
{
Icon: BarChart2,
name: "Analytics",
},
{
Icon: Briefcase,
name: "Projects",
},
{
Icon: CheckCircle,
name: "All Issues",
},
{
Icon: CheckCircle,
name: "Notifications",
},
];
const projectLinks = [
{
name: "Issues",
Icon: LayersIcon,
},
{
name: "Cycles",
Icon: ContrastIcon,
},
{
name: "Modules",
Icon: DiceIcon,
},
{
name: "Views",
Icon: PhotoFilterIcon,
},
{
name: "Pages",
Icon: FileText,
},
{
name: "Settings",
Icon: Settings,
},
];
type Props = {
workspaceName: string;
showProject: boolean;
control?: Control<IWorkspace, any>;
setValue?: UseFormSetValue<IWorkspace>;
watch?: UseFormWatch<IWorkspace>;
};
var timer: number = 0;
var lastWorkspaceName: string = "";
const DummySidebar: React.FC<Props> = (props) => {
const { workspaceName, showProject, control, setValue, watch } = props;
const { workspace: workspaceStore, user: userStore } = useMobxStore();
const workspace = workspaceStore.workspaces ? workspaceStore.workspaces[0] : null;
const handleZoomWorkspace = (value: string) => {
// console.log(lastWorkspaceName,value);
if (lastWorkspaceName === value) return;
lastWorkspaceName = value;
if (timer > 0) {
timer += 2;
timer = Math.min(timer, 4);
} else {
timer = 2;
timer = Math.min(timer, 4);
const interval = setInterval(() => {
if (timer < 0) {
setValue!("name", lastWorkspaceName);
clearInterval(interval);
}
console.log("timer", timer);
timer--;
}, 1000);
}
};
useEffect(() => {
if (watch) {
watch();
}
});
return (
<div className="border-r h-full border-onboarding-border-100 relative ">
<div>
{control && setValue ? (
<Controller
control={control}
name="name"
render={({ field: { value } }) => {
if (value.length > 0) {
handleZoomWorkspace(value);
}
return timer > 0 ? (
<div className="py-6 pl-4 top-3 mt-4 transition-all bg-onboarding-background-200 w-full max-w-screen-sm flex items-center ml-6 border-8 border-onboarding-background-100 rounded-md">
<div className="bg-onboarding-background-100 w-full p-1 flex items-center">
<div className="flex flex-shrink-0">
<Avatar
name={value.length > 0 ? value[0].toLocaleUpperCase() : "N"}
src={""}
size={30}
shape="square"
fallbackBackgroundColor="black"
className="!text-base"
/>
</div>
<span className="text-xl font-medium text-onboarding-text-100 ml-2 truncate">{value}</span>
</div>
</div>
) : (
<div className="flex transition-all w-full border border-transparent items-center gap-y-2 px-4 pt-6 truncate">
<div className="flex flex-shrink-0">
<Avatar
name={value.length > 0 ? value : workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
src={""}
size={24}
shape="square"
className="!text-base"
/>
</div>
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
<h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
<ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
</div>
<div className="flex flex-shrink-0">
<Avatar
name={"N"}
src={workspace && workspace.logo ? workspace.logo : ""}
size={24}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
/>
</div>
</div>
);
}}
/>
) : (
<div className="flex transition-all w-full items-center gap-y-2 px-4 pt-6 truncate">
<div className="flex flex-shrink-0">
<Avatar
name={workspace ? workspace.name[0].toLocaleUpperCase() : "N"}
src={""}
size={24}
shape="square"
className="!text-base"
/>
</div>
<div className="w-full mx-2 items-center flex justify-between flex-shrink truncate">
<h4 className="text-custom-text-100 font-medium text-base truncate">{workspaceName}</h4>
<ChevronDown className={`h-4 w-4 mx-1 flex-shrink-0 text-custom-sidebar-text-400 duration-300`} />
</div>
<div className="flex flex-shrink-0">
<Avatar
name={"N"}
src={workspace && workspace.logo ? workspace.logo : ""}
size={24}
shape="square"
fallbackBackgroundColor="#FCBE1D"
className="!text-base"
/>
</div>
</div>
)}
</div>
<div className={`space-y-1 p-4`}>
<div className={`flex items-center justify-between w-full px-1 mb-3 gap-2 mt-4 `}>
<div
className={`relative flex items-center justify-between w-full rounded gap-1 group
px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200
`}
>
<div className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none`}>
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
{<span className="text-sm font-medium">New Issue</span>}
</div>
</div>
<div
className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none
shadow-custom-sidebar-shadow-2xs border-[0.5px] border-onboarding-border-200
`}
>
<Search className="h-4 w-4 text-onboarding-text-200" />
</div>
</div>
{workspaceLinks.map((link) => (
<a className="block w-full">
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none
text-onboarding-text-200 focus:bg-custom-sidebar-background-80
`}
>
{<link.Icon className="h-4 w-4" />}
{link.name}
</div>
</a>
))}
</div>
{showProject && (
<div className="px-4 pt-4">
<p className="text-base pb-4 font-semibold text-custom-text-300">Projects</p>
<div className="px-3">
{" "}
<div className="w-4/5 flex items-center text-base font-medium text-custom-text-200 mb-3 justify-between">
<span> Plane web</span>
<ChevronDown className="h-4 w-4" />
</div>
{projectLinks.map((link) => (
<a className="block w-full">
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-base font-medium outline-none
text-custom-sidebar-text-200 focus:bg-custom-sidebar-background-80
`}
>
{<link.Icon className="h-4 w-4" />}
{link.name}
</div>
</a>
))}
</div>
</div>
)}
</div>
);
};
export default DummySidebar;

View File

@ -0,0 +1,21 @@
import React from "react";
const OnboardingStepIndicator = ({ step }: { step: number }) => (
<div className="flex items-center justify-center">
<div className="h-4 w-4 rounded-full bg-custom-primary-100 z-10" />
<div className={`h-1 w-14 -ml-1 ${step >= 2 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} />
<div
className={` z-10 -ml-1 rounded-full ${
step >= 2 ? "bg-custom-primary-100 h-4 w-4" : " h-3 w-3 bg-onboarding-background-100"
}`}
/>
<div className={`h-1 w-14 -ml-1 ${step >= 3 ? "bg-custom-primary-100" : "bg-onboarding-background-100"}`} />
<div
className={`rounded-full -ml-1 z-10 ${
step >= 3 ? "bg-custom-primary-100 h-4 w-4" : "h-3 w-3 bg-onboarding-background-100"
}`}
/>
</div>
);
export default OnboardingStepIndicator;

View File

@ -50,10 +50,8 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
}); });
const handleSubmit = async () => { const handleSubmit = async () => {
if (!image || (!workspaceSlug && router.pathname != "/onboarding")) return;
setIsImageUploading(true); setIsImageUploading(true);
if (!image || !workspaceSlug) return;
const formData = new FormData(); const formData = new FormData();
formData.append("asset", image); formData.append("asset", image);
formData.append("attributes", JSON.stringify({})); formData.append("attributes", JSON.stringify({}));
@ -183,7 +181,13 @@ export const ImageUploadModal: React.FC<Props> = observer((props) => {
<Button variant="neutral-primary" size="sm" onClick={handleClose}> <Button variant="neutral-primary" size="sm" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button variant="primary" size="sm" onClick={handleSubmit} disabled={!image} loading={isImageUploading}> <Button
variant="primary"
size="sm"
onClick={handleSubmit}
disabled={!image}
loading={isImageUploading}
>
{isImageUploading ? "Uploading..." : "Upload & Save"} {isImageUploading ? "Uploading..." : "Upload & Save"}
</Button> </Button>
</div> </div>

View File

@ -0,0 +1,172 @@
// react
import React, { useState } from "react";
// components
import { Button, Loader } from "@plane/ui";
// helpers
import { truncateText } from "helpers/string.helper";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { WorkspaceService } from "services/workspace.service";
// swr
import useSWR, { mutate } from "swr";
// contants
import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
import { ROLE } from "constants/workspace";
// types
import { IWorkspaceMemberInvitation } from "types";
// icons
import { CheckCircle2, Search } from "lucide-react";
import { trackEvent } from "helpers/event-tracker.helper";
type Props = {
handleNextStep: () => void;
setTryDiffAccount: () => void;
};
const workspaceService = new WorkspaceService();
const Invitations: React.FC<Props> = (props) => {
const { handleNextStep, setTryDiffAccount } = props;
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const {
workspace: workspaceStore,
user: { currentUser, updateCurrentUser },
} = useMobxStore();
const {
data: invitations,
mutate: mutateInvitations,
isLoading,
} = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
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 updateLastWorkspace = async () => {
if (!workspaceStore.workspaces) return;
await updateCurrentUser({
last_workspace_id: workspaceStore.workspaces[0].id,
});
};
const submitInvitations = async () => {
if (invitationsRespond.length <= 0) return;
setIsJoiningWorkspaces(true);
await workspaceService
.joinWorkspaces({ invitations: invitationsRespond })
.then(async (res) => {
trackEvent("WORKSPACE_USER_INVITE_ACCEPT", res);
await mutateInvitations();
await workspaceStore.fetchWorkspaces();
await mutate(USER_WORKSPACES);
await updateLastWorkspace();
await handleNextStep();
})
.finally(() => setIsJoiningWorkspaces(false));
};
return invitations && invitations.length > 0 ? (
<div>
<div className="space-y-4 md:w-2/3 ">
<p className="font-semibold pb-2 text-xl sm:text-2xl">Choose a workspace to join </p>
<div>
{invitations &&
invitations.length > 0 &&
invitations.map((invitation) => {
const isSelected = invitationsRespond.includes(invitation.id);
return (
<div
key={invitation.id}
className={`flex cursor-pointer items-center gap-2 border p-3.5 rounded ${
isSelected
? "border-custom-primary-100"
: "border-onboarding-border-200 hover:bg-onboarding-background-300/30"
}`}
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
>
<div className="flex-shrink-0">
<div className="grid place-items-center h-9 w-9 rounded">
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
<img
src={invitation.workspace.logo}
height="100%"
width="100%"
className="rounded"
alt={invitation.workspace.name}
/>
) : (
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
{invitation.workspace.name[0]}
</span>
)}
</div>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
</div>
<span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
<CheckCircle2 className="h-5 w-5" />
</span>
</div>
);
})}
</div>
<Button variant="primary" onClick={submitInvitations}>
{isJoiningWorkspaces ? "Joining..." : "Join your team"}
</Button>
</div>
<div className="py-3 px-4 mt-8 bg-onboarding-background-300/30 rounded-sm flex justify-between items-center">
<div className="flex items-center">
<Search className="h-4 w-4 mr-2" />
<span className="text-sm text-custom-text-200">Don&apos;t see your workspace?</span>
</div>
<div>
<div
className="bg-onboarding-background-200 py-3 text-center hover:cursor-pointer text-custom-text-200 rounded-md text-sm font-medium border border-custom-border-200"
onClick={setTryDiffAccount}
>
Try a different email address
</div>
<p className="text-xs mt-2 text-custom-text-300">
Your right e-mail address could be from a Google or GitHub login.
</p>
</div>
</div>
</div>
) : (
<EmptyInvitation email={currentUser!.email} />
);
};
const EmptyInvitation = ({ email }: { email: string }) => (
<div className="items-center md:w-4/5 bg-onboarding-background-300/30 my-16 border-onboarding-border-200 py-5 px-10 rounded border justify-center ">
<p className="text-lg text-onboarding-text-300 text-center font-semibold">Is your team already on Plane?</p>
<p className="text-sm text-onboarding-text-300 mt-6 text-center">
We couldnt find any existing workspaces for the email address {email}
</p>
<div
className="bg-onboarding-background-200 mt-6 py-3 text-center hover:cursor-pointer text-custom-text-200 rounded-md text-sm font-medium border border-custom-border-200"
onClick={() => {}}
>
Try a different email address
</div>
<p className="text-xs mt-2 text-center text-custom-text-300">
Your right e-mail address could be from a Google or GitHub login.
</p>
</div>
);
export default Invitations;

View File

@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
// next
import Image from "next/image";
// headless ui // headless ui
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
// react-hook-form // react-hook-form
@ -10,14 +11,19 @@ import { WorkspaceService } from "services/workspace.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { Button, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
// components
import OnboardingStepIndicator from "components/account/step-indicator";
// hooks // hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown"; import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons // icons
import { Check, ChevronDown, Plus, X } from "lucide-react"; import { Check, ChevronDown, Plus, User2, X, XCircle } from "lucide-react";
// types // types
import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types"; import { IUser, IWorkspace, TOnboardingSteps, TUserWorkspaceRole } from "types";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
// assets
import user1 from "public/users/user-1.png";
import user2 from "public/users/user-2.png";
type Props = { type Props = {
finishOnboarding: () => Promise<void>; finishOnboarding: () => Promise<void>;
@ -59,7 +65,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
return ( return (
<div className="group relative grid grid-cols-11 gap-4"> <div className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7"> <div className="col-span-7 bg-onboarding-background-200 rounded-md">
<Controller <Controller
control={control} control={control}
name={`emails.${index}.email`} name={`emails.${index}.email`}
@ -80,12 +86,12 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
ref={ref} ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)} hasError={Boolean(errors.emails?.[index]?.email)}
placeholder="Enter their email..." placeholder="Enter their email..."
className="text-xs sm:text-sm w-full" className="text-xs sm:text-sm w-full h-12 placeholder:text-onboarding-text-400 border-onboarding-border-100"
/> />
)} )}
/> />
</div> </div>
<div className="col-span-3"> <div className="col-span-3 bg-onboarding-background-200 rounded-md border items-center flex border-onboarding-border-100">
<Controller <Controller
control={control} control={control}
name={`emails.${index}.role`} name={`emails.${index}.role`}
@ -104,10 +110,11 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
type="button" type="button"
ref={buttonRef} ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)} onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none" className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md duration-300"
> >
<span className="text-xs sm:text-sm">{ROLE[value]}</span> <span className="text-xs text-onboarding-text-400 sm:text-sm">{ROLE[value]}</span>
<ChevronDown className="h-3 w-3" aria-hidden="true" />
<ChevronDown className="h-4 w-4 stroke-onboarding-text-400" />
</Listbox.Button> </Listbox.Button>
<Transition <Transition
@ -122,7 +129,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
> >
<Listbox.Options <Listbox.Options
ref={dropdownRef} ref={dropdownRef}
className="fixed w-36 z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48" className="fixed w-36 z-10 border border-onboarding-border-100 mt-1 overflow-y-auto rounded-md bg-onboarding-background-200 text-xs shadow-lg focus:outline-none max-h-48"
> >
<div className="space-y-1 p-2"> <div className="space-y-1 p-2">
{Object.entries(ROLE).map(([key, value]) => ( {Object.entries(ROLE).map(([key, value]) => (
@ -131,8 +138,8 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
value={parseInt(key)} value={parseInt(key)}
className={({ active, selected }) => className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${ `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : "" active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}` } ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
} }
> >
{({ selected }) => ( {({ selected }) => (
@ -153,10 +160,10 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
{fields.length > 1 && ( {fields.length > 1 && (
<button <button
type="button" type="button"
className="hidden group-hover:grid self-center place-items-center rounded -ml-3" className="hidden group-hover:grid self-center place-items-center rounded ml-3"
onClick={() => remove(index)} onClick={() => remove(index)}
> >
<X className="h-3.5 w-3.5 text-custom-text-200" /> <XCircle className="h-3.5 w-3.5 text-custom-text-400" />
</button> </button>
)} )}
</div> </div>
@ -182,7 +189,6 @@ export const InviteMembers: React.FC<Props> = (props) => {
const nextStep = async () => { const nextStep = async () => {
const payload: Partial<TOnboardingSteps> = { const payload: Partial<TOnboardingSteps> = {
workspace_invite: true, workspace_invite: true,
workspace_join: true,
}; };
await stepChange(payload); await stepChange(payload);
@ -223,49 +229,94 @@ export const InviteMembers: React.FC<Props> = (props) => {
}, [fields, append]); }, [fields, append]);
return ( return (
<form <div className="flex py-14">
className="w-full space-y-7 sm:space-y-10 overflow-hidden flex flex-col" <div
onSubmit={handleSubmit(onSubmit)} className={`hidden lg:block w-1/4 p-3 ml-auto rounded bg-onboarding-gradient-secondary border border-onboarding-border-100 border-opacity-10`}
onKeyDown={(e) => { >
if (e.code === "Enter") e.preventDefault(); <p className="text-base text-onboarding-text-400 font-semibold">Members</p>
}}
> {Array.from({ length: 4 }).map(() => (
<h2 className="text-xl sm:text-2xl font-semibold">Invite people to collaborate</h2> <div className="flex items-center gap-2 mt-4">
<div className="md:w-3/5 text-sm h-full max-h-[40vh] flex flex-col overflow-hidden"> <div className="w-8 h-8 flex justify-center items-center flex-shrink-0 rounded-full bg-onboarding-background-400">
<div className="grid grid-cols-11 gap-x-4 mb-1 text-sm"> <User2 className="h-4 w-4 stroke-onboarding-background-300 fill-onboarding-background-400" />
<h6 className="col-span-7">Co-workers Email</h6> </div>
<h6 className="col-span-4">Role</h6> <div className="w-full">
<div className="rounded-md h-2.5 my-2 bg-onboarding-background-100 w-2/3" />
<div className="rounded-md h-2 bg-onboarding-background-400 w-1/2" />
</div>
</div>
))}
<div className="relative mt-20 h-32">
<div className="flex absolute bg-onboarding-background-200 p-2 rounded-full gap-x-2 border border-onboarding-border-100 w-full mt-1 -left-1/2">
<div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10">
<Image src={user2} alt="user" />
</div>
<div>
<p className="text-sm font-medium">Murphy cooper</p>
<p className="text-onboarding-text-400 text-sm">murphy@plane.so</p>
</div>
</div>
<div className="flex absolute bg-onboarding-background-200 p-2 rounded-full gap-x-2 border border-onboarding-border-100 -left-1/3 mt-14 w-full">
<div className="w-8 h-8 flex-shrink-0 rounded-full bg-custom-primary-10">
<Image src={user1} alt="user" />
</div>
<div>
<p className="text-sm font-medium">Else Thompson</p>
<p className="text-onboarding-text-400 text-sm">Elsa@plane.so</p>
</div>
</div>
</div> </div>
<div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto"> </div>
{fields.map((field, index) => ( <form
<InviteMemberForm className="px-7 sm:px-0 md:w-4/5 lg:w-1/2 mx-auto space-y-7 sm:space-y-10 overflow-hidden flex flex-col"
control={control} onSubmit={handleSubmit(onSubmit)}
errors={errors} onKeyDown={(e) => {
field={field} if (e.code === "Enter") e.preventDefault();
fields={fields} }}
index={index} >
remove={remove} <div className="flex justify-between items-center">
key={field.id} <h2 className="text-xl sm:text-2xl font-semibold">Invite your team to work with you</h2>
/> <OnboardingStepIndicator step={2} />
))}
</div> </div>
<button
type="button" <div className="md:w-4/5 text-sm flex flex-col overflow-hidden">
className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3" <div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
onClick={appendField} {fields.map((field, index) => (
> <InviteMemberForm
<Plus className="h-3 w-3" /> control={control}
Add another errors={errors}
</button> field={field}
</div> fields={fields}
<div className="flex items-center gap-4"> index={index}
<Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md"> remove={remove}
{isSubmitting ? "Sending..." : "Send Invite"} key={field.id}
</Button> />
<Button variant="neutral-primary" size="md" onClick={nextStep}> ))}
Skip this step </div>
</Button> <button
</div> type="button"
</form> className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-sm font-semibold py-2 pr-3"
onClick={appendField}
>
<Plus className="h-3 w-3" />
Add another
</button>
</div>
<div className="flex items-center gap-4">
<Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
{isSubmitting ? "Sending..." : "Send Invite"}
</Button>
{/* <Button variant="outline-primary" size="md" onClick={nextStep}>
Copy invite link
</Button> */}
<span className="text-sm text-onboarding-text-400 hover:cursor-pointer" onClick={nextStep}>
Do this later
</span>
</div>
</form>
</div>
); );
}; };

View File

@ -1,139 +1,83 @@
import React, { useState } from "react"; import React from "react";
import useSWR, { mutate } from "swr";
// services
import { WorkspaceService } from "services/workspace.service";
// hooks // hooks
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
// ui // components
import { Button } from "@plane/ui"; import Invitations from "./invitations";
// icons import DummySidebar from "components/account/sidebar";
import { CheckCircle } from "lucide-react"; import OnboardingStepIndicator from "components/account/step-indicator";
// helpers import { Workspace } from "./workspace";
import { truncateText } from "helpers/string.helper";
// types // types
import { IWorkspaceMemberInvitation, TOnboardingSteps } from "types"; import { IWorkspace, TOnboardingSteps } from "types";
// fetch-keys // react-hook-form
import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys"; import { Controller, useForm } from "react-hook-form";
// constants
import { ROLE } from "constants/workspace";
import { trackEvent } from "helpers/event-tracker.helper";
type Props = { type Props = {
finishOnboarding: () => Promise<void>; finishOnboarding: () => Promise<void>;
stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>; stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
updateLastWorkspace: () => Promise<void>; setTryDiffAccount: () => void;
}; };
// services export const JoinWorkspaces: React.FC<Props> = ({ stepChange, setTryDiffAccount }) => {
const workspaceService = new WorkspaceService();
export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const { user } = useUser(); const { user } = useUser();
const {
const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => handleSubmit,
workspaceService.userWorkspaceInvitations() control,
); setValue,
watch,
const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => { formState: { errors, isSubmitting, isValid },
if (action === "accepted") { } = useForm<IWorkspace>({
setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]); defaultValues: {
} else if (action === "withdraw") { name: "",
setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id)); slug: `${window.location.host}/`,
} },
}; mode: "onChange",
});
const handleNextStep = async () => { const handleNextStep = async () => {
if (!user) return; if (!user) return;
await stepChange({ workspace_join: true, workspace_create: true });
await stepChange({ workspace_join: true });
if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
};
const submitInvitations = async () => {
if (invitationsRespond.length <= 0) return;
setIsJoiningWorkspaces(true);
await workspaceService
.joinWorkspaces({ invitations: invitationsRespond })
.then(async (res) => {
trackEvent(
'WORKSPACE_USER_INVITE_ACCEPT',
res
)
await mutateInvitations();
await mutate(USER_WORKSPACES);
await updateLastWorkspace();
await handleNextStep();
})
.finally(() => setIsJoiningWorkspaces(false));
}; };
return ( return (
<div className="w-full space-y-7 sm:space-y-10"> <div className="flex h-full w-full">
<h5 className="sm:text-lg">We see that someone has invited you to</h5> <div className="hidden lg:block w-3/12">
<h4 className="text-xl sm:text-2xl font-semibold">Join a workspace</h4> <Controller
<div className="max-h-[37vh] overflow-y-auto md:w-3/5 space-y-4"> control={control}
{invitations && name="name"
invitations.map((invitation) => { render={({ field: { value } }) => (
const isSelected = invitationsRespond.includes(invitation.id); <DummySidebar
watch={watch}
return ( setValue={setValue}
<div control={control}
key={invitation.id} showProject={false}
className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80" workspaceName={value.length > 0 ? value : "New Workspace"}
}`} />
onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")} )}
> />
<div className="flex-shrink-0">
<div className="grid place-items-center h-9 w-9 rounded">
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
<img
src={invitation.workspace.logo}
height="100%"
width="100%"
className="rounded"
alt={invitation.workspace.name}
/>
) : (
<span className="grid place-items-center h-9 w-9 py-1.5 px-3 rounded bg-gray-700 uppercase text-white">
{invitation.workspace.name[0]}
</span>
)}
</div>
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
<p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
</div>
<span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
<CheckCircle className="h-5 w-5" />
</span>
</div>
);
})}
</div> </div>
<div className="flex items-center gap-3">
<Button <div className="w-full lg:w-1/2 md:w-4/5 md:px-0 px-7 my-16 mx-auto">
variant="primary" <div className="flex justify-between items-center">
type="submit" <p className="font-semibold text-onboarding-text-200 text-xl sm:text-2xl">What will your workspace be?</p>
size="md" <OnboardingStepIndicator step={1} />
onClick={submitInvitations} </div>
disabled={invitationsRespond.length === 0} <Workspace
loading={isJoiningWorkspaces} stepChange={stepChange}
> user={user}
Accept & Join control={control}
</Button> handleSubmit={handleSubmit}
<Button variant="neutral-primary" size="md" onClick={handleNextStep}> setValue={setValue}
Skip for now errors={errors}
</Button> isSubmitting={isSubmitting}
/>
<div className="flex md:w-4/5 items-center my-8">
<hr className="border-onboarding-border-100 w-full" />
<p className="text-center text-sm text-custom-text-400 mx-3 flex-shrink-0">Or</p>
<hr className="border-onboarding-border-100 w-full" />
</div>
<div className="w-full">
<Invitations setTryDiffAccount={setTryDiffAccount} handleNextStep={handleNextStep} />
</div>
</div> </div>
</div> </div>
); );

View File

@ -1,22 +1,29 @@
import { useEffect } from "react"; // react
import React, { useState } from "react";
// next
import Image from "next/image";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// ui // components
import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui"; import { Button, Input } from "@plane/ui";
import DummySidebar from "components/account/sidebar";
import OnboardingStepIndicator from "components/account/step-indicator";
// types // types
import { IUser } from "types"; import { IUser } from "types";
// helpers
import { getUserTimeZoneFromWindow } from "helpers/date-time.helper";
// constants // constants
import { USER_ROLES } from "constants/workspace";
import { TIME_ZONES } from "constants/timezones"; import { TIME_ZONES } from "constants/timezones";
// assets
import IssuesSvg from "public/onboarding/onboarding-issues.svg";
import { ImageUploadModal } from "components/core";
// icons
import { Camera, User2 } from "lucide-react";
const defaultValues: Partial<IUser> = { const defaultValues: Partial<IUser> = {
first_name: "", first_name: "",
last_name: "", avatar: "",
role: "", use_case: undefined,
}; };
type Props = { type Props = {
@ -31,13 +38,16 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
export const UserDetails: React.FC<Props> = observer((props) => { export const UserDetails: React.FC<Props> = observer((props) => {
const { user } = props; const { user } = props;
const [isRemoving, setIsRemoving] = useState(false);
const [selectedUsecase, setSelectedUsecase] = useState<number | null>();
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
const { user: userStore } = useMobxStore(); const { user: userStore } = useMobxStore();
const { const {
handleSubmit, handleSubmit,
control, control,
reset, watch,
setValue,
formState: { errors, isSubmitting, isValid }, formState: { errors, isSubmitting, isValid },
} = useForm<IUser>({ } = useForm<IUser>({
defaultValues, defaultValues,
@ -48,6 +58,9 @@ export const UserDetails: React.FC<Props> = observer((props) => {
const payload: Partial<IUser> = { const payload: Partial<IUser> = {
...formData, ...formData,
first_name: formData.first_name.split(" ")[0],
last_name: formData.first_name.split(" ")[1],
use_case: formData.use_case,
onboarding_step: { onboarding_step: {
...user.onboarding_step, ...user.onboarding_step,
profile_complete: true, profile_complete: true,
@ -57,136 +70,130 @@ export const UserDetails: React.FC<Props> = observer((props) => {
await userStore.updateCurrentUser(payload); await userStore.updateCurrentUser(payload);
}; };
useEffect(() => { const useCases = [
if (user) { "Build Products",
reset({ "Manage Feedbacks",
first_name: user.first_name, "Service delivery",
last_name: user.last_name, "Field force management",
role: user.role, "Code Repository Integration",
user_timezone: getUserTimeZoneFromWindow(), "Bug Tracking",
}); "Test Case Management",
} "Rescource allocation",
}, [user, reset]); ];
return ( return (
<form <div className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto flex ">
className="h-full w-full space-y-7 sm:space-y-10 overflow-y-auto sm:flex sm:flex-col sm:items-start sm:justify-center" <div className="hidden lg:block w-3/12">
onSubmit={handleSubmit(onSubmit)} <DummySidebar showProject workspaceName="New Workspace" />
>
<div className="relative sm:text-lg">
<div className="text-custom-primary-100 absolute -top-1 -left-3">{'"'}</div>
<h5>Hey there 👋🏻</h5>
<h5 className="mt-5 mb-6">Let{"'"}s get you onboard!</h5>
<h4 className="text-xl sm:text-2xl font-semibold">Set up your Plane profile.</h4>
</div> </div>
<ImageUploadModal
isOpen={isImageUploadModalOpen}
onClose={() => setIsImageUploadModalOpen(false)}
isRemoving={isRemoving}
handleDelete={() => {}}
onSuccess={(url) => {
setValue("avatar", url);
setIsImageUploadModalOpen(false);
}}
value={watch("avatar") !== "" ? watch("avatar") : undefined}
userImage
/>
<div className="flex lg:w-3/5 md:w-4/5 md:px-0 px-7 mx-auto flex-col">
<form onSubmit={handleSubmit(onSubmit)} className="md:w-11/12 mx-auto">
<div className="flex justify-between items-center">
<p className="font-semibold text-xl sm:text-2xl">What do we call you? </p>
<OnboardingStepIndicator step={2} />
</div>
<div className="flex mt-5 w-full ">
<button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
{!watch("avatar") || watch("avatar") === "" ? (
<div className="h-16 hover:cursor-pointer justify-center items-center flex w-16 rounded-full flex-shrink-0 mr-3 relative bg-onboarding-background-300">
<div className="h-6 w-6 flex justify-center items-center bottom-1 border border-onboarding-border-100 -right-1 bg-onboarding-background-100 rounded-full absolute">
<Camera className="h-4 w-4 stroke-onboarding-background-400" />
</div>
<User2 className="h-10 w-10 stroke-onboarding-background-300 fill-onboarding-background-400" />
</div>
) : (
<div className="relative h-16 w-16 overflow-hidden mr-3">
<img
src={watch("avatar")}
className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
onClick={() => setIsImageUploadModalOpen(true)}
alt={user?.display_name}
/>
</div>
)}
</button>
<div className="space-y-7 sm:w-3/4 md:w-2/5"> <div className="my-2 bg-onboarding-background-200 w-full mr-10 rounded-md flex text-sm">
<div className="space-y-1 text-sm"> <Controller
<label htmlFor="firstName">First Name</label> control={control}
<Controller
control={control}
name="first_name"
rules={{
required: "First name is required",
maxLength: {
value: 24,
message: "First name cannot exceed the limit of 24 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name" name="first_name"
type="text" rules={{
value={value} required: "First name is required",
onChange={onChange} maxLength: {
ref={ref} value: 24,
hasError={Boolean(errors.first_name)} message: "First name cannot exceed the limit of 24 characters",
placeholder="Enter your first name..." },
className="w-full" }}
render={({ field: { value, onChange, ref } }) => (
<Input
id="first_name"
name="first_name"
type="text"
value={value}
autoFocus={true}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.first_name)}
placeholder="Enter your full name..."
className="w-full focus:border-custom-primary-100 border-onboarding-border-100"
/>
)}
/> />
)} </div>
/> </div>
</div> <div className="mt-14 mb-10">
<div className="space-y-1 text-sm">
<label htmlFor="lastName">Last Name</label>
<Controller
control={control}
name="last_name"
rules={{
required: "Last name is required",
maxLength: {
value: 24,
message: "Last name cannot exceed the limit of 24 characters",
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="last_name"
name="last_name"
type="text"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.last_name)}
placeholder="Enter your last name..."
className="w-full"
/>
)}
/>
</div>
<div className="space-y-1 text-sm">
<span>What{"'"}s your role?</span>
<div className="w-full">
<Controller <Controller
name="role"
control={control} control={control}
rules={{ required: "This field is required" }} name="first_name"
render={({ field: { value } }) => (
<p className="font-medium text-onboarding-text-200 text-xl sm:text-2xl p-0">
And how will you use Plane{value.length>0?", ":""}{value}?
</p>
)}
/>
<p className="font-medium text-onboarding-text-300 text-sm my-3">Choose just one</p>
<Controller
control={control}
name="use_case"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomSelect <div className="flex flex-wrap break-all overflow-auto">
value={value} {useCases.map((useCase) => (
onChange={(val: any) => onChange(val)} <div
label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>} className={`border mb-3 hover:cursor-pointer hover:bg-onboarding-background-300/30 flex-shrink-0 ${
input value === useCase ? "border-custom-primary-100" : "border-onboarding-border-100"
width="w-full" } mr-3 rounded-sm p-3 text-sm font-medium`}
> onClick={() => onChange(useCase)}
{USER_ROLES.map((item) => ( >
<CustomSelect.Option key={item.value} value={item.value}> {useCase}
{item.label} </div>
</CustomSelect.Option>
))} ))}
</CustomSelect> </div>
)} )}
/> />
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
</div>
</div>
<div className="space-y-1 text-sm">
<span>What time zone are you in? </span>
<div className="w-full">
<Controller
name="user_timezone"
control={control}
rules={{ required: "This field is required" }}
render={({ field: { value, onChange } }) => (
<CustomSearchSelect
value={value}
label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
options={timeZoneOptions}
onChange={onChange}
optionsClassName="w-full"
input
/>
)}
/>
{errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
</div> </div>
<Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Updating..." : "Continue"}
</Button>
</form>
<div className="mt-3 flex ml-auto">
<Image src={IssuesSvg} className="w-2/3 h-[w-2/3] object-cover" />
</div> </div>
</div> </div>
</div>
<Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
{isSubmitting ? "Updating..." : "Continue"}
</Button>
</form>
); );
}); });

View File

@ -1,67 +1,172 @@
import { useState } from "react"; import { useState } from "react";
// ui // ui
import { Button } from "@plane/ui"; import { Button, Input } from "@plane/ui";
// types // types
import { IUser, IWorkspace, TOnboardingSteps } from "types"; import { IUser, IWorkspace, TOnboardingSteps } from "types";
// hooks
import useToast from "hooks/use-toast";
// services
import { WorkspaceService } from "services/workspace.service";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
// constants // constants
import { CreateWorkspaceForm } from "components/workspace"; import { RESTRICTED_URLS } from "constants/workspace";
// react-hook-form
import { Control, Controller, FieldErrors, UseFormHandleSubmit, UseFormSetValue } from "react-hook-form";
type Props = { type Props = {
finishOnboarding: () => Promise<void>;
stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>; stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
updateLastWorkspace: () => Promise<void>;
user: IUser | undefined; user: IUser | undefined;
workspaces: IWorkspace[] | undefined; control: Control<IWorkspace, any>;
handleSubmit: UseFormHandleSubmit<IWorkspace, undefined>;
errors: FieldErrors<IWorkspace>;
setValue: UseFormSetValue<IWorkspace>;
isSubmitting: boolean;
}; };
export const Workspace: React.FC<Props> = (props) => { // services
const { finishOnboarding, stepChange, updateLastWorkspace, user, workspaces } = props; const workspaceService = new WorkspaceService();
const [defaultValues, setDefaultValues] = useState({ export const Workspace: React.FC<Props> = (props) => {
name: "", const { stepChange, user, control, handleSubmit, setValue, errors, isSubmitting } = props;
slug: "", const [slugError, setSlugError] = useState(false);
organization_size: "", const [invalidSlug, setInvalidSlug] = useState(false);
});
const {
workspace: workspaceStore,
user: { updateCurrentUser },
} = useMobxStore();
const { setToastAlert } = useToast();
const handleCreateWorkspace = async (formData: IWorkspace) => {
if (isSubmitting) return;
const slug = formData.slug.split("/");
formData.slug = slug[slug.length - 1];
await workspaceService
.workspaceSlugCheck(formData.slug)
.then(async (res) => {
if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
setSlugError(false);
await workspaceStore
.createWorkspace(formData)
.then(async (res) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Workspace created successfully.",
});
await workspaceStore.fetchWorkspaces();
await completeStep();
})
.catch(() =>
setToastAlert({
type: "error",
title: "Error!",
message: "Workspace could not be created. Please try again.",
})
);
} else setSlugError(true);
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Some error occurred while creating workspace. Please try again.",
});
});
};
const completeStep = async () => { const completeStep = async () => {
if (!user) return; if (!user || !workspaceStore.workspaces) return;
const payload: Partial<TOnboardingSteps> = { const payload: Partial<TOnboardingSteps> = {
workspace_create: true, workspace_create: true,
workspace_join: true,
}; };
await stepChange(payload); await stepChange(payload);
await updateLastWorkspace(); await updateCurrentUser({
}; last_workspace_id: workspaceStore.workspaces[0]?.id,
});
const secondaryButtonAction = async () => {
if (workspaces && workspaces.length > 0) {
await stepChange({ workspace_create: true, workspace_invite: true, workspace_join: true });
await finishOnboarding();
} else await stepChange({ profile_complete: false, workspace_join: false });
}; };
return ( return (
<div className="w-full space-y-7 sm:space-y-10"> <form className="mt-5 md:w-2/3" onSubmit={handleSubmit(handleCreateWorkspace)}>
<h4 className="text-xl sm:text-2xl font-semibold">Create your workspace</h4> <div className="mb-5">
<div className="sm:w-3/4 md:w-2/5"> <p className="text-base text-custom-text-400 mb-1">Name it.</p>
<CreateWorkspaceForm <Controller
onSubmit={completeStep} control={control}
defaultValues={defaultValues} name="name"
setDefaultValues={setDefaultValues} rules={{
primaryButtonText={{ required: "Workspace name is required",
loading: "Creating...", validate: (value) =>
default: "Continue", /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
maxLength: {
value: 80,
message: "Workspace name should not exceed 80 characters",
},
}} }}
secondaryButton={ render={({ field: { value, ref, onChange } }) => (
workspaces ? ( <div className="flex items-center relative rounded-md bg-onboarding-background-200">
<Button variant="neutral-primary" onClick={secondaryButtonAction}> <Input
{workspaces.length > 0 ? "Skip & continue" : "Back"} id="name"
</Button> name="name"
) : undefined type="text"
} value={value}
onChange={(event) => {
onChange(event.target.value);
setValue("name", event.target.value);
if (window && window.location.host) {
const host = window.location.host;
const slug = event.currentTarget.value.split("/");
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
}
}}
placeholder="Enter workspace name..."
ref={ref}
hasError={Boolean(errors.name)}
className="w-full h-[46px] text-base placeholder:text-custom-text-400/50 placeholder:text-base border-onboarding-border-100"
/>
</div>
)}
/> />
{errors.name && <span className="text-sm text-red-500">{errors.name.message}</span>}
<p className="text-base text-custom-text-400 mt-4 mb-1">You can edit the slug.</p>
<Controller
control={control}
name="slug"
render={({ field: { value, onChange, ref } }) => (
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
<Input
id="slug"
name="slug"
type="text"
prefix="asdasdasdas"
value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
onChange={(e) => {
const host = window.location.host;
const slug = e.currentTarget.value.split("/");
/^[a-zA-Z0-9_-]+$/.test(slug[slug.length - 1]) ? setInvalidSlug(false) : setInvalidSlug(true);
setValue("slug", `${host}/${slug[slug.length - 1].toLocaleLowerCase().trim().replace(/ /g, "-")}`);
}}
ref={ref}
hasError={Boolean(errors.slug)}
className="w-full h-[46px] border-onboarding-border-100"
/>
</div>
)}
/>
{slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
{invalidSlug && (
<span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
)}
</div> </div>
</div> <Button variant="primary" type="submit" size="md">
{isSubmitting ? "Creating..." : "Make it live"}
</Button>
</form>
); );
}; };

View File

@ -19,8 +19,11 @@ import {
import { Loader, Spinner } from "@plane/ui"; import { Loader, Spinner } from "@plane/ui";
// images // images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import signInIssues from "public/onboarding/onboarding-issues.svg";
// types // types
import { IUser, IUserSettings } from "types"; import { IUser, IUserSettings } from "types";
// icons
import { Lightbulb } from "lucide-react";
const authService = new AuthService(); const authService = new AuthService();
@ -36,7 +39,8 @@ export const SignInView = observer(() => {
const [isLoading, setLoading] = useState(false); const [isLoading, setLoading] = useState(false);
// toast // toast
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
// computed
// computed.
const enableEmailPassword = const enableEmailPassword =
envConfig && envConfig &&
(envConfig?.email_password_login || (envConfig?.email_password_login ||
@ -180,71 +184,82 @@ export const SignInView = observer(() => {
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<> <div className={`bg-onboarding-gradient-primary h-full overflow-y-auto`}>
<> <div className="sm:py-5 pl-8 pb-4 sm:pl-16 lg:pl-28 ">
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" /> <div className="flex text-3xl items-center mt-16 font-semibold">
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28"> <div className="h-[30px] w-[30px] mr-2">
<div className="grid place-items-center bg-custom-background-100"> <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
</div> </div>
</div> Plane
</>
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
<div>
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
Sign in to Plane
</h1>
{!envConfig ? (
<div className="pt-10 w-ful">
<Loader className="space-y-4 w-full pb-4">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
<Loader className="space-y-4 w-full pt-4">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
</div>
) : (
<>
<>
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
{envConfig?.magic_login && (
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-7">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
</div>
)}
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>
<p className="pt-16 text-custom-text-200 text-sm text-center">
By signing up, you agree to the{" "}
<a
href="https://plane.so/terms-and-conditions"
target="_blank"
rel="noopener noreferrer"
className="font-medium underline"
>
Terms & Conditions
</a>
</p>
</>
)}
</div> </div>
</div> </div>
</>
<div className="md:w-2/3 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
<div className={`p-4`}>
<div className={`px-7 sm:px-0 bg-onboarding-gradient-secondary h-full pt-32 pb-20 rounded-md`}>
{!envConfig ? (
<div className="pt-10 mx-auto flex justify-center">
<div>
<Loader className="space-y-4 w-full pb-4 mx-auto">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
<Loader className="space-y-4 w-full pt-4 mx-auto">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
</div>
</div>
) : (
<>
<>
{enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
{envConfig?.magic_login && (
<div className="flex flex-col divide-y divide-custom-border-200">
<div className="pb-2">
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
</div>
</div>
)}
<div className="flex sm:w-96 items-center mt-4 mx-auto">
<hr className={`border-onboarding-border-100 w-full`} />
<p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">
Or continue with
</p>
<hr className={`border-onboarding-border-100 w-full`} />
</div>
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-96 mx-auto overflow-hidden">
{envConfig?.google_client_id && (
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
)}
{envConfig?.github_client_id && (
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
)}
</div>
</>
<div className={`flex py-2 bg-onboarding-background-100 mx-auto rounded-sm sm:w-96 mt-16`}>
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
<p className={`text-sm text-left text-onboarding-text-200`}>
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
<span className="font-medium underline hover:cursor-pointer" onClick={() => {}}>
See new features
</span>
</p>
</div>
<div className="flex justify-center sm:w-96 sm:h-64 object-cover mt-8 mx-auto rounded-md ">
<Image
src={signInIssues}
alt="Plane Logo"
className={`flex object-cover rounded-md bg-onboarding-background-100`}
/>
</div>
</>
)}
</div>
</div>
</div>
</div>
)} )}
</> </>
); );

View File

@ -251,7 +251,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0"> <Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none"> <Menu.Button className="grid place-items-center outline-none">
<Avatar <Avatar
name={currentUser?.display_name} name={currentUser?.display_name}
src={currentUser?.avatar} src={currentUser?.avatar}
size={24} size={24}

View File

@ -1,4 +1,4 @@
import { useEffect, useState, ReactElement } from "react"; import { useEffect, useState, ReactElement, Fragment } from "react";
import Image from "next/image"; import Image from "next/image";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import useSWR from "swr"; import useSWR from "swr";
@ -15,31 +15,34 @@ import { UserAuthWrapper } from "layouts/auth-layout";
// components // components
import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding"; import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
// ui // ui
import { Spinner } from "@plane/ui"; import { Avatar, Spinner } from "@plane/ui";
// images // images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
// types // types
import { IUser, TOnboardingSteps } from "types"; import { IUser, TOnboardingSteps } from "types";
import { NextPageWithLayout } from "types/app"; import { NextPageWithLayout } from "types/app";
import { ChevronDown } from "lucide-react";
import { Menu, Popover, Transition } from "@headlessui/react";
import DeleteAccountModal from "components/account/delete-account-modal";
import { useRouter } from "next/router";
// services // services
const workspaceService = new WorkspaceService(); const workspaceService = new WorkspaceService();
const OnboardingPage: NextPageWithLayout = observer(() => { const OnboardingPage: NextPageWithLayout = observer(() => {
const [step, setStep] = useState<number | null>(null); const [step, setStep] = useState<number | null>(null);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const { const {
user: { currentUser, updateCurrentUser, updateUserOnBoard }, user: { currentUser, updateCurrentUser, updateUserOnBoard },
workspace: workspaceStore, workspace: workspaceStore,
} = useMobxStore(); } = useMobxStore();
const router = useRouter();
const user = currentUser ?? undefined; const user = currentUser ?? undefined;
const workspaces = workspaceStore.workspaces; const workspaces = workspaceStore.workspaces;
const userWorkspaces = workspaceStore.workspacesCreateByCurrentUser;
const { theme, setTheme } = useTheme(); const { setTheme } = useTheme();
const {} = useUserAuth("onboarding"); const {} = useUserAuth("onboarding");
@ -47,15 +50,6 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
workspaceService.userWorkspaceInvitations() workspaceService.userWorkspaceInvitations()
); );
// update last active workspace details
const updateLastWorkspace = async () => {
if (!workspaces) return;
await updateCurrentUser({
last_workspace_id: workspaces[0]?.id,
});
};
// handle step change // handle step change
const stepChange = async (steps: Partial<TOnboardingSteps>) => { const stepChange = async (steps: Partial<TOnboardingSteps>) => {
if (!user) return; if (!user) return;
@ -69,12 +63,13 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
await updateCurrentUser(payload); await updateCurrentUser(payload);
}; };
// complete onboarding // complete onboarding
const finishOnboarding = async () => { const finishOnboarding = async () => {
if (!user) return; if (!user || !workspaces) return;
await updateUserOnBoard(); await updateUserOnBoard();
router.replace(`/${workspaces[0].slug}`);
}; };
useEffect(() => { useEffect(() => {
@ -87,17 +82,14 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
const onboardingStep = user.onboarding_step; const onboardingStep = user.onboarding_step;
if (!onboardingStep.profile_complete && step !== 1) setStep(1); if (!onboardingStep.workspace_join && !onboardingStep.workspace_create && step !== 1) setStep(1);
if (onboardingStep.profile_complete) { if (onboardingStep.workspace_join || onboardingStep.workspace_create) {
if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4); if (!onboardingStep.profile_complete && step !== 2) setStep(2);
else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
setStep(2);
} }
if ( if (
onboardingStep.profile_complete && onboardingStep.profile_complete &&
onboardingStep.workspace_create && (onboardingStep.workspace_join || onboardingStep.workspace_create) &&
!onboardingStep.workspace_invite && !onboardingStep.workspace_invite &&
step !== 3 step !== 3
) )
@ -109,74 +101,93 @@ const OnboardingPage: NextPageWithLayout = observer(() => {
return ( return (
<> <>
<DeleteAccountModal
isOpen={showDeleteModal}
onClose={() => {
setShowDeleteModal(false);
}}
/>
{user && step !== null ? ( {user && step !== null ? (
<div className="flex h-full w-full flex-col gap-y-2 sm:gap-y-0 sm:flex-row overflow-hidden"> <div className={` bg-onboarding-gradient-primary h-full overflow-y-auto`}>
<div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5"> <div className="sm:py-14 py-10 px-4 sm:px-7 md:px-14 lg:pl-28 lg:pr-24 flex items-center">
<div className="absolute border-b-[0.5px] sm:border-r-[0.5px] border-custom-border-200 h-[0.5px] w-full top-1/2 left-0 -translate-y-1/2 sm:h-screen sm:w-[0.5px] sm:top-0 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 sm:translate-y-0 z-10" /> <div className="w-full flex items-center justify-between font-semibold ">
{step === 1 ? ( <div className="text-3xl flex items-center gap-x-1">
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 py-5 left-2 sm:left-1/2 md:left-1/3 sm:-translate-x-1/2 top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10"> <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" height={30} width={30} />
<div className="h-[30px] w-[30px]"> Plane
<Image src={BluePlaneLogoWithoutText} alt="Plane logo" />
</div>
</div> </div>
) : (
<div className="absolute grid place-items-center bg-custom-background-100 px-3 sm:px-0 sm:py-5 left-5 sm:left-1/2 md:left-1/3 sm:-translate-x-[15px] top-1/2 -translate-y-1/2 sm:translate-y-0 sm:top-12 z-10"> <div className="pr-4 flex gap-x-2 items-center">
<div className="h-[30px] w-[133px]"> {step != 1 && (
{theme === "light" ? ( <Avatar
<Image src={BlackHorizontalLogo} alt="Plane black logo" /> name={workspaces ? workspaces[0].name : "N"}
) : ( size={35}
<Image src={WhiteHorizontalLogo} alt="Plane white logo" /> shape="square"
)} fallbackBackgroundColor="#FCBE1D"
</div> className="!text-base"
</div>
)}
<div className="absolute sm:fixed text-custom-text-100 text-sm font-medium right-4 top-1/4 sm:top-12 -translate-y-1/2 sm:translate-y-0 sm:right-16 sm:py-5">
{user?.email}
</div>
</div>
<div className="relative flex justify-center sm:items-center h-full px-8 pb-0 sm:px-0 sm:py-12 sm:pr-[8.33%] sm:w-10/12 md:w-9/12 lg:w-4/5 overflow-hidden">
{step === 1 ? (
<UserDetails user={user} />
) : step === 2 ? (
<Workspace
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
user={user}
workspaces={workspaces}
/>
) : step === 3 ? (
<InviteMembers
finishOnboarding={finishOnboarding}
stepChange={stepChange}
user={user}
workspace={userWorkspaces?.[0]}
/>
) : (
step === 4 && (
<JoinWorkspaces
finishOnboarding={finishOnboarding}
stepChange={stepChange}
updateLastWorkspace={updateLastWorkspace}
/>
)
)}
</div>
{step !== 4 && (
<div className="sticky sm:fixed bottom-0 md:bottom-14 md:right-16 py-6 md:py-0 flex justify-center md:justify-end bg-custom-background-100 md:bg-transparent pointer-events-none w-full z-[1]">
<div className="w-3/4 md:w-1/5 space-y-1">
<p className="text-xs text-custom-text-200">{step} of 3 steps</p>
<div className="relative h-1 w-full rounded bg-custom-background-80">
<div
className="absolute top-0 left-0 h-1 rounded bg-custom-primary-100 duration-300"
style={{
width: `${((step / 3) * 100).toFixed(0)}%`,
}}
/> />
)}
<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> </div>
)} </div>
<div className="w-full lg:w-4/5 xl:w-3/4 sm:w-4/5 rounded-md mx-auto shadow-sm border border-custom-border-200">
<div className={`bg-onboarding-gradient-primary p-4`}>
<div className={`bg-onboarding-gradient-secondary h-full rounded-md`}>
{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> </div>
) : ( ) : (
<div className="h-screen w-full grid place-items-center"> <div className="h-screen w-full grid place-items-center">

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.7 MiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
web/public/users/user-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
web/public/users/user-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -184,4 +184,13 @@ export class UserService extends APIService {
throw error?.response?.data; throw error?.response?.data;
}); });
} }
async deleteAccount(): Promise<void> {
return this.delete("/api/users/me/")
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
});
}
} }

View File

@ -64,7 +64,7 @@ export class WorkspaceService extends APIService {
} }
async inviteWorkspace(workspaceSlug: string, data: IWorkspaceBulkInviteFormData): Promise<any> { async inviteWorkspace(workspaceSlug: string, data: IWorkspaceBulkInviteFormData): Promise<any> {
return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data) return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
.then((response) => response?.data) .then((response) => response?.data)
.catch((error) => { .catch((error) => {
throw error?.response?.data; throw error?.response?.data;

View File

@ -125,6 +125,24 @@
--color-border-200: 229, 229, 229; /* subtle border- 2 */ --color-border-200: 229, 229, 229; /* subtle border- 2 */
--color-border-300: 212, 212, 212; /* strong border- 1 */ --color-border-300: 212, 212, 212; /* strong border- 1 */
--color-border-400: 185, 185, 185; /* strong border- 2 */ --color-border-400: 185, 185, 185; /* strong border- 2 */
/* onboarding colors */
--gradient-onboarding-primary: linear-gradient(106deg, #F2F6FF 29.8%, #E1EAFF 99.34%);
--gradient-onboarding-secondary: linear-gradient(129deg, rgba(255, 255, 255, 0.00) -22.23%, rgba(255, 255, 255, 0.80) 62.98%);
--color-onboarding-text-100: 23, 23, 23;
--color-onboarding-text-200: 58, 58, 58;
--color-onboarding-text-300: 82, 82, 82;
--color-onboarding-text-400: 163, 163, 163;
--color-onboarding-background-100: 236, 241, 255;
--color-onboarding-background-200: 255, 255, 255;
--color-onboarding-background-300: 236, 241, 255;
--color-onboarding-background-400: 177, 206, 250;
--color-onboarding-border-100: 229, 229, 229;
--color-onboarding-border-200: 217, 228, 255;
} }
[data-theme="light-contrast"] { [data-theme="light-contrast"] {
@ -172,6 +190,25 @@
--color-border-200: 38, 38, 38; /* subtle border- 2 */ --color-border-200: 38, 38, 38; /* subtle border- 2 */
--color-border-300: 46, 46, 46; /* strong border- 1 */ --color-border-300: 46, 46, 46; /* strong border- 1 */
--color-border-400: 58, 58, 58; /* strong border- 2 */ --color-border-400: 58, 58, 58; /* strong border- 2 */
/* onboarding colors */
--gradient-onboarding-primary: linear-gradient(106deg, #18191B 25.17%, #18191B 99.34%);
--gradient-onboarding-secondary: linear-gradient(129deg, rgba(47, 49, 53, 0.80) -22.23%, rgba(33, 34, 37, 0.80) 62.98%);
--color-onboarding-text-100: 237, 238, 240;
--color-onboarding-text-200: 176, 180, 187;
--color-onboarding-text-300: 118, 123, 132;
--color-onboarding-text-400: 105, 110, 119;
--color-onboarding-background-100: 54, 58, 64;
--color-onboarding-background-200: 40, 42, 45;
--color-onboarding-background-300: 40, 42, 45;
--color-onboarding-background-400: 67, 72, 79;
--color-onboarding-border-100: 54, 58, 64;
--color-onboarding-border-200: 54, 58, 64;
} }
[data-theme="dark-contrast"] { [data-theme="dark-contrast"] {

View File

@ -27,6 +27,7 @@ export interface IUser {
user_timezone: string; user_timezone: string;
username: string; username: string;
theme: IUserTheme; theme: IUserTheme;
use_case? :string;
} }
export interface IInstanceAdminStatus { export interface IInstanceAdminStatus {