fix: Role not getting updated immediately in edit profile modal (calcom#23236)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

Author: asadath1395

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

@@ -20,7 +20,7 @@ import { Skeleton, Loader } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
-import { updateRoleInCache } from "./MemberChangeRoleModal";
+import { updateRoleInCache, getUpdatedUser } from "./MemberChangeRoleModal";
 import type { Action, State, User } from "./MemberList";
 
 const formSchema = z.object({
@@ -142,6 +142,14 @@ export function EditMemberSheet({
       await utils.viewer.teams.listMembers.invalidate();
       showToast(t("profile_updated_successfully"), "success");
       setEditMode(false);
+
+      dispatch({
+        type: "EDIT_USER_SHEET",
+        payload: {
+          showModal: true,
+          user: getUpdatedUser(selectedUser, role, customRoles),
+        },
+      });
     },
     async onError(err) {
       showToast(err.message, "error");

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

@@ -9,11 +9,32 @@ import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 import { Select } from "@calcom/ui/components/form";
 
+import type { User } from "./MemberList";
+
 type MembershipRoleOption = {
   label: string;
   value: MembershipRole;
 };
 
+export const getUpdatedUser = (
+  member: User,
+  role: MembershipRole | string,
+  customRoles: { id: string; name: string }[] | undefined
+) => {
+  const isTraditionalRole = Object.values(MembershipRole).includes(role as MembershipRole);
+
+  // Find the new custom role object if assigning a custom role
+  const newCustomRole =
+    !isTraditionalRole && customRoles ? customRoles.find((cr) => cr.id === role) || null : null;
+
+  return {
+    ...member,
+    role: isTraditionalRole ? (role as MembershipRole) : member.role,
+    customRoleId: isTraditionalRole ? null : (role as string),
+    customRole: newCustomRole,
+  };
+};
+
 export const updateRoleInCache = ({
   utils,
   teamId,
@@ -49,18 +70,7 @@ export const updateRoleInCache = ({
           ...page,
           members: page.members.map((member) => {
             if (member.id === memberId) {
-              const isTraditionalRole = Object.values(MembershipRole).includes(role as MembershipRole);
-
-              // Find the new custom role object if assigning a custom role
-              const newCustomRole =
-                !isTraditionalRole && customRoles ? customRoles.find((cr) => cr.id === role) || null : null;
-
-              return {
-                ...member,
-                role: isTraditionalRole ? (role as MembershipRole) : member.role,
-                customRoleId: isTraditionalRole ? null : (role as string),
-                customRole: newCustomRole,
-              };
+              return getUpdatedUser(member, role, customRoles);
             }
             return member;
           }),