@chat21/chat21-ionic 3.0.55 → 3.0.59-rc10

package/src/app/app.component.ts

@@ -55,9 +55,9 @@ import { getImageUrlThumbFromFirebasestorage } from 'src/chat21-core/utils/utils
 import { TiledeskService } from './services/tiledesk/tiledesk.service';
 import { NetworkService } from './services/network-service/network.service';
 import * as PACKAGE from 'package.json';
+import { filter } from 'rxjs/operators'
+import { WebSocketJs } from './services/websocket/websocket-js';
 
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators'
 // import { filter } from 'rxjs/operators';
 
 @Component({
@@ -73,7 +73,7 @@ export class AppComponent implements OnInit {
   // public appIsOnline$: Observable<boolean> = undefined;
   checkInternet: boolean;
 
-  private subscription: Subscription;
+  private BSAuthStateChangedSubscriptionRef: Subscription;
   public sidebarPage: any;
   public notificationsEnabled: boolean;
   public zone: NgZone;
@@ -98,8 +98,10 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
-  private unsubscribe$: Subject<any> = new Subject<any>();
-  private isOnline: boolean = false;
+
+  // private isOnline: boolean = false;
+
+  wsService: WebSocketJs;
 
   constructor(
     private platform: Platform,
@@ -135,98 +137,201 @@ export class AppComponent implements OnInit {
     public toastController: ToastController,
     // private network: Network,
     // private tiledeskService: TiledeskService,
-    private networkService: NetworkService
+    private networkService: NetworkService,
+    public webSocketJs: WebSocketJs,
   ) {
-    this.logger.log('[APP-COMP] HELLO Constuctor !!!!!!!')
-    // HACK: fix toast not presented when offline, due to lazy loading the toast controller.
-    // this.toastController.create({ animated: false }).then(t => {
-    //   console.log('[APP-COMP] toastController create')
-    //   t.present();
-    //   t.dismiss();
-    // });
+
+    // this.saveInStorageChatOpenedTab();
+    // 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;
+    // }
+
+    // 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://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 });
+    const getState = () => {
+      if (document.visibilityState === 'hidden') {
+        return 'hidden';
+      }
+      if (document.hasFocus()) {
+        return 'active';
+      }
+      return 'passive';
+    };
+
+    let state = getState();
+    console.log('[CONVS-LIST-PAGE] page state ', state)
+    if (state === 'hidden') {
+      localStorage.setItem('hidden', 'true')
+    }
+
+    const logStateChange = (nextState) => {
+      const prevState = state;
+      if (nextState !== prevState) {
+        console.log(`State change: ${prevState} >>> ${nextState}`);
+        state = nextState;
+      }
+    };
+
+    ['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) => {
+      window.addEventListener(type, () => logStateChange(getState()), { capture: true });
+    });
+
+    // The next two listeners, on the other hand, can determine the next
+    // state from the event itself.
+    window.addEventListener('freeze', () => {
+      // In the freeze event, the next state is always frozen.
+      logStateChange('frozen');
+    }, { capture: true });
+
+    window.addEventListener('pagehide', (event) => {
+      if (event.persisted) {
+        // 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')
+      } else {
+        // If the event's persisted property is not `true` the page is
+        // about to be unloaded.
+        logStateChange('terminated');
+        localStorage.setItem('terminated', 'true')
+      }
+    }, { capture: true });
 
-  param() {
-    // PARAM
-    const url: URL = new URL(window.top.location.href);
-    const params: URLSearchParams = url.searchParams;
-    return params;
   }
+
+
+  // param() {
+  //   // PARAM
+  //   const url: URL = new URL(window.top.location.href);
+  //   const params: URLSearchParams = url.searchParams;
+  //   return params;
+  // }
   /**
    */
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
     this.persistence = appconfig.authPersistence;
     this.appStorageService.initialize(environment.storage_prefix, this.persistence, '')
-    this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
-    this.logger.info('[APP-COMP] ngOnInit this.route.snapshot.params -->', this.route.snapshot.params);
+    // this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
+    // this.logger.log('[APP-COMP] ngOnInit this.route.snapshot.params -->', this.route.snapshot.params);
     // this.initializeApp('oninit');
     const token = getParameterByName('jwt')
-    this.logger.info('[APP-COMP] ngOnInit token get from params -->', token);
-   
+    // this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with getParameterByName -->', token);
+
     if (token) {
-      this.isOnline = false;
-      this.logger.log('[APP-COMP] AUTLOGIN > RUN SIGNINWITHCUSTOMTOKEN  params ', token)
+      // this.isOnline = false;
+      // this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with this.isOnline  ', this.isOnline)
+      this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN token get with getParameterByName  ', token)
       // save token in local storage then 
-      this.appStorageService.setItem('tiledeskToken', token);
+
+      const storedToken = this.appStorageService.getItem('tiledeskToken');
+      this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN storedToken ', storedToken)
+      this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN SAVE THE PARAMS TOKEN ', token)
+      if (storedToken !== token) {
+        this.appStorageService.setItem('tiledeskToken', token);
+      } else {
+        this.logger.log('[APP-COMP] ngOnInit AUTOLOGIN the current user already exist DON\'T SAVE ')
+      }
     }
     this.initializeApp('oninit');
-    // else {
-    //   this.isOnline = false;
-    //   this.logger.log('[APP-COMP] NO AUTLOGIN > RUN INIZIALIZE APP')
-    //   this.initializeApp('oninit');
-    // }
 
-    // const param = this.param();
-    // const token: string = param.get("jwt");
-    // this.logger.info('[APP-COMP] ngOnInit token geet from params -->', token);
-
-    // this.subscription = this.router.events.subscribe((event) => {
-    //   if (event instanceof NavigationStart) {
-    //    const current_url = event.url
-    //     this.logger.info('[APP-COMP] - NavigationStart event current_url ', current_url);
-    //     if (current_url.includes('jwt')) {
-    //       this.logger.info('[APP-COMP] - NavigationStart event current_url INCLUDES jwt');
-    //       const tokenString =  current_url.slice(current_url.lastIndexOf('=') + 1)
-    //       // const token =  tokenString.substring(1, tokenString.length - 1)
-    //       const token =  tokenString
-    //       this.logger.info('[APP-COMP] - NavigationStart event current_url INCLUDES jwt > token ', token);
-    //       this.signInWithCustomToken("JWT%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MDhhZDAyZDNhNGRjMDAwMzQ0YWRlMTciLCJlbWFpbCI6Im51b3ZvcHJlZ2lub0BtYWlsbmEuY28iLCJmaXJzdG5hbWUiOiJOdW92byIsImxhc3RuYW1lIjoiUHJlZ2lubyIsImVtYWlsdmVyaWZpZWQiOnRydWUsImlhdCI6MTYzNDE5OTU1NiwiYXVkIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJpc3MiOiJodHRwczovL3RpbGVkZXNrLmNvbSIsInN1YiI6InVzZXIiLCJqdGkiOiIwMGQyNTI0MS05MDI4LTRmYTYtYmJhNi0xOGNmZTUwNzdiYTMifQ.4kCuHOyceIMWnlyOiCvQEiDPqDZR8HwYgyQoqMYJxX0")
-    //     } else {
-    //       this.logger.info('[APP-COMP] - NavigationStart event current_url NOT INCLUDES jwt');
-    //     }
-    //   }
-    // });
+    this.listenToPostMsgs();
+  }
 
-    // this.route.queryParams.subscribe(params => {
-    //   this.logger.log('[APP-COMP] ROUTE QUERY PARAMS params', params)
-    //   if (params.jwt) {
-    //     this.isOnline = false;
-    //     this.logger.log('[APP-COMP] AUTLOGIN > RUN SIGNINWITHCUSTOMTOKEN  params ', params)
-    //     this.tiledeskAuthService.signInWithCustomToken(params.jwt).then(user => {
-    //       this.logger.log('[APP-COMP] AUTLOGIN > RUN SIGNINWITHCUSTOMTOKEN user', user)
-    //       // if (user) {
-    //         this.logger.log('[APP-COMP] AUTLOGIN > RUN INIZIALIZE APP')
-    //         this.initializeApp('oninit');
-    //       // }
-    //       this.messagingAuthService.createCustomToken(params.jwt)
-    //     }).catch(error => {
-    //       this.logger.error('[APP-COMP] AUTLOGIN > RUN SIGNINWITHCUSTOMTOKE - ERROR', error)
-    //     })
-    //   } 
-    //   else {
-    //     this.isOnline = false;
-    //     this.logger.log('[APP-COMP] NO AUTLOGIN > RUN INIZIALIZE APP')
-    //     this.initializeApp('oninit');
-    //   }
-    // });
+
+
+  listenToPostMsgs() {
+    window.addEventListener("message", (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);
+          this.presentAlertConfirmJoinRequest(event.data.parameter, event.data.calledBy)
+        }
+      }
+      if (event && event.data && event.data.action && event.data.text) {
+        if (event.data.action === "display_toast_join_complete") {
+          this.presentToastJoinComplete(event.data.text)
+        }
+      }
+    })
+  }
+
+  async presentToastJoinComplete(text) {
+    const toast = await this.toastController.create({
+      message: text,
+      duration: 2000,
+      color: "success"
+    });
+    toast.present();
   }
 
