@chat21/chat21-ionic 3.0.58 → 3.0.59-rc15

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

@@ -0,0 +1,317 @@
+import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
+import { WebsocketService } from 'src/app/services/websocket/websocket.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+
+@Component({
+  selector: 'app-project-item',
+  templateUrl: './project-item.component.html',
+  styleUrls: ['./project-item.component.scss'],
+})
+export class ProjectItemComponent implements OnInit {
+  @Output() projectIdEvent = new EventEmitter<string>()
+
+  private unsubscribe$: Subject<any> = new Subject<any>();
+  project: any;
+  tiledeskToken: string;
+
+  unservedRequestCount: number = 0;
+  currentUserRequestCount: number;
+  ROLE_IS_AGENT: boolean;
+  currentUserId: string;
+  public translationMap: Map<string, string>;
+  private logger: LoggerService = LoggerInstance.getInstance();
+  window_width_is_60: boolean;
+  newInnerWidth: any;
+
+  constructor(
+    public wsService: WebsocketService,
+    public appStorageService: AppStorageService,
+    private translateService: CustomTranslateService,
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService
+  ) { }
+
+  ngOnInit() {
+    this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
+    this.getStoredToken();
+    this.getStoredCurrenUser();
+    this.translations();
+    this.listenToPostMsgs();
+    this.onInitWindowWidth();
+  }
+
+  listenToPostMsgs() {
+    window.addEventListener("message", (event) => {
+      // console.log("[PROJECT-ITEM] post message event ", event);
+
+      if (event && event.data && event.data) {
+        // console.log("[APP-COMP] message event data  ", event.data);
+        if (event.data === 'hasChangedProject') {
+          this.getLastProjectStoredAndSubscToWSAvailabilityAndConversations();
+        }
+      }
+    })
+  }
+
+  public translations() {
+    const keys = [
+      'Available',
+      'Unavailable',
+      'Busy'
+    ];
+    this.translationMap = this.translateService.translateLanguage(keys);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.newInnerWidth = event.target.innerWidth;
+    this.logger.log('[PROJECTS-X-PANEL] - INNER WIDTH ', this.newInnerWidth)
+
+    if (this.newInnerWidth <= 150) {
+      this.window_width_is_60 = true;
+    } else {
+      this.window_width_is_60 = false;
+    }
+  }
+
+  onInitWindowWidth(): any {
+    const actualWidth = window.innerWidth;
+    this.logger.log('[PROJECTS-X-PANEL] - ACTUAL Width ', actualWidth);
+
+
+    // if (actualWidth <= 60) {
+    if (actualWidth <= 150) {
+      this.window_width_is_60 = true;
+    } else {
+      this.window_width_is_60 = false;
+    }
+  }
+
+
+
+  getStoredToken() {
+    this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+    this.logger.log('[PROJECT-ITEM] - STORED TILEDEK TOKEN ', this.tiledeskToken)
+
+  }
+
+  getStoredCurrenUser() {
+    const storedCurrentUser = this.appStorageService.getItem('currentUser');
+    this.logger.log('[PROJECT-ITEM] - STORED CURRENT USER ', storedCurrentUser)
+    if (storedCurrentUser) {
+      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);
+    }
+  }
+
+  getLastProjectStoredAndSubscToWSAvailabilityAndConversations() {
+    let stored_project = ''
+    try {
+      stored_project = localStorage.getItem('last_project')
+      this.logger.log('PROJECT-ITEM - THERE IS A STORED PROJECT ', stored_project)
+    } catch (err) {
+      this.logger.log('Get local storage LAST PROJECT ', err)
+    }
+
+
+    if (!stored_project) {
+      this.logger.log('PROJECT-ITEM - THERE IS NOT STORED LAST PROJECT ', stored_project)
+      const tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+      this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - tiledeskToken', tiledeskToken);
+      this.tiledeskService.getProjects(tiledeskToken).subscribe(projects => {
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES', projects);
+        this.project = projects[0];
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS - RES this.project', this.project);
+
+        localStorage.setItem('last_project', JSON.stringify(projects[0]))
+        this.doProjectSubscriptions(this.project)
+
+      }, (error) => {
+        this.logger.error('[INFO-CONTENT-COMP] - GET PROJECTS - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[INFO-CONTENT-COMP] - GET PROJECTS * COMPLETE *');
+
+      });
+    }
+
+
+    if (stored_project) {
+      this.logger.log('PROJECT-ITEM - THERE IS STORED LAST PROJECT ', stored_project)
+      this.project = JSON.parse(stored_project)
+      this.doProjectSubscriptions(this.project)
+      this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED ', this.project)
+    }
+
+
+  }
+
+  doProjectSubscriptions(project) {
+    if (project) {
+      const user_role = this.project.role
+      this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
+      this.projectIdEvent.emit(project.id_project._id)
+
+
+      if (user_role === 'agent') {
+        this.ROLE_IS_AGENT = true;
+
+      } else {
+        this.ROLE_IS_AGENT = false;
+      }
+
+
+      this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED > user_role ', user_role)
+      this.wsService.subscriptionToWsCurrentProjectUserAvailability(project.id_project._id, this.project._id);
+      this.listenTocurrentProjectUserUserAvailability$(project)
+
+      this.wsService.subscriptionToWsConversations(project.id_project._id)
+      // this.updateCurrentUserRequestCount();
+      this.updateUnservedRequestCount();
+
+    }
+  }
+
+  listenTocurrentProjectUserUserAvailability$(project) {
+    this.wsService.currentProjectUserAvailability$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((projectUser) => {
+        this.logger.log('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
+
+        if (project.id_project._id === projectUser['id_project']) {
+          project['ws_projct_user_available'] = projectUser['user_available'];
+          project['ws_projct_user_isBusy'] = projectUser['isBusy']
+        }
+
+      }, (error) => {
+        this.logger.error('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS * COMPLETE *');
+      })
+  }
+
+  changeAvailabilityState(projectid, available) {
+    this.logger.log('[PROJECT-ITEM] - changeAvailabilityState projectid', projectid, ' available: ', available);
+
+    available = !available
+    this.logger.log('[PROJECT-ITEM] - changeAvailabilityState projectid', projectid, ' available: ', available);
+
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectid, available)
+      .subscribe((projectUser: any) => {
+
+        this.logger.log('[PROJECT-ITEM] - PROJECT-USER UPDATED ', projectUser)
+
+        // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
+        // this.usersService.availability_btn_clicked(true)
+
+        if (this.project['id_project']._id === projectUser.id_project) {
+          this.project['ws_projct_user_available'] = projectUser.user_available;
+          // this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
+        }
+
+      }, (error) => {
+        this.logger.error('[PROJECT-ITEM] - PROJECT-USER UPDATED - ERROR  ', error);
+
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] - PROJECT-USER UPDATED  * COMPLETE *');
+
+      });
+  }
+
+  updateUnservedRequestCount() {
+    // this.requestsService.requestsList_bs.subscribe((requests) => {
+    this.wsService.wsRequestsList$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((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
+            if (r['status'] === 100 && this.ROLE_IS_AGENT === true) {
+              if (this.hasmeInAgents(r['agents']) === true) {
+                count = count + 1;
+              }
+            }
+            if (r['status'] === 100 && this.ROLE_IS_AGENT === false) {
+              count = count + 1;
+            }
+          });
+          this.unservedRequestCount = count;
+          this.logger.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT - RES ', this.unservedRequestCount)
+        }
+      }, error => {
+        this.logger.error('[PROJECT-ITEM] UNSERVED REQUEST COUNT * error * ', error)
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] UNSERVED REQUEST COUNT */* COMPLETE */*')
+      })
+  }
+
+  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
+        }
+      }
+    } else {
+      this.logger.log('[PROJECT-ITEM] hasmeInAgents OOPS!!! AGENTS THERE ARE NOT ')
+    }
+  }
+
+  updateCurrentUserRequestCount() {
+    // this.requestsService.requestsList_bs.subscribe((requests) => {
+    this.wsService.wsRequestsList$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((requests) => {
+        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;
+            }
+          });
+          this.currentUserRequestCount = count;
+          this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT - RES', this.currentUserRequestCount);
+        }
+      }, error => {
+        this.logger.error('[PROJECT-ITEM] CURRENT USER REQUEST COUNT * error * ', error)
+      }, () => {
+        this.logger.log('[PROJECT-ITEM] CURRENT USER REQUEST COUNT */* COMPLETE */*')
+      })
+
+  }
+
+
+
+}
+
+

