INFRA-2836 | Saurabh | Added delete modal for deleting member

src/components/SevMemberDetails/index.tsx

@@ -1,16 +1,21 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
-
-import styles from './Members.module.scss';
-import { useAuthData } from '@src/Pages/Team/Hook';
+import {
+  Avatar,
+  Button,
+  ModalDialog,
+  Typography,
+} from '@navi/web-ui/lib/primitives';
 import { CloseIcon } from '@navi/web-ui/lib/icons';
+import { useAuthData } from '@src/Pages/Team/Hook';
+import styles from './Members.module.scss';
 
 const MembersDetails = (props: any) => {
   const data = useSelector((state: any) => state.severity.memberData);
   const Role = useAuthData();
   const totalMembers = data?.participants?.length;
   const [showTotalMembers, setShowTotalMembers] = useState(10);
+  const [openedParticipantId, setOpenedParticipantId] = useState(null);
 
   return (
     <div>
@@ -44,7 +49,35 @@ const MembersDetails = (props: any) => {
                 </div>
                 {Role.includes('Admin') && (
                   <div>
-                    <CloseIcon />
+                    <CloseIcon
+                      onClick={() => setOpenedParticipantId(participant.id)}
+                    />
+
+                    <ModalDialog
+                      open={openedParticipantId === participant.id}
+                      onClose={() => setOpenedParticipantId(null)}
+                      header="Are you sure you want to remove this member? "
+                      customFooter={
+                        <div
+                          style={{
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                          }}
+                        >
+                          <Button
+                            onClick={e => {
+                              e.preventDefault();
+                              setOpenedParticipantId(null);
+                            }}
+                            style={{ backgroundColor: '#E92C2C' }}
+                          >
+                            Remove member
+                          </Button>
+                        </div>
+                      }
+                    >
+                      You are removing {participant?.name} from {data.name}.
+                    </ModalDialog>
                   </div>
                 )}
               </div>