@chat21/chat21-web-widget 5.0.80-rc.2 → 5.0.81-rc.2

package/CHANGELOG.md

@@ -5,6 +5,14 @@
     *Dario De Pascalis* 
 ### **Copyrigth**: *Tiledesk SRL*
 
+### 5.0.81-rc.2
+- added: blank.html page to integrate widget on webview
+
+### 5.0.81-rc.1 
+- added: updateLeadInfo function in messageAdded subscription
+
+### 5.0.80 in PROD
+
 ### 5.0.80-rc.2
 - changed: background color network disconnection msg 
 
@@ -13,7 +21,6 @@
 - added: onDisconnect MQTT method to subscribe and manage reconnect/close/offline event
 - changed: v0.1.12.8 chat21client.js
 
-
 ### 5.0.79 in PROD
 
 ### 5.0.79-rc.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.80-rc.2",
+  "version": "5.0.81-rc.2",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -733,6 +733,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
           this.onNewMessageCreated.emit(msg)
           this.checkMessagesLegntForTranscriptDownloadMenuOption();
           this.resetTimeout();
+          // this.updateLeadInfo(msg);
         }
       });
       const subscribe = {key: subscribtionKey, value: subscribtion };

package/src/app/component/conversation-detail/conversation-emojii/conversation-emojii.component.ts

