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"; // services import { WorkspaceService } from "services/workspace.service"; import { UserService } from "services/user.service"; // hooks import useUser from "hooks/use-user"; 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"; // icons import { CheckCircle2 } from "lucide-react"; // 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"; // types import { NextPageWithLayout } from "types/app"; import type { IWorkspaceMemberInvitation } from "types"; // constants import { ROLE } from "constants/workspace"; // components import { EmptyState } from "components/common"; // mobx-store import { useMobxStore } from "lib/mobx/store-provider"; // services const workspaceService = new WorkspaceService(); const userService = new UserService(); const UserInvitationsPage: NextPageWithLayout = observer(() => { const [invitationsRespond, setInvitationsRespond] = useState([]); const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); // store const { workspace: { workspaceSlug }, user: { currentUserSettings }, trackEvent: { postHogEventTracker } } = useMobxStore(); const router = useRouter(); const { theme } = useTheme(); const { user } = useUser(); const { setToastAlert } = useToast(); const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations() ); const redirectWorkspaceSlug = workspaceSlug || 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 redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace; postHogEventTracker( "MEMBER_ACCEPTED", { ...res, state: "SUCCESS", accepted_from: "App" } ); 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(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong, Please try again.", }); setIsJoiningWorkspaces(false); }); }; return (
{theme === "light" ? ( Plane black logo ) : ( Plane white logo )}
{user?.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 !== "" ? ( {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;