@chat21/chat21-ionic 3.0.59-rc5 → 3.0.59-rc7

package/CHANGELOG.md

@@ -1,7 +1,17 @@
 # chat21-ionic ver 3.0
 
+### 3.0.59-rc7
+- Fixes the bug "Cannot read properties of undefined (reading 'get')" in component template showing the number of new conversations
+- Fixes the bug: the value of the "supportMode" property is passed hard-coded
+
+### 3.0.59-rc6
+- Outsources the websocket URL to environments
+- Improves the graphic of the element, positioned at the top of the conversation list, which displays the number of new conversations
+- Adds "wsUrl" property to env.sample, chat-config-template.json and chat-config.json
+- Updates environments with "wsUrl" property
+
 ### 3.0.59-rc5
-- Display a "toast message" of success after that the agent has joined to an unassigned conversation
+- Display a "toast message" of success after that the agent has joined to an unassigned conversation and other minor improvements
 
 ### 3.0.59-rc4
 - Adds an item to the top of the conversation list that shows the number of unassigned conversations for a selected project

package/env.sample

@@ -1,5 +1,6 @@
 API_BASEIMAGE_URL=CHANGEIT
 DASHBOARD_URL=https://YOUR_DASHBOARD_URL
+WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 
 SERVER_BASE_URL=http://localhost:3000/
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.59-rc5",
+    "version": "3.0.59-rc7",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.ts

