feat: added popup for notifying permission change

src/components/Header/Header.jsx

@@ -214,6 +214,22 @@ export function Header(props) {
   const openModal = () => {
     setLogoutPopup(true);
   };
+
+  const handlePermissionChangeAck = async() => {
+    // handle setting the ack true
+    try {
+      const res = await axios.put(ENDPOINTS.USER_PROFILE(userId), {
+        _id: userId,
+        isAcknowledged: true,
+      });
+      // console.log('response', res);
+      if (res.status === 200) {
+        props.getUserProfile(userId);
+      }
+    } catch (e) {
+      console.log('update ack', e);
+    }
+  }
 
   const removeViewingUser = () => {
     setPopup(false);
@@ -302,6 +318,7 @@ export function Header(props) {
 
   if (location.pathname === '/login') return null;
 
+  const viewingUser = JSON.parse(window.sessionStorage.getItem('viewingUser'))
   return (
     <div className="header-wrapper">
       <Navbar className="py-3 navbar" color="dark" dark expand="md">
@@ -561,8 +578,14 @@ export function Header(props) {
       </Navbar>
       {!isAuthUser && (
         <PopUpBar
+          message={`You are currently viewing the header for ${viewingUser.firstName} ${viewingUser.lastName}`}
           onClickClose={() => setPopup(prevPopup => !prevPopup)}
-          viewingUser={JSON.parse(window.sessionStorage.getItem('viewingUser'))}
+          />
+      )}
+      {props.auth.isAuthenticated && !props.userProfile?.permissions?.isAcknowledged && (
+        <PopUpBar
+          message="Heads Up, there were permission changes made to this account"
+          onClickClose={() => handlePermissionChangeAck}
         />
       )}
       <div>

src/components/PopUpBar/PopUpBar.jsx

@@ -2,11 +2,10 @@
 import './PopUpBar.css';
 
 function PopUpBar(props) {
-  const { viewingUser, onClickClose } = props;
-  const { firstName, lastName } = viewingUser;
+  const { message, onClickClose } = props;
   return (
     <div className="popup_container" data-testid="test-popup">
-      {`You are currently viewing the header for ${firstName} ${lastName}`}
+      {message}
       <button type="button" className="close_button" onClick={onClickClose}>
         X
       </button>