diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 9d220e2b0d..fcab9f94e2 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -23,6 +23,7 @@ "rejection_reason_description": "Are you sure you want to reject the booking? We'll let the person who tried to book know. You can provide a reason below.", "rejection_confirmation": "Reject the booking", "manage_this_event": "Manage this event", + "invite_team_member": "Invite team member", "your_event_has_been_scheduled": "Your event has been scheduled", "your_event_has_been_scheduled_recurring": "Your recurring event has been scheduled", "accept_our_license": "Accept our license by changing the .env variable <1>NEXT_PUBLIC_LICENSE_CONSENT to '{{agree}}'.", diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx index 5040f281b0..0733a5b6cd 100644 --- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx +++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx @@ -30,7 +30,13 @@ const AddNewTeamMembers = () => { return ; }; -const AddNewTeamMembersForm = ({ defaultValues, teamId }: { defaultValues: FormValues; teamId: number }) => { +export const AddNewTeamMembersForm = ({ + defaultValues, + teamId, +}: { + defaultValues: FormValues; + teamId: number; +}) => { const { t, i18n } = useLocale(); const [memberInviteModal, setMemberInviteModal] = useState(false); const utils = trpc.useContext(); diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx index 49e0ac4b29..797f6ed5eb 100644 --- a/packages/features/ee/teams/components/TeamListItem.tsx +++ b/packages/features/ee/teams/components/TeamListItem.tsx @@ -1,7 +1,9 @@ import { MembershipRole } from "@prisma/client"; import Link from "next/link"; import { useRouter } from "next/router"; +import { useState } from "react"; +import MemberInvitationModal from "@calcom/ee/teams/components/MemberInvitationModal"; import classNames from "@calcom/lib/classNames"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -36,9 +38,20 @@ interface Props { } export default function TeamListItem(props: Props) { - const { t } = useLocale(); + const { t, i18n } = useLocale(); const utils = trpc.useContext(); const team = props.team; + const [openMemberInvitationModal, setOpenMemberInvitationModal] = useState(false); + const teamQuery = trpc.viewer.teams.get.useQuery({ teamId: team?.id }); + const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({ + async onSuccess() { + await utils.viewer.teams.get.invalidate(); + setOpenMemberInvitationModal(false); + }, + onError: (error) => { + showToast(error.message, "error"); + }, + }); const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({ onSuccess: () => { @@ -82,6 +95,22 @@ export default function TeamListItem(props: Props) { return (
  • + { + setOpenMemberInvitationModal(false); + }} + onSubmit={(values) => { + inviteMemberMutation.mutate({ + teamId: team.id, + language: i18n.language, + role: values.role, + usernameOrEmail: values.emailOrUsername, + sendEmailInvitation: values.sendInviteEmail, + }); + }} + members={teamQuery?.data?.members || []} + />
    )} + + { + setOpenMemberInvitationModal(true); + }} + StartIcon={Icon.FiSend}> + {t("invite_team_member") as string} + + {isOwner && (