@chat21/chat21-ionic 3.0.82-rc.7 → 3.0.82

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

@@ -4,10 +4,13 @@
     padding-top: 0px;
     margin-top: 0px !important;
     padding-bottom: 0px !important;
+    // background: #fff;
     padding-left: 0px;
     width: 100%;
-    // min-height: 64px;
-    // height: 64px;
+    // min-height: 70px;
+    // height: 70px;
+    min-height: 64px;
+    height: 64px;
     position: relative;
     // top: -5px; //nk x AS
 }
@@ -212,10 +215,14 @@
     }
 }
 
+.container-project-for-panel {
+    padding: 0px !important;
+    width: 296px;
+}
+
 .flex-container-project-for-panel {
     display: flex;
-    // width: 100%;
-    // height: 64px;
+    width: 100%;
     justify-content: center;
     align-items: center;
     // position: relative;
@@ -224,19 +231,17 @@
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    margin: 6px;
-    // background-color: rgba(24, 119, 242, 0.1);
-    border-radius: 5px;
+    height: 64px;
 }
 
-.flex-container-project-for-panel:hover {
-    background-color:  rgba(24, 119, 242, 0.2);
-    transition: none;
+.flex-container:hover {
+    background-color: rgba(200, 200, 200, 0.2);
 }
 
 .flex-child-right {
     flex: 1;
-    // padding: 18px 0px;
+    padding: 18px 0px;
+    // height: 100%;
 }
 
 
@@ -244,7 +249,7 @@
     // flex: 0 0 20%;
     width: 60px;
     text-align: center;
-    // padding: 18px 0px;
+    padding: 18px 0px;
     height: 100%;
 }
 // border: 2px solid yellow;
@@ -304,21 +309,22 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 250px;
+    width: 185px ;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     font-family: Helvetica, Helvetica, Arial, sans-serif;
-    font-size: 16px; //14px;
+    font-size: 14px;
     position: relative;
+    top: -1px;
     cursor: pointer;
-    a {
-        color: #779bbb
-    }
 }
 
 
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
 
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
@@ -326,13 +332,12 @@
 //     width: fit-content;
 //     display: block;
 // }
