Harsh/add member invite

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</1> to '{{agree}}'.",

packages/features/ee/teams/components/AddNewTeamMembers.tsx

@@ -30,7 +30,13 @@ const AddNewTeamMembers = () => {
   return <AddNewTeamMembersForm defaultValues={{ members: teamQuery.data.members }} teamId={teamId} />;
 };
 
-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();

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 (
     <li className="divide-y">
+      <MemberInvitationModal
+        isOpen={openMemberInvitationModal}
+        onExit={() => {
+          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 || []}
+      />
       <div
         className={classNames(
           "flex items-center  justify-between",
@@ -187,6 +216,16 @@ export default function TeamListItem(props: Props) {
                         </DropdownItem>
                       </DropdownMenuItem>
                     )}
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        onClick={() => {
+                          setOpenMemberInvitationModal(true);
+                        }}
+                        StartIcon={Icon.FiSend}>
+                        {t("invite_team_member") as string}
+                      </DropdownItem>
+                    </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     {isOwner && (
                       <DropdownMenuItem>