@chat21/chat21-ionic 3.0.59-rc12 → 3.0.59-rc15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # chat21-ionic ver 3.0
 
+### 3.0.59-rc15
+- Implements a method in app.components that counts and stores the number of open Chat tabs
+- Implements a method on the conversation list page that prevents a new chat tab from opening when the agent clicks "Open Chat" from the dashboard
+
+### 3.0.59-rc14
+- Fixes the bug: the sound that warns that a new conversation has been received does not work
+
 ### 3.0.59-rc12
 - Fixes the bug: Cannot read properties of undefined (reading 'get') when "translationMap" in not yet defined
 - Fixes the bug: when the log out is performed, the item with the number of new conversations remains visible in the left side panel of the conversations list

package/package.json

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

package/src/app/app.component.ts

@@ -141,33 +141,32 @@ export class AppComponent implements OnInit {
     public webSocketJs: WebSocketJs,
   ) {
 
-    // this.saveInStorageChatOpenedTab();
+    this.saveInStorageNumberOfOpenedChatTab();
+    this.getPageState();
     // FOR TEST
     // const last_project = { "user_available": true, "number_assigned_requests": 59, "last_login_at": "2021-08-09T17:30:55.234Z", "status": "active", "_id": "6112bc8f58c958003495a2cb", "id_project": { "status": 100, "_id": "60ffe291f725db00347661ef", "name": "27-LUGLIO-21-STRIPE-TEST", "activeOperatingHours": false, "createdBy": "608ad02d3a4dc000344ade17", "profile": { "name": "pro", "trialDays": 30, "agents": 5, "type": "payment", "subStart": "2021-11-18T10:42:41.000Z", "subEnd": "2021-11-19T10:42:41.000Z", "subscriptionId": "sub_Jvf4kABe9t8JvX", "last_stripe_event": "invoice.payment_succeeded" }, "versions": 20115, "channels": [{ "name": "chat21" }], "createdAt": "2021-07-27T10:40:17.752Z", "updatedAt": "2021-11-18T11:55:01.346Z", "__v": 0, "widget": { "preChatForm": true, "preChatFormJson": [{ "name": "userFullname", "type": "text", "mandatory": true, "label": { "en": "Your name", "it": "Il tuo nome" } }, { "name": "userEmail", "type": "text", "mandatory": true, "regex": "/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/", "label": { "en": "Your email", "it": "La tua email" }, "errorLabel": { "en": "Invalid email address", "it": "Indirizzo email non valido" } }, { "name": "tel", "mandatory": true, "label": { "en": "Your phone number", "it": "Il tuo numero di telefono" } }], "preChatFormCustomFieldsEnabled": true }, "trialExpired": true, "trialDaysLeft": 84, "isActiveSubscription": true, "id": "60ffe291f725db00347661ef" }, "id_user": "60aa0fef1482fe00346854a7", "role": "admin", "createdBy": "608ad02d3a4dc000344ade17", "createdAt": "2021-08-10T17:51:11.318Z", "updatedAt": "2021-11-19T08:08:21.437Z", "__v": 0, "presence": { "status": "online", "changedAt": "2021-11-19T08:08:21.432Z" }, "isAuthenticated": true, "id": "6112bc8f58c958003495a2cb" }
     // localStorage.setItem('last_project', JSON.stringify(last_project))
   }