+  async presentAlertConfirmJoinRequest(requestid, calledby) {
+    var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+    // console.log("[APP-COMP] message event iframeWin ", iframeWin);
 
-  signInWithCustomToken(token) {
+    const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
+      input !== null && input.tagName === 'IFRAME';
+
+    const keys = ['YouAreAboutToJoinThisChat', 'Cancel', 'AreYouSure'];
+    const translationMap = this.translateService.translateLanguage(keys);
+
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: translationMap.get('AreYouSure'),
+      message: translationMap.get('YouAreAboutToJoinThisChat'),
+      buttons: [
+        {
+          text: translationMap.get('Cancel'),
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: (blah) => {
+            // console.log('Confirm Cancel: blah', blah);
+          }
+        }, {
+          text: 'Ok',
+          handler: () => {
+            // console.log('Confirm Okay');
+
+            if (isIFrame(iframeWin) && iframeWin.contentWindow) {
+              const msg = { action: "joinConversation", parameter: requestid, calledBy: calledby }
+              iframeWin.contentWindow.postMessage(msg, '*');
+            }
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
 
-    this.isOnline = false;
-    this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN token', token)
+
+
+
+  signInWithCustomToken(token) {
+    // this.isOnline = false;
+    this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN  token', token)
     this.tiledeskAuthService.signInWithCustomToken(token)
       .then((user: any) => {
         this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN user', user)
@@ -235,26 +340,22 @@ export class AppComponent implements OnInit {
       .catch(error => {
         this.logger.error('[APP-COMP] SIGNINWITHCUSTOMTOKEN error::', error)
       })
-
   }
 
-
-
   /** */
   initializeApp(calledby: string) {
-    this.logger.info('[APP-COMP] - initializeApp !!! CALLED-BY: ', calledby);
-
-    this.logger.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
+    // this.logger.log('[APP-COMP] - X - initializeApp !!! CALLED-BY: ', calledby);
+    // console.log('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
-    if (!this.platform.is('cordova')) {
-      this.splashScreen.show();
-    }
+    // if (!this.platform.is('cordova')) {
+    this.splashScreen.show();
+    // }
     this.tabTitle = document.title;
 
     this.getRouteParamsAndSetLoggerConfig();
 
     const appconfig = this.appConfigProvider.getConfig();
-    this.logger.info('[APP-COMP] appconfig: ', appconfig)
+    // this.logger.info('[APP-COMP] appconfig: ', appconfig)
     this.version = PACKAGE.version;
     this.logger.info('[APP-COMP] version: ', this.version)
 
@@ -263,19 +364,42 @@ export class AppComponent implements OnInit {
 
     this.tenant = appconfig.firebaseConfig.tenant;
     this.logger.info('[APP-COMP] appconfig firebaseConfig tenant: ', this.tenant);
-
-    
-
-
     this.notificationsEnabled = true;
     this.zone = new NgZone({}); // a cosa serve?
 
+    // ------------------------------------------
+    // Platform ready
+    // ------------------------------------------
     this.platform.ready().then(() => {
-      this.setLanguage();
+      // console.log("Check platform");
+      if (this.platform.is('cordova')) {
+        // console.log("the device running Cordova");
+      }
+      if (!this.platform.is('cordova')) {
+        // console.log("the device Not running Cordova");
+      }
 
-      if (this.splashScreen) {
-        this.splashScreen.hide();
+      if (this.platform.is('android')) {
+        // console.log("running on Android device!");
       }
+      if (this.platform.is('ios')) {
+        // console.log("running on iOS device!");
+      }
+      if (this.platform.is('mobileweb')) {
+        // console.log("running in a browser on mobile!");
+      }
+      if (this.platform.is('desktop')) {
+        // console.log("running on desktop!");
+      }
+      
+
+
+
+      this.setLanguage();
+
+      // if (this.splashScreen) {
+      this.splashScreen.hide();
+      // }
       this.statusBar.styleDefault();
       this.navService.init(this.sidebarNav, this.detailNav);
       // this.persistence = appconfig.authPersistence;
@@ -298,35 +422,19 @@ export class AppComponent implements OnInit {
 
       this.initAuthentication();
       this.initSubscriptions();
-      this.initAudio()
+      this.initAudio();
 
       this.logger.debug('[APP-COMP] initializeApp:: ', this.sidebarNav, this.detailNav);
-      // this.listenToLogoutEvent()
+
       this.translateToastMsgs();
 
       // ---------------------------------------
       // Watch to network status
       // ---------------------------------------
       this.watchToConnectionStatus();
-      // this.listenToUserIsSignedIn();
-
-
     });
   }
 
-  // listenToUserIsSignedIn() {
-  //   this.tiledeskAuthService.isOnline$
-  //     .pipe(filter((isOnline) => isOnline !== null))
-  //     .subscribe((isOnline: any) => {
-  //       console.log('[APP-COMP] user isOnline: ', isOnline);
-
-  //       // if (isOnline === false) {
-  //       //   this.events.publish('profileInfoButtonClick:logout', true);
-  //       // }
-  //     });
-  // }
-
-
 
   watchToConnectionStatus() {
     this.networkService.checkInternetFunc().subscribe(isOnline => {
@@ -352,7 +460,7 @@ export class AppComponent implements OnInit {
               if (elemIonNavchildNodes.length === 0) {
                 this.logger.log('[APP-COMP] - watchToConnectionStatus - elemIonNavchildNodes  HERE YES', elemIonNavchildNodes);
 
-                this.initializeApp('checkinternet');
+                // this.initializeApp('checkinternet');
                 this.executedInitializeAppByWatchConnection = true;
               }
             }, 2000);
@@ -366,7 +474,7 @@ export class AppComponent implements OnInit {
               const childElementCount = elemIonRouterOutlet.childElementCount;
               this.logger.log('[APP-COMP] - watchToConnectionStatus - mobile * childElementCount *', childElementCount)
               if (childElementCount === 1) {
-                this.initializeApp('checkinternet');
+                // this.initializeApp('checkinternet');
                 this.executedInitializeAppByWatchConnection = true;
               }
             }, 2000);
@@ -383,9 +491,9 @@ export class AppComponent implements OnInit {
   getRouteParamsAndSetLoggerConfig() {
     const appconfig = this.appConfigProvider.getConfig();
     this.route.queryParams.subscribe(params => {
-      this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - queryParams params: ', params)
+      // this.logger.log('[APP-COMP] getRouteParamsAndSetLoggerConfig - queryParams params: ', params)
       if (params.logLevel) {
-        this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from queryParams: ', params.logLevel)
+        this.logger.log('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from queryParams: ', params.logLevel)
         this.logger.setLoggerConfig(true, params.logLevel)
       } else {
         this.logger.info('[APP-COMP] getRouteParamsAndSetLoggerConfig - log level get from appconfig: ', appconfig.logLevel)
@@ -415,51 +523,50 @@ export class AppComponent implements OnInit {
   /**------- AUTHENTICATION FUNCTIONS --> START <--- +*/
   private initAuthentication() {
     const tiledeskToken = this.appStorageService.getItem('tiledeskToken')
+
     this.logger.log('[APP-COMP] >>> INIT-AUTHENTICATION !!! ')
     this.logger.log('[APP-COMP] >>> initAuthentication tiledeskToken ', tiledeskToken)
-
-    const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-    this.logger.log('[APP-COMP] >>> initAuthentication currentUser ', currentUser)
+    // const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+    // this.logger.log('[APP-COMP] >>> initAuthentication currentUser ', currentUser)
     if (tiledeskToken) {
       this.logger.log('[APP-COMP] >>> initAuthentication I LOG IN WITH A TOKEN EXISTING IN THE LOCAL STORAGE OR WITH A TOKEN PASSED IN THE URL PARAMETERS <<<')
-
       this.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(user => {
         this.logger.log('[APP-COMP] >>> initAuthentication user ', user)
         this.messagingAuthService.createCustomToken(tiledeskToken)
-      }).catch(error => { this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::' + error) })
-
+      }).catch(error => {
+        this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
+      })
     } else {
       this.logger.warn('[APP-COMP] >>> I AM NOT LOGGED IN <<<')
-      const that = this;
-      clearTimeout(this.timeModalLogin);
-      this.timeModalLogin = setTimeout(() => {
-        if (!this.hadBeenCalledOpenModal) {
-          this.authModal = this.presentModal('initAuthentication');
-          this.hadBeenCalledOpenModal = true;
-        }
-      }, 1000);
-    }
 
-    // this.route.queryParams.subscribe(params => {
-    //   this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN params 1', params)
-    //   if (params.jwt) {
-    //     this.isOnline = false;
-    //     this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN params 2', params)
-    //     this.tiledeskAuthService.signInWithCustomToken(params.jwt).then(user => {
-    //       this.messagingAuthService.createCustomToken(params.jwt)
-    //     }).catch(error => {
-    //       this.logger.error('[APP-COMP] SIGNINWITHCUSTOMTOKEN error::', error)
-    //     })
-    //   }
-    // });
+      // clearTimeout(this.timeModalLogin);
+      // this.timeModalLogin = setTimeout(() => {
+      if (!this.hadBeenCalledOpenModal) {
+        this.authModal = this.presentModal('initAuthentication');
+        this.hadBeenCalledOpenModal = true;
+      }
+      // }, 1000);
+    }
   }
 
-  authenticate() {
-    let token = this.appStorageService.getItem('tiledeskToken');
-    this.logger.info('[APP-COMP] ***** authenticate - stored token *****', token);
-    if (!token) {
-      this.goOffLine()
-    }
+  // checkTokenAndGoOffline() {
+  //   let token = this.appStorageService.getItem('tiledeskToken');
+  //   this.logger.info('[APP-COMP] ***** checkTokenAndGoOffline - stored token *****', token);
+  //   if (!token) {
+  //     this.goOffLine()
+  //   }
+  // }
+
+  connetWebsocket(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,
+      undefined,
+      undefined
+    );
   }
 
   /**
@@ -470,15 +577,16 @@ export class AppComponent implements OnInit {
    * @param user
    */
   goOnLine = () => {
-    this.isOnline = true;
-    this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO ONLINE isOnline ', this.isOnline);
+    // this.isOnline = true;
+    // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
 
-
-    clearTimeout(this.timeModalLogin);
+    // clearTimeout(this.timeModalLogin);
     const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+    this.connetWebsocket(tiledeskToken)
+
     const currentUser = this.tiledeskAuthService.getCurrentUser();
     // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
-    this.logger.log('[APP-COMP] - goOnLine****', currentUser);
+    this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
     this.chatManager.setTiledeskToken(tiledeskToken);
     this.chatManager.setCurrentUser(currentUser);
     // ----------------------------------------------
@@ -490,9 +598,8 @@ export class AppComponent implements OnInit {
       if (pushEngine && pushEngine !== 'none') {
         this.notificationsService.getNotificationPermissionAndSaveToken(currentUser.uid);
       }
-
-
       this.presenceService.setPresence(currentUser.uid);
+
       this.initConversationsHandler(currentUser.uid);
       this.initArchivedConversationsHandler(currentUser.uid);
     }
@@ -508,9 +615,17 @@ export class AppComponent implements OnInit {
     this.chatManager.startApp();
   }
 
+
+  webSocketClose() {
+    this.logger.log('[APP-COMP] - GO-OFFLINE - webSocketClose');
+    this.webSocketJs.close()
+  }
+
   goOffLine = () => {
-    this.logger.log('[APP-COMP] ************** goOffLine:', this.authModal);
-    this.isOnline = false;
+    this.logger.log('[APP-COMP] - GO-OFFLINE');
+
+    this.webSocketClose()
+    // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
 
     this.chatManager.setTiledeskToken(null);
@@ -518,14 +633,14 @@ export class AppComponent implements OnInit {
     this.chatManager.goOffLine();
 
     this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
-    const that = this;
-    clearTimeout(this.timeModalLogin);
-    this.timeModalLogin = setTimeout(() => {
-      if (!this.hadBeenCalledOpenModal) {
-        this.authModal = this.presentModal('goOffLine');
-        this.hadBeenCalledOpenModal = true
-      }
-    }, 1000);
+
+    // clearTimeout(this.timeModalLogin);
+    // this.timeModalLogin = setTimeout(() => {
+    if (!this.hadBeenCalledOpenModal) {
+      this.authModal = this.presentModal('goOffLine');
+      this.hadBeenCalledOpenModal = true
+    }
+    // }, 1000);
 
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
@@ -671,20 +786,31 @@ export class AppComponent implements OnInit {
     this.logger.log('initialize FROM [APP-COMP] - initSubscriptions');
 
 
-    this.messagingAuthService.BSAuthStateChanged
-      .pipe(takeUntil(this.unsubscribe$))
+    // ---------------------------------------------------------------------------------------------------
+    // Protecting from multiple subsciptions due to multiple app initializations (call to initializeApp())
+    // Only one subscriber x application allowed
+    // ---------------------------------------------------------------------------------------------------
+    if (this.BSAuthStateChangedSubscriptionRef) {
+      this.logger.log('initialize FROM [APP-COMP] - BSAuthStateChanged ALREADY SUBSCRIBED');
+      return;
+    }
+
+    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged
+
+      // .pipe(takeUntil(this.unsubscribe$))
       .pipe(filter((state) => state !== null))
       .subscribe((state: any) => {
-        this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
-        this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  isOnline', this.isOnline);
+        this.logger.log('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
+        // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  isOnline', this.isOnline);
         if (state && state === AUTH_STATE_ONLINE) {
-          const user = this.tiledeskAuthService.getCurrentUser();
-          if (this.isOnline === false) {
-            this.goOnLine();
-          }
+          // const user = this.tiledeskAuthService.getCurrentUser();
+          // if (this.isOnline === false) {
+          // if (AUTH_STATE_ONLINE) {
+          this.goOnLine();
+          // }
         } else if (state === AUTH_STATE_OFFLINE) {
-          // that.goOffLine();
-          this.authenticate() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          // this.checkTokenAndGoOffline() //se c'è un tiledeskToken salvato, allora aspetta, altrimenti vai offline
+          this.goOffLine()
         }
       }, error => {
         this.logger.error('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged * error * ', error)
@@ -726,7 +852,7 @@ export class AppComponent implements OnInit {
    * apro dettaglio conversazione
    */
   subscribeChangedConversationSelected = (user: UserModel, type: string) => {
-    this.logger.info('[APP-COMP] subscribeUidConvSelectedChanged navigateByUrl', user, type);
+    this.logger.log('[APP-COMP] subscribeUidConvSelectedChanged navigateByUrl', user, type);
     // this.router.navigateByUrl('conversation-detail/' + user.uid + '?conversationWithFullname=' + user.fullname);
     this.router.navigateByUrl('conversation-detail/' + user.uid + '/' + user.fullname + '/' + type);
   }
@@ -916,31 +1042,43 @@ 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;
     }
 
     if (this.appStorageService.getItem('tiledeskToken') === null) {
-      this.logger.log('[APP-COMP] - onStorageChanged tiledeskToken is null - RUN LOGOUT')
+      // console.log('[APP-COMP] - onStorageChanged tiledeskToken is null - RUN LOGOUT')
       this.tiledeskAuthService.logOut()
       this.messagingAuthService.logout();
       this.events.publish('profileInfoButtonClick:logout', true);
-      this.isOnline = false;
+      // this.isOnline = false;
     }
     else {
       const currentUser = this.tiledeskAuthService.getCurrentUser();
+      // console.log('[APP-COMP] - X - onStorageChanged currentUser', currentUser)
+
+      const currentToken = this.tiledeskAuthService.getTiledeskToken();
+      // console.log('[APP-COMP] - onStorageChanged currentToken', currentToken)
+      if (this.appStorageService.getItem('tiledeskToken') !== null && currentToken !== this.appStorageService.getItem('tiledeskToken')) {
+
+        // console.log('[APP-COMP] - onStorageChanged wentOnline 2')
+        // DEALLOCO RISORSE OCCUPATE
+        this.messagingAuthService.logout();
+        this.appStorageService.removeItem('currentUser')
+        this.tiledeskAuthService.setCurrentUser(null);
+        // this.unsubscribe$.next();
+        // this.unsubscribe$.complete();
+        this.initializeApp('onstoragechanged');
 
-      if (!currentUser && this.appStorageService.getItem('tiledeskToken') !== null) {
-        this.logger.log('[APP-COMP] - onStorageChanged currentUser', currentUser)
-        // console.log('[APP-COMP] - onStorageChanged wentOnline 2', this.wentOnline)
 
-        this.initializeApp('onstoragechanged');
+
+        // console.log('[APP-COMP]  onAuthStateChanged HERE !!! ')
+        // firebase.auth().onAuthStateChanged(user => {
+        //   console.log('[APP-COMP]  onAuthStateChanged', user)
+        // })
 
       }
     }
   }
-
-
-
 }