@chat21/chat21-ionic 3.0.79-rc.1 → 3.0.79-rc.2

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # chat21-ionic ver 3.0
 
+### 3.0.79-rc.2
+- added: new sound if new conversation is triggered in agent's chat
+- changed: header UI of header-conversation-detail and unassigned-conversations components
+
 ### 3.0.79-rc.1
 - added: LABEL_ONLINE, LABEL_OFFLINE translations
 - changed: renamed ddp-header with conversations-list-header

package/package.json

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

package/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { tranlatedLanguage, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
+import { tranlatedLanguage, URL_SOUND_CONVERSATION_ADDED, URL_SOUND_LIST_CONVERSATION } from './../chat21-core/utils/constants';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 
@@ -86,11 +86,13 @@ export class AppComponent implements OnInit {
   public authModal: any;
 
   private audio: any;
+  private audio_NewConv: any;
   private setIntervalTime: any;
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
   private isSoundEnabled: boolean;
   private hasPlayed: boolean;
+  private hasPlayedConversation: boolean;
   private tabTitle: string;
   private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
@@ -831,6 +833,10 @@ export class AppComponent implements OnInit {
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
     this.audio.load();
 
+    this.audio_NewConv = new Audio();
+    this.audio_NewConv.src = chatBaseUrl + URL_SOUND_CONVERSATION_ADDED;
+    this.audio_NewConv.load();
+
     const sound_status = localStorage.getItem('dshbrd----sound')
     if(sound_status && sound_status !== 'undefined'){
       this.isSoundEnabled = sound_status === 'enabled'? true: false
@@ -840,7 +846,7 @@ export class AppComponent implements OnInit {
 
   }
 
-  private manageTabNotification(badgeNotificationCount?: number) {
+  private manageTabNotification(sound_type: string, badgeNotificationCount?: number) {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
       let badgeNewConverstionNumber = badgeNotificationCount? badgeNotificationCount : this.conversationsHandlerService.countIsNew()
@@ -864,7 +870,9 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = sound_status === 'enabled'? true: false
     }
     this.logger.debug('[APP-COMP] manageTabNotification can saund?', this.isInitialized, this.isSoundEnabled)
-    if(this.isInitialized && this.isSoundEnabled) this.soundMessage()
+    if(this.isInitialized && this.isSoundEnabled) {
+      sound_type === 'conv_added'? this.soundConversationAdded(): this.soundMessage();
+    }
   }
 
   soundMessage() {
@@ -880,7 +888,7 @@ export class AppComponent implements OnInit {
     // }, 4000);
 
     //play sound every 4s from the fist time you receive a conversation added/changed
-    if(!this.hasPlayed){
+    if(!this.hasPlayed && !this.hasPlayedConversation){
       that.audio.play().then(() => {
         that.hasPlayed = true
         that.logger.debug('[APP-COMP] ****** soundMessage played *****');
@@ -892,6 +900,22 @@ export class AppComponent implements OnInit {
       });
     }
   }
+
+  soundConversationAdded(){
+    const that = this;
+    console.log('soundConversationAdded ENABLEDDDD-->', this.hasPlayed)
+    if(!this.hasPlayedConversation ){
+      that.audio_NewConv.play().then(() => {
+        that.hasPlayedConversation = true
+        that.logger.debug('[APP-COMP] ****** soundConversationAdded played *****');
+        setTimeout(() => {
+          that.hasPlayedConversation = false
+        }, 4000);
+      }).catch((error: any) => {
+        that.logger.error('[APP-COMP] ***soundConversationAdded error*', error);
+      });
+    }
+  }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
@@ -943,7 +967,7 @@ export class AppComponent implements OnInit {
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
       // this.logger.log('[APP-COMP] ***** subscribeConversationAdded *****', conversation);
       if (conversation && conversation.is_new === true) {
-        this.manageTabNotification()
+        this.manageTabNotification('conv_added')
       }
       if(conversation) this.updateConversationsOnStorage()
     });
@@ -961,7 +985,7 @@ export class AppComponent implements OnInit {
         this.logger.log('[APP-COMP] ***** subscribeConversationChangedDetailed currentUser: ', currentUser);
         if (changes.value && changes.value.sender !== currentUser.uid) {
           if(changes.value.is_new === changes.previousValue.is_new){
-            this.manageTabNotification();
+            this.manageTabNotification('new_message');
           }
         }
       }
@@ -1325,5 +1349,26 @@ export class AppComponent implements OnInit {
       this.isSoundEnabled = event.newValue === 'enabled'? true: false
     }
   }
+
+
+  // @HostListener('mouseenter', ['$event']) 
+  // onMouseEnter(event: any) {
+  //   console.log('HostListener onMouseEnter-->', event)
+  // }
+
+  // @HostListener('mouseleave', ['$event']) 
+  // onMouseLeave(event: any) {
+  //   console.log('HostListener onMouseLeave-->', event)
+  // }
+
+  // @HostListener('focus', ['$event']) 
+  // onFocus(event: any) {
+  //   console.log('HostListener onFocus-->', event)
+  // }
+
+  // @HostListener('blur', ['$event']) 
+  // onBlur(event: any) {
+  //   console.log('HostListener onBlur-->', event)
+  // }
 }
 

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

@@ -112,6 +112,7 @@ ion-item {
         }
         
         .conversation_message {
+            margin: 5px 0px;
             p {
                 color: #6e6f73; //#3c4858;
                 font-size: 15px;

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -10,8 +10,7 @@
 
       <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div class="avatar-container" style="cursor: pointer"
-          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+        <div class="avatar-container" [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
           <app-avatar-profile 
             [itemAvatar]=conversationAvatar>
           </app-avatar-profile>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -141,7 +141,7 @@ ion-header {
 }
 
 .avatar-container {
-    background-color: #fff;
+    // background-color: #fff;
     color: #fff;
     text-align: center;
     width: 44px;
@@ -158,6 +158,12 @@ ion-header {
     border-width: 0px;
     line-height: 40px;
     display: inline-block;
+    cursor: pointer;
+}
+
+.avatar-container-ios {
+    left: 55px;
+    top: 10px;
 }
 
 .info-container{
@@ -216,7 +222,4 @@ ion-header {
     left: 63px;
 }
 
-.avatar-container-ios {
-    left: 55px;
-    top: 10px;
-}
+

package/src/app/pages/contacts-directory/contacts-directory.page.scss

@@ -38,4 +38,4 @@ ion-content {
     &::-webkit-scrollbar-thumb:hover {
         background-color: #727272;
     }
-  }
+}

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.html

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar [class.mobile]="isMobile">
     <ion-title *ngIf="callerBtn !== 'pinbtn'" style="font-size: 16px;">
       {{translationMap?.get('UnassignedConversations') }}
     </ion-title>

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.scss

@@ -1,3 +1,45 @@
+ion-toolbar {
+  height: var(--header-height);   
+  &:not(.mobile){
+      --background: var(--list-bkg-color);
+      border: none;
+  }
+  &.mobile{
+      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  ion-button{
+      --color: var(--basic-blue);
+  }
+}
+
+ion-content {
+  // overwrite inline styles
+  --overflow: hidden;
+  overflow: scroll;
+  &:not(.mobile){
+    background: var(--list-bkg-color);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 8px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f9f9f9;
+  }
+  &::-webkit-scrollbar-thumb {
+       background-color: #b9b9b9;
+        border-radius: 0px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+      background-color: #727272;
+  }
+}
+
+
 .ion-content-black-background {
   --background: #2d323e;
 }

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

@@ -16,6 +16,7 @@ export class UnassignedConversationsPage implements OnInit {
 
   @Input() iframe_URL: any;
   @Input() callerBtn: string;
+  @Input() isMobile: boolean;
   // @Input() prjctsxpanel_url: any;
   // @Input() unassigned_convs_url: any;
 

package/src/chat21-core/utils/constants.ts

@@ -73,7 +73,7 @@ export const TOUCHING_OPERATOR = "TOUCHING_OPERATOR";
 // URLS
 // export const URL_SOUND = 'assets/sounds/pling.mp3';
 export const URL_SOUND_LIST_CONVERSATION = '/assets/sounds/pling.mp3';
-export const URL_SOUND_CONVERSATION_DETAIL = '/assets/sounds/justsaying.mp3';
+export const URL_SOUND_CONVERSATION_ADDED = '/assets/sounds/wheep-wheep.mp3';
 // export const CHAT_SEND_BY_EMAIL_LINK =
 // 'mailto:?subject=Transcript Chat Conversation&body=Salve,%0D%0A%0D%0Adi
 // seguito potrà scaricare il transcript della conversazione intercorsa con il nostro servizio di