fixed some issues

src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.module.css

@@ -2,6 +2,7 @@
   overflow: auto;
   width: 100%;
   min-height: 40px;
+  margin-top: 4px;
 }
 
 .Editor :global(.public-DraftEditor-content) > div {

src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx

@@ -38,6 +38,11 @@ const SideMenus = ({ opened }: SideMenusProps) => {
     getNotificationCount();
   }, []);
 
+  useEffect(() => {
+    if (location.state && location.state.subMenu) {
+      setSubMenu(location.state.subMenu);
+    }
+  }, [location]);
   // let's get count specific to menu paths
   // we should check for menu path if we have badges for other items.
   // For now we have only one badge for notifications so returning that only

src/config/menu.ts

@@ -181,6 +181,7 @@ const menus = (): Menu[] => [
     title: 'Account',
     path: '/user-profile',
     icon: 'profile',
+    show: true,
     type: 'sideDrawer',
     roles: ['Manager', 'Admin', 'Dynamic'],
     subMenu: [

src/containers/Chat/ChatInterface/ChatInterface.tsx

@@ -20,7 +20,7 @@ import HelpIcon from 'components/UI/HelpIcon/HelpIcon';
 
 const tabs = [
   {
-    label: 'Chat',
+    label: 'Contacts',
     link: '/chat/',
   },
   {
@@ -127,7 +127,7 @@ export const ChatInterface = ({ savedSearches, collectionType }: ChatInterfacePr
         <ChatConversations contactId={simulatorId > 0 ? simulatorId : selectedContactId} />
       );
 
-      heading = 'Chat';
+      heading = 'Contacts';
     } else if (savedSearches) {
       listingContent = <SavedSearches />;
       heading = 'Saved searches';

src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx

@@ -508,8 +508,9 @@ export const ContactBar = ({
     <Popper
       open={open}
       anchorEl={anchorEl}
-      placement="bottom-start"
+      placement="bottom-end"
       transition
+      disablePortal
       className={styles.Popper}
     >
       {({ TransitionProps }) => (

src/containers/LastLogin/LastLogin.module.css

@@ -1,8 +1,33 @@
-.lastLogin {
-  position: absolute;
-  bottom: 4px;
-  font-size: 12px;
-  padding-left: 12px;
+.LastLogin {
+  font-size: 9px;
+
   color: #073f24;
   font-weight: 500;
 }
+
+.UserAccount {
+  width: 100%;
+  cursor: pointer;
+  background-color: white;
+  position: absolute;
+  bottom: 0px;
+}
+
+.UserAccount:hover {
+  background-color: #f0f7f1;
+}
+
+.User {
+  padding: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.User svg {
+  margin-right: 8px;
+}
+
+.User p {
+  width: 130px;
+  overflow: auto;
+}

src/containers/LastLogin/LastLogin.tsx

@@ -1,21 +1,39 @@
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
-
-import { getAuthSession } from 'services/AuthService';
+import UserIcon from 'assets/images/icons/UserIcon.svg?react';
+import { getAuthSession, getUserSession } from 'services/AuthService';
 import { DATE_TIME_FORMAT } from 'common/constants';
 
 import styles from './LastLogin.module.css';
+import { Divider, Typography } from '@mui/material';
+import { useNavigate } from 'react-router';
 
 interface LastLoginProps {
   drawerOpen: boolean;
 }
 
 export const LastLogin = ({ drawerOpen }: LastLoginProps) => {
+  const navigate = useNavigate();
   const { t } = useTranslation();
+  const userName = getUserSession('name');
   const lastLogin = getAuthSession('last_login_time');
   return drawerOpen ? (
-    <div className={styles.lastLogin}>
-      {t('Last login')}: {moment(lastLogin).format(DATE_TIME_FORMAT)}
+    <div
+      className={styles.UserAccount}
+      onClick={() =>
+        navigate('/user-profile', { state: { subMenu: { active: true, value: '/user-profile' } } })
+      }
+    >
+      <Divider />
+      <div className={styles.User}>
+        <UserIcon />
+        <div>
+          <Typography variant="body2"> {userName}</Typography>
+          <div className={styles.LastLogin}>
+            {t('Last login')}: {moment(lastLogin).format(DATE_TIME_FORMAT)}
+          </div>
+        </div>
+      </div>
     </div>
   ) : null;
 };

src/services/AuthService.tsx

@@ -162,6 +162,9 @@ export const getUserSession = (element?: string) => {
     case 'language':
       returnValue = JSON.parse(user).language.locale;
       break;
+    case 'name':
+      returnValue = JSON.parse(user).name;
+      break;
     default:
       returnValue = JSON.parse(user);
   }