126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
import { Suspense, useState } from "react";
|
|
|
|
import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberInvitationModal";
|
|
import { classNames } from "@calcom/lib";
|
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { Icon } from "@calcom/ui";
|
|
import { Button, Avatar, Badge } from "@calcom/ui/v2";
|
|
import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
|
|
|
|
const AddNewTeamMemberSkeleton = () => {
|
|
return (
|
|
<SkeletonContainer className="rounded-md border">
|
|
<div className="flex w-full justify-between p-4">
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">
|
|
<SkeletonText className="h-4 w-56" />
|
|
</p>
|
|
<div className="mt-2.5 w-max">
|
|
<SkeletonText className="h-5 w-28" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SkeletonContainer>
|
|
);
|
|
};
|
|
|
|
const AddNewTeamMembers = (props: { teamId: number }) => {
|
|
const { t } = useLocale();
|
|
const utils = trpc.useContext();
|
|
|
|
const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: props.teamId }]);
|
|
const removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", {
|
|
onSuccess() {
|
|
utils.invalidateQueries(["viewer.teams.get", { teamId: props.teamId }]);
|
|
utils.invalidateQueries(["viewer.teams.list"]);
|
|
},
|
|
});
|
|
|
|
const [memberInviteModal, setMemberInviteModal] = useState(false);
|
|
|
|
if (isLoading) return <AddNewTeamMemberSkeleton />;
|
|
|
|
return (
|
|
<Suspense fallback={<AddNewTeamMemberSkeleton />}>
|
|
<>
|
|
<>
|
|
<ul className="rounded-md border">
|
|
{team?.members.map((member, index) => (
|
|
<li
|
|
key={member.id}
|
|
className={classNames(
|
|
"flex items-center justify-between p-6 text-sm",
|
|
index !== 0 && "border-t"
|
|
)}>
|
|
<div className="flex space-x-2">
|
|
<Avatar
|
|
gravatarFallbackMd5="teamMember"
|
|
size="mdLg"
|
|
imageSrc={member?.avatar}
|
|
alt="owner-avatar"
|
|
/>
|
|
<div>
|
|
<div className="flex space-x-1">
|
|
<p>{member?.name || t("team_member")}</p>
|
|
{/* Assume that the first member of the team is the creator */}
|
|
{index === 0 && <Badge variant="green">{t("you")}</Badge>}
|
|
{!member.accepted && <Badge variant="orange">{t("pending")}</Badge>}
|
|
{member.role === "MEMBER" && <Badge variant="gray">{t("member")}</Badge>}
|
|
{member.role === "ADMIN" && <Badge variant="default">{t("admin")}</Badge>}
|
|
</div>
|
|
{member.username ? (
|
|
<p className="text-gray-600">{`${WEBAPP_URL}/${member?.username}`}</p>
|
|
) : (
|
|
<p className="text-gray-600">{t("not_on_cal")}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{member.role !== "OWNER" && (
|
|
<Button
|
|
StartIcon={Icon.FiTrash2}
|
|
size="icon"
|
|
color="secondary"
|
|
className="h-[36px] w-[36px]"
|
|
onClick={() => removeMemberMutation.mutate({ teamId: props.teamId, memberId: member.id })}
|
|
/>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button
|
|
color="secondary"
|
|
data-testid="new-member-button"
|
|
StartIcon={Icon.FiPlus}
|
|
onClick={() => setMemberInviteModal(true)}
|
|
className="mt-6 w-full justify-center">
|
|
{t("add_team_member")}
|
|
</Button>
|
|
</>
|
|
|
|
{team && (
|
|
<MemberInvitationModal
|
|
isOpen={memberInviteModal}
|
|
onExit={() => setMemberInviteModal(false)}
|
|
team={team}
|
|
currentMember={team?.membership.role}
|
|
/>
|
|
)}
|
|
|
|
<hr className="my-6 border-neutral-200" />
|
|
|
|
<Button
|
|
EndIcon={Icon.FiArrowRight}
|
|
className="mt-6 w-full justify-center"
|
|
href={`${WEBAPP_URL}/settings/teams/${props.teamId}/profile`}>
|
|
{t("finish")}
|
|
</Button>
|
|
</>
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default AddNewTeamMembers;
|