-.unassigned_label {
+.project---name {
     width: fit-content;
     
 }
-.unassigned_label:hover {
-    color: rgb(100, 131, 158);
-    // font-weight: 600;
+.project---name:hover {
+    color: rgba(0, 0, 0, 0.35);
 }
 
 .view-all-convs-icon:hover {
@@ -447,21 +452,13 @@
     // top: 3px;
 
     position: relative;
-    // top: -8px;
+    top: -8px;
     background: transparent;
     border-radius: 50%;
-    width: 40px; //50px;
+    width: 50px;
     left: 10px;
-    height: 40px; //50px;
+    height: 50px;
     cursor: pointer;
-
-    svg {
-        pointer-events: none;
-        width: 30px;
-        height: auto;
-        fill: #779bbb; //rgb(107,107,107);
-        margin-top: 7px;
-    }
 }
 .unassigned-notifications-icon-wpr:hover {
     background-color: rgba(0, 0, 0, 0.05);
@@ -470,28 +467,23 @@
 .unassigned-notifications-badge {
     position: absolute;
     // top: 12px;
-    top: 6px;//14px;
+    top: 14px;
     border-radius: 50%;
     background: #e41e3f;
     // width: 24px;
     // height: 24px;
-    width: 20px; //22px;
-    height: 20px; //22px;
+    width: 22px;
+    height: 22px;
     color: #fff;
    
-    left: 40px; //33px;
+    left: 34px;
     border: 1px solid #fff;
-
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
 }
 .notification-count {
-    font-size: 10px; //12px;
+    font-size: 12px;
     font-weight: 500;
     position: relative;
-    // top: -1px;
+    top: -1px;
     text-align: center;
 }
 

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

@@ -1,4 +1,3 @@
-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';
@@ -12,8 +11,6 @@ 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',
@@ -31,7 +28,6 @@ export class ProjectItemComponent implements OnInit {
   tiledeskToken: string;
 
   unservedRequestCount: number = 0;
-  unservedConversations: ConversationModel[] = [];
   currentUserRequestCount: number;
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
@@ -58,8 +54,7 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
     private appConfigProvider: AppConfigProvider,
-    public events: EventsService,
-    public convertRequestToConversation: ConvertRequestToConversation
+    public events: EventsService
   ) { }
 
   ngOnInit() {
@@ -137,10 +132,9 @@ export class ProjectItemComponent implements OnInit {
       'LABEL_NOT_AVAILABLE',
       'LABEL_BUSY',
       'VIEW_ALL_CONVERSATIONS',
-      'UnassignedConversations',
-      // 'CONVERSATIONS_IN_QUEUE',
-      // 'CONVERSATION_IN_QUEUE',
-      // 'NO_CONVERSATION_IN_QUEUE',
+      'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
       'PINNED_PROJECT',
       'CHANGE_PINNED_PROJECT',
       "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
@@ -313,16 +307,10 @@ 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 *ngIf="flag_url" [src]="flag_url" width="19px" height="19px" style=" position: relative;top: 1px;">
+        <img [src]="flag_url" style="width: auto;height: 19px; position: relative;top: 1px;">
 
     </div>
 
@@ -25,9 +25,9 @@
             onerror="this.src='assets/images/no_image_user.png'" />
 
         <div *ngIf="!USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details"
-            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
+            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.color + ')'}">
             <span id="sidebaravatar-altenative-user-avatar" class="sidebar-user-details-altenative-user-avatar">
-                {{ user?.fullname_initial }}
+                {{ user?.avatar }}
             </span>
         </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

@@ -41,7 +41,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   isVisiblePAY: boolean;
   public_Key: any
-  USER_PHOTO_PROFILE_EXIST: boolean = false;
+  USER_PHOTO_PROFILE_EXIST: boolean;
   version: string
   company_name: string = 'Tiledesk'
   DASHBOARD_URL: string;
@@ -78,8 +78,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     // this.listenOpenUserSidebarEvent();
   }
 
-  ngOnChanges() {  }
-
   subcribeToAuthStateChanged() {
     this.messagingAuthService.BSAuthStateChanged.subscribe((state) => {
       this.logger.log('[SIDEBAR-USER-DETAILS] BSAuthStateChanged ', state)
@@ -90,8 +88,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
           const currentUser = JSON.parse(storedCurrentUser);
           this.logger.log('[SIDEBAR-USER-DETAILS] - subcribeToAuthStateChanged - currentUser ', currentUser)
           if (currentUser) {
-            this.user = currentUser
-            this.createUserAvatar(this.user);
+            this.user = currentUser;
             this.getCurrentChatLangAndTranslateLabels(this.user);
             this.photo_profile_URL = this.imageRepoService.getImagePhotoUrl(this.user.uid)
             this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL ', this.photo_profile_URL);
@@ -106,7 +103,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
   checkIfExistPhotoProfile(imageUrl) {
     this.verifyImageURL(imageUrl, (imageExists) => {
-      
+
       if (imageExists === true) {
         this.USER_PHOTO_PROFILE_EXIST = true;
         this.logger.log('[SIDEBAR-USER-DETAILS] photo_profile_URL IMAGE EXIST ', imageExists)
@@ -130,23 +127,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     };
   }
 
-  createUserAvatar(currentUser) {
-    this.logger.log('[SIDEBAR] - createProjectUserAvatar ', currentUser)
-    let fullname = ''
-    if (currentUser && currentUser.firstname && currentUser.lastname) {
-      fullname = currentUser.firstname + ' ' + currentUser.lastname
-      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
-      currentUser['fillColour'] = getColorBck(fullname)
-    } else if (currentUser && currentUser.firstname) {
-      fullname = currentUser.firstname
-      currentUser['fullname_initial'] = avatarPlaceholder(fullname)
-      currentUser['fillColour'] = getColorBck(fullname)
-    } else {
-      currentUser['fullname_initial'] = 'N/A'
-      currentUser['fillColour'] = 'rgb(98, 100, 167)'
-    }
-  }
-
   // listenOpenUserSidebarEvent() {
   //   this.events.subscribe('userdetailsidebar:opened', (openUserDetailsSidebar) => {
   //     this.logger.log('[SIDEBAR-USER-DETAILS] - listenOpenUserSidebarEvent - openUserDetailsSidebar', openUserDetailsSidebar);
@@ -376,6 +356,13 @@ 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,7 +1,2 @@
-<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>
+<div class="status-icon" [class.online]="online" [style.border-color]="borderColor"></div>
+<div class="online-point" [style.color]="fontColor">{{status}}</div>

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

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

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

@@ -17,10 +17,11 @@ 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 = '';
@@ -46,6 +47,9 @@ 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);
@@ -118,11 +122,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_ONLINE');
+      this.status = this.translationMap.get('LABEL_AVAILABLE');
     } else {
-      this.status = this.translationMap.get('LABEL_OFFLINE');
+      this.status = this.translationMap.get('LABEL_NOT_AVAILABLE');
       if (this.lastConnectionDate && this.lastConnectionDate.trim() !== '') {
-        this.status = this.status + ' (' + this.lastConnectionDate + ')'
+        this.status = this.lastConnectionDate;
       }
     }
   }
@@ -137,7 +141,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.translationMap.get('LABEL_OFFLINE') + ' (' + this.lastConnectionDate + ')'
+        this.status = this.lastConnectionDate;
       }
     }
   }

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

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

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

@@ -1,47 +0,0 @@
-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;
-
-    /* For Firefox */
-    @-moz-document url-prefix() {
-      scrollbar-width: none;
-    }
-
-    &: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,9 +17,7 @@ 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,6 +21,10 @@ 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';
@@ -61,6 +65,10 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
     CannedResponseComponent,
+    // BubbleDayMessageComponent,
+    // BubbleSystemMessageComponent,
+    // BubbleMyMessageComponent,
+    // BubbleOthersMessageComponent,
     // InfoContentComponent,
     // InfoSupportGroupComponent,
     // InfoDirectComponent,