@chat21/chat21-ionic 3.0.80 → 3.0.81-rc.2

package/src/app/components/project-item/project-item.component.ts

@@ -1,3 +1,4 @@
+import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { EventsService } from './../../services/events-service';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
@@ -11,6 +12,8 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { WebSocketJs } from 'src/app/services/websocket/websocket-js';
 import { AppConfigProvider } from 'src/app/services/app-config';
+import { ConvertRequestToConversation } from 'src/chat21-core/utils/convertRequestToConversation';
+import { compareValues } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'app-project-item',
@@ -28,6 +31,7 @@ export class ProjectItemComponent implements OnInit {
   tiledeskToken: string;
 
   unservedRequestCount: number = 0;
+  unservedConversations: ConversationModel[] = [];
   currentUserRequestCount: number;
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
@@ -54,7 +58,8 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
     private appConfigProvider: AppConfigProvider,
-    public events: EventsService
+    public events: EventsService,
+    public convertRequestToConversation: ConvertRequestToConversation
   ) { }
 
   ngOnInit() {
@@ -132,9 +137,10 @@ export class ProjectItemComponent implements OnInit {
       'LABEL_NOT_AVAILABLE',
       'LABEL_BUSY',
       'VIEW_ALL_CONVERSATIONS',
-      'CONVERSATIONS_IN_QUEUE',
-      'CONVERSATION_IN_QUEUE',
-      'NO_CONVERSATION_IN_QUEUE',
+      'UnassignedConversations',
+      // 'CONVERSATIONS_IN_QUEUE',
+      // 'CONVERSATION_IN_QUEUE',
+      // 'NO_CONVERSATION_IN_QUEUE',
       'PINNED_PROJECT',
       'CHANGE_PINNED_PROJECT',
       "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
@@ -307,10 +313,16 @@ export class ProjectItemComponent implements OnInit {
           if (r['status'] === 100) {
             if (this.hasmeInAgents(r['agents']) === true) {
               count = count + 1;
+              let conv = this.convertRequestToConversation.getConvFromRequest(r)
+              if(!this.unservedConversations.find((el) => {return el.uid === conv.uid})){
+                this.unservedConversations.push(conv)
+                this.unservedConversations.sort(compareValues('timestamp', 'desc'))
+              }
             }
           }
         });
         //not sound if unservedRequest is already chached and web-sk is closed and restart again
+        // this.logger.log('updateUnservedRequestCount::: count , unservedRequestCount ', count , this.unservedRequestCount)
         if(count > this.unservedRequestCount ){  
           this.events.publish('unservedRequest:count', count)
         }

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -5,7 +5,7 @@
         <span class="user-details-dshbrd-lang-code" style="text-transform: uppercase;color: #647491;">
             {{chat_lang}}
         </span>
-        <img [src]="flag_url" style="width: auto;height: 19px; position: relative;top: 1px;">
+        <img *ngIf="flag_url" [src]="flag_url" style="width: auto;height: 19px; position: relative;top: 1px;">
 
     </div>
 
@@ -79,11 +79,11 @@
             [clearable]="false"
             [searchable]="false">
             <ng-template ng-label-tmp let-item="item">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item.avatar" />
+                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
                 <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
             </ng-template>
             <ng-template ng-option-tmp let-item="item" let-index="index">
-                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item.avatar" />
+                <img style="width: 15px;height: 15px;position: relative; top: 1px;" height="15" width="15" [src]="item?.avatar" />
                 <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
             </ng-template>
         </ng-select>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.ts

@@ -78,6 +78,8 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.listenOpenUserSidebarEvent();
   }
 
+  ngOnChanges() {  }
+
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
@@ -356,13 +358,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     });
   }
 
