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

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

@@ -10,15 +10,16 @@ import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { skip } from 'rxjs/operators';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { EventsService } from 'src/app/services/events-service';
-
-
+import { tranlatedLanguage } from '../../../chat21-core/utils/constants';
+import { avatarPlaceholder, getColorBck } from 'src/chat21-core/utils/utils-user';
+import * as PACKAGE from 'package.json';
 @Component({
   selector: 'app-sidebar-user-details',
   templateUrl: './sidebar-user-details.component.html',
   styleUrls: ['./sidebar-user-details.component.scss'],
 })
 export class SidebarUserDetailsComponent implements OnInit, OnChanges {
-  HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
+  // HAS_CLICKED_OPEN_USER_DETAIL: boolean = false;
   // @Output() onCloseUserDetailsSidebar = new EventEmitter();
 
 
@@ -40,6 +41,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   PAYD_PLAN_NAME_ENTERPRISE_msg: string;
   PRO_PLAN_TRIAL_msg: string;
   FREE_PLAN_msg: string;
+  LOGOUT_msg: string;
   profile_name_translated: string;
   SubscriptionPaymentProblem: string;
   user: any
@@ -53,6 +55,10 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   public_Key: any
   plan_name: string;
   plan_subscription_is_active: boolean;
+  USER_PHOTO_PROFILE_EXIST: boolean;
+  version: string
+  test: Date = new Date();
+  company_name: string = 'Tiledesk'
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -66,69 +72,148 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit() {
+    this.version = PACKAGE.version;
     this.getCurrentChatLangAndTranslateLabels();
     this.subcribeToAuthStateChanged();
     this.listenTocurrentProjectUserUserAvailability$();
     this.getCurrentStoredProject();
     this.getOSCODE();
-    this.listenOpenUserSidebarEvent();
+    // this.listenOpenUserSidebarEvent();
+  }
+
+  subcribeToAuthStateChanged() {
+    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
+      this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
+
+      if (state === 'online') {
+        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+        this.logger.log('[SIDEBAR-USER-DETAILS] currentUser ', currentUser)
+        if (currentUser) {
+          this.user = currentUser;
+          this.createUserAvatar(this.user)
+          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
+          this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL);
+          this.checkIfExistPhotoProfile(this.photo_profile_URL)
+        }
+      }
+    })
   }
 
-  listenOpenUserSidebarEvent() {
-    this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
-    console.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
-    this.HAS_CLICKED_OPEN_USER_DETAIL = true;
-    });
+  checkIfExistPhotoProfile(imageUrl) {
+    this.verifyImageURL(imageUrl, (imageExists) => {
+
+      if (imageExists === true) {
+        this.USER_PHOTO_PROFILE_EXIST = true;
+        this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
+
+      } else {
+        this.USER_PHOTO_PROFILE_EXIST = false;
+        this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
+      }
+    })
   }
 
+
+  createUserAvatar(currentUser) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] - 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);
+    };
+  }
+
+  // listenOpenUserSidebarEvent() {
+  //   this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
+  //     this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL = true;
+  //   });
+  // }
+
   @HostListener('document:click', ['$event'])
   clickout(event) {
-    console.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target)
-    console.log('[SIDEBAR-USER-DETAILS] clickout event.target)', event.target.id)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target)
+    this.logger.log('[SIDEBAR-USER-DETAILSS-CHAT] clickout event.target)', event.target.id)
     const clicked_element_id = event.target.id
     if (this.eRef.nativeElement.contains(event.target)) {
-      console.log('[SIDEBAR-USER-DETAILS] clicked inside')
+      // this.logger.log('[SIDEBAR-USER-DETAILS] clicked inside')
     } else {
-      console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL ', this.HAS_CLICKED_OPEN_USER_DETAIL)
-      if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-        if (!clicked_element_id.startsWith("sidebaravatar")) {
-          this.closeUserDetailSidePanel();
-        }
-        console.log('[SIDEBAR-USER-DETAILS] clicked outside')
+      if (!clicked_element_id.startsWith("sidebaravatar")) {
+        this.closeUserDetailSidePanel();
       }
+      // this.logger.log('[SIDEBAR-USER-DETAILS] clicked outside')
+
     }
   }
 
