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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # chat21-ionic ver 3.0
 
+### 3.0.59-rc9
+- Changes in the archived conversations the date format if the browser language is English
+- Displays the button to open the contact list for direct conversations and the entry at the top of the conversation list showing the number of unassigned conversations for a selected project if the "supportMode" configuration property is set to true
+- Adds a style rule on the unassigned conversations page that changes the background of the "ion-content" if the project list is displayed in the iframe
+- Adds "supportMode" property to env.sample, chat-config-template.json and chat-config.json
+
+### 3.0.59-rc8
+- Changes the title of the modal window showing unassigned conversations from "Unassigned Conversations" to "New Conversations"
+- Fixes the bug: if the "chatEngine" property value is set to "mqtt" the login modal window does not disappear even if the agent is logged in
+- Fixed the value of the configuration property "dashboardUrl"
+
 ### 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

package/env.sample

@@ -10,6 +10,7 @@ PUSH_ENGINE=none
 FILE_UPLOAD_ACCEPT=*/*
 TENANT=tilechat
 LOG_LEVEL=INFO
+SUPPORT_MODE=false
 
 # For MQTT Chat Engine
 MQTT_APPID=tilechat

package/package.json

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

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

@@ -134,14 +134,12 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD') : (conversation.timestamp| amDateFormat:'DD MMM')}}
 
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
-      amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'en' ? (conversation.timestamp | amDateFormat:'MMM DD YYYY') : (conversation.timestamp| amDateFormat:'DD MMM YYYY') }}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
     <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>

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

@@ -14,7 +14,7 @@
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="!supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
     </ion-button>
 

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

@@ -15,7 +15,7 @@ export class DdpHeaderComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
   }
 
   // START @Output() //

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

@@ -87,7 +87,7 @@
                       tabindex="0" [checked]="project?.ws_projct_user_available">
                     <label class="onoffswitch-label" for="myonoffswitch"></label>
                   </div> -->
-                  <div class="availabily---wpr" style=" ">
+                  <div class="availabily---wpr">
                     <!-- <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"
@@ -96,31 +96,42 @@
                     </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">
+                    <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>
-                  </div>
-
 
+                  <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
                   <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)">
+                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                     {{translationMap?.get('Available') }}
                   </span>
+                  <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
                   <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)">
+                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                     {{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">
+                    <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
-                    </span>
+                    </span> -->
+                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
+                      viewBox="0 0 24 24" width="16px" fill="#FEB92C">
+                      <g>
+                        <path d="M0,0h24v24H0V0z" fill="none" />
+                      </g>
+                      <g>
+                        <path
+                          d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" />
+                      </g>
+                    </svg>
                   </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

@@ -336,7 +336,7 @@
 
 .project-item--isBusy-icon {
     border-radius: 50%;
-    background-color: rgb(254,185,44);
+    background-color:#FEB92C;
     font-size: 14px;
     color: #fff;
     position: relative;
@@ -346,8 +346,8 @@
 
 .project-item--isBusy-busy-text {
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    margin-left: 3px;
+    font-size: 11px;
+    // margin-left: 3px;
     position: relative;
     top: -4px;
 }
@@ -360,37 +360,37 @@
 
 @keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 /* Firefox */
 @-moz-keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 /* Safari and Chrome */
 @-webkit-keyframes pulse {
     0% {
-        color: transparent;
+        color: #999999;
     }
     50% {
-        color: #fedd00;
+        color: #FEB92C;
     }
     100% {
-        color: transparent;
+        color: #999999;
     }
 }
 

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; height:55px" button="true"
+        <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>

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