-  saveInStorageChatOpenedTab() {
-    // if (+localStorage.tabCount > 0) {
-    //   alert('Already open!');
-    // } else {
-    //   localStorage.tabCount = 0;
-    // }
+  saveInStorageNumberOfOpenedChatTab() {
+    this.logger.log('Calling saveInStorageChatOpenedTab!');
 
-    // window.addEventListener('load', (event) => {
-    //   console.log('[CONVS-LIST-PAGE] page is fully loaded', event);
-    //   // let tab  = + localStorage.getItem('tab')
-    //   // console.log('[CONVS-LIST-PAGE] page is fully loaded getItem tab', + tab);
-    //   // localStorage.setItem('tab', "1" )
-    //   localStorage.tabCount = +localStorage.tabCount + 1;
-    // });
+    // https://jsfiddle.net/jjjs5wd3/3/å
+    if (+localStorage.tabCount > 0) {
+      this.logger.log('Chat IONIC Already open!');
+    } else {
+      localStorage.tabCount = 0;
+
+      localStorage.tabCount = +localStorage.tabCount + 1;
+    }
+    const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
+    window.addEventListener(terminationEvent, (event) => {
+      localStorage.tabCount = +localStorage.tabCount - 1;
+    }, { capture: true });
+  }
 
-    // // https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-beforeunload-event
-    // const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';
-    // window.addEventListener(terminationEvent, (event) => {
-    //   console.log('[CONVS-LIST-PAGE] page is terminationEvent', event);
-    //   localStorage.tabCount = +localStorage.tabCount - 1;
-    // }, { capture: true });
+  getPageState() {
     const getState = () => {
+      localStorage.setItem('visibilityState', document.visibilityState)
       if (document.visibilityState === 'hidden') {
         return 'hidden';
       }
@@ -178,16 +177,19 @@ export class AppComponent implements OnInit {
     };
 
     let state = getState();
-    console.log('[CONVS-LIST-PAGE] page state ', state)
-    if (state === 'hidden') {
-      localStorage.setItem('hidden', 'true')
-    }
+    // console.log('[CONVS-LIST-PAGE] page state ', state)
+    // if (state === 'hidden') {
+    //   console.log(`State change: state ${state}`);
+    //   localStorage.setItem('hidden', 'true')
+    // }
 
     const logStateChange = (nextState) => {
       const prevState = state;
       if (nextState !== prevState) {
         console.log(`State change: ${prevState} >>> ${nextState}`);
         state = nextState;
+        localStorage.setItem('state', nextState)
+
       }
     };
 
@@ -207,11 +209,12 @@ export class AppComponent implements OnInit {
         // If the event's persisted property is `true` the page is about
         // to enter the Back-Forward Cache, which is also in the frozen state.
         logStateChange('frozen');
-        localStorage.setItem('terminated', 'true')
+        localStorage.setItem('state', 'frozen')
       } else {
         // If the event's persisted property is not `true` the page is
         // about to be unloaded.
         logStateChange('terminated');
+        localStorage.setItem('state', 'terminated')
         localStorage.setItem('terminated', 'true')
       }
     }, { capture: true });
@@ -391,7 +394,7 @@ export class AppComponent implements OnInit {
       if (this.platform.is('desktop')) {
         // console.log("running on desktop!");
       }
-      
+
 
 
 
@@ -577,7 +580,7 @@ export class AppComponent implements OnInit {
    * @param user
    */
   goOnLine = () => {
-   console.log('[APP-COMP] - GO-ONLINE ');
+    // console.log('[APP-COMP] - GO-ONLINE ');
     // this.isOnline = true;
     // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
 
@@ -624,7 +627,7 @@ export class AppComponent implements OnInit {
   }
 
   goOffLine = () => {
-    console.log('[APP-COMP] - GO-OFFLINE');
+    // console.log('[APP-COMP] - GO-OFFLINE');
 
     this.webSocketClose()
     // this.isOnline = false;
@@ -733,16 +736,23 @@ export class AppComponent implements OnInit {
   }
 
   private initAudio() {
+    // console.log('HERE IS initAudio ')
     // SET AUDIO
+    const href = window.location.href;
+    const hrefArray = href.split('/#/');
+    const chatBaseUrl = hrefArray[0]
+    // console.log('initAudio href', href)
+    // console.log('initAudio chatBaseUrl', chatBaseUrl)
+
     this.audio = new Audio();
-    this.audio.src = URL_SOUND_LIST_CONVERSATION;
+    this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
   }
 
   private manageTabNotification() {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
-
+      // console.log('HERE IS manageTabNotification ')
       let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew()
       badgeNewConverstionNumber > 0 ? badgeNewConverstionNumber : badgeNewConverstionNumber = 1
       document.title = "(" + badgeNewConverstionNumber + ") " + this.tabTitle
@@ -761,6 +771,7 @@ export class AppComponent implements OnInit {
   }
 
   soundMessage() {
+    // console.log('HERE IS soundMessage ')
     const that = this;
     // this.audio = new Audio();
     // // this.audio.src = '/assets/sounds/pling.mp3';
@@ -772,7 +783,7 @@ export class AppComponent implements OnInit {
       that.audio.play().then(() => {
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
       }).catch((error: any) => {
-        that.logger.debug('[APP-COMP] ***soundMessage error*', error);
+        that.logger.error('[APP-COMP] ***soundMessage error*', error);
       });
     }, 1000);
   }

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

@@ -79,7 +79,7 @@ export class ConversationListPage implements OnInit {
 
   public displayNewConvsItem: boolean = true
 
-  
+
 
   constructor(
     private router: Router,
@@ -116,8 +116,45 @@ export class ConversationListPage implements OnInit {
   ngOnInit() {
     this.watchToConnectionStatus();
     this.getSupportMode();
+
+    const currentUrl = this.router.url;
+    this.logger.log('[CONVS-LIST-PAGE] current_url ngOnInit ', currentUrl);
+    this.route.queryParams.subscribe(params => {
+      this.logger.log('[CONVS-LIST-PAGE] ngOnInit params', params);
+      if (params && params.convselected) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params convselected:', params.convselected);
+      
+        const conversationSelected = this.conversations.find(item => item.uid === params.convselected);
+        if (conversationSelected) {
+          this.conversationSelected = conversationSelected;
+          this.logger.log('[CONVS-LIST-PAGE] ngOnInit params convselected - conversationSelected: ', this.conversationSelected);
+          this.navigateByUrl('active', params.convselected)
+        }
+
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
+      if (params && params.contact_id && params.contact_fullname) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params contact_id:', params.contact_id, 'contact_fullname ', params.contact_fullname);
+        this.router.navigateByUrl('conversation-detail/' + params.contact_id + '/' + params.contact_fullname + '/new');
+        this.uidConvSelected = params.contact_id
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
+
+      if (params && params.conversation_detail) {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params conversation_detail:', params.conversation_detail);
+        this.router.navigateByUrl('conversation-detail/');
+
+      } else {
+        this.logger.log('[CONVS-LIST-PAGE] ngOnInit params NoParams ');
+      }
+
+    });
   }
 
+  
+
   getSupportMode() {
     this.supportMode = this.appConfigProvider.getConfig().supportMode;
     // console.log('[ION-LIST-CONVS-COMP] - supportMode ', this.supportMode)
@@ -230,19 +267,19 @@ export class ConversationListPage implements OnInit {
   private listnerStart() {
     const that = this;
     this.chatManager.BSStart
-    .pipe(
-      takeUntil(that.unsubscribe$)
-    )
-    .subscribe((data: any) => {
-      console.log('[CONVS-LIST-PAGE] - BSStart SUBSCR DATA - Current user *****', data);
-      if (data) {
-        that.initialize();
-      }
-    }, error => {
-      this.logger.error('[CONVS-LIST-PAGE] - BSStart SUBSCR - ERROR: ', error);
-    }, () => {
-      this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR * COMPLETE *')
-    });
+      .pipe(
+        takeUntil(that.unsubscribe$)
+      )
+      .subscribe((data: any) => {
+        this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR DATA - Current user *****', data);
+        if (data) {
+          that.initialize();
+        }
+      }, error => {
+        this.logger.error('[CONVS-LIST-PAGE] - BSStart SUBSCR - ERROR: ', error);
+      }, () => {
+        this.logger.log('[CONVS-LIST-PAGE] - BSStart SUBSCR * COMPLETE *')
+      });
   }
 
 
@@ -298,7 +335,7 @@ export class ConversationListPage implements OnInit {
   }
 
   listenGoOnline() {
-   
+
     this.events.subscribe('go:online', (goonline) => {
       this.logger.info('[CONVS-LIST-PAGE] - listen To go:online - goonline', goonline);
       // this.events.unsubscribe('profileInfoButtonClick:logout')
@@ -308,8 +345,8 @@ export class ConversationListPage implements OnInit {
     });
   }
 
-  listenGoOffline(){
- 
+  listenGoOffline() {
+
     this.events.subscribe('go:offline', (offline) => {
       this.logger.info('[CONVS-LIST-PAGE] - listen To go:offline - offline', offline);
       // this.events.unsubscribe('profileInfoButtonClick:logout')
@@ -322,7 +359,7 @@ export class ConversationListPage implements OnInit {
   listenToLogoutEvent() {
     this.events.subscribe('profileInfoButtonClick:logout', (hasclickedlogout) => {
       this.logger.info('[CONVS-LIST-PAGE] - listenToLogoutEvent - hasclickedlogout', hasclickedlogout);
-    
+
 
       this.conversations = []
       this.conversationsHandlerService.conversations = [];

package/src/firebase-messaging-sw-template.js

@@ -43,7 +43,7 @@ importScripts('https://www.gstatic.com/firebasejs/5.8.6/firebase.js');
 // implement this optional method.
 // [START background_handler]
 messaging.setBackgroundMessageHandler(function(payload) {
-  console.log('[firebase-messaging-sw.js] Received background message ', payload);
+  // console.log('[firebase-messaging-sw.js] Received background message ', payload);
   // Customize notification here
   const notificationTitle = 'Background Message Title';
   const notificationOptions = {