import React, { useState, ReactElement } from "react"; import Link from "next/link"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR, { mutate } from "swr"; import { useTheme } from "next-themes"; import { observer } from "mobx-react-lite"; import { CheckCircle2 } from "lucide-react"; // services import { WorkspaceService } from "services/workspace.service"; import { UserService } from "services/user.service"; // hooks import { useEventTracker, useUser } from "hooks/store"; import useToast from "hooks/use-toast"; // layouts import DefaultLayout from "layouts/default-layout"; import { UserAuthWrapper } from "layouts/auth-layout"; // ui import { Button } from "@plane/ui"; // images import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg"; import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg"; import emptyInvitation from "public/empty-state/invitation.svg"; // helpers import { truncateText } from "helpers/string.helper"; import { getUserRole } from "helpers/user.helper"; // types import { NextPageWithLayout } from "lib/types"; import type { IWorkspaceMemberInvitation } from "@plane/types"; // constants import { ROLE } from "constants/workspace"; import { MEMBER_ACCEPTED } from "constants/event-tracker"; // components import { EmptyState } from "components/common"; // services const workspaceService = new WorkspaceService(); const userService = new UserService(); const UserInvitationsPage: NextPageWithLayout = observer(() => { // states const [invitationsRespond, setInvitationsRespond] = useState([]); const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); // store hooks const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker(); const { currentUser, currentUserSettings } = useUser(); // router const router = useRouter(); // next-themes const { theme } = useTheme(); // toast alert const { setToastAlert } = useToast(); const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations()); const redirectWorkspaceSlug = currentUserSettings?.workspace?.last_workspace_slug || currentUserSettings?.workspace?.fallback_workspace_slug || ""; const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => { if (action === "accepted") { setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]); } else if (action === "withdraw") { setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id)); } }; const submitInvitations = () => { if (invitationsRespond.length === 0) { setToastAlert({ type: "error", title: "Error!", message: "Please select at least one invitation.", }); return; } setIsJoiningWorkspaces(true); workspaceService .joinWorkspaces({ invitations: invitationsRespond }) .then((res) => { mutate("USER_WORKSPACES"); const firstInviteId = invitationsRespond[0]; const invitation = invitations?.find((i) => i.id === firstInviteId); const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace; joinWorkspaceMetricGroup(redirectWorkspace?.id); captureEvent(MEMBER_ACCEPTED, { member_id: invitation?.id, role: getUserRole(invitation?.role!), project_id: undefined, accepted_from: "App", state: "SUCCESS", element: "Workspace invitations page", }); userService .updateUser({ last_workspace_id: redirectWorkspace?.id }) .then(() => { setIsJoiningWorkspaces(false); router.push(`/${redirectWorkspace?.slug}`); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong, Please try again.", }); setIsJoiningWorkspaces(false); }); }) .catch(() => { captureEvent(MEMBER_ACCEPTED, { project_id: undefined, accepted_from: "App", state: "FAILED", element: "Workspace invitations page", }); setToastAlert({ type: "error", title: "Error!", message: "Something went wrong, Please try again.", }); setIsJoiningWorkspaces(false); }); }; return (
{theme === "light" ? ( Plane black logo ) : ( Plane white logo )}
{currentUser?.email}
{invitations ? ( invitations.length > 0 ? (
We see that someone has invited you to

Join a workspace

{invitations.map((invitation) => { const isSelected = invitationsRespond.includes(invitation.id); return (
handleInvitation(invitation, isSelected ? "withdraw" : "accepted")} >
{invitation.workspace.logo && invitation.workspace.logo.trim() !== "" ? ( {invitation.workspace.name} ) : ( {invitation.workspace.name[0]} )}
{truncateText(invitation.workspace.name, 30)}

{ROLE[invitation.role]}

); })}
) : (
router.push("/"), }} />
) ) : null}
); }); UserInvitationsPage.getLayout = function getLayout(page: ReactElement) { return ( {page} ); }; export default UserInvitationsPage;