import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import { useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import type { RouterOutputs } from "@calcom/trpc/react"; import { Button, Meta, TextField, showToast } from "@calcom/ui"; import { Plus } from "@calcom/ui/components/icon"; import { getLayout } from "../../../settings/layouts/SettingsLayout"; import DisableTeamImpersonation from "../components/DisableTeamImpersonation"; import MemberInvitationModal from "../components/MemberInvitationModal"; import MemberListItem from "../components/MemberListItem"; import TeamInviteList from "../components/TeamInviteList"; type Team = RouterOutputs["viewer"]["teams"]["get"]; interface MembersListProps { team: Team | undefined; } const checkIfExist = (comp: string, query: string) => comp.toLowerCase().replace(/\s+/g, "").includes(query.toLowerCase().replace(/\s+/g, "")); function MembersList(props: MembersListProps) { const { team } = props; const { t } = useLocale(); const [query, setQuery] = useState(""); const members = team?.members; const membersList = members ? members && query === "" ? members : members.filter((member) => { const email = member.email ? checkIfExist(member.email, query) : false; const username = member.username ? checkIfExist(member.username, query) : false; const name = member.name ? checkIfExist(member.name, query) : false; return email || username || name; }) : undefined; return (
setQuery(e.target.value)} value={query} defaultValue="" placeholder={`${t("search")}...`} /> {membersList?.length && team ? (
    {membersList.map((member) => { return ; })}
) : null}
); } const MembersView = () => { const { t, i18n } = useLocale(); const router = useRouter(); const session = useSession(); const utils = trpc.useContext(); const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false); const teamId = Number(router.query.id); const { data: team, isLoading } = trpc.viewer.teams.get.useQuery( { teamId }, { onError: () => { router.push("/settings"); }, } ); const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({ async onSuccess(data) { await utils.viewer.teams.get.invalidate(); setShowMemberInvitationModal(false); if (data.sendEmailInvitation) { showToast( t("email_invite_team", { email: data.usernameOrEmail, }), "success" ); } }, onError: (error) => { showToast(error.message, "error"); }, }); const isInviteOpen = !team?.membership.accepted; const isAdmin = team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); return ( <> setShowMemberInvitationModal(true)} data-testid="new-member-button"> {t("add")} ) : ( <> ) } /> {!isLoading && ( <>
{team && ( <> {isInviteOpen && ( )} )}
{team && session.data && ( )}
{showMemberInvitationModal && team && ( setShowMemberInvitationModal(false)} onSubmit={(values) => { inviteMemberMutation.mutate({ teamId, language: i18n.language, role: values.role, usernameOrEmail: values.emailOrUsername, sendEmailInvitation: values.sendInviteEmail, }); }} /> )} )} ); }; MembersView.getLayout = getLayout; export default MembersView;