-
-  ngOnChanges() {  }
-
-
-
-
-
   changeAvailabilityStateInUserDetailsSidebar(selectedStatusID) {
     this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', selectedStatusID);
     

package/src/app/components/utils/user-presence/user-presence.component.html

@@ -1,2 +1,7 @@
-<div class="status-icon" [class.online]="online" [style.border-color]="borderColor"></div>
-<div class="online-point" [style.color]="fontColor">{{status}}</div>
+<div id="presence-container">
+    <div class="status-icon-container" [class.mobile]="isMobile">
+        <svg xmlns="http://www.w3.org/2000/svg" [class.online]="online" height="15"  width="15" viewBox="0 0 24 24" fill="#000000"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+    </div>
+    <!-- <div class="status-icon" [class.online]="online" [style.border-color]="borderColor"></div> -->
+    <div class="online-point">{{status}}</div>
+</div>

package/src/app/components/utils/user-presence/user-presence.component.scss

@@ -1,24 +1,41 @@
-.status-icon {
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    top: 0px;
-    left: 0;
-    border: 2px solid #ffffff;
+#presence-container{
+    display: flex;
+}
+
+.status-icon-container{
+    position: fixed;
+    top: 22px;
+    left: 30px;
+    background-color: white;
+    height: 17px;
+    width: 17px;
     border-radius: 50%;
-    background-color: #f44336;
-    &.online {
-        background-color: #4caf50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.mobile{
+        top: 36px;
+        left: 50px;
+    }
+
+    svg{
+        fill: #f44336;
+
+        &.online{
+            fill: #4caf50;
+        }
     }
     
 }
+
 .online-point {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    left: 20px;
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 12px;
-    line-height: 14px;
-    text-align: left;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.2rem;
+    font-weight: 500;
+    color: #779bbb;
+    font-size: 10px;
+    max-width: 90%;
+    margin-right: 5px;
 }

package/src/app/components/utils/user-presence/user-presence.component.ts

@@ -17,11 +17,10 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 })
 
 export class UserPresenceComponent implements OnInit, OnDestroy {
+  
   @Input() idUser: string;
+  @Input() isMobile: boolean;
   @Input() translationMap: Map<string, string>;
-  @Input() fontColor: string;
-  @Input() borderColor: string;
-
 
   public online = true;
   public status = '';
@@ -47,9 +46,6 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
 
   /** */
   initialize() {
-    if (this.translationMap) {
-      this.status = this.translationMap.get('LABEL_ACTIVE_NOW');
-    }
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.translationMap', this.translationMap);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - this.status', this.status);
     this.logger.log('[USER-PRESENCE-COMP] - initialize - idUser ->', this.idUser);
@@ -122,11 +118,11 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
     this.logger.log('[USER-PRESENCE-COMP] userIsOnLine - userId: ', userId, ' - isOnline: ', isOnline);
     this.online = isOnline;
     if (isOnline) {
-      this.status = this.translationMap.get('LABEL_AVAILABLE');
+      this.status = this.translationMap.get('LABEL_ONLINE');
     } else {
-      this.status = this.translationMap.get('LABEL_NOT_AVAILABLE');
+      this.status = this.translationMap.get('LABEL_OFFLINE');
       if (this.lastConnectionDate && this.lastConnectionDate.trim() !== '') {
-        this.status = this.lastConnectionDate;
+        this.status = this.status + ' (' + this.lastConnectionDate + ')'
       }
     }
   }
@@ -141,7 +137,7 @@ export class UserPresenceComponent implements OnInit, OnDestroy {
       this.logger.log('[USER-PRESENCE-COMP] userLastConnection - lastConnectionDate', lastConnectionDate);
       this.lastConnectionDate = lastConnectionDate;
       if (this.online === false) {
-        this.status = this.lastConnectionDate;
+        this.status = this.translationMap.get('LABEL_OFFLINE') + ' (' + this.lastConnectionDate + ')'
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar [class.mobile]="isMobile">
     <ion-title>{{ 'LABEL_NEW_CHAT' | translate }}</ion-title>
 
     <ion-buttons slot="end">

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

@@ -0,0 +1,41 @@
+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
+    --offset-bottom: auto!important;
+    --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;
+    }
+}

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