+  closeUserDetailSidePanel() {
+    var element = document.getElementById('user-details');
+    element.classList.remove("active");
+    this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+    // this.HAS_CLICKED_OPEN_USER_DETAIL === true
+    // this.onCloseUserDetailsSidebar.emit(false);
+  }
+
+
   getCurrentChatLangAndTranslateLabels() {
     this.browserLang = this.translate.getBrowserLang();
     const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    console.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUser ', currentUser)
-    console.log('[SIDEBAR-USER-DETAILS] - ngOnInit - browserLang ', this.browserLang)
+    this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUser ', currentUser)
+    this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - browserLang ', this.browserLang)
     let currentUserId = ''
     if (currentUser) {
       currentUserId = currentUser.uid
-      console.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUserId ', currentUserId)
+      this.logger.log('[SIDEBAR-USER-DETAILS] - ngOnInit - currentUserId ', currentUserId)
     }
 
     const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
-    console.log('[SIDEBAR-USER-DETAILS] stored_preferred_lang: ', stored_preferred_lang);
+    this.logger.log('[SIDEBAR-USER-DETAILS] stored_preferred_lang: ', stored_preferred_lang);
 
 
     this.chat_lang = ''
     if (this.browserLang && !stored_preferred_lang) {
       this.chat_lang = this.browserLang
-      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
 
-      console.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
-      console.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
+      this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
+      this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     } else if (this.browserLang && stored_preferred_lang) {
       this.chat_lang = stored_preferred_lang
-      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
-      console.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
-      console.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
+      // this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+      this.logger.log('[SIDEBAR-USER-DETAILS] flag_url: ', this.flag_url);
+      this.logger.log('[SIDEBAR-USER-DETAILS] chat_lang: ', this.chat_lang);
     }
 
-    this.translate.use(this.chat_lang);
+
+    if (tranlatedLanguage.includes(this.chat_lang)) {
+      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+      this.translate.use(this.chat_lang);
+      this.flag_url = "assets/images/language_flag/" + this.chat_lang + ".png"
+    } else {
+      this.logger.log('[SIDEBAR-USER-DETAILS] tranlatedLanguage includes', this.chat_lang, ': ', tranlatedLanguage.includes(this.chat_lang))
+      this.translate.use('en');
+      this.flag_url = "assets/images/language_flag/en.png"
+      this.chat_lang = 'en'
+    }
     this.translateLabels()
   }
 
@@ -138,13 +223,14 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.getIsBusyTranslation();
     this.getSubscriptionPaymentProblemTranslation();
     this.getThePlanHasExpiredTranslation();
+    this.getLogoutTranslation();
   }
 
 
   getOSCODE() {
     this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
-    console.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig public_Key', this.public_Key);
-    console.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig', this.appConfigProvider.getConfig());
+    this.logger.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig public_Key', this.public_Key);
+    this.logger.log('[SIDEBAR-USER-DETAILS] AppConfigService getAppConfig', this.appConfigProvider.getConfig());
     if (this.public_Key) {
       let keys = this.public_Key.split("-");
       this.logger.log('[SIDEBAR-USER-DETAILS] PUBLIC-KEY - public_Key keys', keys)
@@ -173,16 +259,16 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getAvailableTranslation() {
     this.translate.get('Available')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_AVAILABLE_msg = text
       });
   }
   getUnavailableTranslation() {
     this.translate.get('Unavailable')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_UNAVAILABLE_msg = text
       });
   }
@@ -190,17 +276,26 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getIsBusyTranslation() {
     this.translate.get('Busy')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.IS_BUSY_msg = text
       });
   }
 
+  getLogoutTranslation() {
+    this.translate.get('LABEL_LOGOUT')
+      .subscribe((text: string) => {
+        // this.deleteContact_msg = text;
+        // console.log('[SIDEBAR-USER-DETAILS] - GET Logout label ', text)
+        this.LOGOUT_msg = text
+      });
+  }
+
   getSubscriptionPaymentProblemTranslation() {
     this.translate.get('SubscriptionPaymentProblem')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.SUBSCRIPTION_PAYMENT_PROBLEM_msg = text
       });
   }
@@ -208,8 +303,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getThePlanHasExpiredTranslation() {
     this.translate.get('ThePlanHasExpired')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.THE_PLAN_HAS_EXPIRED_msg = text
       });
   }