package/src/app/components/utils/avatar-profile/avatar-profile.component.html

@@ -1,3 +1,10 @@
+<!-- <div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
+
+  <div class="avatar avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + color + ')'}" [innerHTML]="avatar" ></div>
+ 
+  <div *ngIf="avatarUrl" class="avatar avatar-image" [style.background-image]="'url(' + avatarUrl + ')'" ></div>    
+</div> -->
+
 <div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
   <!-- [style.background-color]="itemAvatar.color" -->
   <div class="avatar avatar-placeholder" [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + itemAvatar.color + ')'}" [innerHTML]="itemAvatar.avatar" ></div>

package/src/app/components/utils/avatar-profile/avatar-profile.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
@@ -8,17 +8,34 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   templateUrl: './avatar-profile.component.html',
   styleUrls: ['./avatar-profile.component.scss'],
 })
-export class AvatarProfileComponent implements OnInit {
+export class AvatarProfileComponent implements OnInit, OnChanges {
   @Input() itemAvatar: any;
-  
+  public avatarUrl: string
+  public avatar: string
+  public color: string
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor() {
     this.logger.log('AvatarProfileComponent:::: constructor');
-   }
+  }
 
   ngOnInit() {
     this.logger.log('AvatarProfileComponent:::: ngOnInit');
-    this.logger.log(this.itemAvatar);
+    // console.log('AvatarProfileComponent itemAvatar ',this.itemAvatar);
+    if (this.itemAvatar) {
+      this.avatarUrl = this.itemAvatar.imageurl
+      this.avatar = this.itemAvatar.avatar
+      this.color = this.itemAvatar.color
+    }
+    // console.log('AvatarProfileComponent avatarUrl ',this.avatarUrl);
+    // console.log('AvatarProfileComponent avatar ',this.avatar);
+    // console.log('AvatarProfileComponent color ',this.color);
+  }
+
+  ngOnChanges() {
+    // console.log('AvatarProfileComponent itemAvatar ',this.itemAvatar);
+    // console.log('AvatarProfileComponent avatarUrl ',this.avatarUrl);
+    // console.log('AvatarProfileComponent avatar ',this.avatar);
+    // console.log('AvatarProfileComponent color ',this.color);
   }
 
 }

