@chat21/chat21-ionic 3.0.61 → 3.0.63

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -22,6 +22,7 @@ import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
 import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants'
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -31,57 +32,36 @@ import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
 export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() conversationAvatar: any
   @Input() idLoggedUser: string
+  @Input() conversationUid: string
   @Input() conv_type: string
-  @Input() isOpenInfoConversation: boolean
+  @Input() isOpenInfoConversation: boolean = true
   @Input() isMobile: boolean
   @Input() translationMap: Map<string, string>
   @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
   conversationWithFullname: string
   openInfoConversation = true
   openInfoMessage = true
-  DIRECT = 'direct'
 
   isDirect = false
   isTyping = false
   borderColor = '#ffffff'
   fontColor = '#949494'
   membersConversation = ['SYSTEM']
-  fullNameConv: string
-  idConv: string
-  conversation_with_fullname: string
   platformName: string
   conv_closed: boolean = false;
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
-  /**
-   * Constructor
-   * @param imageRepoService
-   */
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
     public platform: Platform,
     private router: Router,
-    // public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
     public events: EventsService,
     public modalController: ModalController,
   ) {
-    this.route.paramMap.subscribe((params) => {
-      // this.conversationWithFullname = params.get('FullNameConv');
-      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params)
-      this.fullNameConv = params.get('FullNameConv')
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ',
-        this.fullNameConv,
-      )
-      this.idConv = params.get('IDConv')
-      this.logger.log(
-        '[CONVS-DETAIL][HEADER] -> params > conversation_with: ',
-        this.idConv,
-      )
-    })
+    
   }
 
   // ----------------------------------------------------
@@ -91,8 +71,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
 
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser,)
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar,)
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type,)
-    this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type)
     this.listenToConversationHasBeenClosed()
     this.initialize();
     // this.isOniOSMobileDevice()
@@ -111,29 +90,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   ngOnChanges() {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
-      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
-        this.conversationAvatar.uid,
-      )
-    } else {
-      const channelType = setChannelType(this.idConv)
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType)
-      this.conversationAvatar = setConversationAvatar(
-        this.idConv,
-        this.fullNameConv,
-        channelType,
-      )
-      if (this.conversationAvatar) {
-        this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
-          this.conversationAvatar.uid,
-        )
-      }
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar)
-    }
-
-    this.logger.log(
-      '[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation',
-      this.isOpenInfoConversation,
-    )
+      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+    } 
     this.openInfoConversation = this.isOpenInfoConversation
   }
 