@@ -17,7 +17,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
   styleUrls: ['./contacts-directory.page.scss'],
 })
 export class ContactsDirectoryPage implements OnInit {
+  
   @Input() token: string;
+  @Input() isMobile: boolean;
   // @Input() user: string;
 
   public contacts: Array<UserModel>;

package/src/app/pages/conversation-detail/conversation-detail.module.ts

@@ -21,10 +21,6 @@ import { ConversationDetailPage } from './conversation-detail.page';
 // tslint:disable-next-line: max-line-length
 import { HeaderConversationDetailComponent } from '../../components/conversation-detail/header-conversation-detail/header-conversation-detail.component';
 import { MessageTextAreaComponent } from '../../components/conversation-detail/message-text-area/message-text-area.component';
-import { BubbleDayMessageComponent } from '../../components/conversation-detail/bubble-day-message/bubble-day-message.component';
-import { BubbleSystemMessageComponent } from '../../components/conversation-detail/bubble-system-message/bubble-system-message.component';
-import { BubbleMyMessageComponent } from '../../components/conversation-detail/bubble-my-message/bubble-my-message.component';
-import { BubbleOthersMessageComponent } from '../../components/conversation-detail/bubble-others-message/bubble-others-message.component';
 // import { InfoContentComponent } from '../../components/conversation-info/info-content/info-content.component';
 // import { InfoDirectComponent } from '../../components/conversation-info/info-direct/info-direct.component';
 import { InfoContentComponent } from 'src/app/components/conversation-info/info-content/info-content.component';
@@ -65,10 +61,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
     CannedResponseComponent,
-    // BubbleDayMessageComponent,
-    // BubbleSystemMessageComponent,
-    // BubbleMyMessageComponent,
-    // BubbleOthersMessageComponent,
     // InfoContentComponent,
     // InfoSupportGroupComponent,
     // InfoDirectComponent,

package/src/app/pages/conversation-detail/conversation-detail.page.html

@@ -1,23 +1,29 @@
 <span *ngIf="conversationWith && loggedUser; then showConversation else showPlaceholder"></span>
 <ng-template #showPlaceholder>
+
+  <ion-header no-border class="ion-no-border" [class.mobile]="isMobile">
+    <ion-toolbar [class.mobile]="isMobile">
+
+    </ion-toolbar>
+  </ion-header>
   <!-- class="splash-page" -->
-  <ion-content padding>
+  <ion-content padding id="contentPlaceholder" [class.mobile]="isMobile"> 
     <!-- <div padding class="image-splash-page"></div>
     <div padding class="title-splash-page">
       text new conversation + button
     </div> -->
+    
 
-    <ion-grid style="height: 100%;">
-      <ion-row class="ion-justify-content-center ion-align-items-center" style="height: 100%; flex-direction: column">
+    <ion-grid class="grid_content" [class.mobile]="isMobile">
+      <ion-row class="row_content ion-justify-content-center ion-align-items-center" style="flex-direction: column">
         <span *ngIf="isOnline === true  && !showSpinner"
-          style="color: #92949c; font-size: 16px;line-height: 18px;margin-top: -160px;">
+          style="color: #92949c; font-size: 16px;line-height: 18px;">
           <span *ngIf="conversation_count > 0 ">
             {{'PleaseSelectChatToStartMessaging' | translate }}
           </span>
           <span *ngIf="conversation_count === 0" style="line-height: 1.2;color: #4b5258;
         font-weight: 500;">
             {{'ALL_CONVS_SERVED' | translate}}
-
           </span>
 
         </span>
@@ -37,15 +43,13 @@
     [idLoggedUser]="loggedUser.uid"
     [conversationUid]="conversationWith"
     [conversationAvatar]="conversationAvatar" 
-    [translationMap]="translationMap"
-    [isOpenInfoConversation]="isOpenInfoConversation" 
-    [conv_type]="conv_type"
-    (eventOpenCloseInfoConversation)="returnOpenCloseInfoConversation($event)">
+    [translationsMap]="translationsHeaderMap"
+    [conv_type]="conv_type">
   </app-header-conversation-detail>
 
-  <ion-content id="conv-details">
-    <ion-grid class="grid_content">
-      <ion-row class="row_content">
+  <ion-content id="conv-details" [class.mobile]="isMobile">
+    <ion-grid class="grid_content" [class.mobile]="isMobile">
+      <ion-row class="row_content" [class.mobile]="isMobile">
         <ion-col id="chatArea" [class.mobile]="isMobile" [class.open]="openInfoConversation"
         [ngClass]="{'chat-area-apps-sidebar-wide': appsidebarIsWide === true}">
 
@@ -98,10 +102,15 @@
             </ng-template>
 
             <ng-template #content_messages>
-              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" (drop)="drop($event)"
-                (dragover)="allowDrop($event)" (dragleave)="drag($event)" [scrollEvents]="true"
-                (ionScrollStart)="logScrollStart($event)" (ionScroll)="logScrolling($event)"
-                (ionScrollEnd)="logScrollEnd($event)" [class.active]="showIonContent">
+              <ion-content #ionContentChatArea appScrollbarTheme class="ionContentChatArea" 
+                (drop)="drop($event)"
+                (dragover)="allowDrop($event)" 
+                (dragleave)="drag($event)" 
+                [scrollEvents]="true"
+                (ionScrollStart)="logScrollStart($event)" 
+                (ionScroll)="logScrolling($event)"
+                (ionScrollEnd)="logScrollEnd($event)" 
+                [class.active]="true">
 
                 <!-- ----------------------------------------------------------- -->
                 <!-- DROPZONE -->
@@ -125,7 +134,12 @@
                   [senderId]="loggedUser.uid"
                   [baseLocation]="window?.location?.origin"
                   [areVisibleCAR]="areVisibleCAR" 
-                  [supportMode]= "supportMode" 
+                  [supportMode]= "supportMode"
+                  [isMobile]="isMobile"
+                  [isTypings]="isTypings"
+                  [idUserTypingNow]="idUserTypingNow"
+                  [nameUserTypingNow]="nameUserTypingNow" 
+                  [translationMap]="translationsContentMap"
                   [stylesMap]="styleMap"
                   (onBeforeMessageRender)="onBeforeMessageRenderFN($event)"
                   (onAfterMessageRender)="onAfterMessageRenderFN($event)"
@@ -133,7 +147,8 @@
                   (onScrollContent)="returnOnScrollContent($event)" 
                   (onMenuOptionShow)="returnOnMenuOption($event)"
                   (onElementRendered)="onElementRenderedFN($event)"
-                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)">
+                  (onAddUploadingBubble)="addUploadingBubbleEvent($event)"
+                  (onOpenCloseInfoConversation)="onOpenCloseInfoConversation($event)">
                 </ion-conversation-detail>
 
               </ion-content>
