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_CONSENT1> 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 && (