@chat21/chat21-ionic 3.0.107-rc.3 → 3.0.107-rc.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat21-ionic ver 3.0
 
+### 3.0.107.rc.7
+- bug-fixed: unassigned-convs not laoded custom external style via postMessage or event.subscribe methods
+- bug-fixed: delete all old css class style while uploading (via postMessge) a new class
+- bug-fixed: customStyle removed if refresh page or window.resize event is handled --> restore saved style from storage
+
+### 3.0.107.rc.6
+- bug-fixed: set is_new=false before archive an active conversation (not show not-read blu pointer and bold recipient fullname and last text)
+
+### 3.0.107.rc.5
+- bug-fixed: user info is not updated in sidebar-user-detail with SSO
+
+### 3.0.107.rc.4
+- bug-fixed: SSO, createCustomToken pass old token to authenticate chat engine module
+
 ### 3.0.107.rc.3
 - bug-fixed: update tiledek_token after signInWithCustomToken
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.107-rc.3",
+    "version": "3.0.107-rc.7",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -137,7 +137,7 @@ export class AppComponent implements OnInit {
     public fcm: FCM,
     public el: ElementRef,
     public g: Globals,
-    public globalSettingsService: GlobalSettingsService,
+    public globalSettingsService: GlobalSettingsService
   ) {
 
     this.saveInStorageNumberOfOpenedChatTab();
@@ -319,6 +319,8 @@ export class AppComponent implements OnInit {
     this.initializeApp('oninit');
     this.loadCustomScript(appconfig)
     this.listenToPostMsgs();
+
+    this.loadStyle(JSON.parse(this.appStorageService.getItem('style')))
   }
 
 
@@ -354,6 +356,12 @@ export class AppComponent implements OnInit {
           this.events.publish('presenceUser', event.data.parameter)
         }
       }
+
+      if(event && event.data && event.data.action) {
+        if (event.data.action === "style") {
+          this.loadStyle(event.data)
+        }
+      }
     })
   }
 
@@ -402,15 +410,95 @@ export class AppComponent implements OnInit {
     await alert.present();
   }
 
+  async loadStyle(data){
+    console.log('[APP-COMPO] event: style ...', data)
+    this.appStorageService.setItem('style', JSON.stringify(data))
+    if(!data || !data.parameter){
+
+      /** remove class from chat-IFRAME */
+      let className = document.body.className.replace(new RegExp(/style-\S*/gm), '')
+      document.body.className = className
+      document.body.classList.remove('light')
+      document.body.classList.remove('dark')
+      document.body.classList.remove('custom')
+      let link = document.getElementById('themeCustom');
+      if(link){
+        link.remove();
+      }
+
+      /** remove class from dashoard-IFRAME */
+      var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")
+      if(iframeWin){
+        let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+        iframeWin.contentDocument.body.className = className
+        iframeWin.contentDocument.body.classList.remove('light')
+        iframeWin.contentDocument.body.classList.remove('dark')
+        iframeWin.contentDocument.body.classList.remove('custom')
+        
+        let link = iframeWin.contentDocument.getElementById('themeCustom');
+        if(link){
+          link.remove();
+        }
+      }
+
+      /** remove class from dashoard-IFRAME-unsassigned-convs */
+      var iframeWinUnassigned = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+      if(iframeWinUnassigned){
+        let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+        iframeWinUnassigned.contentDocument.body.className = className
+        iframeWinUnassigned.contentDocument.body.classList.remove('light')
+        iframeWinUnassigned.contentDocument.body.classList.remove('dark')
+        iframeWinUnassigned.contentDocument.body.classList.remove('custom')
+        
+        let link = iframeWinUnassigned.contentDocument.getElementById('themeCustom');
+        if(link){
+          link.remove();
+        }
+      }
+      
+
+      /** remove style INFO from storage */
+      this.appStorageService.removeItem('style')
+
+      return;
+    } 
+
+    // Create link
+    let link = document.createElement('link');
+    link.id= 'themeCustom'
+    link.href = data.parameter;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.media='all';
+    this.logger.log('[APP-COMP] create link element...', link)
+    let head = document.getElementsByTagName('head')[0];
+    head.appendChild(link);
+    
+    /** add class to body element as theme type ('light', 'dark', 'custom') */
+    document.body.classList.add(data.type) 
+    
+    /** publish event to 
+     *  - info-support-group component 
+     *  - unassigned-conversations component
+    */
+    this.events.publish('style', data)
+
+    // var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")
+    // if(iframeWin){
+    //   iframeWin.contentDocument.head.appendChild(link)
+    //   iframeWin.contentDocument.body.classList.add(data.type) //ADD class to body element as theme type ('light', 'dark', 'custom')
+    // }
+    return;
+  }
 
 
 
   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)