@@ -22,7 +22,6 @@ export class ConversationEmojiiComponent implements OnInit {
   constructor(){}
 
   ngOnInit(): void {
-    console.log('varrrrr', this.var)
   }
 
   addEmojiFN(event){

package/src/app/component/conversation-detail/conversation-preview/conversation-preview.component.ts

@@ -65,7 +65,7 @@ export class ConversationPreviewComponent implements OnInit {
   getMetadataSize(metadata): {width, height} {
     const MAX_WIDTH_IMAGES_PREVIEW = 230
     const MAX_HEIGHT_IMAGES_PREIEW = 150
-    console.log('PREVIEW - getMetadataSize metadata', metadata)
+    
     if(metadata.width === undefined){
       metadata.width= MAX_WIDTH_IMAGES_PREVIEW
     }
@@ -96,7 +96,7 @@ export class ConversationPreviewComponent implements OnInit {
       sizeImage.width = MAX_HEIGHT_IMAGES_PREIEW / ratio;
       sizeImage.height = MAX_HEIGHT_IMAGES_PREIEW ;
     }
-    console.log('PREVIEW - getMetadataSize return sizeimage', sizeImage)
+    
     return sizeImage; // h.toString();
   }
   

package/src/app/component/message/audio/audio.component.ts

@@ -19,7 +19,6 @@ export class AudioComponent implements OnInit {
   constructor(private elementRef: ElementRef) { }
 
   ngOnInit() {
-    // console.log('metadataaaaaa', this.metadata)
     // this.divPlay = this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#audio_msg')
     // this.playState= this.elementRef.nativeElement.querySelector('#audio_container').querySelector('#duration')
   }

package/src/app/component/message/bubble-message/bubble-message.component.ts

@@ -100,7 +100,6 @@ export class BubbleMessageComponent implements OnInit {
       height: metadata.height
     };
 
-    // console.log('sizeeeeeeee--<', sizeImage, metadata)
 
     if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
       if (metadata.width <= 55) {

package/src/app/component/message/carousel/carousel.component.ts

@@ -78,7 +78,6 @@ export class CarouselComponent implements OnInit{
   ngOnChanges(changes: SimpleChanges){
     if(this.message && this.message.attributes && this.message.attributes?.attachment && this.message.attributes?.attachment?.gallery){
       this.gallery = this.message.attributes.attachment.gallery
-      // console.log('carrrrrrrrr', this.wrapper, this.elementRef.nativeElement.querySelector(".card"))
       // this.firstCardWidth = (this.elementRef.nativeElement.querySelector(".card") as HTMLElement).offsetWidth
     }
 

package/src/app/component/message/frame/frame.component.spec.ts

@@ -31,7 +31,6 @@ describe('FrameComponent', () => {
 
   it('should create', () => {
     component.url = component['sanitizer'].bypassSecurityTrustResourceUrl('http://www.tiledesk.com');
-    console.log('cccccc', component)
     fixture.detectChanges();
     expect(component).toBeTruthy();
   });

package/src/app/component/send-button/send-button.component.ts

@@ -15,7 +15,6 @@ export class SendButtonComponent implements OnInit {
   }
 
   onSendPressed(event){
-    console.log('send pressed')
     this.onSendButtonClicked.emit(true)
   }
 

package/src/assets/twp/blank.html

@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
+
+    <title>Widget test page </title>
+    <style>
+
+        @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
+        @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
+        @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
+        @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
+
+        body{
+            --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
+            --blu: #506493;
+            --gray-light-02: rgb(223, 227, 237);
+            --base-company-logo: rgb(224,106,88);
+            --header-height: 80px;
+            --footer-height: 80px;
+        }
+
+        #preloader {
+            background: #fff;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            height: 100%;
+            width: 100%;
+            z-index: 999999;
+            opacity: 1;
+            filter: alpha(opacity=100);
+            -webkit-transition: opacity 500ms ease;
+            transition: opacity 500ms ease, display 500ms;
+        }
+
+        #preloader .logo {
+            display: block;
+            width: 109px;
+            height: 39px;
+            background-repeat: no-repeat;
+            background-image: url(./tiledesk_widget_files/logo@2x-black.png);      
+            background-size: contain;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -20px 0 0 -55px;
+            -moz-transition:all 1s ease-in-out;
+            -webkit-transition:all 1s ease-in-out;
+            -o-transition:all 1s ease-in-out;
+            -ms-transition:all 1s ease-in-out;
+            transition:all 1s ease-in-out;
+            /* order: name, direction, duration, iteration-count, timing-function */
+            -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
+            -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
+            -ms-animation:blink normal 2s infinite ease-in-out; /* IE */
+            animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
+        }
+
+        .loader{
+            display: block;
+            z-index: 99;
+            position: absolute;
+            top: calc( 50% - 50px);
+            left: calc( 50% - 50px);
+            width: 100px;
+            height: 100px;
+            border: 3px solid var(--base-company-logo);
+            border-radius: 50%;
+
+            animation: spin 7s ease-in-out;
+            animation-iteration-count: infinite;
+            transition-duration: 0.1s;
+        }
+
+        .loader:hover {
+            scale: 0.95;
+            /*Loader on hover effect*/
+        }
+
+        .loader:active {
+            scale: 1.2;
+            /*Loader on click effect*/
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+            50% {
+                transform: rotate(1800deg);
+                border: 3px solid white;
+                border-left: solid 3px transparent;
+                border-right: solid 3px transparent;
+            }
+            100% {
+                /*Reversed spinning*/
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+        }
+
+        #deferred-styles {
+            display: none;
+        }
+
+        body {
+            background-color: #ffffff !important; /*#f4f5f5 !important;*/
+            font-family: Roboto, "Helvetica Neue", sans-serif;
+            font-weight: 300;
+            overflow: hidden;
+        }
+
+        h1 {
+            font-weight: 300;
+            padding: 0;
+        }
+
+        html, body {
+            height: 100%;
+        }
+
+
+        .container{
+            display: flex;
+            align-items: center;
+            width: 100% !important;
+            justify-content: space-around;
+        }
+
+        .row {
+            margin-left: 0 !important;
+            margin-right: 0 !important;
+        }
+
+    </style>
+
+    <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" />
+    <meta property="og:locale" content="en">
+    
+
+    <script type="application/javascript">
+        window.tiledeskSettings = {
+            marginX: "100px",
+            marginY: "50px",
+            // calloutTimer: 1
+            // autostart: false
+
+        };
+
+        (function(d, s, id) {
+            var w=window; var d=document;
+            var i=function() { 
+                i.c(arguments);
+            };
+            i.q=[];
+            i.c=function(args){ 
+                i.q.push(args);
+            };
+            w.Tiledesk=i;
+            var js, fjs = d.getElementsByTagName(s)[0];
+            if (d.getElementById(id)) return;
+            js = d.createElement(s); 
+            js.id = id; js.async = true; js.src = "../../launch.js";
+            fjs.parentNode.insertBefore(js, fjs);
+        }(document, 'script', 'tiledesk-jssdk'));
+        
+        window.addEventListener('load', (event)=> {
+            document.dispatchEvent(new Event('mousemove'))
+        })
+
+        window.Tiledesk('onLoadParams', function(event_data) {
+            console.log("onLoadParams Tiledesk FN", event_data);
+            // window.Tiledesk('signInWithCustomToken', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MDliOGVmYTg3MzJlYjAwMTQxNzYzZDlfNWU0ZWNiOThiNzhlZTQwMDE3NDA2MTEwIiwiZmlyc3RuYW1lIjoiS2VsbHkiLCJsYXN0bmFtZSI6IkdyYWNlIiwiZW1haWwiOiJncmFjZUBlbWFpbG5hLmNvIiwic3ViIjoidXNlcmV4dGVybmFsIiwiYXVkIjoiaHR0cHM6Ly90aWxlZGVzay5jb20vcHJvamVjdHMvNjA5YjhlZmE4NzMyZWIwMDE0MTc2M2Q5IiwiaWF0IjoxNjQxODAzODk0fQ.p0reTwd25p93CsDTyQa8tkihgFxThAI4DXloNc6vbXw')
+            //                 .then(response => console.log('signInWithCustomToken: user_logged -> ', response))
+            //                 .catch((error)=> console.error('signInWithCustomToken: error', error))
+        });
+        
+        window.Tiledesk('onBeforeInit', function(event_data) {
+            console.log("onBeforeInit Tiledesk FN", event_data);
+
+            var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
+            
+            setTimeout(() => {
+                document.getElementById("preloader").style.display = "none";
+            }, 1000);
+
+        });
+        
+        window.Tiledesk('onInit', function(event_data) {
+            console.log("onInit Tiledesk FN", event_data); 
+            //open widget after 3s if is closed
+            // setTimeout(() => {
+            //     if(event_data && event_data.detail && event_data.detail.global && !event_data.detail.global.isOpen){
+            //         window.Tiledesk('open')
+            //     }
+            // }, 3000);
+        });
+
+        window.Tiledesk('onAuthStateChanged', function(event_data) {
+        	console.log("AUTHENTICATED!", event_data);
+        });
+    </script>
+
+    <script type="application/javascript">
+        
+        var queryString = window.location.search;
+        var urlParams = new URLSearchParams(queryString);
+    
+        var currentUrl = window.location.href
+        var baseUrl = window.location.origin
+      
+
+        function getBrandResources(url) {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    var brandJson = JSON.parse(xhr.response)
+                    if(brandJson){
+                        /** TITLE AND FAVICON **/
+                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
+                        /** FOOTER-LOGO **/    
+                        brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
+                        brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
+                        brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
+                        /** HEADER-LOGO **/  
+                        brandJson['COMMON'].BASE_LOGO_WHITE? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_WHITE : null;
+                        /** HEADER-DOCS RESOURCES **/   
+                        document.getElementsByClassName('docs')[0].style.display = 'none'
+                        brandJson['COMMON'].DOCS? null: document.getElementById('share').style.display = 'none'
+                        /** IFRAME TITLE**/
+                        brandJson['COMMON'].COMPANY_LOGO? document.getElementById('tiledeskiframe').title = brandJson['COMMON'].COMPANY_NAME + ' Widget' : null;
+                    }
+                    
+                }
+            }
+            xhr.open('GET', url, true);
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            xhr.send();
+        }
+                        
+        var url = new URL(currentUrl);
+        var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
+        var project_name = url.searchParams.get("project_name");
+        // console.log('tiledesk_projectid: ', tiledesk_projectid);
+        // console.log('project_name: ', project_name);
+
+
+        // window.tileDeskAsyncInit = function() {
+        //     window.tiledesk.on('onLoadParams', function(event_data) {
+        //         // console.log('onLoadParams: ')
+        //         window.tiledesk.open();
+        //     });
+
+        //     window.tiledesk.on('onInit', function(event_data) {
+        //         setTimeout(() => {
+        //             document.getElementById("preloader").style.display = "none";
+        //         }, 1000);
+                
+        //     });
+        // };
+
+        function getQueryVariable(variable)     {
+            var query = window.location.search.substring(1);
+            var vars = query.split("&");
+            for (var i=0;i<vars.length;i++) {
+                    var pair = vars[i].split("=");
+                    if(pair[0] == variable){return pair[1];}
+            }
+            return(false);
+        }
+    </script>
+    
+</head>
+
+<body class="website white" >
+    <!-- <div id="preloader">
+        <div class="logo"></div>
+    </div> -->
+
+    <div id="preloader">
+        <div class="loader"></div>
+    </div>
+
+<div>
+    <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">
+</div>
+</body>
+</html>

package/src/chat21-core/providers/mqtt/mqtt-notifications.ts

@@ -38,10 +38,10 @@ export class MQTTNotifications extends NotificationsService {
   }
     
   getNotificationPermissionAndSaveToken(currentUserUid) {
-    console.log("[MQTTNotificationService] getNotificationPermissionAndSaveToken()",currentUserUid);
+    this.logger.log("[MQTTNotificationService] getNotificationPermissionAndSaveToken()",currentUserUid);
     this.userId = currentUserUid;
     if (firebase.messaging.isSupported()) {
-      console.log("[MQTTNotificationService] firebase.messaging.isSupported -> YES");
+      this.logger.log("[MQTTNotificationService] firebase.messaging.isSupported -> YES");
       const messaging = firebase.messaging();
       // messaging.requestPermission()
       Notification.requestPermission().then((permission) => {

package/src/chat21-core/providers/native/native-image-repo.ts

@@ -31,7 +31,7 @@ export class NativeImageRepoService extends ImageRepoService {
    checkImageExists(url: string, callback: (exist: boolean) => void): void {
         this.http.get(url).subscribe( res => {
             callback(true)
-        },(error) => { console.log('errorrrrrr', url, error);callback(false)})
+        },(error) => { console.log('[NATIVE-IMAGE-REPO-SERVICE] checkImageExists error:', url, error);callback(false)})
     }
 
 }