@@ -218,30 +313,28 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   getCurrentStoredProject() {
     try {
       const project = localStorage.getItem('last_project')
-
-
       if (project) {
         const projectObjct = JSON.parse(localStorage.getItem('last_project'))
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ', projectObjct)
 
         this.projectID = projectObjct['id_project']['_id']
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT ID ', this.projectID);
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT ID ', this.projectID);
 
         this.prjct_name = projectObjct['id_project']['name']
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT NAME ', this.prjct_name);
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROJECT NAME ', this.prjct_name);
 
         this.plan_type = projectObjct['id_project']['profile']['type'];
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PLAN TYPE ', this.plan_type);
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PLAN TYPE ', this.plan_type);
 
         const trial_expired = projectObjct['id_project']['trialExpired']
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > TRIAL EXPIRED ', trial_expired);
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > TRIAL EXPIRED ', trial_expired);
 
         const profile_name = projectObjct['id_project']['profile']['name'];
-        console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROFILE NAME ', profile_name);
+        // console.log('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT > PROFILE NAME ', profile_name);
 
         this.plan_name = projectObjct['id_project']['profile']['name'];
         this.plan_subscription_is_active = projectObjct['id_project']['isActiveSubscription'];
-        
+
         if (this.plan_type === 'free') {
 
           if (trial_expired === false) {
@@ -258,14 +351,14 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
       }
 
     } catch (err) {
-      console.error('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ERR ', err)
+      this.logger.error('[SIDEBAR-USER-DETAILS] - GET STORED PROJECT ERR ', err)
     }
 
     try {
       this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
-      console.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
+      // console.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
     } catch (err) {
-      console.error('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', err)
+      this.logger.error('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', err)
     }
   }
 
@@ -274,8 +367,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.profile_name_translated = this.PRO_PLAN_TRIAL_msg;
     this.translate.get('ProPlanTrial')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
@@ -284,8 +377,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.profile_name_translated = this.FREE_PLAN_msg;
     this.translate.get('FreePlan')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
@@ -295,7 +388,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.translate.get('PaydPlanNamePro')
       .subscribe((text: string) => {
         // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
@@ -305,28 +398,29 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.translate.get('PaydPlanNameEnterprise')
       .subscribe((text: string) => {
         // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.profile_name_translated = text
       });
   }
 
+ 
 
 
   listenTocurrentProjectUserUserAvailability$() {
     this.wsService.currentProjectUserAvailability$
       .pipe(skip(1))
       .subscribe((projectUser) => {
-        console.log('[SIDEBAR-USER-DETAILS] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
+        this.logger.log('[SIDEBAR-USER-DETAILS] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
 
         if (projectUser) {
           this.IS_AVAILABLE = projectUser['user_available']
           this.IS_BUSY = projectUser['isBusy']
           this.USER_ROLE = projectUser['role']
-          console.log('[SIDEBAR-USER-DETAILS] -translateUserRole  1', this.USER_ROLE)
+          // console.log('[SIDEBAR-USER-DETAILS] -translateUserRole  1', this.USER_ROLE)
           this.translateUserRole(this.USER_ROLE)
         }
 
-    
+
 
       }, (error) => {
         this.logger.error('[SIDEBAR-USER-DETAILS] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
@@ -336,11 +430,11 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   }
 
   translateUserRole(role) {
-    console.log('[SIDEBAR-USER-DETAILS] -translateUserRole ', role)
+    // console.log('[SIDEBAR-USER-DETAILS] -translateUserRole ', role)
     this.translate.get(role)
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
+
+        // console.log('[SIDEBAR-USER-DETAILS] - GET GTTTTTN ', text)
         this.USER_ROLE_LABEL = text
       });
 
@@ -349,43 +443,28 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
 
   ngOnChanges() {
-    console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL', this.HAS_CLICKED_OPEN_USER_DETAIL)
-    var element = document.getElementById('user-details');
-    console.log('[SIDEBAR-USER-DETAILS] element', element)
-    if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
-      element.classList.add("active");
-    }
+    // console.log('[SIDEBAR-USER-DETAILS] HAS_CLICKED_OPEN_USER_DETAIL', this.HAS_CLICKED_OPEN_USER_DETAIL)
+    // var element = document.getElementById('user-details');
+    // // console.log('[SIDEBAR-USER-DETAILS] element', element)
+    // if (this.HAS_CLICKED_OPEN_USER_DETAIL === true) {
+    //   element.classList.add("active");
+    // }
   }
 
-  subcribeToAuthStateChanged() {
-    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
-      console.log('[SIDEBAR] BSAuthStateChanged ', state)
 
-      if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        console.log('[SIDEBAR-USER-DETAILS] currentUser ', currentUser)
-        if (currentUser) {
-          this.user = currentUser;
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          console.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL)
-        }
-
-      }
-    })
-  }
 
-  closeUserDetailSidePanel() {
-    var element = document.getElementById('user-details');
-    element.classList.remove("active");
-    console.log('[SIDEBAR-USER-DETAILS] element', element);
-    this.HAS_CLICKED_OPEN_USER_DETAIL === true
-    // this.onCloseUserDetailsSidebar.emit(false);
-  }
+  // closeUserDetailSidePanel() {
+  //   var element = document.getElementById('user-details');
+  //   element.classList.remove("active");
+  //   this.logger.log('[SIDEBAR-USER-DETAILS] element', element);
+  //   this.HAS_CLICKED_OPEN_USER_DETAIL === true
+  //   // this.onCloseUserDetailsSidebar.emit(false);
+  // }
 
 
 
   changeAvailabilityStateInUserDetailsSidebar(available) {
-    console.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.projectID, ' available 1: ', available);
+    this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.projectID, ' available 1: ', available);
 
     //   available = !available
     //   console.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.projectID, ' available 2 : ', available);
@@ -393,7 +472,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.projectID, available)
       .subscribe((projectUser: any) => {
 
-        console.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)
+        this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)
 
         // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
         // this.usersService.availability_btn_clicked(true)