-        this.messagingAuthService.createCustomToken(token)
+    this.tiledeskAuthService.signInWithCustomToken(token).then((data: any) => {
+        this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN user', data.user)
+        this.messagingAuthService.createCustomToken(data.token)
     }).catch(error => {
         this.logger.error('[APP-COMP] SIGNINWITHCUSTOMTOKEN error::', error)
     })
@@ -712,12 +800,12 @@ export class AppComponent implements OnInit {
     // 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.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(data => {
+        this.logger.log('[APP-COMP] >>> initAuthentication user ', data.user)
 
-        this.updateStoredCurrentUser()
+        //this.updateStoredCurrentUser()
 
-        this.messagingAuthService.createCustomToken(tiledeskToken)
+        this.messagingAuthService.createCustomToken(data.token)
       }).catch(error => {
         this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
       })
@@ -744,14 +832,6 @@ export class AppComponent implements OnInit {
     }
   }
 
-  // checkTokenAndGoOffline() {
-  //   let token = this.appStorageService.getItem('tiledeskToken');
-  //   this.logger.info('[APP-COMP] ***** checkTokenAndGoOffline - stored token *****', token);
-  //   if (!token) {
-  //     this.goOffLine()
-  //   }
-  // }
-
 
   /**------- AUTHENTICATION FUNCTIONS --> END <--- +*/
   /***************************************************+*/
