plane/apps/app/pages/workspace-member-invitation.tsx

154 lines
4.8 KiB
TypeScript

import React from "react";
// next
import { useRouter } from "next/router";
import useSWR from "swr";
import {
CheckIcon,
CubeIcon,
ShareIcon,
StarIcon,
UserIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
// swr
// services
import workspaceService from "services/workspace.service";
// hooks
import useUser from "hooks/use-user";
// layouts
import DefaultLayout from "layouts/default-layout";
// ui
import { Spinner } from "components/ui";
// icons
import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
// types
import type { NextPage } from "next";
// constants
import { WORKSPACE_INVITATION } from "constants/fetch-keys";
const WorkspaceInvitation: NextPage = () => {
const router = useRouter();
const { invitation_id, email } = router.query;
const { user } = useUser();
const { data: invitationDetail, error } = useSWR(invitation_id && WORKSPACE_INVITATION, () =>
invitation_id ? workspaceService.getWorkspaceInvitation(invitation_id as string) : null
);
const handleAccept = () => {
if (!invitationDetail) return;
workspaceService
.joinWorkspace(
invitationDetail.workspace.slug,
invitationDetail.id,
{
accepted: true,
email: invitationDetail.email,
},
user
)
.then(() => {
if (email === user?.email) {
router.push("/invitations");
} else {
router.push("/");
}
})
.catch((err) => console.error(err));
};
return (
<DefaultLayout>
<div className="flex h-full w-full flex-col items-center justify-center px-3">
{invitationDetail ? (
<>
{error ? (
<div className="flex w-full flex-col space-y-4 rounded border border-brand-base bg-brand-base px-4 py-8 text-center shadow-2xl md:w-1/3">
<h2 className="text-xl uppercase">INVITATION NOT FOUND</h2>
</div>
) : (
<>
{invitationDetail.accepted ? (
<>
<EmptySpace
title={`You are already a member of ${invitationDetail.workspace.name}`}
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
>
<EmptySpaceItem
Icon={CubeIcon}
title="Continue to Dashboard"
action={() => router.push("/")}
/>
</EmptySpace>
</>
) : (
<EmptySpace
title={`You have been invited to ${invitationDetail.workspace.name}`}
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
>
<EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
<EmptySpaceItem
Icon={XMarkIcon}
title="Ignore"
action={() => {
router.push("/");
}}
/>
</EmptySpace>
)}
</>
)}
</>
) : error ? (
<EmptySpace
title="This invitation link is not active anymore."
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
link={{ text: "Or start from an empty project", href: "/" }}
>
{!user ? (
<EmptySpaceItem
Icon={UserIcon}
title="Sign in to continue"
action={() => {
router.push("/");
}}
/>
) : (
<EmptySpaceItem
Icon={CubeIcon}
title="Continue to Dashboard"
action={() => {
router.push("/");
}}
/>
)}
<EmptySpaceItem
Icon={StarIcon}
title="Star us on GitHub"
action={() => {
router.push("https://github.com/makeplane");
}}
/>
<EmptySpaceItem
Icon={ShareIcon}
title="Join our community of active creators"
action={() => {
router.push("https://discord.com/invite/8SR2N9PAcJ");
}}
/>
</EmptySpace>
) : (
<div className="flex h-full w-full items-center justify-center">
<Spinner />
</div>
)}
</div>
</DefaultLayout>
);
};
export default WorkspaceInvitation;