diff --git a/src/assets/ManagerIcon.tsx b/src/assets/ManagerIcon.tsx
new file mode 100644
index 0000000..fd4cf8d
--- /dev/null
+++ b/src/assets/ManagerIcon.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { IconProps } from './types';
+
+const PersonIcon: FC
= ({
+ width = '16',
+ height = '16',
+ ...restProps
+}) => {
+ return (
+
+
+ );
+};
+
+export default PersonIcon;
diff --git a/src/assets/PersonIcon.tsx b/src/assets/PersonIcon.tsx
new file mode 100644
index 0000000..352a268
--- /dev/null
+++ b/src/assets/PersonIcon.tsx
@@ -0,0 +1,32 @@
+import React, { FC, MouseEventHandler, useState } from 'react';
+import { IconProps } from './types';
+
+const PersonIcon: FC = ({
+ width = '24',
+ height = '24',
+ onClick,
+ ...restProps
+}) => {
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+ }
+ onMouseEnter={() => setIsHovered(true)} // Set isHovered to true on hover
+ onMouseLeave={() => setIsHovered(false)}
+ style={{ cursor: 'pointer' }}
+ >
+
+ );
+};
+
+export default PersonIcon;
diff --git a/src/components/MembersDetails/Members.module.scss b/src/components/MembersDetails/Members.module.scss
index 7168bd7..af5b7b4 100644
--- a/src/components/MembersDetails/Members.module.scss
+++ b/src/components/MembersDetails/Members.module.scss
@@ -2,12 +2,27 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-top: 12px;
- cursor: pointer;
+
+ margin-top: 5%;
}
.participant-detail {
display: flex;
- align-items: center;
- gap: 4px;
+
+ cursor: pointer;
+}
+
+.participant-detail-nest {
+ display: flex;
+}
+.participant-detail-nest:hover .mark-as-manager {
+ display: block;
+}
+
+.mark-as-manager {
+ display: none;
+}
+
+.remove-logo {
+ cursor: pointer;
}
diff --git a/src/components/MembersDetails/UseAuthHook.tsx b/src/components/MembersDetails/UseAuthHook.tsx
new file mode 100644
index 0000000..aa42c22
--- /dev/null
+++ b/src/components/MembersDetails/UseAuthHook.tsx
@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+export const useAuthData = () => {
+ const [userRole, setUserRole] = useState('');
+
+ useEffect(() => {
+ const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
+ setUserRole(userData?.roles || []);
+ }, []);
+
+ return userRole;
+};
diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx
index 54009f3..b7b1cf5 100644
--- a/src/components/MembersDetails/index.tsx
+++ b/src/components/MembersDetails/index.tsx
@@ -1,13 +1,106 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
import styles from './Members.module.scss';
+import { toast } from '@navi/web-ui/lib/primitives/Toast';
+import { ApiService } from '@src/services/api';
+import { ModalDialog } from '@navi/web-ui/lib/primitives';
+import { useAuthData } from './UseAuthHook';
+import PersonIcon from '@src/assets/PersonIcon';
+import ManagerIcon from '@src/assets/ManagerIcon';
+import { CloseIcon } from '@navi/web-ui/lib/icons';
+
+import {
+ REMOVE_TEAM_MEMBER,
+ MAKE_MANAGER,
+ FETCH_SINGLE_TEAM_DATA,
+} from '@src/Pages/Team/constants';
const MembersDetails = (props: any) => {
- const { data } = props;
+ const { fetchTeamById } = props;
+ const [data, setData] = useState(props.data);
const totalMembers = data?.participants?.length;
const [showTotalMembers, setShowTotalMembers] = useState(10);
+ const [showRemoveButton, setShowRemoveButton] = useState(false);
+ const [open, setOpen] = useState(false);
+
+ const fetchSingleTeamData = teamId => {
+ const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
+ ApiService.get(fetchTeamDataEndpoint)
+ .then(response => {
+ if (response.status === 200) {
+ const updatedData = response?.data?.data;
+ setData(updatedData);
+ } else {
+ toast.error(response.data.error.message);
+ }
+ })
+ .catch(error => {
+ const toastMessage = `${
+ error?.response?.data?.error?.message
+ ? `${error?.response?.data?.error?.message},`
+ : ''
+ }`;
+ toast.error(toastMessage);
+ });
+ };
+
+ const handleRemoveUser = (teamId, slackUserId) => {
+ const endpoint = REMOVE_TEAM_MEMBER(teamId, slackUserId);
+ ApiService.delete(endpoint)
+ .then(response => {
+ if (response.status === 200) {
+ toast.success(response.data.data);
+ fetchSingleTeamData(teamId);
+ } else {
+ toast.error(response.data.error.message);
+ }
+ })
+ .catch(error => {
+ toast.error(
+ `Error removing ${slackUserId} from team ${teamId}: ${error.message}`,
+ );
+ });
+ };
+
+ const handleMakeManager = (teamId, slackUserId) => {
+ setOpen(false);
+ const endpoint = MAKE_MANAGER(teamId, slackUserId);
+
+ ApiService.patch(endpoint, {})
+ .then(response => {
+ if (response.status === 200) {
+ toast.success(response.data.data);
+ fetchSingleTeamData(teamId);
+ } else {
+ toast.error(response.data.error.message);
+ }
+ })
+ .catch(error => {
+ toast.error(
+ `Error making ${slackUserId} a manager in team ${teamId}: ${error.message}`,
+ );
+ });
+ };
+
+ const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
+ const userRoles = useAuthData();
+ console.log('userRoles', userRoles);
+
+ const managerEmail = data?.participants?.find(
+ participant => participant.id === data.managerId,
+ )?.email;
+ const storedEmail = localStorage.getItem('email-id');
+ const isAdmin = userRoles.includes('Admin');
+
+ useEffect(() => {
+ if (managerEmail === storedEmail || isAdmin) {
+ setShowRemoveButton(true);
+ } else {
+ setShowRemoveButton(false);
+ }
+ }, [data, userRoles]);
return (
@@ -32,13 +125,94 @@ const MembersDetails = (props: any) => {
) : (
setShowTotalMembers(10)}>
- View less
+
+ View less
+
)
) : (
''
)}
+
+ {showRemoveButton &&
+ !(participant.email === managerEmail) && (
+
+
+ )}
+ {showRemoveButton &&
+ !(participant.email === managerEmail) && (
+ <>
+
setOpen(true)} />
+
+
+ Teams can only have 1 manager. The current manager
+ will be changed to a member
+
+
+
+ )}
+
+
+
+ {showRemoveButton &&
+ !(participant.email === managerEmail) && (
+
+
+ )}
+ {participant.email === managerEmail &&
}
+
+
+ {showRemoveButton &&
+ !(participant.email === managerEmail) && (
+ <>
+
+
+ handleRemoveUser(data.id, participant.id)
+ }
+ />
+
+
+ )}
+ {participant.email === managerEmail && (
+
+ Manager
+
+ )}
+