@@ -109,7 +109,7 @@ export class ConversationListPage implements OnInit {
 
   getSupportMode() {
     this.supportMode = this.appConfigProvider.getConfig().supportMode;
-    console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
+    // console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
   }
 
   watchToConnectionStatus() {

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

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{translationMap.get('UnassignedConversations') }}</ion-title>
+    <ion-title>{{translationMap?.get('NewConversations') }}</ion-title>
     <ion-buttons slot="end">
       <ion-button ion-button fill="clear" (click)="onClose()">
         <ion-icon slot="icon-only" name="close"></ion-icon>
@@ -9,6 +9,14 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content overflow-scroll="true" id="iframe-ion-content">
+<ion-content overflow-scroll="true" id="iframe-ion-content" 
+[ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
   <!-- <iframe  id="i_frame"  style="width:100%; height:99%" frameBorder="0" allowfullscreen [src]="unassigned_convs_url_sanitized"></iframe> -->
+  <!-- <div class="stretchspinner-unassigned-convs">
+    <div class="rect1"></div>
+    <div class="rect2"></div>
+    <div class="rect3"></div>
+    <div class="rect4"></div>
+    <div class="rect5"></div>
+  </div> -->
 </ion-content>

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

@@ -0,0 +1,79 @@
+.ion-content-black-background {
+--background: #2d323e	
+}
+
+// -------------------------------------------------
+// stretch spinner https://tobiasahlin.com/spinkit/
+// -------------------------------------------------
+.stretchspinner-unassigned-convs {
+    margin: 100px auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  .stretchspinner-unassigned-convs  > div {
+    background-color: #3ea9f5;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+  
+    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  }
+  
+  .stretchspinner-unassigned-convs .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+  }
+  
+  .stretchspinner-unassigned-convs .rect3 {
+    -webkit-animation-delay: -1s;
+    animation-delay: -1s;
+  }
+  
+  .stretchspinner-unassigned-convs .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+  }
+  
+  .stretchspinner-unassigned-convs .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+  }
+  
+  @-webkit-keyframes sk-stretchdelay {
+    0%,
+    40%,
+    100% {
+      -webkit-transform: scaleY(0.4);
+    }
+    20% {
+      -webkit-transform: scaleY(1);
+    }
+  }
+  
+  @keyframes sk-stretchdelay {
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+      -webkit-transform: scaleY(0.4);
+    }
+    20% {
+      transform: scaleY(1);
+      -webkit-transform: scaleY(1);
+    }
+  }
+  
+
+  .hide-stretchspinner {
+         display: none;
+  }

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

