@chat21/chat21-ionic 3.0.62 → 3.0.64

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);"> -->
 

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

@@ -177,6 +177,7 @@ button.user-details-btn-close {
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     left: 50%;
+    text-align: center;
 }
 
 .user-details-role > h3 {
@@ -187,10 +188,21 @@ button.user-details-btn-close {
     color: #a9afbb;
     font-weight: 500;
     font-family: "Roboto", sans-serif !important;
+    margin-bottom: 8px !important;
+}
+
+.user-details-view-profile {
+    font-size: 14px;
+    color: #00d5ff;
+    cursor: pointer;
+}
+
+.user-details-view-profile:hover {
+   text-decoration: underline;
 }
 
 .availability-section {
-    top: 300px;
+    top: 320px;
     text-align: center;
     background-color: #2d323e;
     padding: 9px;
@@ -204,7 +216,7 @@ button.user-details-btn-close {
 }
 
 .first-divider {
-    margin-top: 355px;
+    margin-top: 365px;
     border: 0;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     margin-bottom: 20px;
@@ -254,6 +266,37 @@ button.user-details-btn-close {
     line-height: 21px;
 }
 
+.user-details-plan-icon {
+    display: block;
+    float: left;
+    font-size: 20px;
+    margin-right: 6px;
+}
+
+
+
+.user-details-help-center-icon {
+    color: #a9afbb;
+    font-size: 20px;
+    vertical-align: middle;
+    margin-right: 3px;
+}
+
+.user-details-help-center {
+    margin-top: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #a9afbb;
+    -webkit-font-smoothing: antialiased;
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.user-details-help-center:hover { 
+    color: #fff;
+    text-decoration: underline;
+}
+
 .user-details-footer-section {
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
@@ -263,12 +306,13 @@ button.user-details-btn-close {
     text-align: center;
 
     padding-bottom: 15px;
-    padding-top: 200px;
+    padding-top: 186px;
     font-size: 16px;
     font-weight: 400;
+    z-index: 1;
     // bottom: 50px;
-    bottom: 55px;
-    // top:355px
+    // bottom: 55px;
+    
 }
 
 .logout-btn-wpr {
@@ -290,7 +334,7 @@ button.user-details-btn-close {
 
 .user-details-footer-chat-version {
     position: absolute;
-    bottom: 11px;
+    // bottom: 11px;
     text-align: center;
     margin: auto;
     transform: translateX(-50%);
@@ -298,6 +342,8 @@ button.user-details-btn-close {
     margin: auto;
     font-size: 12px;
     font-weight: 400;
+    padding-top: 300px;
+    padding-bottom: 6px;
 }
 
 :host ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {