@chat21/chat21-ionic 3.0.61-rc2 → 3.0.61-rc21

package/src/app/components/sidebar/sidebar.component.ts

@@ -10,6 +10,10 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
 import { EventsService } from 'src/app/services/events-service';
+import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
+
+// utils
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
 
 @Component({
   selector: 'app-sidebar',
@@ -32,7 +36,7 @@ export class SidebarComponent implements OnInit {
   photo_profile_URL: string;
   project_id: string;
   DASHBOARD_URL: string;
-  HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
+  // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false
   public translationMap: Map<string, string>;
   public_Key: any;
   conversations_lbl: string;
@@ -42,7 +46,18 @@ export class SidebarComponent implements OnInit {
   activities_lbl: string;
   history_lbl: string;
   settings_lbl: string;
-
+  countClickOnOpenUserDetailSidebar: number = 0
+  USER_PHOTO_PROFILE_EXIST: boolean;
+  currentUser: any;
+  dashboard_home_url: string;
+  dashboard_bots_url: string;
+  dashboard_convs_url: string;
+  dashboard_contacts_url: string;
+  dashboard_app_url: string;
+  dashboard_analytics_url: string;
+  dashboard_activities_url: string;
+  dashboard_history_url: string;
+  dashboard_settings_url: string;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -52,44 +67,160 @@ export class SidebarComponent implements OnInit {
     public wsService: WebsocketService,
     public appConfigProvider: AppConfigProvider,
     private translate: TranslateService,
-    public events: EventsService
+    public events: EventsService,
+
   ) { }
 
   ngOnInit() {
     this.DASHBOARD_URL = this.appConfig.getConfig().dashboardUrl + '#/project/';
-    console.log('[SIDEBAR] DASHBOARD_URL ', this.DASHBOARD_URL)
-    this.getStoredProjectAndDashboardBaseUrl()
+    // console.log('[SIDEBAR] DASHBOARD_URL ', this.DASHBOARD_URL)
+    this.getStoredProjectAndUserRole()
     this.subcribeToAuthStateChanged()
     this.listenTocurrentProjectUserUserAvailability$()
     this.getOSCODE();
     this.getCurrentChatLangAndTranslateLabels();
+
+    // this.loggedUser = this.chatManager.getCurrentUser();
+    // if (this.loggedUser) {
+    //   this.itemAvatar = {
+    //     imageurl: this.imageRepoService.getImagePhotoUrl(this.loggedUser.uid),
+    //     avatar: this.loggedUser.avatar,
+    //     color: this.loggedUser.color,
+    //     online: this.loggedUser.online,
+    //     lastConnection: this.loggedUser.lastConnection,
+    //     status: '',
+    //     width: '35px',
+    //     height: '35px'
+    //   };
+    // }
+
+
+  }
+
+
+  getStoredProjectAndUserRole() {
+    const stored_project = localStorage.getItem('last_project')
+    // console.log('[SIDEBAR] stored_project ', stored_project)
+    if (stored_project) {
+      const project = JSON.parse(stored_project)
+      this.logger.log('[SIDEBAR] project ', project)
+
+      this.project_id = project.id_project.id
+      this.logger.log('[SIDEBAR] project_id ', this.project_id)
+
+      this.USER_ROLE = project.role;
+      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
+      this.buildURLs(this.USER_ROLE)
+    }
+  }
+
+  buildURLs(USER_ROLE) {
+    this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_bots_url = this.DASHBOARD_URL + this.project_id + '/bots'
+    this.dashboard_convs_url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
+    this.dashboard_contacts_url = this.DASHBOARD_URL + this.project_id + '/contacts'
+    this.dashboard_app_url = this.DASHBOARD_URL + this.project_id + '/app-store'
+    this.dashboard_analytics_url = this.DASHBOARD_URL + this.project_id + '/analytics'
+    this.dashboard_activities_url = this.DASHBOARD_URL + this.project_id + '/activities'
+    this.dashboard_history_url = this.DASHBOARD_URL + this.project_id + '/history'
+    this.dashboard_settings_url = ''
+    if (USER_ROLE !== 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    } else if (USER_ROLE === 'agent') {
+      this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
+    }
+
+  }
+
+  subcribeToAuthStateChanged() {
+    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
+      this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
+
+      if (state === 'online') {
+        this.currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+        this.logger.log('[SIDEBAR] currentUser ', this.currentUser)
+        if (this.currentUser) {
+          this.createUserAvatar(this.currentUser)
+          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(this.currentUser.uid)
+          this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
+          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+        }
+
+      }
+    })
+  }
+
+  checkIfExistPhotoProfile(imageUrl) {
+    this.verifyImageURL(imageUrl, (imageExists) => {
+
+      if (imageExists === true) {
+        this.USER_PHOTO_PROFILE_EXIST = true;
+        this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
+
+      } else {
+        this.USER_PHOTO_PROFILE_EXIST = false;
+        this.logger.log('[SIDEBAR] photo_profile_URL IMAGE EXIST ', imageExists)
+      }
+    })
+  }
+
+  createUserAvatar(currentUser) {
+    this.logger.log('[SIDEBAR] - createProjectUserAvatar ', currentUser)
+    let fullname = ''
+    if (currentUser && currentUser.firstname && currentUser.lastname) {
+      fullname = currentUser.firstname + ' ' + currentUser.lastname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else if (currentUser && currentUser.firstname) {
+      fullname = currentUser.firstname
+      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
+      currentUser['fillColour'] = getColorBck(fullname)
+    } else {
+      currentUser['fullname_initial'] = 'N/A'
+      currentUser['fillColour'] = 'rgb(98, 100, 167)'
+    }
+  }
+
+  verifyImageURL(image_url, callBack) {
+    const img = new Image();
+    img.src = image_url;
+    img.onload = function () {
+      callBack(true);
+    };
+    img.onerror = function () {
+      callBack(false);
+    };
   }
 
   getCurrentChatLangAndTranslateLabels() {
     const browserLang = this.translate.getBrowserLang();
     const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    console.log('[SIDEBAR] - ngOnInit - currentUser ', currentUser)
-    console.log('[SIDEBAR] - ngOnInit - browserLang ', browserLang)
+    // console.log('[SIDEBAR] - ngOnInit - currentUser ', currentUser)
+    // console.log('[SIDEBAR] - ngOnInit - browserLang ', browserLang)
     let currentUserId = ''
     if (currentUser) {
       currentUserId = currentUser.uid
-      console.log('[SIDEBAR] - ngOnInit - currentUserId ', currentUserId)
+      // console.log('[SIDEBAR] - ngOnInit - currentUserId ', currentUserId)
     }
 
     const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    console.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
+    // console.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
 
     let chat_lang = '';
     if (browserLang && !stored_preferred_lang) {
       chat_lang = browserLang
-      console.log('[SIDEBAR] chat_lang: ', chat_lang);
+      this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
-
-      console.log('[SIDEBAR] chat_lang: ', chat_lang);
+      this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
+    }
+    if (tranlatedLanguage.includes(chat_lang)) {
+      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      this.translate.use(chat_lang);
+    } else {
+      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      this.translate.use('en');
     }
-
-    this.translate.use(chat_lang);
     this.translateLabels()
   }
 
@@ -107,7 +238,7 @@ export class SidebarComponent implements OnInit {
   getConversationsTranslation() {
     this.translate.get('Conversations')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Conversations', text)
+        // console.log('[SIDEBAR] - translate Conversations', text)
         this.conversations_lbl = text
       });
   }
@@ -115,7 +246,7 @@ export class SidebarComponent implements OnInit {
   getContactsTranslation() {
     this.translate.get('LABEL_CONTACTS')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Contacts', text)
+        // console.log('[SIDEBAR] - translate Contacts', text)
         this.contacts_lbl = text
       });
   }
@@ -123,7 +254,7 @@ export class SidebarComponent implements OnInit {
   getAppsTranslation() {
     this.translate.get('Apps')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Apps', text)
+        // console.log('[SIDEBAR] - translate Apps', text)
         this.apps_lbl = text
       });
   }