@@ -17,9 +17,12 @@ export class UnassignedConversationsPage implements OnInit {
   @Input() unassigned_convs_url: any;
   unassigned_convs_url_sanitized: any;
   private logger: LoggerService = LoggerInstance.getInstance();
-  has_loaded: boolean;
+  // has_loaded: boolean;
   ion_content: any;
   iframe: any;
+
+  isProjectsForPanel: boolean = false
+
   public translationMap: Map<string, string>;
   constructor(
     private modalController: ModalController,
@@ -29,62 +32,62 @@ export class UnassignedConversationsPage implements OnInit {
   ) { }
 
   ngOnInit() {
-    const keys = ['UnassignedConversations'];
+    const keys = ['UnassignedConversations', 'NewConversations'];
     this.translationMap = this.translateService.translateLanguage(keys);
+    this.buildIFRAME();
+    this.listenToPostMsg();
+  }
 
+  buildIFRAME() {
     this.logger.log('[UNASSIGNED-CONVS-PAGE] - UNASSIGNED CONVS URL (ngOnInit)', this.unassigned_convs_url);
-    // this.unassigned_convs_url_sanitized = this.sanitizer.bypassSecurityTrustResourceUrl(this.unassigned_convs_url);
-    // this.unassigned_convs_url_sanitized = this.sanitizer.bypassSecurityTrustHtml(this.unassigned_convs_url);
     this.unassigned_convs_url_sanitized = this.sanitizer.sanitize(SecurityContext.URL, this.unassigned_convs_url)
     this.logger.log('[UNASSIGNED-CONVS-PAGE] - UNASSIGNED CONVS URL SANITIZED (ngOnInit)', this.unassigned_convs_url_sanitized);
-    this.has_loaded = false
+    // this.has_loaded = false
 
     this.ion_content = document.getElementById("iframe-ion-content");
     this.iframe = document.createElement("iframe");
     this.iframe.src = this.unassigned_convs_url_sanitized;
     this.iframe.width = "100%";
-    this.iframe.height = "99.6%";
+    this.iframe.height = "99%";
     this.iframe.id = "unassigned-convs-iframe"
     this.iframe.frameBorder = "0";
     this.iframe.style.border = "none";
     this.iframe.style.background = "white";
     this.ion_content.appendChild(this.iframe);
 
-    // }
-
-    // window.addEventListener("message", (event) => {
-    //   console.log("[UNASSIGNED-CONVS-PAGE] message event ", event);
-
-    //   if (event && event.data) {
-    //     if (event.data === 'finished') {
-    //       this.has_loaded = true
+  //  this.getIframeHaLoaded()
+  }
 
-    //     }
-    //   }
-    // });
+  getIframeHaLoaded() {
+    var self = this;
+    var iframe = document.getElementById('unassigned-convs-iframe') as HTMLIFrameElement;;
+    this.logger.log('[APP-STORE-INSTALL] GET iframe ', iframe)
+    if (iframe) {
+      iframe.addEventListener("load", function () {
+        self.logger.log("[APP-STORE-INSTALL] GET - Finish");
+        let spinnerElem = <HTMLElement>document.querySelector('.stretchspinner-unassigned-convs')
+        
+        self.logger.log('[APP-STORE-INSTALL] GET iframeDoc readyState spinnerElem', spinnerElem)
+        spinnerElem.classList.add("hide-stretchspinner")
 
+      });
+    }
   }
 
-  
-
-  // getIframeHaLoaded() {
-  //   var self = this;
-  //   var iframe = document.getElementById('i_frame') as HTMLIFrameElement;;
-  //   if (iframe) {
-  //     iframe.addEventListener("load", function () {
-  //       console.log("[UNASSIGNED-CONVS-PAGE] GET - Finish");
-  //       self.has_loaded = true
-    
-
-  //     });
-  //   }
-  // }
-
-  //   loadDeferredIframe(unassigned_convs_url_sanitized) {
-  //     // this function will load the Google homepage into the iframe
-  //     var iframe = document.getElementById("my-deferred-iframe");
-  //     iframe.src = "./" // here goes your url
-  // };
+  listenToPostMsg() {
+    window.addEventListener("message", (event) => {
+      // console.log("[UNASSIGNED-CONVS-PAGE] message event ", event);
+
+      if (event && event.data) {
+        if (event.data === 'onInitProjectsForPanel') {
+          this.isProjectsForPanel = true;
+        }
+        if (event.data === 'onDestroyProjectsForPanel') {
+          this.isProjectsForPanel = false;
+        }
+      }
+    });
+  }
 
 
   async onClose() {

package/src/assets/i18n/en.json

@@ -186,5 +186,6 @@
   "YouAreAboutToJoinThisChat":"You are about to join this chat",
   "Cancel": "Cancel",
   "AreYouSure":"Are you sure?",
-  "UnassignedConversations":"Unassigned Conversations"
+  "UnassignedConversations":"Unassigned Conversations",
+  "NewConversations": "Nuove conversazioni"
 }

package/src/assets/i18n/it.json

@@ -194,5 +194,6 @@
     "YouAreAboutToJoinThisChat":"Stai per entrare in questa chat",
     "Cancel": "Annulla",
     "AreYouSure":"Sei sicuro?",
-    "UnassignedConversations":"Conversazioni non assegnate"
+    "UnassignedConversations":"Conversazioni non assegnate",
+    "NewConversations": "New conversations"
 }

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

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

package/src/chat-config-template.json

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

package/src/chat-config.json

@@ -24,6 +24,6 @@
     "apiUrl": "http://localhost:3000/",
     "baseImageUrl": "https://firebasestorage.googleapis.com/v0/b/",
     "dashboardUrl": "https://support-pre.tiledesk.com/dashboard/",
-    "wsUrl": "ws://localhost:3000/"
-
+    "wsUrl": "ws://localhost:3000/",
+    "supportMode": false
 }

