import React, { useState } from "react"; import useSWR, { mutate } from "swr"; // components import { Button } 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"; // 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"; type Props = { handleNextStep: () => void; setTryDiffAccount: () => void; }; const workspaceService = new WorkspaceService(); export const Invitations: React.FC = (props) => { const { handleNextStep, setTryDiffAccount } = props; const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); const [invitationsRespond, setInvitationsRespond] = useState([]); const { workspace: workspaceStore, user: { currentUser, updateCurrentUser }, trackEvent: { postHogEventTracker } } = 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) => { postHogEventTracker("WORKSPACE_USER_INVITE_ACCEPT", { ...res, state: "SUCCESS" }); await mutateInvitations(); await workspaceStore.fetchWorkspaces(); await mutate(USER_WORKSPACES); await updateLastWorkspace(); await handleNextStep(); }) .catch((error) => { console.log(error); postHogEventTracker("WORKSPACE_USER_INVITE_ACCEPT", { state: "FAILED" }); }).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); 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]}

); })}
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.

);