@@ -404,10 +483,10 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         // }
 
       }, (error) => {
-        console.error('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED - ERROR  ', error);
+        this.logger.error('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED - ERROR  ', error);
 
       }, () => {
-        console.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED  * COMPLETE *');
+        this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED  * COMPLETE *');
 
       });
   }

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -34,6 +34,9 @@ import { InfoGroupComponent } from 'src/app/components/conversation-info/info-gr
 import { SharedModule } from 'src/app/shared/shared.module';
 // import { SharedConversationInfoModule } from 'src/app/shared/shared-conversation-info.module';
 import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
+import { ScrollbarThemeModule } from '../../utils/scrollbar-theme.directive';
+import { PickerModule } from '@ctrl/ngx-emoji-mart';
+
 
 @NgModule({
   imports: [
@@ -42,6 +45,8 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
     IonicModule,
     TooltipModule,
     ConversationDetailPageRoutingModule,
+    ScrollbarThemeModule,
+    PickerModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,
@@ -57,7 +62,7 @@ import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
   declarations: [
     ConversationDetailPage,
     HeaderConversationDetailComponent,
-    MessageTextAreaComponent,
+    MessageTextAreaComponent
     // BubbleDayMessageComponent,
     // BubbleSystemMessageComponent,
     // BubbleMyMessageComponent,

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -9,7 +9,8 @@
 
     <ion-grid style="height: 100%;">
       <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
-        <span *ngIf="isOnline === true  && !showSpinner" style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+        <span *ngIf="isOnline === true  && !showSpinner"
+          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
           <span *ngIf="conversation_count > 0 ">
             {{'PleaseSelectChatToStartMessaging' | translate }}
           </span>
@@ -34,10 +35,10 @@
   <app-header-conversation-detail [isMobile]="isMobile" [idLoggedUser]="loggedUser.uid"
     [conversationAvatar]="conversationAvatar" [translationMap]="translationMap"
     (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)"
-    [isOpenInfoConversation]="isOpenInfoConversation">
+    [isOpenInfoConversation]="isOpenInfoConversation" [conv_type]="conv_type">
   </app-header-conversation-detail>
 
-  <ion-content>
+  <ion-content id="conv-details">
     <ion-grid class="grid_content">
       <ion-row class="row_content">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation">
@@ -91,7 +92,7 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea class="ionContentChatArea" (drop)="drop($event)"
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
                 (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
                 (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
                 (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
@@ -136,15 +137,24 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-
-            <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
-              <ion-list class="canned-list">
+            <div id="canned">
+              <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
                 <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
                   class="canned-item" id="{{'canned-item_'+ i }}"
                   *ngFor="let canned of tagsCannedFilter; let i = index;" [innerHtml]="canned.title"
                   (click)="replaceTagInMessage(canned, $event)">
                 </ion-item>
+                <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="presentCreateCannedResponseModal()">
+                  <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+                  <span class="add-canned-response-add-icon">+</span>
+                 <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+                </ion-item>
               </ion-list>
+              <!-- <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
+                <ion-item button="true" >
+                  There are no canned responses available
+                </ion-item>
+              </ion-list> -->
             </div>
 
 
@@ -155,14 +165,14 @@
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
-              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [loggedUser]="loggedUser"
-              [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
+              [tagsCannedCount]="tagsCannedCount" [areVisibleCAR]="areVisibleCAR" [support_mode]="support_mode"
+              [loggedUser]="loggedUser" [conversationWith]="conversationWith" [tagsCannedFilter]="tagsCannedFilter"
               (eventChangeTextArea)="returnChangeTextArea($event)"
               (hasClickedOpenCannedResponses)="hasClickedOpenCannedResponses($event)"
               (eventSendMessage)="returnSendMessage($event)" [translationMap]="translationMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
               [isOpenInfoConversation]="isOpenInfoConversation" [dropEvent]="dropEvent"
-              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)">
+              (onPresentModalScrollToBottom)="onPresentModalScrollToBottom($event)" [disableTextarea]="disableTextarea">
             </app-message-text-area>
             <!-- [events]="eventsReplaceTexareaText.asObservable()" -->
           </ion-row>

package/src/app/pages/conversation-detail/conversation-detail.page.scss

@@ -25,6 +25,34 @@
     font-size: 24px;
 }
 
+.add-canned-response-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    font-size: 18px;
+}
+.add-canned-response-label {
+    color: #b3bfd0;
+    cursor: pointer;
+}
+.add-canned-response-add-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    left: -6px;
+}
+
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+#canned > ion-list > ion-item.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
 // ion-back-button{
 //     display: none!important;
 // }