package/src/chat21-core/providers/mqtt/mqtt-auth-service.ts

@@ -65,7 +65,7 @@ export class MQTTAuthService extends MessagingAuthService {
     // this.URL_TILEDESK_SIGNIN_WITH_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'auth/signinWithCustomToken';
     this.logger.log(' ---------------- login con token url ---------------- ');
     // this.checkIsAuth();
-    this.onAuthStateChanged();
+    // this.onAuthStateChanged();
   }
 
   // logout(callback) {
@@ -103,33 +103,33 @@ z
 
   /**
    */
-  onAuthStateChanged() {
-    this.logger.log('UserService::onAuthStateChanged');
-    // if (this.appStorage.getItem('tiledeskToken') == null) {
-    //   this.currentUser = null;
-    this.BSAuthStateChanged.next('offline');
-    // }
-
-    // this.logger.log("STORAGE CHANGED: added listner")
-    // window.addEventListener('storage', (e) => {
-    //   this.logger.log('STORAGE CHANGED:', e.key);
-    //   if (this.appStorage.getItem('tiledeskToken') == null && this.appStorage.getItem('currentUser') == null) {
-    //     this.logger.log('STORAGE CHANGED: CASO TOKEN NULL');
-    //     this.currentUser = null;
-    //     // that.logout(() => {
-    //     //   that.BSAuthStateChanged.next('offline');
-    //     // });
-    //     this.logout();
-    //   }
-    //   else if (this.currentUser == null && this.appStorage.getItem('tiledeskToken') != null && this.appStorage.getItem('currentUser') != null) {
-    //     this.logger.log('STORAGE CHANGED: CASO LOGGED OUTSIDE');
-    //     this.currentUser = JSON.parse(this.appStorage.getItem('currentUser'));
-    //     const tiledeskToken = this.appStorage.getItem('tiledeskToken');
-    //     this.connectWithCustomToken(tiledeskToken);
-    //   }
-    // }, false);
+  // onAuthStateChanged() {
+  //   this.logger.log('UserService::onAuthStateChanged');
+  //   // if (this.appStorage.getItem('tiledeskToken') == null) {
+  //   //   this.currentUser = null;
+  //   this.BSAuthStateChanged.next('offline');
+  //   // }
+
+  //   // this.logger.log("STORAGE CHANGED: added listner")
+  //   // window.addEventListener('storage', (e) => {
+  //   //   this.logger.log('STORAGE CHANGED:', e.key);
+  //   //   if (this.appStorage.getItem('tiledeskToken') == null && this.appStorage.getItem('currentUser') == null) {
+  //   //     this.logger.log('STORAGE CHANGED: CASO TOKEN NULL');
+  //   //     this.currentUser = null;
+  //   //     // that.logout(() => {
+  //   //     //   that.BSAuthStateChanged.next('offline');
+  //   //     // });
+  //   //     this.logout();
+  //   //   }
+  //   //   else if (this.currentUser == null && this.appStorage.getItem('tiledeskToken') != null && this.appStorage.getItem('currentUser') != null) {
+  //   //     this.logger.log('STORAGE CHANGED: CASO LOGGED OUTSIDE');
+  //   //     this.currentUser = JSON.parse(this.appStorage.getItem('currentUser'));
+  //   //     const tiledeskToken = this.appStorage.getItem('tiledeskToken');
+  //   //     this.connectWithCustomToken(tiledeskToken);
+  //   //   }
+  //   // }, false);
 
-  }
+  // }
 
   createCustomToken(tiledeskToken: any): void {
     this.connectWithCustomToken(tiledeskToken)