@@ -131,7 +262,7 @@ export class SidebarComponent implements OnInit {
   getAnalyticsTranslation() {
     this.translate.get('Analytics')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Analytics', text)
+        // console.log('[SIDEBAR] - translate Analytics', text)
         this.analytics_lbl = text
       });
   }
@@ -139,7 +270,7 @@ export class SidebarComponent implements OnInit {
   getActivitiesTranslation() {
     this.translate.get('Activities')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Activities', text)
+        // console.log('[SIDEBAR] - translate Activities', text)
         this.activities_lbl = text
       });
   }
@@ -147,7 +278,7 @@ export class SidebarComponent implements OnInit {
   getHistoryTranslation() {
     this.translate.get('History')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate History', text)
+        // console.log('[SIDEBAR] - translate History', text)
         this.history_lbl = text
       });
   }
@@ -155,7 +286,7 @@ export class SidebarComponent implements OnInit {
   getSettingsTranslation() {
     this.translate.get('Settings')
       .subscribe((text: string) => {
-        console.log('[SIDEBAR] - translate Settings', text)
+        // console.log('[SIDEBAR] - translate Settings', text)
         this.settings_lbl = text
       });
   }
@@ -225,7 +356,7 @@ export class SidebarComponent implements OnInit {
 
   listenTocurrentProjectUserUserAvailability$() {
     this.wsService.currentProjectUserAvailability$.subscribe((projectUser) => {
-      console.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
+      this.logger.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
 
       this.IS_AVAILABLE = projectUser['user_available']
       this.IS_BUSY = projectUser['isBusy']
@@ -249,68 +380,60 @@ export class SidebarComponent implements OnInit {
   }
 
   openUserDetailSidePanel() {
-    console.log('[SIDEBAR] OPEN UESER DTLS SIDE PANEL')
-    this.HAS_CLICKED_OPEN_USER_DETAIL = true
-    console.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
+    this.countClickOnOpenUserDetailSidebar++
+    this.logger.log('[SIDEBAR-CHAT] countClickOnOpenUserDetailSidebar', this.countClickOnOpenUserDetailSidebar)
+    this.logger.log('[SIDEBAR-CHAT] OPEN UESER DTLS SIDE PANEL')
+    // this.HAS_CLICKED_OPEN_USER_DETAIL = true
+    // console.log('[SIDEBAR-CHAT] OPEN USER DTLS SIDE PANEL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
     const elSidebarUserDtls = <HTMLElement>document.querySelector('#user-details');
-    console.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
-    if (elSidebarUserDtls) {
-      elSidebarUserDtls.classList.add("active");
-      this.events.publish('userdetailsidebar:opened', true);
-    }
-
-  }
+    this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
 
-  onCloseUserDetailsSidebar($event) {
-    console.log('[SIDEBAR] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
-    this.HAS_CLICKED_OPEN_USER_DETAIL = $event
-    const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-    console.log('[SIDEBAR] elemNavBar ', elemNavbar)
-    if (elemNavbar) {
-      elemNavbar.classList.remove("navbar-absolute-custom-class")
+    // if (elSidebarUserDtls) {
+    //   elSidebarUserDtls.classList.add("active");
+    //   this.events.publish('userdetailsidebar:opened', true);
+    // }
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
+      elSidebarUserDtls.classList.add("active");
     }
-
-    const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-    console.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-    if (elemNavbarBrand) {
-      elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar > 1) {
+      // console.log('[SIDEBAR] this.countClickOnOpenUserDetailSidebar HERE', this.countClickOnOpenUserDetailSidebar)
+      if (elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR-CHAT] elSidebarUserDtls contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.remove("active");
+      } else if (!elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR-CHAT] elSidebarUserDtls NOT contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.add("active");
+      }
     }
   }
 
-  subcribeToAuthStateChanged() {
-    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
-      console.log('[SIDEBAR] BSAuthStateChanged ', state)
+  // onCloseUserDetailsSidebar($event) {
+  // this.logger.log('[SIDEBAR-CHAT] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
+  // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
+  // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
+  // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
+  // if (elemNavbar) {
+  //   elemNavbar.classList.remove("navbar-absolute-custom-class")
+  // }
 
-      if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        console.log('[SIDEBAR] currentUser ', currentUser)
-        if (currentUser) {
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          console.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
-        }
+  // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+  // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+  // if (elemNavbarBrand) {
+  //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+  // }
+  // }
 
-      }
-    })
-  }
 
 
-  getStoredProjectAndDashboardBaseUrl() {
-    const stored_project = localStorage.getItem('last_project')
-    // console.log('[SIDEBAR] stored_project ', stored_project)
-    if (stored_project) {
-      const project = JSON.parse(stored_project)
-      console.log('[SIDEBAR] project ', project)
-
-      this.project_id = project.id_project.id
-      console.log('[SIDEBAR] project_id ', this.project_id)
-
-      this.USER_ROLE = project.role;
-      console.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
-    }
-  }
-
   goToHome() {
     let url = this.DASHBOARD_URL + this.project_id + '/home'
+    this.dashboard_home_url = url;
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
+  goToBots() {
+    let url = this.DASHBOARD_URL + this.project_id + '/bots'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
@@ -353,12 +476,28 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
+  goToWidgetSetUpOrToCannedResponses() {
+    if (this.USER_ROLE !== 'agent') {
+      this.goToWidgetSetUp()
+    } else if (this.USER_ROLE === 'agent') {
+      this.goToSettings_CannedResponses()
+    }
+  }
+
+  goToWidgetSetUp() {
+    let url = this.DASHBOARD_URL + this.project_id + '/widget-set-up'
+    const myWindow = window.open(url, '_self');
+    myWindow.focus();
+  }
+
   goToSettings_CannedResponses() {
     let url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
+
+
   public translations() {
     const keys = [
       'Available',

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -21,8 +21,16 @@
 
     <!-- (click)="goToUserProfile()" -->
     <div role="button" class="user-details-avatar">
-        <img class="user-img-in-sidebar-user-details" [src]="photo_profile_URL"
+        <img *ngIf="USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details" [src]="photo_profile_URL"
             onerror="this.src='assets/images/no_image_user.png'" />
+
+        <div *ngIf="!USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details"
+            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
+            <span id="sidebaravatar-altenative-user-avatar" class="sidebar-user-details-altenative-user-avatar">
+                {{ user?.fullname_initial }}
+            </span>
+        </div>
+
     </div>
 
     <div class="user-details-user-isbusy" *ngIf="IS_BUSY === true" style="cursor:pointer"
@@ -68,10 +76,10 @@
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
         <span>
             <div> {{prjct_name}} </div>
-            <div> {{ profile_name_translated }} </div>
+            <div style="display: inline-block;"> {{ profile_name_translated }} </div>
 
-            <span *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
-                style="color:#f44336; position:relative; top: -1px;">
+            <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
+                style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
                 <i *ngIf="plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
                     matTooltip="{{ SUBSCRIPTION_PAYMENT_PROBLEM_msg }}" #tooltip="matTooltip" matTooltipPosition='right'
@@ -83,7 +91,7 @@
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline
                 </i>
-            </span>
+            </div>
         </span>
     </section>
 
@@ -91,12 +99,23 @@
         border-top: 1px solid rgba(255, 255,255, 0.2);"> -->
 
 
-    <section class="user-details-footer-section" (click)=onLogout()
+    <section class="user-details-footer-section"
         [ngClass]="{'footer-margin-top-pricing-no-visible': isVisiblePAY === false }">
-        <i class="material-icons user-details-logout-icon">
-            logout
-        </i>
-        <div> Logout</div>
+        <div role="button" class="logout-btn-wpr" (click)=onLogout()>
+            <i class="material-icons user-details-logout-icon" >
+                logout
+            </i>
+            <div class="user-details-logout-text"> 
+                 {{LOGOUT_msg}} 
+            </div>
+        </div>
+    </section>
+
+    <section class="user-details-footer-chat-version">
+        <div class="chat-version">
+            <!-- &copy; {{test | date: 'yyyy'}} {{company_name}} ver {{version}} -->
+            ver {{version}}
+        </div>
     </section>
 
 </div>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -14,23 +14,23 @@
     // transform: translate(60px);
     transition: transform 0.5s;
     width: 305px;
-    left: -245px
+    left: -245px;
     //    z-index: 1029;
     // transform: translateX(-100%);
     // -webkit-transform: translateX(-100%);
     // display: none;
 }
 
-#user-details::-webkit-scrollbar {
-    width: 6px;
-}
-#user-details::-webkit-scrollbar-track {
-    background-color: #1c2b45;
-}
-#user-details::-webkit-scrollbar-thumb {
-    background-color: #3c485b;
-    border-radius: 3px;
-}
+// #user-details::-webkit-scrollbar {
+//     width: 6px;
+// }
+// #user-details::-webkit-scrollbar-track {
+//     background-color: #1c2b45;
+// }
+// #user-details::-webkit-scrollbar-thumb {
+//     background-color: #3c485b;
+//     border-radius: 3px;
+// }
 
 #user-details.active {
     // transform: translate(0);
@@ -90,14 +90,15 @@ button.user-details-btn-close {
 }
 
 .user-details-dshbrd-lang-code {
-    text-transform: uppercase;color: #647491;
+    text-transform: uppercase;
+    color: #647491;
     font-family: "Roboto", sans-serif !important;
     font-size: 14px;
 }
 
 .user-details-avatar {
     text-align: center;
-    cursor: pointer;
+    // cursor: pointer;
     position: absolute;
     top: 82px;
     border-radius: 50%;
@@ -139,10 +140,9 @@ button.user-details-btn-close {
     text-align: center;
     margin-bottom: 5px;
     font-size: 16px;
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-weight: 500;
     line-height: 24px;
-   
 }
 
 .user-details-email {
@@ -157,10 +157,10 @@ button.user-details-btn-close {
     font-size: 14px;
     text-align: center;
     margin-top: 5px;
-    font-family: 'Poppins';
+    font-family: "Poppins";
     font-weight: 400;
     line-height: 1px;
-   
+    white-space: nowrap;
 }
 
 .user-details-role {
@@ -178,8 +178,7 @@ button.user-details-btn-close {
     text-transform: uppercase;
     color: #a9afbb;
     font-weight: 500;
-    font-family: 'Roboto', sans-serif !important;
-   
+    font-family: "Roboto", sans-serif !important;
 }
 
 .availability-section {
@@ -199,7 +198,7 @@ button.user-details-btn-close {
 .first-divider {
     margin-top: 355px;
     border: 0;
-    border-top: 1px solid rgba(255, 255,255, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 20px;
 }
 
@@ -226,17 +225,17 @@ button.user-details-btn-close {
     background-color: #2d323e;
     border-radius: 50%;
     position: absolute;
-    top: 92px;
-    width: 24px;
-    height: 24px;
+    top: 96px;
+    width: 21px;
+    height: 21px;
     left: 101px;
 }
 
 .user-details-user-isbusy-icon {
     font-size: 18px !important;
     position: relative;
-    top: 3px;
-    left: 3px;
+    top: 2px;
+    left: 2px;
 }
 
 .user-details-plan-info {
@@ -254,7 +253,7 @@ button.user-details-btn-close {
     margin: auto;
     position: absolute;
     text-align: center;
-    cursor: pointer;
+
     padding-bottom: 15px;
     padding-top: 200px;
     font-size: 16px;
@@ -263,19 +262,35 @@ button.user-details-btn-close {
     // top:355px
 }
 
+.logout-btn-wpr {
+    cursor: pointer;
+}
+
 .footer-margin-top-pricing-no-visible {
     padding-top: 240px;
 }
 .user-details-logout-icon {
     color: #a9afbb;
     font-size: 30px;
-    margin-top: 30px;
+    // margin-top: 30px;
 }
 
 .user-details-logout-icon:hover {
     color: #fff;
 }
 
+.user-details-footer-chat-version {
+    position: absolute;
+    bottom: 11px;
+    text-align: center;
+    margin: auto;
+    transform: translateX(-50%);
+    left: 50%;
+    margin: auto;
+    font-size: 12px;
+    font-weight: 400;
+}
+
 :host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
     background-color: #a9afbb;
     margin-left: 30px;
@@ -305,6 +320,15 @@ button.user-details-btn-close {
 }
 
 ::ng-deep .custom-mat-tooltip {
-    background-color: #2d323e;
-    font-size: 12px;
+    background-color: #2d323e !important;
+    font-size: 12px !important;
+    border-radius: 2px !important;
+    font-family: "Poppins" !important;
+}
+
+.sidebar-user-details-altenative-user-avatar {
+    line-height: 3.2;
+    font-weight: 400;
+    font-family: "Poppins";
+    font-size: 32px;
 }