Fix problem related to data types

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -5,7 +5,6 @@ import React, { SyntheticEvent, useEffect } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 
-import { TeamWithMembers } from "@lib/queries/teams";
 import { trpc } from "@lib/trpc";
 
 import ModalContainer from "@components/ui/ModalContainer";
@@ -20,7 +19,7 @@ const options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }
 
 export default function MemberChangeRoleModal(props: {
   isOpen: boolean;
-  team: TeamWithMembers;
+  currentMember: MembershipRole;
   memberId: number;
   teamId: number;
   initialRole: MembershipRole;
@@ -50,8 +49,6 @@ export default function MemberChangeRoleModal(props: {
     },
   });
 
-  const memberRole = props.team?.membership.role;
-
   function changeRole(e: SyntheticEvent) {
     e.preventDefault();
 
@@ -79,7 +76,7 @@ export default function MemberChangeRoleModal(props: {
             {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
             <Select
               isSearchable={false}
-              options={memberRole !== MembershipRole.OWNER ? options.slice(0, 2) : options}
+              options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
               value={role}
               onChange={(option) => option && setRole(option)}
               id="role"

apps/web/components/team/MemberInvitationModal.tsx

@@ -16,6 +16,7 @@ import Select from "@components/ui/form/Select";
 type MemberInvitationModalProps = {
   isOpen: boolean;
   team: TeamWithMembers | null;
+  currentMember: MembershipRole;
   onExit: () => void;
 };
 
@@ -48,8 +49,6 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
     },
   });
 
-  const memberRole = props.team?.membership.role;
-
   function inviteMember(e: SyntheticEvent) {
     e.preventDefault();
     if (!props.team) return;
@@ -102,7 +101,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               </label>
               <Select
                 defaultValue={options[0]}
-                options={memberRole !== MembershipRole.OWNER ? options.slice(0, 2) : options}
+                options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
                 id="role"
                 name="role"
                 className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"

apps/web/components/team/MemberListItem.tsx

@@ -184,7 +184,7 @@ export default function MemberListItem(props: Props) {
       {showChangeMemberRoleModal && (
         <MemberChangeRoleModal
           isOpen={showChangeMemberRoleModal}
-          team={props.team}
+          currentMember={props.team.membership.role}
           teamId={props.team?.id}
           memberId={props.member.id}
           initialRole={props.member.role as MembershipRole}

apps/web/pages/settings/teams/[id]/index.tsx

@@ -145,6 +145,7 @@ export function TeamSettingsPage() {
             <MemberInvitationModal
               isOpen={showMemberInvitationModal}
               team={team}
+              currentMember={team.membership.role}
               onExit={() => setShowMemberInvitationModal(false)}
             />
           )}