import React, { useState } from "react"; import useSWR, { mutate } from "swr"; // hooks import { useEventTracker, useUser, useWorkspace } from "hooks/store"; // components import { Button } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; // services import { WorkspaceService } from "services/workspace.service"; // constants import { USER_WORKSPACES, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys"; import { ROLE } from "constants/workspace"; import { MEMBER_ACCEPTED } from "constants/event-tracker"; // types import { IWorkspaceMemberInvitation } from "@plane/types"; // icons import { CheckCircle2, Search } from "lucide-react"; import {} from "hooks/store/use-event-tracker"; import { getUserRole } from "helpers/user.helper"; type Props = { handleNextStep: () => void; setTryDiffAccount: () => void; }; const workspaceService = new WorkspaceService(); export const Invitations: React.FC = (props) => { const { handleNextStep, setTryDiffAccount } = props; // states const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); const [invitationsRespond, setInvitationsRespond] = useState([]); // store hooks const { captureEvent } = useEventTracker(); const { currentUser, updateCurrentUser } = useUser(); const { workspaces, fetchWorkspaces } = useWorkspace(); const workspacesList = Object.values(workspaces); const { data: invitations, mutate: mutateInvitations } = 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 (!workspacesList) return; await updateCurrentUser({ last_workspace_id: workspacesList[0]?.id, }); }; const submitInvitations = async () => { if (invitationsRespond.length <= 0) return; setIsJoiningWorkspaces(true); const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]); await workspaceService .joinWorkspaces({ invitations: invitationsRespond }) .then(async () => { captureEvent(MEMBER_ACCEPTED, { member_id: invitation?.id, role: getUserRole(invitation?.role!), project_id: undefined, accepted_from: "App", state: "SUCCESS", element: "Workspace invitations page", }); await fetchWorkspaces(); await mutate(USER_WORKSPACES); await updateLastWorkspace(); await handleNextStep(); await mutateInvitations(); }) .catch((error) => { console.error(error); captureEvent(MEMBER_ACCEPTED, { member_id: invitation?.id, role: getUserRole(invitation?.role!), project_id: undefined, accepted_from: "App", state: "FAILED", element: "Workspace invitations page", }); }) .finally(() => setIsJoiningWorkspaces(false)); }; return invitations && invitations.length > 0 ? (

Choose a workspace to join

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

{ROLE[invitation.role]}

); })}
Don't see your workspace?
Try a different email address

Your right e-mail address could be from a Google or GitHub login.

) : ( ); }; const EmptyInvitation = ({ email, setTryDiffAccount }: { email: string; setTryDiffAccount: () => void }) => (

Is your team already on Plane?

We couldn’t find any existing workspaces for the email address {email}

Try a different email address

Your right e-mail address could be from a Google or GitHub login.

);