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

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,6 +1,12 @@
-<div *ngIf="itemAvatar" class="avatar-circle" [style.width]="itemAvatar.width" [style.height]="itemAvatar.height">
-  <!-- [style.background-color]="itemAvatar.color" -->
+<!-- <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 class="avatar avatar-image" [style.background-image]="'url(' + itemAvatar.imageurl + ')'" ></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>
+  <div class="avatar avatar-image" [style.background-image]="'url(' + itemAvatar.imageurl + ')'" ></div>    
 </div>

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.ts

@@ -539,23 +539,27 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     if (this.conversationWith && this.conversationsHandlerService && this.conv_type === 'active') {
       this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail CALLING')
       this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (active)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
         this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar);
       })
     }
     else { //get conversation from 'conversations' firebase node
       this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
-        this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
-        this.conversationAvatar = setConversationAvatar(
-          conv.conversation_with,
-          conv.conversation_with_fullname,
-          conv.channel_type
-        );
+        if (conv) {
+          this.logger.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, conv)
+          this.conversationAvatar = setConversationAvatar(
+            conv.conversation_with,
+            conv.conversation_with_fullname,
+            conv.channel_type
+          );
+        }
       })
     }
 
@@ -890,8 +894,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         if (this.conversationWith.startsWith("support-group")) {
 
           const pos = message.lastIndexOf("/");
-          console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
-       
+          // console.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / (using lastIndexOf) ", pos);
+
           // test
           // var rest = message.substring(0, message.lastIndexOf("/") + 1);
           // var last = message.substring(message.lastIndexOf("/") + 1, message.length);
@@ -917,7 +921,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             // ------------------------------------------------------------------------------------------------------------------------------------------
             // Hide / display Canned when the SLASH has POSITION POS 0 and checking if there is a space after the SLASH (in this case it will be hidden)
             // ------------------------------------------------------------------------------------------------------------------------------------------
-            
+
             var after_slash = message.substring(message.lastIndexOf("/") + 1, message.length);
             if (pos === 0 && after_slash.length === 1 && after_slash.trim() === '') {
               this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is a white space after ');
@@ -928,14 +932,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
               this.HIDE_CANNED_RESPONSES = false
             }
 
-      
+
             if (pos > 0) {
-              
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-            // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
-            // and if there is not a space before the SLASH (in this it will be hidden)
-            // ------------------------------------------------------------------------------------------------------------------------------------------
-              
+
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+              // Hide / display Canned when the SLASH has POSITION POS > and checking if there is a space after the SLASH (in this case they it be hidden)
+              // and if there is not a space before the SLASH (in this it will be hidden)
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+
               let beforeSlash = message.substr(pos - 1)
               let afterSlash = message.substr(pos + 1)
               this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -1,10 +1,6 @@
-
 <ion-header no-border class="ion-no-border">
-  <app-ddp-header *ngIf="conversationType ==='active'" 
-    [numberOpenConv]="numberOpenConv" 
-    [supportMode]="supportMode"
-    (openContactsDirectory)=openContactsDirectory($event) 
-    (openProfileInfo)=openProfileInfo($event)>
+  <app-ddp-header *ngIf="conversationType ==='active'" [numberOpenConv]="numberOpenConv" [supportMode]="supportMode"
+    (openContactsDirectory)=openContactsDirectory($event) (openProfileInfo)=openProfileInfo($event)>
   </app-ddp-header>
 
   <app-option-header *ngIf="conversationType !=='active'" [headerTitle]=headerTitle
@@ -16,35 +12,61 @@
 
   <div id="scrollbar2">
     <ion-list>
+
+                   <!-- -------------------------------------------------------------------------- -->
+        <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+        <!-- -------------------------------------------------------------------------- -->
+        <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+          <div tabindex="0"></div>
+          <ion-avatar item-start>
+            <div class="sk-fading-circle">
+              <div class="sk-circle1 sk-circle"></div>
+              <div class="sk-circle2 sk-circle"></div>
+              <div class="sk-circle3 sk-circle"></div>
+              <div class="sk-circle4 sk-circle"></div>
+              <div class="sk-circle5 sk-circle"></div>
+              <div class="sk-circle6 sk-circle"></div>
+              <div class="sk-circle7 sk-circle"></div>
+              <div class="sk-circle8 sk-circle"></div>
+              <div class="sk-circle9 sk-circle"></div>
+              <div class="sk-circle10 sk-circle"></div>
+              <div class="sk-circle11 sk-circle"></div>
+              <div class="sk-circle12 sk-circle"></div>
+            </div>
+          </ion-avatar>
+          <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+        </ion-item>
+
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
+        button="true"
+          (click)="openUnsevedConversationIframe()">
+          <div tabindex="0"></div>
+          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+        </ion-item>
+
       <span
         *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
         here is ignored
       </span>
 
+ 
+
       <ng-template #contentConversations>
         <!-- ---------------------------------- -->
         <!-- ACTIVE CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='active'" 
-          [uidConvSelected]="uidConvSelected"
-          [listConversations]="conversations" 
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
-          (onConversationLoaded)="onConversationLoaded($event)" 
-          (onCloseConversation)="onCloseConversation($event)">
+        <ion-list-conversations *ngIf="conversationType ==='active'" [uidConvSelected]="uidConvSelected"
+          [listConversations]="conversations" [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)" (onCloseConversation)="onCloseConversation($event)">
         </ion-list-conversations>
 
         <!-- ---------------------------------- -->
         <!-- ARCHIVED CONVERSATION LIST -->
         <!-- ---------------------------------- -->
-        <ion-list-conversations *ngIf="conversationType ==='archived'" 
-          [listConversations]="archivedConversations"
-          [stylesMap]="stylesMap" 
-          [translationMap]="translationMapConversation"
-          (onConversationSelected)=onConversationSelected($event) 
-          (onImageLoaded)="onImageLoaded($event)"
+        <ion-list-conversations *ngIf="conversationType ==='archived'" [listConversations]="archivedConversations"
+          [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
           (onConversationLoaded)="onConversationLoaded($event)">
         </ion-list-conversations>
       </ng-template>
@@ -83,8 +105,8 @@
             </ion-label>
           </ion-item>
         </div>
-        
+
       </ng-template>
     </ion-list>
   </div>
-</ion-content>
+</ion-content>