import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import { useState } from "react"; import { z } from "zod"; import MemberInvitationModal from "@calcom/features/ee/teams/components/MemberInvitationModal"; import { classNames } from "@calcom/lib"; import { WEBAPP_URL, APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import { Avatar, Badge, Button, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui"; import { FiPlus, FiArrowRight, FiTrash2 } from "@calcom/ui/components/icon"; const querySchema = z.object({ id: z.string().transform((val) => parseInt(val)), }); type TeamMember = RouterOutputs["viewer"]["teams"]["get"]["members"][number]; type FormValues = { members: TeamMember[]; }; const AddNewTeamMembers = () => { const session = useSession(); const router = useRouter(); const { id: teamId } = router.isReady ? querySchema.parse(router.query) : { id: -1 }; const teamQuery = trpc.viewer.teams.get.useQuery({ teamId }, { enabled: router.isReady }); if (session.status === "loading" || !teamQuery.data) return ; return ; }; export const AddNewTeamMembersForm = ({ defaultValues, teamId, }: { defaultValues: FormValues; teamId: number; }) => { const { t, i18n } = useLocale(); const [memberInviteModal, setMemberInviteModal] = useState(false); const utils = trpc.useContext(); const router = useRouter(); const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({ async onSuccess() { await utils.viewer.teams.get.invalidate(); setMemberInviteModal(false); }, onError: (error) => { showToast(error.message, "error"); }, }); const publishTeamMutation = trpc.viewer.teams.publish.useMutation({ onSuccess(data) { router.push(data.url); }, onError: (error) => { showToast(error.message, "error"); }, }); return ( <>
    {defaultValues.members.map((member, index) => ( ))}
setMemberInviteModal(false)} onSubmit={(values) => { inviteMemberMutation.mutate({ teamId, language: i18n.language, role: values.role, usernameOrEmail: values.emailOrUsername, sendEmailInvitation: values.sendInviteEmail, }); }} members={defaultValues.members} />
); }; export default AddNewTeamMembers; const AddNewTeamMemberSkeleton = () => { return (

); }; const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: number }) => { const { member, index, teamId } = props; const { t } = useLocale(); const utils = trpc.useContext(); const removeMemberMutation = trpc.viewer.teams.removeMember.useMutation({ async onSuccess() { await utils.viewer.teams.get.invalidate(); showToast("Member removed", "success"); }, async onError(err) { showToast(err.message, "error"); }, }); return (
  • {member.name || member.email || t("team_member")}

    {/* Assume that the first member of the team is the creator */} {index === 0 && {t("you")}} {!member.accepted && {t("pending")}} {member.role === "MEMBER" && {t("member")}} {member.role === "ADMIN" && {t("admin")}}
    {member.username ? (

    {`${WEBAPP_URL}/${member.username}`}

    ) : (

    {t("not_on_cal", { appName: APP_NAME })}

    )}
    {member.role !== "OWNER" && (
  • ); };