@chat21/chat21-ionic 3.0.61-rc5 → 3.0.61

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',
@@ -43,6 +47,17 @@ export class SidebarComponent implements OnInit {
   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,17 +67,131 @@ 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()
+    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')
+    this.logger.log('[SIDEBAR] stored_project ', stored_project)
+    if (stored_project && stored_project !== 'undefined') {
+      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)
+    } else {
+      this.logger.log('[SIDEBAR] stored_project ', stored_project)
+    }
+  }
+
+  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() {
@@ -85,11 +214,15 @@ export class SidebarComponent implements OnInit {
       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);
     }
-
-    this.translate.use(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.translateLabels()
   }
 
@@ -277,55 +410,32 @@ 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")
-    // }
+  // 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")
   // }
 
-  subcribeToAuthStateChanged() {
-    this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
-      this.logger.log('[SIDEBAR] BSAuthStateChanged ', state)
-
-      if (state === 'online') {
-        const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-        this.logger.log('[SIDEBAR] currentUser ', currentUser)
-        if (currentUser) {
-          this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(currentUser.uid)
-          this.logger.log('[SIDEBAR] photo_profile_URL ', this.photo_profile_URL)
-        }
-
-      }
-    })
-  }
-
-
-  getStoredProjectAndDashboardBaseUrl() {
-    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)
+  // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+  // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+  // if (elemNavbarBrand) {
+  //   elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+  // }
+  // }
 
-      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)
-    }
-  }
 
   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();
   }
@@ -368,12 +478,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,7 +76,7 @@
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
         <span>
             <div> {{prjct_name}} </div>
-            <div  style="display: inline-block;"> {{ profile_name_translated }} </div>
+            <div style="display: inline-block;"> {{ profile_name_translated }} </div>
 
             <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
                 style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
@@ -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,7 +14,7 @@
     // transform: translate(60px);
     transition: transform 0.5s;
     width: 305px;
-    left: -245px
+    left: -245px;
     //    z-index: 1029;
     // transform: translateX(-100%);
     // -webkit-transform: translateX(-100%);
@@ -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,28 +253,45 @@ button.user-details-btn-close {
     margin: auto;
     position: absolute;
     text-align: center;
-    cursor: pointer;
+
     padding-bottom: 15px;
     padding-top: 200px;
     font-size: 16px;
     font-weight: 400;
     // bottom: 50px;
+    bottom: 55px;
     // 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 +321,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;
 }