@@ -142,10 +100,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   // ----------------------------------------------------
   initialize() {
     this.getPlatformName()
-    if (
-      this.conversationAvatar &&
-      this.conversationAvatar.channelType === this.DIRECT
-    ) {
+    if ( this.conversationAvatar && this.conversationAvatar.channelType === TYPE_DIRECT ) {
       this.isDirect = true
     } else if (this.idLoggedUser) {
       this.membersConversation.push(this.idLoggedUser)
@@ -165,13 +120,13 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
 
   closeConversation() {
     this.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
-    this.events.publish('conversation:closed', this.idConv)
+    this.events.publish('conversation:closed', this.conversationUid)
   }
 
   listenToConversationHasBeenClosed() {
     this.events.subscribe('conversationhasbeenclosed', (convId) => {
       // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
-      if (convId === this.idConv) {
+      if (convId === this.conversationUid) {
         this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
         this.conv_closed = true;
       }

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -92,8 +92,14 @@
           <!-- https://www.npmjs.com/package/@ctrl/ngx-emoji-mart/v/1.0.6 -->
           <!-- --------------------------------------------------------------------- -->
           <!-- [style]="{ position: 'absolute', bottom: '53px', right: '-246px' }" -->
-          <emoji-mart [showPreview]="false" [perLine]="emojiPerLine" [style.visibility]="showEmojiPicker?'visible':'hidden'"
-            (emojiSelect)="addEmoji($event)"  [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }">
+          <emoji-mart 
+            [showPreview]="false" 
+            [perLine]="emojiPerLine" 
+            [style.visibility]="showEmojiPicker?'visible':'hidden'"  
+            [include]="emojiiCategories"
+            [color]="emojiColor" 
+            [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }"
+            (emojiSelect)="addEmoji($event)">
           </emoji-mart>
           <!-- </div> -->
 

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -87,6 +87,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   showEmojiPicker: boolean = false; //To show/hide emoji picker
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
+  emojiColor: string ="#3880ff"
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity']
   /**
    * Constructor
    * @param chooser 

package/src/app/components/image-viewer/image-viewer.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { saveAs } from 'file-saver';
 @Component({
   selector: 'app-image-viewer',
   templateUrl: './image-viewer.component.html',
@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ImageViewerComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    
+  ) {  }
+
+
+  ngOnInit() { }
+
 
-  ngOnInit() {}
 
   closeImageViewerModal() {
     // console.log('HAS CLICKED CLOSE MODAL')
@@ -18,6 +23,24 @@ export class ImageViewerComponent implements OnInit {
     modal.style.display = "none";
   }
 
+  // __downloadImage()  {
+  //   var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
+  //   var modalImgURL = modalImg.src;
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG modalImgURL ', modalImgURL)
+  //   var captionText = document.getElementById("caption").innerHTML;
+  //   console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
+
+  //   const a: any = document.createElement('a');
+  //   a.href = modalImgURL;
+  //   a.download = captionText;
+  //   document.body.appendChild(a);
+  //   a.style = 'display: none';
+  //   a.click();
+  //   a.remove();
+  // }
+
+
   downloadImage()  {
     var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
     // console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
@@ -26,13 +49,8 @@ export class ImageViewerComponent implements OnInit {
     var captionText = document.getElementById("caption").innerHTML;
     // console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
 
-    const a: any = document.createElement('a');
-    a.href = modalImgURL;
-    a.download = captionText;
-    document.body.appendChild(a);
-    a.style = 'display: none';
-    a.click();
-    a.remove();
+    saveAs(modalImgURL, captionText);
+    this.closeImageViewerModal()
   }
 
 }

package/src/app/components/project-item/project-item.component.ts

@@ -61,9 +61,7 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
-
-    this.isOnMobileDevice()
-    // console.log('[PROJECT-ITEM] - on INIT')
+    this.isOnMobileDevice();
   }
 
   isOnMobileDevice() {
@@ -71,7 +69,6 @@ export class ProjectItemComponent implements OnInit {
     if (/Android|iPhone/i.test(window.navigator.userAgent)) {
       this.IS_ON_MOBILE_DEVICE = true;
     }
-    // console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
     return this.IS_ON_MOBILE_DEVICE;
   }
 
@@ -107,10 +104,7 @@ export class ProjectItemComponent implements OnInit {
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
-      // console.log("[PROJECT-ITEM] post message event ", event);
-
       if (event && event.data) {
-        // console.log("[PROJECT-ITEM] message event data  ", event.data);
         if (event.data === 'hasChangedProject') {
           this.unservedRequestCount = 0;
           if (this.project) {
@@ -161,11 +155,13 @@ export class ProjectItemComponent implements OnInit {
   getStoredCurrenUser() {
     const storedCurrentUser = this.appStorageService.getItem('currentUser');
     this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER ', storedCurrentUser)
-    if (storedCurrentUser) {
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
       const currentUser = JSON.parse(storedCurrentUser)
       this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER OBJCT', currentUser);
       this.currentUserId = currentUser.uid
       this.logger.log('[PROJECT-ITEM] - CURRENT USER ID', this.currentUserId);
+    } else {
+      this.logger.error('[PROJECT-ITEM] - STORED CURRENT USER OBJCT NOT FOUND IN STORAGE');
     }
   }
 
@@ -298,28 +294,19 @@ export class ProjectItemComponent implements OnInit {
   }
 
   updateUnservedRequestCount() {
-    // console.log('[PROJECT-ITEM] updateUnservedRequestCount ')
-    // this.requestsService.requestsList_bs.subscribe((requests) => {
+
     this.wsService.wsRequestsList$
       .subscribe((requests) => {
-        // console.log('[PROJECT-ITEM] requests ', requests)
         if (requests) {
           let count = 0;
           requests.forEach(r => {
-            // this.logger.log('NAVBAR - UPDATE-UNSERVED-REQUEST-COUNT request agents', r.agents)
-            // *bug fix: when the user is an agent also for the unserved we have to consider if he is present in agents
-            // && this.ROLE_IS_AGENT === true
             if (r['status'] === 100) {
               if (this.hasmeInAgents(r['agents']) === true) {
                 count = count + 1;
               }
             }
-            // if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
-            //   count = count + 1;
-            // }
           });
           this.unservedRequestCount = count;
-          // console.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
         }
       }, error => {
         this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)
@@ -331,10 +318,7 @@ export class ProjectItemComponent implements OnInit {
   hasmeInAgents(agents) {
     if (agents) {
       for (let j = 0; j < agents.length; j++) {
-        // this.logger.log('[PROJECT-ITEM] hasmeInAgents currentUserId  ', this.currentUserId)
-        // this.logger.log('[PROJECT-ITEM] hasmeInAgents agent  ', agents[j].id_user)
         if (this.currentUserId === agents[j].id_user) {
-          // this.logger.log('[PROJECT-ITEM] hasmeInAgents ')
           return true
         }
       }
@@ -344,7 +328,6 @@ export class ProjectItemComponent implements OnInit {
   }
 
   updateCurrentUserRequestCount() {
-    // this.requestsService.requestsList_bs.subscribe((requests) => {
     this.wsService.wsRequestsList$
       .pipe(
         takeUntil(this.unsubscribe$)
@@ -353,15 +336,9 @@ export class ProjectItemComponent implements OnInit {
         if (requests) {
           let count = 0;
           requests.forEach(r => {
-
-            // const membersArray = Object.keys(r.members);
             const participantsArray = r['participants'] // new used with ws 
-            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount membersArray ', membersArray);
-
-            // const currentUserIsInParticipants = membersArray.includes(this.user._id);
+    
             const currentUserIsInParticipants = participantsArray.includes(this.currentUserId); // new used with ws 
-
-            // this.logger.log('[NAVBAR] »» WIDGET updateCurrentUserRequestCount REQUEST currentUserRequestCount currentUserIsInParticipants ', currentUserIsInParticipants);
             if (currentUserIsInParticipants === true) {
               count = count + 1;
             }
@@ -374,7 +351,6 @@ export class ProjectItemComponent implements OnInit {
       }, () => {
         this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT */* COMPLETE */*')
       })
-
   }
 
 

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

@@ -117,7 +117,7 @@
       <!-- ------------------------------------------- -->
       <!-- Conversations (MONITOR) (click)="goToConversations()" -->
       <!-- ------------------------------------------- -->
-      <ng-container *ngIf="USER_ROLE !== 'agent'">
+      <!-- <ng-container *ngIf="USER_ROLE !== 'agent'"> -->
         <li  matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
           #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"  style="text-align: center;">
           <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor" style="height: 40px;margin-right: 0px !important;">
@@ -134,7 +134,7 @@
         
           </a>
         </li>
-      </ng-container>
+      <!-- </ng-container> -->
 
       <!-- ------------------------------------------- -->
       <!-- CONTACTS (LEADS)  (click)="goToContacts()" -->

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

@@ -24,7 +24,7 @@ export class SidebarComponent implements OnInit {
 
   private logger: LoggerService = LoggerInstance.getInstance();
 
-  USER_ROLE: string;
+  USER_ROLE: string = 'agent'
   SIDEBAR_IS_SMALL = true
   IS_AVAILABLE: boolean;
   user: any;
@@ -79,22 +79,6 @@ export class SidebarComponent implements OnInit {
     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'
-    //   };
-    // }
-
-
   }
 
 
@@ -112,7 +96,7 @@ export class SidebarComponent implements OnInit {
       this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
       this.buildURLs(this.USER_ROLE)
     } else {
-      this.logger.log('[SIDEBAR] stored_project ', stored_project)
+      this.logger.error('[SIDEBAR] stored_project not found in storage', stored_project)
     }
   }
 
@@ -139,15 +123,21 @@ export class SidebarComponent implements OnInit {
       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)
+        const storedCurrentUser = this.appStorageService.getItem('currentUser');
+        this.logger.log('[SIDEBAR] storedCurrentUser ', storedCurrentUser)
+
+        if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+          this.currentUser = JSON.parse(storedCurrentUser);
+          this.logger.log('[SIDEBAR] subcribeToAuthStateChanged 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)
+          }
+        } else {
+          this.logger.error('[SIDEBAR] BSAuthStateChanged current user not found in storage')
         }
-
       }
     })
   }
@@ -196,32 +186,41 @@ export class SidebarComponent implements OnInit {
 
   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)
-    let currentUserId = ''
-    if (currentUser) {
-      currentUserId = currentUser.uid
-      // console.log('[SIDEBAR] - ngOnInit - currentUserId ', currentUserId)
-    }
 
-    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    // console.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+    this.logger.log('[SIDEBAR] - ngOnInit - storedCurrentUser ', storedCurrentUser)
 
-    let chat_lang = '';
-    if (browserLang && !stored_preferred_lang) {
-      chat_lang = browserLang
-      this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
-    } else if (browserLang && stored_preferred_lang) {
-      chat_lang = stored_preferred_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);
+
+    if (storedCurrentUser && storedCurrentUser !== 'undefined') {
+      const currentUser = JSON.parse(storedCurrentUser);
+      this.logger.log('[SIDEBAR] - ngOnInit - currentUser ', currentUser)
+      this.logger.log('[SIDEBAR] - ngOnInit - browserLang ', browserLang)
+      let currentUserId = ''
+      if (currentUser) {
+        currentUserId = currentUser.uid
+        this.logger.log('[SIDEBAR] - ngOnInit - getCurrentChatLangAndTranslateLabels - currentUserId ', currentUserId)
+      }
+
+      const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+      this.logger.log('[SIDEBAR] stored_preferred_lang: ', stored_preferred_lang);
+
+      let chat_lang = '';
+      if (browserLang && !stored_preferred_lang) {
+        chat_lang = browserLang
+        this.logger.log('[SIDEBAR] chat_lang: ', chat_lang);
+      } else if (browserLang && stored_preferred_lang) {
+        chat_lang = stored_preferred_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');
+      }
     } else {
-      this.logger.log('[SIDEBAR] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
-      this.translate.use('en');
+      this.logger.error('[SIDEBAR] - ngOnInit - currentUser not found in storage ')
     }
     this.translateLabels()
   }
@@ -240,7 +239,6 @@ export class SidebarComponent implements OnInit {
   getConversationsTranslation() {
     this.translate.get('Conversations')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Conversations', text)
         this.conversations_lbl = text
       });
   }
@@ -248,7 +246,6 @@ export class SidebarComponent implements OnInit {
   getContactsTranslation() {
     this.translate.get('LABEL_CONTACTS')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Contacts', text)
         this.contacts_lbl = text
       });
   }
@@ -256,7 +253,6 @@ export class SidebarComponent implements OnInit {
   getAppsTranslation() {
     this.translate.get('Apps')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Apps', text)
         this.apps_lbl = text
       });
   }
@@ -264,7 +260,6 @@ export class SidebarComponent implements OnInit {
   getAnalyticsTranslation() {
     this.translate.get('Analytics')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Analytics', text)
         this.analytics_lbl = text
       });
   }
@@ -272,7 +267,6 @@ export class SidebarComponent implements OnInit {
   getActivitiesTranslation() {
     this.translate.get('Activities')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Activities', text)
         this.activities_lbl = text
       });
   }
@@ -280,7 +274,6 @@ export class SidebarComponent implements OnInit {
   getHistoryTranslation() {
     this.translate.get('History')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate History', text)
         this.history_lbl = text
       });
   }
@@ -288,7 +281,6 @@ export class SidebarComponent implements OnInit {
   getSettingsTranslation() {
     this.translate.get('Settings')
       .subscribe((text: string) => {
-        // console.log('[SIDEBAR] - translate Settings', text)
         this.settings_lbl = text
       });
   }
@@ -385,20 +377,14 @@ export class SidebarComponent implements OnInit {
     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');
     this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
 
-    // if (elSidebarUserDtls) {
-    //   elSidebarUserDtls.classList.add("active");
-    //   this.events.publish('userdetailsidebar:opened', true);
-    // }
+  
     if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
       elSidebarUserDtls.classList.add("active");
     }
     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");
@@ -409,24 +395,6 @@ export class SidebarComponent implements OnInit {
     }
   }
 
-  // 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")
-  // }
-
-  // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-  // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-  // if (elemNavbarBrand) {
-  //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
-  // }
-  // }
-
-
-
   goToHome() {
     let url = this.DASHBOARD_URL + this.project_id + '/home'
     this.dashboard_home_url = url;
@@ -458,14 +426,12 @@ export class SidebarComponent implements OnInit {
     myWindow.focus();
   }
 
-
   goToAnalytics() {
     let url = this.DASHBOARD_URL + this.project_id + '/analytics'
     const myWindow = window.open(url, '_self');
     myWindow.focus();
   }
 
-
   goToActivities() {
     let url = this.DASHBOARD_URL + this.project_id + '/activities'
     const myWindow = window.open(url, '_self');

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

@@ -52,6 +52,10 @@
 
     <div class="user-details-role">
         <h3>{{ USER_ROLE_LABEL }} </h3>
+
+        <div class="user-details-view-profile" (click)="goToUserProfile()"> 
+            {{EditProfileLabel}}
+        </div>
     </div>
 
     <section class="availability-section">
@@ -74,9 +78,12 @@
     <hr class="first-divider">
 
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
+        <span class="material-icons user-details-plan-icon">
+            apps
+            </span>
         <span>
             <div> {{prjct_name}} </div>
-            <div style="display: inline-block;"> {{ profile_name_translated }} </div>
+            <div style="display: inline-block;    margin-left: 26px;"> {{ profile_name_translated }} </div>
 
             <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
                 style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
@@ -95,6 +102,15 @@
         </span>
     </section>
 
+    <section class="user-details-help-center">
+        <span class="material-icons user-details-help-center-icon">
+            support
+            </span>
+            <span class="user-details-help-center" (click)="goToHelpCenter()"> 
+                Help center
+            </span>
+    </section>
+
     <!-- <hr class="second-divider" style="margin-top: 20px;border: 0;
         border-top: 1px solid rgba(255, 255,255, 0.2);"> -->