@@ -1551,11 +1631,11 @@ export class AppComponent implements OnInit {
   @HostListener('window:storage', ['$event'])
   onStorageChanged(event: any) {
 
-    if (event.key !== 'chat_sv5__tiledeskToken' && event.key !== 'dshbrd----sound') {
+    if (event.key !== 'tiledesk_token' && event.key !== 'dshbrd----sound') {
       return;
     }
 
-    if (this.appStorageService.getItem('tiledeskToken') === null) {
+    if (localStorage.getItem('tiledesk_token') === null) {
       // console.log('[APP-COMP] - onStorageChanged tiledeskToken is null - RUN LOGOUT')
       this.tiledeskAuthService.logOut()
       this.messagingAuthService.logout();
@@ -1563,12 +1643,9 @@ export class AppComponent implements OnInit {
       // 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')) {
+      if (localStorage.getItem('tiledesk_token') !== null && currentToken !== this.appStorageService.getItem('tiledeskToken')) {
 
         // console.log('[APP-COMP] - onStorageChanged wentOnline 2')
         // DEALLOCO RISORSE OCCUPATE
@@ -1579,13 +1656,6 @@ export class AppComponent implements OnInit {
         // this.unsubscribe$.complete();
         this.initializeApp('onstoragechanged');
 
-
-
-        // console.log('[APP-COMP]  onAuthStateChanged HERE !!! ')
-        // firebase.auth().onAuthStateChanged(user => {
-        //   console.log('[APP-COMP]  onAuthStateChanged', user)
-        // })
-
       }
     }
 

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.scss

@@ -4,7 +4,6 @@
     --bck-msg-sent: #62a8ea;
     --col-msg-sent:#ffffff;
     --light-white: #f7f7f7;
-    --black: #1a1a1a;
     --gray: #aaaaaa;
 }
 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -64,14 +64,14 @@
 :host .base_sent .msg_sent ::ng-deep > div {
     .options-container{
         right: unset;
-        left: 1;
+        left: 1px;
         border-top-right-radius: unset;
         border-top-left-radius: 16px;
-        background: radial-gradient(at top left,rgba(#2a6ac1,1) 60%,rgba(#2a6ac1,0) 80%);
+        background: radial-gradient(at top left,var(--bck-msg-sent) 60%,rgba(#2a6ac1,0) 80%);
         flex-direction: row;
 
         .options-logo{
-            color: #ffffff;
+            color: var(--col-msg-sent);
         }
     }
 }
@@ -127,6 +127,7 @@
 
     ion-icon{
         margin: 5px;
+        color: var(--icon-color)
     }
 }
 
@@ -272,7 +273,7 @@ ion-item {
     padding: 0px 20px 6px 0px;
 
     .message-date{
-        color: #647491;
+        color: var(--message-date-color);
         font-size: 12px;
         align-self: center;
     }
@@ -359,13 +360,12 @@ ion-item {
     }
 }
 
-.message-date-hover{
-    color: #647491;
+.message-date-hover {
+    color: var(--message-date-color);
     font-size: 12px;
     align-self: center;
     margin: 0px 5px;
     display: none;
-    
 }
 
 
@@ -487,7 +487,7 @@ ion-item {
 }
 
 .long-date-divider-border-b {
-    border-bottom: 1px solid #dee5ee !important;
+    border-bottom: 1px solid var(--date-divider-color) !important;
     flex: 1 1 auto !important;
     margin-left: 1.1rem !important;
     margin-right: 1.1rem !important;
@@ -500,7 +500,7 @@ ion-item {
     line-height: 1.25rem !important;
     margin-left: 1rem !important;
     margin-right: 1rem !important;
-    color: #64748b;
+    color: var(--date-divider-text-color);
 }
 
 // ---------------------------------------------------------

package/src/app/chatlib/conversation-detail/message/info-message/info-message.component.scss

@@ -13,9 +13,9 @@
     padding-right: 4px;
     padding: 6px 10px;
     display: inline-block;
-    background: rgba(24, 119, 242, 0.1);
+    background: var(--info-message-background);
     font-size: 0.70em;
-    color: var(--basic-gray);
+    color: var(--info-message-color);
     margin-left: 5px; //32px;
     margin-right: 5px; //32px;
 
@@ -37,23 +37,21 @@
 .spinner > div {
     width: 10px;
     height: 10px;
-    background-color: #333;
-
     border-radius: 100%;
     display: inline-block;
     margin: 0px 2px;
 }
 
 .spinner .bounce1 {
-    background-color: #C9E4F6;
+    background-color: var(--info-message-bounce-color);
 }
 
 .spinner .bounce2 {
-    background-color: #C9E4F6;
+    background-color: var(--info-message-bounce-color);
     opacity: 0.6
 }
 
 .spinner .bounce3 {
-    background-color: #C9E4F6;
+    background-color: var(--info-message-bounce-color);
     opacity: 0.4
 }

package/src/app/chatlib/conversation-detail/message/options/options.component.scss

@@ -9,7 +9,7 @@
     width: 40px;
     padding: 5px;
     z-index: 2;
-    background: radial-gradient(at top right,rgba(240, 242, 247,1) 60%,rgba(240, 242, 247,0) 80%);
+    background: radial-gradient(at top right,var(--bck-msg-received) 60%,rgba(240, 242, 247,0) 80%);
     border-top-right-radius: 16px;
     
     .options-logo{
@@ -21,7 +21,7 @@
         /* width: 20px; */
         height: 16px;
         border-radius: 3px;
-        color: rgb(135, 150, 175);
+        color: var(--col-msg-received);
         text-align: left;
         justify-content: center;
         font-size: initial;

package/src/app/chatlib/conversation-detail/message/return-receipt/return-receipt.component.scss

@@ -12,7 +12,7 @@
     }
 
     svg {
-        fill:  var(--bubble-blue) 
+        fill:  var(--return-receipt-color) 
     }
 
     .c21-ico-schedule {

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

@@ -121,7 +121,7 @@
           {{conversation?.conversation_with_fullname}}
         </span>
       </div>
-      <div class="conversation_message truncate-conv-msg" [ngClass]="{'truncate-on-desktop': !isApp}">
+      <div class="conversation_message truncate" [ngClass]="{'truncate-on-desktop': !isApp}">
   
         <!-- -------------------------------------------------------------------------- -->
         <!-- if conversation type is image display the image icon before the message -->

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

@@ -18,7 +18,7 @@ ion-item {
     // padding-right: 8px;
     --padding-start: 0;
     --inner-padding-end: 0;
-    --background-hover: #000000 !important;
+    --background-hover: var(--item-backgroud-hover) !important;
     --background: transparent;
     border-radius: var(--border-radius-item);
     margin: 4px 5px;
@@ -28,17 +28,6 @@ ion-item {
         height: 100%;
         padding: 12px 0;
     }
-    .selected {
-        // border-radius: 10px;
-        // padding-left: 8px;
-        // padding-right: 8px;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: -1;
-        // background-color: rgba(0, 0, 0, .05);
-        background-color: rgb(231, 241, 255);
-    }
     ion-avatar {
         position: relative;
         padding: 0;
@@ -58,7 +47,7 @@ ion-item {
             border-radius: 50%;
             text-align: center;
             font-size: 15px; //20px;
-            color: #ffffff;
+            color: var(--avatar-placeholder-color);
             font-weight: 500;
         }
         .avatar-profile {
@@ -89,11 +78,11 @@ ion-item {
             align-items: center;
             line-height: 1.2rem;
             font-weight: 500;
-            color: #779bbb;
+            color: var(--conversation-project-color);
             font-size: 10px;
             max-width: 90%;
             svg {
-                fill:#779bbb;
+                fill:var(--conversation-project-color);
                 vertical-align: sub;
             }
             span{
@@ -105,40 +94,27 @@ ion-item {
             }
         }
         .conversation_with {
-            color: rgba(0, 0, 0, 1);
+            color: var(--list-conversation-with-color);
             font-size: 15px;
             font-weight: 400;
             line-height: 1.4;
             width: 70% !important;
             &.not-read {
                 font-weight: 600;
-                color: #3c4858; //#1876f2;
+                color: var(--list-conversation-with-color-not-read); //#1876f2;
             }
         }
         
         .conversation_message {
             margin: 5px 0px;
-            p {
-                color: #6e6f73; //#3c4858;
-                font-size: 15px;
-                font-weight: 400;
-                height: 18px;
-                vertical-align: middle;
-                align-self: center;
-                &.not-read {
-                    font-weight: 600;
-                    color: #1876f2;
-                }
-            }
-
+            color: var(--last-message-color);
+            font-size: 12px;
             span {
-                color: rgb(60, 72, 88);
-                font-size: 12px;
                 font-weight: 400;
                 height: 18px;
                 &.not-read {
                     font-weight: 600;
-                    color: #3c4858; //#1876f2;
+                    color: var(--list-conversation-message-color-not-read); //#1876f2;
                 }
             }
         }
@@ -150,7 +126,7 @@ ion-item {
         font-size: 10px;
         display: flex;
         flex-direction: column;
-        color: #6e6f73;
+        color: var(--list-timestamp-color);
 
         &.is-on-mobile{
             top: 10px;
@@ -161,16 +137,21 @@ ion-item {
         ion-button {
             padding: 0;
             margin: 0;
-            height: 24px;
-            width: 24px;
+            height: 35px;
+            width: 35px;
             font-size: 10px;
             --padding-start: 0px;
             --padding-end: 0px;
-            color: var(--basic-blue);//rgba(153, 153, 153, 1);
-            background-color: transparent;
+            color: var(--icon-color);//rgba(153, 153, 153, 1);
+            background-color: var(--archive-button-background);
+            border: 1px solid var(--archive-button-background);
+            ion-icon {
+                font-size: 21px !important;
+                color: var(--icon-color)
+            }
             border-radius: 50%; // nk
             &:hover {
-                background-color: rgba(0, 0, 0, 0.05);
+                opacity: 0.8;
             }
         }
     }
@@ -179,7 +160,7 @@ ion-item {
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: var(--basic-blue);
+        background-color: var(--list-notification-point-color);
         position: absolute;
         right: 6px;
         bottom: 8px;
@@ -211,14 +192,7 @@ ion-item:hover {
 }
 
 .button-on-desktop {
-    background-color: #fff !important;
     margin-right: 21px !important;
-    height: 35px !important;
-    width: 35px !important;
-    border: 1px solid #eee;
-    ion-icon {
-        font-size: 21px !important;
-    }
 }
 
 .button-on-mobile {
@@ -258,14 +232,7 @@ ion-item:hover {
 
 .ion-selected {
     background: var(--list-bkg-color-selected);
-    border-right: 4px solid var(--basic-blue);
-}
-
-.time-in-archived {
-    color: #666666;
-    font-size: 10px;
-    position: relative;
-    top: -4px;
+    border-right: 4px solid var(--list-bkg-color-selected-border);
 }
 
 

package/src/app/components/canned-response/canned-response.component.scss

@@ -120,10 +120,16 @@
     // }
     ion-icon {
         zoom: 0.7;
+        color: var(--icon-color);
+
+        &:hover{
+            opacity: 0.8;
+        }
     }
     .no-ripple {
         --ripple-color: transparent;
         --background-activated: transparent;
+        --background: transparent;
     }
 
     .border{
@@ -156,8 +162,9 @@
 }
 
 ion-item {
-    --background-hover: #1877f2 !important;
-    
+    --background-hover: var(--canned-hover-background) !important;
+    --color-hover: var(--canned-hover-color);
+    --background: transparent;
     .nocannedTitle {
         color: #f44336;
     }

package/src/app/components/contacts-directory/contacts-directory.component.scss

@@ -9,7 +9,7 @@ ion-item {
     --padding-start: 0;
     --inner-padding-end: 0;
     --background: transparent;
-    --background-hover: #000000 !important;
+    --background-hover: var(--item-backgroud-hover) !important;
     border-radius: var(--border-radius-item);
     
     .selected {
@@ -38,7 +38,7 @@ ion-item {
             border-radius: 50%;
             text-align: center;
             font-size: 20px;
-            color:#ffffff;
+            color: var(--avatar-placeholder-color);
             font-weight: 500;
         }
         .avatar-profile {
@@ -70,65 +70,13 @@ ion-item {
         font-family: Helvetica, Helvetica, Arial, sans-serif;
         line-height: 1.28;
         text-rendering: optimizeLegibility;
-        .conversation_with {
-            color: rgba(0, 0, 0, 1);
-            font-size: 15px;
-            font-weight: 400;
-            line-height: 1.4;
-        }
-        .conversation_message {
-            p {
-                color: rgba(153, 153, 153, 1);
-                font-size: 13px;
-                font-weight: 400;
-                height: 18px;
-                &.not-read {
-                    font-weight:bold;
-                }
-            }
-            
-        }
-        
+        color: var(--list-conversation-with-color);        
     }
     
-
-    ion-note {
-        position: absolute;
-        right: 8px;
-        top: 4px;
-        font-size: 10px;
-    }
-    ion-buttons {
-        margin: 0;
-        ion-button {
-            padding: 0;
-            margin: 0;
-            height: 24px;
-            width: 24px;
-            font-size: 10px;
-            --padding-start: 0px;
-            --padding-end: 0px;
-            color: rgba(153, 153, 153, 1);
-            background-color: transparent;
-            &:hover {
-                background-color: rgba(0, 0, 0, .05)
-            }
-        }
-    }
-
-    .notification_point {
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background-color: #0b5c89;
-        position: absolute;
-        right: 6px;
-        bottom: 8px;
-    }
 }
 
 ion-searchbar { 
     --box-shadow: 0px ;
-    --background: rgba(0, 0, 0, 0.05);
+    --background: var(--contact-directory-searchbar-background);
     --border-radius: 10px;
 }