@chat21/chat21-ionic 3.0.55 → 3.0.59-rc10

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

@@ -40,6 +40,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../services/network-service/network.service';
+import { EventsService } from '../../services/events-service';
 
 @Component({
   selector: 'app-conversation-detail',
@@ -51,6 +52,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   @ViewChild('ionContentChatArea', { static: false }) ionContentChatArea: IonContent;
   @ViewChild('rowMessageTextArea', { static: false }) rowTextArea: ElementRef;
 
+
+
   // @ViewChild('info_content', { static: false }) info_content_child : InfoContentComponent;
 
   showButtonToBottom = false; // indica lo stato del pulsante per scrollare la chat (showed/hidden)
@@ -90,6 +93,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   public tagsCanned: any = [];
   public tagsCannedFilter: any = [];
+  public HIDE_CANNED_RESPONSES: boolean = false;
+
 
   public window: any = window;
   public styleMap: Map<string, string> = new Map();
@@ -164,7 +169,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     public presenceService: PresenceService,
     public toastController: ToastController,
     public tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    private events: EventsService
   ) {
 
     // Change list on date change
@@ -533,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
+          );
+        }
       })
     }
 
@@ -628,23 +638,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         msg = `[${metadata.name}](${metadata.src})`
       }
     }
-    
+
     // else if (type === 'image') {
     //   if (msg) {
     //     // msg = msg + '<br>' + 'File: ' + metadata.src;
     //     msg = metadata.name + '\n' + msg
 
     //   } else {
-  
+
     //     msg = metadata.name
     //   }
- 
+
     // }