@@ -155,7 +170,8 @@
               [conversationWith]="conversationWith"
               [conversationWithFullname]="conversationWithFullname"
               [currentString]="messageStr"
-              [translationMap]="translationMap"
+              [stylesMap]="styleMap"
+              [translationMap]="translationsMap"
               (onLoadedCannedResponses)="onLoadedCannedResponses($event)"
               (onClickCanned)="replaceTagInMessage($event)"
               (onClickAddCannedResponse)="presentCreateCannedResponseModal()">
@@ -211,9 +227,9 @@
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"
-              [translationMap]="translationMap"
+              [translationMap]="translationsMap"
               [fileUploadAccept]="appConfigProvider.getConfig().fileUploadAccept"
-              [isOpenInfoConversation]="isOpenInfoConversation" 
+              [isOpenInfoConversation]="openInfoConversation" 
               [dropEvent]="dropEvent"
               [disableTextarea]="disableTextarea"
               (eventChangeTextArea)="returnChangeTextArea($event)"
@@ -230,10 +246,11 @@
         [ngClass]="{'info-convs-apps-sidebar-wide': appsidebarIsWide === true}">
           <app-info-content 
             [openInfoConversation]="openInfoConversation" 
-            [translationMap]="translationMap"
             [loggedUser]="loggedUser" 
             [tenant]="tenant" 
-            [groupDetail]="groupDetail">
+            [groupDetail]="groupDetail"
+            [isMobile]="isMobile"
+            [translationMap]="translationsMap">
           </app-info-content>
         </ion-col>