@@ -261,12 +261,12 @@ export class AppComponent implements OnInit {
 
   listenToPostMsgs() {
     window.addEventListener("message", (event) => {
-      console.log("[APP-COMP] message event ", event);
+      // console.log("[APP-COMP] message event ", event);
 
       if (event && event.data && event.data.action && event.data.parameter) {
         if (event.data.action === 'openJoinConversationModal') {
-          console.log("[APP-COMP] message event action ", event.data.action);
-          console.log("[APP-COMP] message event parameter ", event.data.parameter);
+          // console.log("[APP-COMP] message event action ", event.data.action);
+          // console.log("[APP-COMP] message event parameter ", event.data.parameter);
           this.presentAlertConfirmJoinRequest(event.data.parameter, event.data.calledBy)
         }
       }
@@ -531,7 +531,9 @@ export class AppComponent implements OnInit {
   // }
 
   connetWebsocket(tiledeskToken) {
-    const WS_URL = 'wss://tiledesk-server-pre.herokuapp.com/' + '?token=' + tiledeskToken
+    const appconfig = this.appConfigProvider.getConfig();
+    this.logger.log('connetWebsocket appconfig wsUrl ', appconfig.wsUrl)
+    const WS_URL = appconfig.wsUrl + '?token=' + tiledeskToken
     this.webSocketJs.init(
       WS_URL,
       undefined,
@@ -1013,7 +1015,7 @@ export class AppComponent implements OnInit {
   // https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
   @HostListener('window:storage', ['$event'])
   onStorageChanged(event: any) {
-    // console.log('[APP-COMP] - onStorageChanged event ', event)
+    
     if (event.key !== 'chat_sv5__tiledeskToken') {
       return;
     }
@@ -1052,7 +1054,4 @@ export class AppComponent implements OnInit {
       }
     }
   }
-
-
-
 }

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -74,6 +74,7 @@
   </ion-item-options>
 </ion-item-sliding> -->
 
+
 <ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
   *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
   <div tabindex="0"></div>
@@ -117,7 +118,8 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived" [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
+    <ion-button *ngIf="!conversation.archived"
+      [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
@@ -146,7 +148,8 @@
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
+  <div item-end class="notification_point"
+    [ngClass]="{'notification_point-on-desktop': !isApp, 'notification_point-on-mobile': isApp }"
     *ngIf="conversation.is_new">
   </div>
 

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -78,9 +78,10 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
-   
   }
 
+ 
+
 
 
   // --------------------------------------------------

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -7,14 +7,16 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 })
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
-  @Input() supportMode = false;
+  @Input() supportMode: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
 
   constructor(
   ) { }
 
-  ngOnInit() {}
+  ngOnInit() {
+    console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+  }
 
   // START @Output() //
   /** */

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

@@ -15,7 +15,7 @@
               <div class="flex-child-left">
                 <!-- padding:6px; background: rgb(31,107,192); -->
                 <div class="unassigned-notifications-icon-wpr">
-                  <svg viewBox="0 0 28 28" alt="" class="a8c37x1j ms05siws hwsy1cff b7h9ocf4 fzdkajry" height="40"
+                  <!-- <svg viewBox="0 0 28 28" alt="" class="a8c37x1j ms05siws hwsy1cff b7h9ocf4 fzdkajry" height="40"
                     width="40"
                     style="vertical-align: middle;border-radius: 50%;">
                     <style type="text/css">
@@ -26,20 +26,39 @@
                     <path class="notifications-icons"
                       d="M7.847 23.488C9.207 23.488 11.443 23.363 14.467 22.806 13.944 24.228 12.581 25.247 10.98 25.247 9.649 25.247 8.483 24.542 7.825 23.488L7.847 23.488ZM24.923 15.73C25.17 17.002 24.278 18.127 22.27 19.076 21.17 19.595 18.724 20.583 14.684 21.369 11.568 21.974 9.285 22.113 7.848 22.113 7.421 22.113 7.068 22.101 6.79 22.085 4.574 21.958 3.324 21.248 3.077 19.976 2.702 18.049 3.295 17.305 4.278 16.073L4.537 15.748C5.2 14.907 5.459 14.081 5.035 11.902 4.086 7.022 6.284 3.687 11.064 2.753 15.846 1.83 19.134 4.096 20.083 8.977 20.506 11.156 21.056 11.824 21.986 12.355L21.986 12.356 22.348 12.561C23.72 13.335 24.548 13.802 24.923 15.73Z">
                     </path>
+                  </svg> -->
+
+                  <!-- <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell"
+                    class="svg-inline--fa fa-bell fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 448 512" height="auto" width="24px">
+                    <path fill="currentColor"
+                      d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z">
+                    </path>
+                  </svg> -->
+
+                  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
+                    class="style-scope yt-icon"
+                    style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-left:4px">
+                    <g class="style-scope yt-icon">
+                      <path
+                        d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
+                        class="style-scope yt-icon"></path>
+                    </g>
                   </svg>
+
                 </div>
                 <div class="unassigned-notifications-badge">
                   <!-- || currentUserRequestCount > 0  -->
                   <!-- <span *ngIf="unservedRequestCount > 0 "> -->
-                    <!-- + currentUserRequestCount -->
-                    <span class="notification-count">{{ unservedRequestCount }}</span>
+                  <!-- + currentUserRequestCount -->
+                  <span class="notification-count">{{ unservedRequestCount }}</span>
                   <!-- </span> -->
-                
+
                 </div>
 
               </div>
 
-              
+
               <div class="flex-child-right" *ngIf="!window_width_is_60">
                 <div class="project-name-project-for-panel">
                   {{ project?.id_project?.name }}
@@ -62,31 +81,46 @@
                   </span>
                 </div> -->
                 <div class="availabily-and-busy-wpr">
-                  <div class="onoffswitch"
+                  <!-- <div class="onoffswitch"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
                     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
                       tabindex="0" [checked]="project?.ws_projct_user_available">
                     <label class="onoffswitch-label" for="myonoffswitch"></label>
+                  </div> -->
+                  <div class="availabily---wpr" style=" ">
+                    <!-- <div class="i_onoffswitch"
+                      (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                      <input type="checkbox" name="i_onoffswitch" class="i_onoffswitch-checkbox"
+                        id="i_switch_availability" tabindex="0" [checked]="project?.ws_projct_user_available">
+                      <label style="margin-bottom: 0px" class="i_onoffswitch-label" for="i_switch_availability"></label>
+                    </div> -->
+
+
+                    <div class="onoffswitch" (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="0" [checked]="project?.ws_projct_user_available">
+                      <label class="onoffswitch-label" for="myonoffswitch"></label>
+                  </div>
                   </div>
 
+
                   <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
                     [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    {{translationMap.get('Available') }}
+                    {{translationMap?.get('Available') }}
                   </span>
                   <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
                     [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    {{translationMap.get('Unavailable')}}
+                    {{translationMap?.get('Unavailable')}}
                   </span>
                   <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
                     <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span>
                   </div>
-                  <span *ngIf="project?.ws_projct_user_isBusy === true" class="project-item--isBusy-busy-text text-pulse-animation">
+                  <!-- <span *ngIf="project?.ws_projct_user_isBusy === true" class="project-item--isBusy-busy-text text-pulse-animation">
                     {{translationMap.get('Busy')}}
-                  </span>
+                  </span> -->
                 </div>
 
               </div>

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

@@ -6,9 +6,13 @@
     padding-bottom: 0px !important;
     background: #fff;
     padding-left: 0px;
-    min-height: 70px;
-    height: 70px;
     width: 100%;
+    // min-height: 70px;
+    // height: 70px;
+    min-height: 55px;
+    height: 55px;
+    position: relative;
+    top: -4px;
 }
 
 .main-content-project-for-panel:hover {
@@ -283,6 +287,9 @@
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     font-family: Helvetica, Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    position: relative;
+    top: -1px;
 }
 
 // .im-available-project-for-panel {
@@ -290,18 +297,26 @@
 // }
 
 .availabily-and-busy-wpr {
-    margin-top: 6px;
+    // margin-top: 6px;
+    margin-top: 4px;
     margin-left: 11px;
 }
 
+.availabily---wpr {
+    display: inline-block;
+    position: relative;
+    top: -4px;
+    margin-right: 6px;
+}
+
 .availibility-status-text {
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 13px;
+    font-size: 11px;
     margin-left: 3px;
-    position: relative;
-    top: -4px;
     display: inline-block;
-    min-width: 74px;
+    min-width: 85px;
+    position: relative;
+    top: -5px;
 }
 
 .online-text-color {
@@ -321,9 +336,12 @@
 
 .project-item--isBusy-icon {
     border-radius: 50%;
-    background-color: #fedd00;
-    font-size: 18px;
+    background-color: rgb(254,185,44);
+    font-size: 14px;
     color: #fff;
+    position: relative;
+    top: -1px;
+    // margin-left: 8px;
 }
 
 .project-item--isBusy-busy-text {
@@ -384,14 +402,18 @@
 
 .unassigned-notifications-badge {
     position: absolute;
-    top: 12px;
+    // top: 12px;
+    top: 14px;
     border-radius: 50%;
     background: #e41e3f;
-    width: 24px;
-    height: 24px;
+    // width: 24px;
+    // height: 24px;
+    width: 22px;
+    height: 22px;
     color: #fff;
-    left: 28px;
-    border: 2px solid #fff
+    // left: 28px;
+    left: 32px;
+    border: 1px solid #fff;
 }
 .notification-count {
     font-size: 12px;
@@ -488,10 +510,62 @@
 // ------------------------------------------------------------------
 // on-off availability switch btn // https://proto.io/freebies/onoff/
 // ------------------------------------------------------------------
+// .onoffswitch {
+//     display: inline-block;
+//     position: relative;
+//     width: 36px;
+//     -webkit-user-select: none;
+//     -moz-user-select: none;
+//     -ms-user-select: none;
+// }
+// .onoffswitch-checkbox {
+//     position: absolute;
+//     opacity: 0;
+//     pointer-events: none;
+// }
+// .onoffswitch-label {
+//     display: block;
+//     overflow: hidden;
+//     cursor: pointer;
+//     height: 18px;
+//     padding: 0;
+//     line-height: 18px;
+//     border: 0px solid #ffffff;
+//     border-radius: 20px;
+//     background-color: #eeeeee;
+// }
+// .onoffswitch-label:before {
+//     content: "";
+//     display: block;
+//     width: 20px;
+//     margin: -1px;
+//     background: #f44336;
+//     position: absolute;
+//     top: 0;
+//     bottom: 0;
+//     // right: 14px;
+//     border-radius: 20px;
+//     // box-shadow: 0 6px 12px 0px #757575;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label {
+//     background-color: #eeeeee;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label,
+// .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+//     border-color: #eeeeee;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+//     margin-left: 0;
+// }
+// .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+//     right: 0px;
+//     background-color: #4caf50;
+//     // box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
+// }
+
 .onoffswitch {
-    display: inline-block;
     position: relative;
-    width: 36px;
+    width: 30px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
@@ -505,24 +579,24 @@
     display: block;
     overflow: hidden;
     cursor: pointer;
-    height: 18px;
+    height: 8px;
     padding: 0;
-    line-height: 18px;
+    line-height: 8px;
     border: 0px solid #ffffff;
-    border-radius: 20px;
+    border-radius: 16px;
     background-color: #eeeeee;
 }
 .onoffswitch-label:before {
     content: "";
     display: block;
-    width: 20px;
-    margin: -1px;
+    width: 16px;
+    margin: -4px;
     background: #f44336;
     position: absolute;
     top: 0;
     bottom: 0;
-    // right: 14px;
-    border-radius: 20px;
+    right: 18px;
+    border-radius: 16px;
     // box-shadow: 0 6px 12px 0px #757575;
 }
 .onoffswitch-checkbox:checked + .onoffswitch-label {
@@ -540,3 +614,56 @@
     background-color: #4caf50;
     // box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
 }
+
+// -----------------------
+// i on-off switch
+// -----------------------
+.i_onoffswitch {
+    position: relative;
+    width: 33px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+.i_onoffswitch-checkbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+.i_onoffswitch-label {
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    height: 18px;
+    padding: 0;
+    line-height: 18px;
+    // border: 1px solid #e3e3e3;
+    border-radius: 18px;
+    background-color: #f44336;
+    transition: background-color 0.3s ease-in;
+}
+.i_onoffswitch-label:before {
+    content: "";
+    display: block;
+    // width: 18px;
+    width: 16px;
+    margin: 0px;
+    background: #ffffff;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 15px;
+    border: 1px solid #e3e3e3;
+    border-radius: 18px;
+    transition: all 0.3s ease-in 0s;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label {
+    background-color: #4caf50;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label,
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label:before {
+    border-color: #4caf50;
+}
+.i_onoffswitch-checkbox:checked + .i_onoffswitch-label:before {
+    right: 0px;
+}

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

@@ -50,7 +50,7 @@ export class ProjectItemComponent implements OnInit {
   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') {
@@ -114,15 +114,23 @@ export class ProjectItemComponent implements OnInit {
   }
 
   getLastProjectStoredAndSubscToWSAvailabilityAndConversations() {
-    const stored_project = localStorage.getItem('last_project')
+    let stored_project = ''
+    try {
+      stored_project = localStorage.getItem('last_project')
+    } catch (err) {
+      console.log('Get loacal storage item LAST PROJECT ', err)
+    }
+
+
     if (!stored_project) {
+      console.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)
 
@@ -137,13 +145,13 @@ export class ProjectItemComponent implements OnInit {
 
 
     if (stored_project) {
-      // this.logger.log('PROJECT-ITEM STORED LAST PROJECT ', 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) {
@@ -208,7 +216,7 @@ export class ProjectItemComponent implements OnInit {
 
         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']
+          // this.project['ws_projct_user_isBusy'] = projectUser['isBusy']
         }
 
       }, (error) => {

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

@@ -42,7 +42,7 @@
           <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
         </ion-item>
 
-        <ion-item class="ion-no-padding" style="padding-left:0px!important ;padding-right:0px!important" button="true"
+        <ion-item class="ion-no-padding" 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>

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

@@ -55,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;
@@ -90,6 +90,7 @@ export class ConversationListPage implements OnInit {
     public appConfigProvider: AppConfigProvider,
     public platform: Platform,
     private networkService: NetworkService,
+   
   ) {
     this.listenToAppCompConvsLengthOnInitConvs();
     this.listenToLogoutEvent();
@@ -101,11 +102,17 @@ export class ConversationListPage implements OnInit {
   // -----------------------------------------------
   // @ Lifehooks
   // -----------------------------------------------
-  ngOnInit() { 
-    this.watchToConnectionStatus()
+  ngOnInit() {
+    this.watchToConnectionStatus();
+    this.getSupportMode();
+  }
+
+  getSupportMode() {
+    this.supportMode = this.appConfigProvider.getConfig().supportMode;
+    console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
   }
 
-watchToConnectionStatus() {
+  watchToConnectionStatus() {
     this.networkService.checkInternetFunc().subscribe(isOnline => {
       this.checkInternet = isOnline
       this.logger.log('[ION-LIST-CONVS-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
@@ -158,7 +165,7 @@ watchToConnectionStatus() {
   // Opens the Unassigned Conversations iframe
   // ---------------------------------------------------------
   openUnassignedConversations(UNASSIGNED_CONVS_URL) {
-   
+
     if (checkPlatformIsMobile()) {
       presentModal(this.modalController, UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
     } else {

package/src/chat-config-pre-test.json

@@ -5,6 +5,7 @@
     "logLevel": "info",
     "fileUploadAccept":"*/*",
     "authPersistence": "LOCAL",
+    "supportMode": false,
     "firebaseConfig": {
         "tenant": "tilechat",
         "apiKey": "AIzaSyCoWXHNvP1-qOllCpTshhC6VjPXeRTK0T4",
@@ -25,6 +26,7 @@
     },
     "apiUrl": "https://tiledesk-server-pre.herokuapp.com/",
     "baseImageUrl": "https://firebasestorage.googleapis.com/v0/b/",
-    "dashboardUrl": "https://support-pre.tiledesk.com/dashboard/"
+    "dashboardUrl": "http://localhost:4204/",
+    "wsUrl": "wss://tiledesk-server-pre.herokuapp.com/"
 }
 

package/src/chat-config-template.json

@@ -23,5 +23,6 @@
     },
     "apiUrl": "${API_URL}",
     "baseImageUrl": "${API_BASEIMAGE_URL}",
-    "dashboardUrl": "${DASHBOARD_URL}"
+    "dashboardUrl": "${DASHBOARD_URL}",
+    "wsUrl": "${WS_URL}"
 }

package/src/chat-config.json

@@ -23,5 +23,7 @@
     },
     "apiUrl": "http://localhost:3000/",
     "baseImageUrl": "https://firebasestorage.googleapis.com/v0/b/",
-    "dashboardUrl": "http://localhost:4500/"
+    "dashboardUrl": "https://support-pre.tiledesk.com/dashboard/",
+    "wsUrl": "ws://localhost:3000/"
+
 }