- 
+
 
     (metadata) ? metadata = metadata : metadata = '';
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser);
- 
+
     if (msg && msg.trim() !== '' || type !== TYPE_MSG_TEXT) {
       this.conversationHandlerService.sendMessage(
         msg,
@@ -835,12 +845,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
   logScrolling(event: any) {
     // EVENTO IONIC-NATIVE: SCATTA SEMPRE, QUINDI DECIDO SE MOSTRARE O MENO IL BADGE 
-    this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrolling: ', event);
     this.detectBottom()
   }
 
   logScrollEnd(event: any) {
-    this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
+    // this.logger.log('[CONVS-DETAIL] logScrollEnd: ', event);
   }
 
 
@@ -882,17 +892,83 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       // ----------------------------------------------------------
       setTimeout(() => {
         if (this.conversationWith.startsWith("support-group")) {
-          var pos = message.lastIndexOf("/");
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses pos of / ", pos);
-          this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - pos:: ", pos);
+
+          const pos = message.lastIndexOf("/");
+          // 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);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea rest', rest);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last);
+          // console.log('[CONVS-DETAIL] - returnChangeTextArea last', last.length);
+          // if (last.length === 1 && last.trim() === '') {
+          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is a white space ');
+          // } else if (last.length === 1 && last.trim() !== '') {
+          //   console.log('[CONVS-DETAIL] - returnChangeTextArea last is NOT space ');
+          // }
+
 
           if (pos >= 0) {
-            // if (pos === 0) {
-            // && that.tagsCanned.length > 0
             var strSearch = message.substr(pos + 1);
             this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - canned responses strSearch ", strSearch);
+
+            // --------------------------------------------
+            // Load canned responses
+            // --------------------------------------------
             this.loadTagsCanned(strSearch, this.conversationWith);
 
+            // ------------------------------------------------------------------------------------------------------------------------------------------
+            // 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 ');
+              this.HIDE_CANNED_RESPONSES = true
+              this.tagsCannedFilter = []
+            } else if (pos === 0 && after_slash.length === 0) {
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea after_slash --> there is NOT a white space after');
+              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)
+              // ------------------------------------------------------------------------------------------------------------------------------------------
+
+              let beforeSlash = message.substr(pos - 1)
+              let afterSlash = message.substr(pos + 1)
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea * POS ', pos);
+
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash', beforeSlash);
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash', afterSlash);
+              var afterSlashParts = afterSlash.split("/")
+              var beforeSlashParts = beforeSlash.split("/")
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> afterSlash parts', afterSlashParts);
+              this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash parts', beforeSlashParts);
+
+              if (beforeSlashParts.length === 2) {
+                if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === '') {
+                  this.HIDE_CANNED_RESPONSES = false
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash there is a white space After Not');
+                  // if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0].indexOf(' ') >= 0)
+                } else if (beforeSlashParts[0].indexOf(' ') < 0 && afterSlashParts[0] === '') {
+                  this.HIDE_CANNED_RESPONSES = true;
+                  this.tagsCannedFilter = []
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After Not');
+                } else if (beforeSlashParts[0].indexOf(' ') >= 0 && afterSlashParts[0] === ' ') {
+                  this.logger.log('[CONVS-DETAIL] - returnChangeTextArea  --> beforeSlash not thete is a white space After YES');
+                  this.HIDE_CANNED_RESPONSES = true;
+                  this.tagsCannedFilter = []
+                }
+              }
+            }
+
+
           } else {
             this.tagsCannedFilter = [];
           }
@@ -974,7 +1050,10 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.log('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses RES', res);
 
       this.tagsCanned = res
-      this.showTagsCanned(strSearch);
+
+      if (this.HIDE_CANNED_RESPONSES === false) {
+        this.showTagsCanned(strSearch);
+      }
 
     }, (error) => {
       this.logger.error('[CONVS-DETAIL] - loadTagsCanned  getCannedResponses - ERROR  ', error);
@@ -1030,12 +1109,20 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     return str;
   }
 
-  replaceTagInMessage(canned) {
+  replaceTagInMessage(canned, event) {
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage  event ", event);
     const elTextArea = this.rowTextArea['el'];
     const textArea = elTextArea.getElementsByTagName('ion-textarea')[0];
+
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea ", textArea);
     this.logger.log("[CONVS-DETAIL] replaceTagInMessage  textArea value", textArea.value)
 
+    // var lastChar =  textArea.value.substr(-1); // Selects the last character
+    // if (lastChar === '/') {         
+    //   textArea.value = textArea.value.substring(0, textArea.value.length() - 1);
+    // }
+    // this.insertAtCursor(this.textArea, textArea.value)
+
 
     this.arrowkeyLocation = -1
     this.tagsCannedFilter = [];
@@ -1051,12 +1138,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
     var strTEMP = textArea.value.replace(strSearch, canned.text);
     strTEMP = this.replacePlaceholderInCanned(strTEMP);
+    this.logger.log("[CONVS-DETAIL] replaceTagInMessage strSearch ", strTEMP);
     // strTEMP = this.replacePlaceholderInCanned(strTEMP);
     // textArea.value = '';
     // that.messageString = strTEMP;
     textArea.value = strTEMP;
     setTimeout(() => {
-      textArea.focus();
+      // textArea.focus();
+      textArea.setFocus();
       this.resizeTextArea();
     }, 200);
   }
@@ -1088,9 +1177,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
 
       if (event.key === 'Enter') {
         const canned_selected = this.tagsCannedFilter[this.arrowkeyLocation]
-
+        this.logger.log('[CONVS-DETAIL] replaceTagInMessage  canned_selected ', canned_selected)
         if (canned_selected) {
-          this.replaceTagInMessage(canned_selected)
+
+          this.replaceTagInMessage(canned_selected, 'enter')
+          // event.preventDefault();
+          // return false;
         }
       }
     }

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,36 +12,56 @@
 
   <div id="scrollbar2">
     <ion-list>
-
       <span
         *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
         here is ignored
       </span>
 
       <ng-template #contentConversations>
+        <!-- -------------------------------------------------------------------------- -->
+        <!-- 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" class="ion-no-padding open-iframe-item" style="padding-left:0px!important ;padding-right:0px!important; height:55px" button="true"
+          (click)="openUnsevedConversationIframe()">
+          <div tabindex="0"></div>
+          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+        </ion-item>
         <!-- ---------------------------------- -->
         <!-- 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>
@@ -84,8 +100,8 @@
             </ion-label>
           </ion-item>
         </div>
-        
+
       </ng-template>
     </ion-list>
   </div>
-</ion-content>
+</ion-content>

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

@@ -135,5 +135,150 @@ ion-list {
         }
     }
 
-    
 }
+
+.waiting-for-connection {
+    --background:  #fdd764;
+    --min-height: 70px
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+    // margin: 100px auto;
+    width: 25px;
+    height: 25px;
+    position: relative;
+    margin-left: 10px;
+    margin-top: 13px;
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }

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

@@ -22,16 +22,20 @@ import { NavProxyService } from '../../services/nav-proxy.service';
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service';
 import { ConversationDetailPage } from '../conversation-detail/conversation-detail.page';
 import { ContactsDirectoryPage } from '../contacts-directory/contacts-directory.page';