package/src/app/pages/authentication/login/login.page.html

@@ -3,6 +3,5 @@
   [translationMap] = translationMap
   [companyLogoBlackUrl]= companyLogoBlackUrl
   [companyName]= companyName
-  (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)"
-  >
+  (eventSignInWithEmailAndPassword)="returnSignInWithEmailAndPassword($event)">
 </component-login>

package/src/app/pages/authentication/login/login.page.ts

@@ -144,7 +144,7 @@ export class LoginPage implements OnInit {
         this.presentToast(error_msg)
       })
       .finally(() => {
-        this.showSpinnerInLoginBtn = false;
+        // this.showSpinnerInLoginBtn = false;
         this.logger.log('[LOGIN PAGE] signInWithEmailAndPassword ');
       });
 

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

@@ -42,7 +42,7 @@
               here is ignored
             </span>
 
-            <div class="overlay" *ngIf="tagsCannedFilter.length > 0;"></div>
+            <div class="overlay" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false"></div>
 
             <ng-template #content_welcome>
               <!-- <div class="messageFirst">
@@ -139,12 +139,13 @@
             <!-- ----------------------------------------------------------- -->
             <!-- Canned responses -->
             <!-- ----------------------------------------------------------- -->
-            <div id="canned" *ngIf="tagsCannedFilter.length > 0;">
+         
+            <div id="canned" *ngIf="tagsCannedFilter.length > 0 && HIDE_CANNED_RESPONSES === false">
               <ion-list class="canned-list">
                 <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)">
+                  (click)="replaceTagInMessage(canned, $event)">
                 </ion-item>
               </ion-list>
             </div>
@@ -153,6 +154,7 @@
             <!-- openInfoConversation   {{openInfoConversation}} - isMobile {{isMobile}} -->
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
+             
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"