@chat21/chat21-web-widget 5.0.55 → 5.0.56-rc.2

package/src/app/utils/globals.ts

@@ -1,14 +1,14 @@
 import { Injectable } from '@angular/core';
-import { environment } from '../../environments/environment';
 import { BehaviorSubject } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 /** CONSTANTS */
 import { CHANNEL_TYPE_GROUP } from 'src/chat21-core/utils/constants';
 
 /** MODELS */
+import { DepartmentModel } from 'src/models/department';
 import { ProjectModel } from 'src/models/project';
 import { UserAgent } from 'src/models/userAgent';
-import { DepartmentModel } from 'src/models/department';
 
 /** UTILS FUNCTIONS */
 import { avatarPlaceholder, detectIfIsMobile, getParameterByName, setColorFromString } from 'src/app/utils/utils';
@@ -21,17 +21,13 @@ import { Rule } from 'src/models/rule';
   })
 export class Globals {
 
-  obsObjChanged = new BehaviorSubject<any>(null);
-  obsIsOpen = new BehaviorSubject<boolean>(null);
-
   BASE_LOCATION = 'https://widget.tiledesk.com/v2';
   POWERED_BY ='<a tabindex="-1" target="_blank" href="http://www.tiledesk.com/?utm_source=widget"><img src="https://support-pre.tiledesk.com/dashboard/assets/img/logos/tiledesk-logo_new_gray.svg"/></a>'
   DEFAULT_LOGO_CHAT = '/assets/images/tiledesk_logo_white_small.svg';
-  WIDGET_TITLE = 'Tiledesk';
 
   // ============ BEGIN: SET FUNCTION BY UTILS ==============//
   // getParameterByName = getParameterByName;
-  convertColorToRGBA = convertColorToRGBA;
+  // convertColorToRGBA = convertColorToRGBA;
   // ============ BEGIN: SET INTERNAL PARAMETERS ==============//
 
   project = new ProjectModel();
@@ -43,11 +39,9 @@ export class Globals {
   isLogged: boolean;
   soundEnabled: boolean;
   BUILD_VERSION: String;
-  filterSystemMsg: boolean; /** se è true i messaggi inviati da system non vengono visualizzati */
   baseLocation: string;
   availableAgents: Array<UserAgent> = [];
-  isLogout = false; /** indica se ho appena fotto il logout */
-
+  
   attributes: any;
   preChatFormJson: any; // *******  new ********
   token: string;
@@ -70,20 +64,16 @@ export class Globals {
   // areAgentsAvailable = false;
   areAgentsAvailableText: string;
   availableAgentsStatus = false; // indica quando è impostato lo stato degli agenti nel subscribe
-  signInWithCustomToken: boolean;
   displayEyeCatcherCard: string;
 
   firstOpen = true;
   departmentID = null;
   privacyApproved = false;
-  startedAt = new Date();
 
   // ============ BEGIN: LABELS ==============//
   LABEL_TU: string;
   LABEL_PLACEHOLDER: string;
   LABEL_START_NW_CONV: string;
-  LABEL_FIRST_MSG: string;
-  LABEL_FIRST_MSG_NO_AGENTS: string;
   LABEL_SELECT_TOPIC: string;
   LABEL_COMPLETE_FORM: string;
   LABEL_FIELD_NAME: string;
@@ -188,9 +178,6 @@ export class Globals {
    showLogoutOption: boolean;
    supportMode: boolean;
 
-   online_msg: string;
-   offline_msg: string;
-
    customAttributes: any;
    showAttachmentButton: boolean;
    showAllConversations: boolean;
@@ -232,7 +219,6 @@ export class Globals {
    */
   initDefafultParameters() {
     this.globalsParameters = {};
-    this.filterSystemMsg = true;
 
     let wContext: any = window;
     if (window.frameElement && window.frameElement.getAttribute('tiledesk_context') === 'parent') {
@@ -406,9 +392,6 @@ export class Globals {
 
     this.showLogoutOption = false;
 
-    this.offline_msg = this.LABEL_FIRST_MSG_NO_AGENTS;
-    this.online_msg = this.LABEL_FIRST_MSG;
-
     this.isOpenNewMessage = false;
     this.showAttachmentButton = true;
     this.showAllConversations = true;
@@ -443,11 +426,6 @@ export class Globals {
     // this.parameters['BUILD_VERSION'] = 'v.' + environment.version;
     // this.parameters.push({'BUILD_VERSION': 'v.' + environment.version});
 
-    this.filterSystemMsg = true;
-    /** ???? scolpito in MessagingService. se è true i messaggi inviati da system non vengono visualizzati */
-    // this.parameters['filterSystemMsg'] = true;
-    // this.parameters.push({'filterSystemMsg': true});
-
     this.soundEnabled = true;
     // this.parameters['soundEnabled'] = true;
     // this.parameters.push({'soundEnabled': true});
@@ -459,10 +437,6 @@ export class Globals {
     this.isOpenMenuOptions = false;
     // this.parameters['isOpenMenuOptions'] = false;
     // this.parameters.push({'isOpenMenuOptions': false});
-                                                        /** open/close menu options  */
-    this.signInWithCustomToken = false;
-    // this.parameters['signInWithCustomToken'] = false;
-    // this.parameters.push({'signInWithCustomToken': false});
 
     this.displayEyeCatcherCard = 'none';
     // this.parameters['displayEyeCatcherCard'] = 'none';
@@ -622,7 +596,6 @@ export class Globals {
     this.isOpen = val;
     this.setParentBodyStyleMobile(val, this.isMobile)
     this.setElementStyle(val)
-    this.obsIsOpen.next(val);
   }
 
   /**
@@ -634,9 +607,6 @@ export class Globals {
     // storage = true;
     this[key] = val;
     const obj = {'key': key, 'val': val};
-    if (storage === true) {
-      this.obsObjChanged.next(obj);
-    }
   }
 
   /**

package/src/app/utils/rules.ts

@@ -1,13 +1,12 @@
+import { Injectable } from '@angular/core';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
-import { Globals } from './globals';
-import { UserModel } from './../../chat21-core/models/user';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
-import { Inject, Injectable } from '@angular/core';
-import { IRules, Rule } from 'src/models/rule';
 import { getDateDifference } from 'src/chat21-core/utils/utils';
+import { Rule } from 'src/models/rule';
+import { UserModel } from './../../chat21-core/models/user';
+import { Globals } from './globals';
 
 
 @Injectable({
@@ -60,7 +59,6 @@ export class Rules {
             message[0]['message'].sourcePage = this.g.attributes['sourcePage']
             message[0]['message'].language = this.g.lang
             message[0]['message'].departmentid = this.g.attributes.departmentId
-            console.log('message[0]', message[0]['message'])
             this.tiledeskRequestsService.sendMessageToRequest(this.request_id, this.tiledeskToken, message[0]['message'])
         }
     }

package/src/app/utils/utils.ts

@@ -1,11 +1,3 @@
-import * as moment from 'moment';
-import 'moment/locale/it.js';
-
-// firebase
-import 'firebase/storage';
-
-
-// tslint:disable-next-line:max-line-length
 import {
   IMG_PROFILE_BOT,
   IMG_PROFILE_DEFAULT,
@@ -25,26 +17,26 @@ import { environment } from '../../environments/environment';
  * giorno della settimana (lunedì, martedì, ecc)
  * @deprecated
  */
-export function setHeaderDate(timestamp): string {
-  const date = new Date(timestamp);
-  const now: Date = new Date();
-  let labelDays = '';
-  if (now.getFullYear() !== date.getFullYear()) {
-    labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
-  } else if (now.getMonth() !== date.getMonth()) {
-    labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
-  } else if (now.getDay() === date.getDay()) {
-    labelDays = LABEL_TODAY;
-  } else if (now.getDay() - date.getDay() === 1) {
-    labelDays = LABEL_TOMORROW;
-  } else {
-    labelDays = convertDayToString(date.getDay());
-  }
-  // se le date sono diverse o la data di riferimento non è impostata
-  // ritorna la data calcolata
-  // altrimenti torna null
-  return labelDays;
-}
+// export function setHeaderDate(timestamp): string {
+//   const date = new Date(timestamp);
+//   const now: Date = new Date();
+//   let labelDays = '';
+//   if (now.getFullYear() !== date.getFullYear()) {
+//     labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
+//   } else if (now.getMonth() !== date.getMonth()) {
+//     labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
+//   } else if (now.getDay() === date.getDay()) {
+//     labelDays = LABEL_TODAY;
+//   } else if (now.getDay() - date.getDay() === 1) {
+//     labelDays = LABEL_TOMORROW;
+//   } else {
+//     labelDays = convertDayToString(date.getDay());
+//   }
+//   // se le date sono diverse o la data di riferimento non è impostata
+//   // ritorna la data calcolata
+//   // altrimenti torna null
+//   return labelDays;
+// }
 
 export function supports_html5_storage() {
   try {
@@ -228,15 +220,6 @@ export function setColorFromString(str: string) {
   return arrayBckColor[num];
 }
 
-export function getFromNow(windowContext, timestamp) {
-  let browserLang = windowContext.navigator.language;
-  if (this.g.lang && this.g.lang !== '') {
-    browserLang = this.g.lang;
-  }
-  moment.locale(browserLang);
-  return moment.unix(timestamp).fromNow();
-}
-
 export function detectIfIsMobile(windowContext) {
   let isMobile = false;
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(windowContext.navigator.userAgent))
@@ -246,6 +229,33 @@ export function detectIfIsMobile(windowContext) {
   return isMobile;
 }
 
+ /**
+* definitely not the best way to findout if there is a mobile browser
+* @returns {any}
+*/
+export function deviceOS() {
+   var useragent = navigator.userAgent;
+   if(useragent.match(/Android/i)) {
+       return 'android';
+   } else if(useragent.match(/webOS/i)) {
+       return 'webos';
+   } else if(useragent.match(/iPhone/i)) {
+       return 'iphone';
+   } else if(useragent.match(/iPod/i)) {
+       return 'ipod';
+   } else if(useragent.match(/iPad/i)) {
+       return 'ipad';
+   } else if(useragent.match(/Windows Phone/i)) {
+       return 'windows phone';
+   } else if(useragent.match(/SymbianOS/i)) {
+       return 'symbian';
+   } else if(useragent.match(/RIM/i) || useragent.match(/BB/i)) {
+       return 'blackberry';
+   } else {
+       return false;
+   }
+}
+
 export function convertColorToRGBA(color, opacity) {
   let result = color;
   // console.log('convertColorToRGBA' , color, opacity);

package/src/assets/i18n/en.json

@@ -3,8 +3,6 @@
     "LABEL_PLACEHOLDER": "type your message..",
     "LABEL_START_NW_CONV": "New conversation",
     "LABEL_WHATSAPP": "Message us",
-    "LABEL_FIRST_MSG": "Describe shortly your problem, you will be contacted by an agent.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 All operators are offline at the moment. You can anyway describe your problem. It will be assigned to the support team who will answer you as soon as possible.",
     "LABEL_SELECT_TOPIC": "Select a topic",
     "LABEL_COMPLETE_FORM": "Complete the form to start a conversation with the next available agent.",
     "LABEL_FIELD_NAME": "Name",

package/src/assets/i18n/es.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "escribe tu mensaje..",
     "LABEL_START_NW_CONV": "Nueva conversación",
-    "LABEL_FIRST_MSG": "Describa brevemente su problema, un agente lo contactará.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Todos los operadores están desconectados en este momento. De todos modos puedes describir tu problema. Se asignará al equipo de soporte que le responderá lo antes posible.",
     "LABEL_SELECT_TOPIC": "Elige un tema",
     "LABEL_COMPLETE_FORM": "Complete el formulario para iniciar una conversación con el próximo agente disponible.",
     "LABEL_FIELD_NAME": "Nombre",

package/src/assets/i18n/fr.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Écrivez votre question ...",
     "LABEL_START_NW_CONV": "Nouvelle conversation",
-    "LABEL_FIRST_MSG": "Décrivez brièvement votre problème, nous vous mettrons en relation avec un opérateur spécialisé.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Tous les opérateurs sont actuellement hors ligne. Vous pouvez toujours décrire votre problème. Il sera attribué à l'équipe d'assistance qui vous répondra dans les plus brefs délais.",
     "LABEL_SELECT_TOPIC": "Sélectionnez un sujet",
     "LABEL_COMPLETE_FORM": "Remplissez le formulaire pour démarrer une conversation avec le prochain agent disponible.",
     "LABEL_FIELD_NAME": "Prenom",

package/src/assets/i18n/it.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Scrivi la tua domanda...",
     "LABEL_START_NW_CONV": "Nuova conversazione",
-    "LABEL_FIRST_MSG": "Descrivi sinteticamente il tuo problema, ti metteremo in contatto con un operatore specializzato.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Tutti gli operatori sono offline al momento.Puoi comunque descrivere il tuo problema. Sarà assegnato al team di supporto che ti risponderà appena possibile.",
     "LABEL_SELECT_TOPIC": "Seleziona un argomento",
     "LABEL_COMPLETE_FORM": "Completa il form per iniziare una conversazione con il prossimo agente disponibile.",
     "LABEL_FIELD_NAME": "Nome",

package/src/assets/twp/index.html

@@ -180,43 +180,6 @@
 
     </style>
 
-    <!-- <script type="text/javascript">
-
-        // redirect to mobile version
-
-        /**
-         * definitely not the best way to findout if there is a mobile browser
-         * @returns {any}
-         */
-        function deviceOS() {
-            var useragent = navigator.userAgent;
-            if(useragent.match(/Android/i)) {
-                return 'android';
-            } else if(useragent.match(/webOS/i)) {
-                return 'webos';
-            } else if(useragent.match(/iPhone/i)) {
-                return 'iphone';
-            } else if(useragent.match(/iPod/i)) {
-                return 'ipod';
-            } else if(useragent.match(/iPad/i)) {
-                return 'ipad';
-            } else if(useragent.match(/Windows Phone/i)) {
-                return 'windows phone';
-            } else if(useragent.match(/SymbianOS/i)) {
-                return 'symbian';
-            } else if(useragent.match(/RIM/i) || useragent.match(/BB/i)) {
-                return 'blackberry';
-            } else {
-                return false;
-            }
-        }
-
-        if (deviceOS()) {
-            var frameEl = document.getElementById('frame');
-            location.href = "";
-        }
-    </script> -->
-
     <meta property="og:title" content="Try Tiledesk now!" />
     <meta property="og:description" content="Qualify your leads to increase your sales faster. It's really easy to do it with the Tiledesk conversational form builder" />
     <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
@@ -227,20 +190,7 @@
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
-    <!-- <script type="application/javascript">
-        window.tiledeskSettings = {
-            marginX: "100px",
-            marginY: "50px"
-        };
-        (function(d, s, id) {
-        var js, fjs = d.getElementsByTagName(s)[0];
-        if (d.getElementById(id)) return;
-        js = d.createElement(s); js.id = id; //js.async=!0;
-        js.src = "../../launch.js"; 
-        fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'tiledesk-jssdk'));
 
-    </script> -->
     <script type="application/javascript">
         window.tiledeskSettings = {
             marginX: "100px",
@@ -288,13 +238,14 @@
                 }
             }, 1000);
             
+            setTimeout(() => {
+                document.getElementById("preloader").style.display = "none";
+            }, 1000);
+
         });
         
         window.Tiledesk('onInit', function(event_data) {
             console.log("onInit Tiledesk FN", event_data); 
-            setTimeout(() => {
-                document.getElementById("preloader").style.display = "none";
-            }, 1000);
             //open widget after 3s if is closed
             // setTimeout(() => {
             //     if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
@@ -305,10 +256,6 @@
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {
         	console.log("AUTHENTICATED!", event_data);
-       		// if(event_data.detail.isLogged){
-            // 	console.log("isLogged!!!!", event_data);
-            // 	window.Tiledesk('show')
-            // }
         });
     </script>
 
@@ -548,9 +495,9 @@
                             </a>
 
                             <!-- whatsapp -->
-                            <!-- <a onclick="shareOnWhatsapp()" style="cursor: pointer">
+                            <a onclick="shareOnWhatsapp()" style="cursor: pointer">
                                 <img src="./tiledesk_widget_files/whatsapp.png" alt="Whatsapp">
-                            </a> -->
+                            </a>
 
                         </div>
                     </div>
@@ -597,7 +544,6 @@
     <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
     <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
     <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
 </div>
 </body>
 </html>

package/src/chat21-core/providers/firebase/firebase-archivedconversations-handler.ts

@@ -3,18 +3,14 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 
 // firebase
 // import * as firebase from 'firebase/app';
-import firebase from 'firebase/app';
-import 'firebase/messaging';
-import 'firebase/database';
-import 'firebase/auth';
-import 'firebase/storage';
+// import firebase from 'firebase/app';
 
 // models
 import { ConversationModel } from '../../models/conversation';
 
 // utils
 import { avatarPlaceholder, getColorBck } from '../../utils/utils-user';
-import { compareValues, getFromNow, searchIndexInArrayForUid, archivedConversationsPathForUserId, isGroup } from '../../utils/utils';
+import { compareValues, searchIndexInArrayForUid, archivedConversationsPathForUserId, isGroup } from '../../utils/utils';
 import { ArchivedConversationsHandlerService } from '../abstract/archivedconversations-handler.service';
 import { LoggerService } from '../abstract/logger.service';
 import { LoggerInstance } from '../logger/loggerInstance';
@@ -44,10 +40,12 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
     private translationMap: Map<string, string>;
     private isConversationClosingMap: Map<string, boolean>;
     private logger:LoggerService = LoggerInstance.getInstance()
-    private ref: firebase.database.Query;
+    // private ref: firebase.database.Query;
+    
 
     private subscribe: any;
-
+    private firebase: any;
+    private ref: any;
     constructor(
         //public databaseProvider: DatabaseProvider
     ) {
@@ -57,12 +55,17 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
     /**
      * inizializzo conversations handler
      */
-    initialize(tenant: string,userId: string,translationMap: Map<string, string>) {
+    async initialize(tenant: string,userId: string,translationMap: Map<string, string>) {
         this.tenant = tenant;
         this.loggedUserId = userId;
         this.translationMap = translationMap;
         this.archivedConversations = [];
         this.isConversationClosingMap = new Map();
+
+        const { default: firebase} = await import("firebase/app");
+        await Promise.all([import("firebase/database"), import("firebase/auth")]);
+        this.firebase = firebase
+        this.ref = this.firebase.database['Query'];
     }
 
     /**
@@ -94,7 +97,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         const that = this;
         const urlNodeFirebase = archivedConversationsPathForUserId(this.tenant, this.loggedUserId);
         this.logger.debug('[FIREBASEArchivedConversationsHandlerSERVICE] SubscribeToConversations conversations::ARCHIVED urlNodeFirebase', urlNodeFirebase)
-        this.ref = firebase.database().ref(urlNodeFirebase).orderByChild('timestamp').limitToLast(200);
+        this.ref = this.firebase.database().ref(urlNodeFirebase).orderByChild('timestamp').limitToLast(200);
         this.ref.on('child_changed', (childSnapshot) => {
             that.changed(childSnapshot);
         });
@@ -134,7 +137,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         const urlUpdate = archivedConversationsPathForUserId(this.tenant, this.loggedUserId) + '/' + conversationrecipient;
         const update = {};
         update['/is_new'] = false;
-        firebase.database().ref(urlUpdate).update(update);
+        this.firebase.database().ref(urlUpdate).update(update);
     }
 
 
@@ -173,7 +176,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         } else {
             const urlNodeFirebase = archivedConversationsPathForUserId(this.tenant, this.loggedUserId) // + '/' + conversationId;
             this.logger.debug('[FIREBASEArchivedConversationsHandlerSERVICE] urlNodeFirebase conversationDetail *****', urlNodeFirebase, conversationId)
-            const firebaseMessages = firebase.database().ref(urlNodeFirebase);
+            const firebaseMessages = this.firebase.database().ref(urlNodeFirebase);
             // if(this.subscribe){
             //     this.logger.log('[FIREBASEArchivedConversationsHandlerSERVICE] getConversationDetail ALREADY SUBSCRIBED')
             //     return;
@@ -363,17 +366,6 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         return status;
     }
 
-    /**
-     * calcolo il tempo trascorso da ora al timestamp passato
-     * @param timestamp
-     */
-    private getTimeLastMessage(timestamp: string) {
-        const timestampNumber = parseInt(timestamp, 10) / 1000;
-        const time = getFromNow(timestampNumber);
-        return time;
-    }
-
-
     /**
      *  check if the conversations is valid or not
      */

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

@@ -1,13 +1,10 @@
+import { environment } from 'src/environments/environment';
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs';
 
 // firebase
-import firebase from 'firebase/app';
-import 'firebase/messaging';
-import 'firebase/database';
-import 'firebase/auth';
-import 'firebase/storage';
+// import firebase from 'firebase/app';
 
 // services
 import { MessagingAuthService } from '../abstract/messagingAuth.service';
@@ -35,6 +32,7 @@ export class FirebaseAuthService extends MessagingAuthService {
   // private imageRepo: ImageRepoService = new FirebaseImageRepoService();
 
   private firebaseToken: string;
+  private firebase: any;
   private logger:LoggerService = LoggerInstance.getInstance()
   constructor(
     public http: HttpClient
@@ -45,14 +43,16 @@ export class FirebaseAuthService extends MessagingAuthService {
   /**
    *
    */
-  initialize() {
+  async initialize() {
     this.SERVER_BASE_URL = this.getBaseUrl();
     this.URL_TILEDESK_CREATE_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'chat21/firebase/auth/createCustomToken';
     this.logger.debug('[FIREBASEAuthSERVICE] - initialize URL_TILEDESK_CREATE_CUSTOM_TOKEN ', this.URL_TILEDESK_CREATE_CUSTOM_TOKEN)
-    // this.URL_TILEDESK_SIGNIN = this.SERVER_BASE_URL + 'auth/signin';
-    // this.URL_TILEDESK_SIGNIN_ANONYMOUSLY = this.SERVER_BASE_URL + 'auth/signinAnonymously'
-    // this.URL_TILEDESK_SIGNIN_WITH_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'auth/signinWithCustomToken';
     // this.checkIsAuth();
+
+    const { default: firebase} = await import("firebase/app");
+    await Promise.all([import("firebase/auth")]);
+    this.firebase = firebase
+
     this.onAuthStateChanged();
   }
 
@@ -93,7 +93,8 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   onAuthStateChanged() {
     const that = this;
-    firebase.auth().onAuthStateChanged(user => {
+
+    this.firebase.auth().onAuthStateChanged(user => {
       this.logger.debug('[FIREBASEAuthSERVICE] onAuthStateChanged', user)
       if (!user) {
         this.logger.debug('[FIREBASEAuthSERVICE] 1 - PUBLISH OFFLINE to chat-manager')
@@ -114,24 +115,24 @@ export class FirebaseAuthService extends MessagingAuthService {
     let firebasePersistence;
     switch (this.getPersistence()) {
       case 'SESSION': {
-        firebasePersistence = firebase.auth.Auth.Persistence.SESSION;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.SESSION;
         break;
       }
       case 'LOCAL': {
-        firebasePersistence = firebase.auth.Auth.Persistence.LOCAL;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.LOCAL;
         break;
       }
       case 'NONE': {
-        firebasePersistence = firebase.auth.Auth.Persistence.NONE;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.NONE;
         break;
       }
       default: {
-        firebasePersistence = firebase.auth.Auth.Persistence.NONE;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.NONE;
         break;
       }
     }
-    return firebase.auth().setPersistence(firebasePersistence).then(async () => {
-      return firebase.auth().signInWithCustomToken(token).then(async () => {
+    return this.firebase.auth().setPersistence(firebasePersistence).then(async () => {
+      return this.firebase.auth().signInWithCustomToken(token).then(async () => {
         // that.firebaseSignInWithCustomToken.next(response);
       }).catch((error) => {
         that.logger.error('[FIREBASEAuthSERVICE] signInFirebaseWithCustomToken Error: ', error);
@@ -151,7 +152,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   createUserWithEmailAndPassword(email: string, password: string): any {
     const that = this;
-    return firebase.auth().createUserWithEmailAndPassword(email, password).then((response) => {
+    return this.firebase.auth().createUserWithEmailAndPassword(email, password).then((response) => {
       that.logger.debug('[FIREBASEAuthSERVICE] CRATE USER WITH EMAIL: ', email, ' & PSW: ', password);
       // that.firebaseCreateUserWithEmailAndPassword.next(response);
       return response;
@@ -167,7 +168,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   sendPasswordResetEmail(email: string): any {
     const that = this;
-    return firebase.auth().sendPasswordResetEmail(email).then(() => {
+    return this.firebase.auth().sendPasswordResetEmail(email).then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-send-password-reset-email');
       // that.firebaseSendPasswordResetEmail.next(email);
     }).catch((error) => {
@@ -180,7 +181,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   private signOut(): Promise<boolean> {
     const that = this;
-    return new Promise((resolve, reject)=> {firebase.auth().signOut().then(() => {
+    return new Promise((resolve, reject)=> {this.firebase.auth().signOut().then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-sign-out');
         // cancello token
         // this.appStorage.removeItem('tiledeskToken');
@@ -200,7 +201,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   delete() {
     const that = this;
-    firebase.auth().currentUser.delete().then(() => {
+    this.firebase.auth().currentUser.delete().then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-current-user-delete');
       // that.firebaseCurrentUserDelete.next();
     }).catch((error) => {