+import { UnassignedConversationsPage } from '../unassigned-conversations/unassigned-conversations.page';
 import { ProfileInfoPage } from '../profile-info/profile-info.page';
 import { MessagingAuthService } from 'src/chat21-core/providers/abstract/messagingAuth.service';
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import { AppConfigProvider } from '../../services/app-config';
-
+import { Subscription } from 'rxjs';
+import { Platform } from '@ionic/angular';
 // Logger
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { NetworkService } from 'src/app/services/network-service/network.service';
+
 
 @Component({
   selector: 'app-conversations-list',
@@ -51,7 +55,7 @@ export class ConversationListPage implements OnInit {
   public showPlaceholder = true;
   public numberOpenConv = 0;
   public loadingIsActive = true;
-  public supportMode = environment.supportMode;
+  public supportMode: boolean;
 
   public convertMessage = convertMessage;
   private isShowMenuPage = false;
@@ -61,8 +65,13 @@ export class ConversationListPage implements OnInit {
 
   public conversationType = 'active'
   headerTitle: string;
+  subscription: Subscription;
 
-
+  public UNASSIGNED_CONVS_URL: any;
+  public hasClickedOpenUnservedConvIframe: boolean = false;
+  public lastProjectId: string;
+  public isOnline: boolean = true;
+  public checkInternet: boolean;
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -78,7 +87,10 @@ export class ConversationListPage implements OnInit {
     private translateService: CustomTranslateService,
     public tiledeskService: TiledeskService,
     public tiledeskAuthService: TiledeskAuthService,
-    public appConfigProvider: AppConfigProvider
+    public appConfigProvider: AppConfigProvider,
+    public platform: Platform,
+    private networkService: NetworkService,
+   
   ) {
     this.listenToAppCompConvsLengthOnInitConvs();
     this.listenToLogoutEvent();
@@ -91,16 +103,85 @@ export class ConversationListPage implements OnInit {
   // @ Lifehooks
   // -----------------------------------------------
   ngOnInit() {
+    this.watchToConnectionStatus();
+    this.getSupportMode();
+  }
 
+  getSupportMode() {
+    this.supportMode = this.appConfigProvider.getConfig().supportMode;
+    // console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
+  }
+
+  watchToConnectionStatus() {
+    this.networkService.checkInternetFunc().subscribe(isOnline => {
+      this.checkInternet = isOnline
+      this.logger.log('[ION-LIST-CONVS-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
+
+      // checking internet connection
+      if (this.checkInternet == true) {
+
+        this.isOnline = true;
+      } else {
+        this.isOnline = false;
+      }
+    });
   }
 
+
   ionViewWillEnter() {
+    this.logger.log('Called ionViewDidEnter')
     this.logger.log('[CONVS-LIST-PAGE] ionViewWillEnter uidConvSelected', this.uidConvSelected);
     this.listnerStart();
+
+    // exit from app with hardware back button
+    this.subscription = this.platform.backButton.subscribe(() => {
+      navigator['app'].exitApp();
+    });
+  }
+
+  // unsubscribe backButton.subscribe method to not use from other page
+  ionViewWillLeave() {
+    this.logger.log('Called ionViewWillLeave')
+    this.subscription.unsubscribe();
   }
 
   ionViewDidEnter() { }
 
+  getLastProjectId(projectid: string) {
+    this.logger.log('[CONVS-LIST-PAGE] - GET LAST PROJECT ID', projectid);
+    this.lastProjectId = projectid;
+  }
+
+  openUnsevedConversationIframe() {
+    this.hasClickedOpenUnservedConvIframe = true
+    this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME', this.hasClickedOpenUnservedConvIframe);
+    const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+    this.UNASSIGNED_CONVS_URL = DASHBOARD_BASE_URL + '#/project/' + this.lastProjectId + '/unserved-request-for-panel';
+    this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME > UNASSIGNED CONVS URL', this.UNASSIGNED_CONVS_URL);
+    this.openUnassignedConversations(this.UNASSIGNED_CONVS_URL)
+  }
+
+  // ---------------------------------------------------------
+  // Opens the Unassigned Conversations iframe
+  // ---------------------------------------------------------
+  openUnassignedConversations(UNASSIGNED_CONVS_URL) {
+
+    if (checkPlatformIsMobile()) {
+      presentModal(this.modalController, UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+    } else {
+      this.navService.push(UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+    }
+  }
+
+  _closeContactsDirectory() {
+    try {
+      closeModal(this.modalController);
+    } catch (err) {
+      this.logger.error('[CONVS-LIST-PAGE] closeContactsDirectory -> error:', err);
+    }
+  }
+
+
   listenToSwPostMessage() {
     this.logger.log('[CONVS-LIST-PAGE] listenToNotificationCLick - CALLED: ');
     const that = this;
@@ -493,8 +574,8 @@ export class ConversationListPage implements OnInit {
   }
 
   onConversationLoaded(conversation: ConversationModel) {
-    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
-    this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded is new? ', conversation.is_new)
+    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded ', conversation)
+    // this.logger.log('[CONVS-LIST-PAGE] onConversationLoaded is new? ', conversation.is_new)
     // if (conversation.is_new === false) {
     //   this.ionContentConvList.scrollToTop(0);
     // }