@chat21/chat21-ionic 3.0.76 → 3.0.77-rc.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # chat21-ionic ver 3.0
 
+### 3.0.77-rc.3
+- bug-fixed: with env 
+
+### 3.0.77-rc.2
+- bug-fixed: on ng-select focused element show blue border
+- removed: unused labels and translations
+
+### 3.0.77-rc.1
+- added: new sidebar-user-details and sidebar components
+- changed: updateCurrentUserAvailability body http request to manage Inactive state 
+- removed label 'LABEL_ACTIVE_NOW'
+
 ## 3.0.76 in PROD
 
 ### 3.0.76-rc.4

package/deploy_amazon_beta.sh

@@ -12,7 +12,7 @@ sed -i -e "s/$URL_VER/g" src/utils/constants.ts
 
 ionic cordova platform add browser --save
 #ionic cordova build browser --prod --release
-ionic cordova build --env=pre browser #--prod  --verbose 
+ionic cordova build --configuration="pre" browser #--prod  --verbose 
 
 cp -p src/firebase-messaging-sw.js platforms/browser/www/
 cp -p src/manifest.json platforms/browser/www/

package/package.json

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

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

@@ -18,14 +18,22 @@
         </div>
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '63px' : ''  }" -->
         <div *ngIf="isDirect" class="user-presence" [ngClass]="{ 'user-presence-ios': platformName === 'ios' }">
-          <app-user-presence [idUser]=conversationAvatar.conversation_with [translationMap]=translationMap
-            [borderColor]=borderColor [fontColor]=fontColor>
+          <app-user-presence 
+            [idUser]=conversationAvatar.conversation_with 
+            [translationMap]=translationMap
+            [borderColor]=borderColor 
+            [fontColor]=fontColor>
           </app-user-presence>
         </div>
 
         <div *ngIf="conversationAvatar" class="user-typing">
-          <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
-            [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+          <app-user-typing 
+            [idConversation]=conversationAvatar.uid 
+            [idCurrentUser]=idLoggedUser 
+            [isDirect]=isDirect
+            [translationMap]=translationMap 
+            [color]=fontColor 
+            [membersConversation]=membersConversation>
           </app-user-typing>
         </div>
 

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -1,9 +1,9 @@
 <ion-content [style.display]="openInfoConversation ? 'block' : 'none'">
 
   <app-info-direct *ngIf="panelType === 'direct-panel'" 
-  [member]=member 
-  [translationMap]=translationMap
-  [conversationWith]= "conversationWith">
+    [member]=member 
+    [translationMap]=translationMap
+    [conversationWith]= "conversationWith">
   </app-info-direct>
 
   <app-info-group *ngIf="panelType === 'group-panel' && IS_GROUP_PANEL === true"

package/src/app/components/conversation-info/info-content/info-content.component.ts

@@ -341,7 +341,6 @@ export class InfoContentComponent implements OnInit {
 //       'LABEL_TO',
 //       'LABEL_LAST_ACCESS',
 //       'ARRAY_DAYS',
-//       'LABEL_ACTIVE_NOW'
 //     ];
 //     this.translationMap = this.translateService.translateLanguage(keys);
 //   }

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

@@ -66,7 +66,7 @@
                 </span>
               </ng-template>
 
-              <div class="availabily-and-busy-wpr">
+              <!-- <div class="availabily-and-busy-wpr">
                 <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
                   <div class="onoffswitch"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
@@ -77,39 +77,27 @@
                 </div>
 
 
-                <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
+                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
                 <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('Available') }}
+                  {{translationMap?.get('LABEL_AVAILABLE') }}
                 </span>
-                <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
+                <!- - (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" - ->
                 <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  {{translationMap?.get('Unavailable')}}
+                  {{translationMap?.get('LABEL_NOT_AVAILABLE')}}
                 </span>
 
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('Busy')}}"
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('LABEL_BUSY')}}"
                 [options]="tooltipOptions" placement="top" >
-                  <!-- <span class="material-icons project-item--isBusy-icon">
-                      access_time
-                    </span> -->
                   <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
                     viewBox="0 0 24 24" width="16px" fill="#FEB92C">
-                    <g>
-                      <path d="M0,0h24v24H0V0z" fill="none" />
-                    </g>
-                    <g>
-                      <path
-                        d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" />
-                    </g>
+                    <g><path d="M0,0h24v24H0V0z" fill="none" /></g>
+                    <g><path d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" /></g>
                   </svg>
                 </div>
-                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
-                  class="project-item--isBusy-busy-text text-pulse-animation">
-                  {{translationMap?.get('Busy')}}
-                </span> -->
               </div>
-            </div>
+            </div> -->
 
             <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"

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

@@ -241,9 +241,7 @@
 .flex-child-right {
     flex: 1;
     padding: 18px 0px;
-    // width: 227px;
-    // width: 207px;
-    height: 100%;
+    // height: 100%;
 }
 
 

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

@@ -128,9 +128,9 @@ export class ProjectItemComponent implements OnInit {
 
   public translations() {
     const keys = [
-      'Available',
-      'Unavailable',
-      'Busy',
+      'LABEL_AVAILABLE',
+      'LABEL_NOT_AVAILABLE',
+      'LABEL_BUSY',
       'VIEW_ALL_CONVERSATIONS',
       'CONVERSATIONS_IN_QUEUE',
       'CONVERSATION_IN_QUEUE',
@@ -278,7 +278,7 @@ export class ProjectItemComponent implements OnInit {
     available = !available
     this.logger.log('[PROJECT-ITEM] - changeAvailabilityState projectid', projectid, ' available: ', available);
 
-    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectid, available).subscribe((projectUser: any) => {
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, projectid, available, "").subscribe((projectUser: any) => {
 
         this.logger.log('[PROJECT-ITEM] - PROJECT-USER UPDATED ', projectUser)
         // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED

package/src/app/components/sidebar/sidebar.component.html

@@ -23,13 +23,14 @@
 
     <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ tooltip_text_for_availability_status}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" -->
     <!-- (click)="changeAvailabilityState(IS_AVAILABLE = !IS_AVAILABLE)"  -->
-    <div id="sidebaravatar-status-icon" class="status-icon"
-      [ngClass]="{'is-user-online' : IS_AVAILABLE === true, 'is-user-offline' : IS_AVAILABLE === false, 'small-sidebar-status-icon' : SIDEBAR_IS_SMALL === true  }">
+    <div id="teammate-status-icon" *ngIf="project_id" class="status-icon" [ngClass]="{
+      'is-user-online' : IS_AVAILABLE === true && IS_INACTIVE === false, 
+      'is-user-offline' : IS_AVAILABLE === false && IS_INACTIVE === false, 
+      'is-user-inactive': IS_AVAILABLE === false && IS_INACTIVE === true}">
     </div>
 
-        <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Busy' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
-        <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" [ngClass]="{'sidebar--isBusy-icon-wpr-with-image': USER_PHOTO_PROFILE_EXIST}" *ngIf="IS_BUSY === true"
-        style="cursor:pointer">
+      <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'LABEL_BUSY' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
+      <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" [ngClass]="{'sidebar--isBusy-icon-wpr-with-image': USER_PHOTO_PROFILE_EXIST}" *ngIf="IS_BUSY === true" style="cursor:pointer">
         <span id="sidebaravatar-isbusy-icon" class="material-icons sidebar-is-busy-icon">
           access_time
         </span>

package/src/app/components/sidebar/sidebar.component.ts

@@ -27,9 +27,8 @@ export class SidebarComponent implements OnInit {
   USER_ROLE: string = 'agent'
   SIDEBAR_IS_SMALL = true
   IS_AVAILABLE: boolean;
-  user: any;
-  IS_BUSY: boolean;
-
+  IS_INACTIVE: boolean;
+  IS_BUSY: boolean; 
   isVisibleAPP: boolean;
   isVisibleANA: boolean;
   isVisibleACT: boolean;
@@ -319,22 +318,24 @@ export class SidebarComponent implements OnInit {
   }
 
   listenTocurrentProjectUserUserAvailability$() {
-    this.wsService.currentProjectUserAvailability$.subscribe((projectUser) => {
-      this.logger.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
-
-      this.IS_AVAILABLE = projectUser['user_available']
-      this.IS_BUSY = projectUser['isBusy']
-      // if (project.id_project._id === projectUser['id_project']) {
-      //   project['ws_projct_user_available'] = projectUser['user_available'];
-      //   project['ws_projct_user_isBusy'] = projectUser['isBusy']
-      //   if (this.translationMap) {
-      //     if (projectUser['user_available'] === true) {
-      //       this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE')
-      //     } else {
-      //       this.avaialble_status_for_tooltip = this.translationMap.get('CHANGE_TO_YOUR_STATUS_TO_AVAILABLE')
-      //     }
-      //   }
-      // }
+    this.wsService.currentProjectUserAvailability$.subscribe((data) => {
+      this.logger.log('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', data);
+
+      if (data !== null) {
+        if (data['user_available'] === false && data['profileStatus'] === "inactive") {
+            this.IS_AVAILABLE = false;
+            this.IS_INACTIVE = true;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_INACTIVE ' , this.IS_INACTIVE) 
+        } else if (data['user_available'] === false && (data['profileStatus'] === '' || !data['profileStatus'] )) {
+            this.IS_AVAILABLE = false;
+            this.IS_INACTIVE = false;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
+        } else if (data['user_available'] === true && (data['profileStatus'] === '' || !data['profileStatus'])) {
+            this.IS_AVAILABLE = true;
+            this.IS_INACTIVE = false;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
+        }
+      }
 
     }, (error) => {
       this.logger.error('[SIDEBAR] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
@@ -438,9 +439,9 @@ export class SidebarComponent implements OnInit {
 
   public translations() {
     const keys = [
-      'Available',
-      'Unavailable',
-      'Busy',
+      'LABEL_AVAILABLE',
+      'LABEL_NOT_AVAILABLE',
+      'LABEL_BUSY',
       'VIEW_ALL_CONVERSATIONS',
       'CONVERSATIONS_IN_QUEUE',
       'CONVERSATION_IN_QUEUE',

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

@@ -34,7 +34,7 @@
     </div>
 
     <div class="user-details-user-isbusy" *ngIf="IS_BUSY === true" style="cursor:pointer"
-        matTooltipClass="custom-mat-tooltip" matTooltip="{{IS_BUSY_msg}}" #tooltip="matTooltip"
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{translationsMap.get('LABEL_BUSY')}}" #tooltip="matTooltip"
         matTooltipPosition='right' matTooltipHideDelay="100">
         <span class="material-icons user-details-user-isbusy-icon">access_time</span>
     </div>
@@ -52,25 +52,41 @@
         <h3>{{ USER_ROLE_LABEL }} </h3>
 
         <div class="user-details-view-profile" (click)="goToUserProfile()"> 
-            {{EditProfileLabel}}
+            {{translationsMap.get('EditProfileLabel')}}
         </div>
     </div>
 
     <section class="availability-section">
-        <mat-slide-toggle (change)="changeAvailabilityStateInUserDetailsSidebar(IS_AVAILABLE = !IS_AVAILABLE)"
+        <!-- <mat-slide-toggle (change)="changeAvailabilityStateInUserDetailsSidebar(IS_AVAILABLE = !IS_AVAILABLE)"
             class="custom-mat-slide-toggle" [checked]="IS_AVAILABLE" labelPosition="before">
 
             <span *ngIf="IS_AVAILABLE"
                 style="font-weight: 400 !important; text-transform: capitalize; font-size:14px; color:#a9afbb">
                 {{IS_AVAILABLE_msg}}
-                <!-- {{translationMap?.get('Available') }} -->
             </span>
             <span *ngIf="!IS_AVAILABLE"
                 style="font-weight: 400 !important;text-transform: capitalize;font-size:14px; color:#a9afbb">
                 {{IS_UNAVAILABLE_msg}}
-                <!-- {{translationMap?.get('Unavailable') }} -->
             </span>
-        </mat-slide-toggle>
+        </mat-slide-toggle> -->
+
+        <ng-select style="text-align: left;" 
+            (change)="changeAvailabilityStateInUserDetailsSidebar(selectedStatus)" 
+            [(ngModel)]="selectedStatus" 
+            class="teammate-status-in-drawer" 
+            [items]="teammateStatus" 
+            bindLabel="name" bindValue="id"
+            [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" />
+                <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" />
+                <span id="sidebaravatar_{{item.name}}" style="text-transform: capitalize; margin-left:8px">  {{item.label}} </span>
+            </ng-template>
+        </ng-select>
     </section>
 
     <hr class="first-divider">
@@ -85,12 +101,12 @@
                 style="color:#f44336; position:relative; top: -1px;display: inline-block;">
                 <i *ngIf="project?.plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
-                    matTooltip="{{ SUBSCRIPTION_PAYMENT_PROBLEM_msg }}" #tooltip="matTooltip" matTooltipPosition='right'
+                    matTooltip="{{ translationsMap.get('SubscriptionPaymentProblem') }}" #tooltip="matTooltip" matTooltipPosition='right'
                     matTooltipHideDelay="100">
                     error_outline
                 </i>
                 <i *ngIf="project?.plan_name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
-                    font-size: 16px;" matTooltipClass="custom-mat-tooltip" matTooltip="{{ THE_PLAN_HAS_EXPIRED_msg }}"
+                    font-size: 16px;" matTooltipClass="custom-mat-tooltip" matTooltip="{{ translationsMap.get('ThePlanHasExpired') }}"
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline
                 </i>
@@ -114,7 +130,7 @@
                 logout
             </i>
             <div class="user-details-logout-text"> 
-                 {{LOGOUT_msg}} 
+                 {{translationsMap.get('LABEL_LOGOUT')}} 
             </div>
         </div>
     </section>

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

@@ -205,7 +205,7 @@ button.user-details-btn-close {
     top: 320px;
     text-align: center;
     background-color: #2d323e;
-    padding: 9px;
+    padding: 4px 0px;
     width: 192px;
     border-radius: 4px;
     -webkit-transform: translateX(-50%);

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

@@ -32,17 +32,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   IS_AVAILABLE: boolean;
   USER_ROLE: boolean;
   USER_ROLE_LABEL: string;
-  EditProfileLabel: string;
-  IS_BUSY_msg: string;
-  IS_AVAILABLE_msg: string;
-  IS_UNAVAILABLE_msg: string;
-  SUBSCRIPTION_PAYMENT_PROBLEM_msg: string;
-  THE_PLAN_HAS_EXPIRED_msg: string;
-  PAYD_PLAN_NAME_PRO_msg: string;
-  PAYD_PLAN_NAME_ENTERPRISE_msg: string;
-  PRO_PLAN_TRIAL_msg: string;
-  FREE_PLAN_msg: string;
-  LOGOUT_msg: string;
   profile_name_translated: string;
   SubscriptionPaymentProblem: string;
   user: any
@@ -56,6 +45,16 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   version: string
   company_name: string = 'Tiledesk'
   DASHBOARD_URL: string;
+
+  selectedStatus: any;
+  teammateStatus = [
+    { id: 1, name: 'Available', avatar: 'assets/images/teammate-status/avaible.svg', label: "LABEL_AVAILABLE" },
+    { id: 2, name: 'Unavailable', avatar: 'assets/images/teammate-status/unavaible.svg', label: "LABEL_NOT_AVAILABLE" },
+    { id: 3, name: 'Inactive', avatar: 'assets/images/teammate-status/inactive.svg', label: "LABEL_INACTIVE" },
+  ];
+
+  translationsMap: Map<string, string> = new Map();
+
   constructor(
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
@@ -199,22 +198,29 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   translateLabels() {
     let keys= [
       'EditProfile',
-      'Available',
-      'Unavailable',
-      'Busy',
+      'LABEL_BUSY',
       'LABEL_LOGOUT',
       'SubscriptionPaymentProblem',
-      'ThePlanHasExpired'
+      'ThePlanHasExpired',
+      "LABEL_AVAILABLE",
+      "LABEL_NOT_AVAILABLE",
+      "LABEL_INACTIVE"
     ]
 
     this.translate.get(keys).subscribe((text: string) => {
-      this.EditProfileLabel = text['EditProfile'];
-      this.IS_AVAILABLE_msg = text['Available']
-      this.IS_UNAVAILABLE_msg = text['Unavailable']
-      this.IS_BUSY_msg = text['Busy']
-      this.LOGOUT_msg = text['LABEL_LOGOUT']
-      this.SUBSCRIPTION_PAYMENT_PROBLEM_msg = text['SubscriptionPaymentProblem']
-      this.THE_PLAN_HAS_EXPIRED_msg = text['ThePlanHasExpired']
+
+      this.translationsMap.set('LABEL_AVAILABLE',text['LABEL_AVAILABLE'])
+                          .set('LABEL_NOT_AVAILABLE', text['LABEL_NOT_AVAILABLE'] )
+                          .set('LABEL_INACTIVE', text['LABEL_INACTIVE'])
+                          .set('EditProfile', text['EditProfile'])
+                          .set('LABEL_BUSY', text['LABEL_BUSY'])
+                          .set('LABEL_LOGOUT', text['LABEL_LOGOUT'])
+                          .set('SubscriptionPaymentProblem', text['SubscriptionPaymentProblem'])
+                          .set('ThePlanHasExpired', text['ThePlanHasExpired'])
+
+      this.teammateStatus.forEach(element => {
+        element.label = this.translationsMap.get(element.label)
+      });
       
     });
   }
@@ -249,48 +255,6 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
     }
   }
 
-  getEditProfileTranslation() {
-    this.translate.get('EditProfile').subscribe((text: string) => {
-        this.EditProfileLabel = text
-      });
-  }
-
-  getAvailableTranslation() {
-    this.translate.get('Available').subscribe((text: string) => {
-        this.IS_AVAILABLE_msg = text
-    });
-  }
-  getUnavailableTranslation() {
-    this.translate.get('Unavailable').subscribe((text: string) => {
-        this.IS_UNAVAILABLE_msg = text
-    });
-  }
-
-  getIsBusyTranslation() {
-    this.translate.get('Busy').subscribe((text: string) => {
-        this.IS_BUSY_msg = text
-    });
-  }
-
-  getLogoutTranslation() {
-    this.translate.get('LABEL_LOGOUT').subscribe((text: string) => {
-        this.LOGOUT_msg = text
-    });
-  }
-
-  getSubscriptionPaymentProblemTranslation() {
-    this.translate.get('SubscriptionPaymentProblem').subscribe((text: string) => {
-        this.SUBSCRIPTION_PAYMENT_PROBLEM_msg = text
-    });
-  }
-
-  getThePlanHasExpiredTranslation() {
-    this.translate.get('ThePlanHasExpired').subscribe((text: string) => {
-        this.THE_PLAN_HAS_EXPIRED_msg = text
-    });
-  }
-
-
   listenToCurrentStoredProject() {
     this.events.subscribe('storage:last_project', projectObjct => {
       if (projectObjct && projectObjct !== 'undefined') {
@@ -360,7 +324,20 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
         this.logger.log('[SIDEBAR-USER-DETAILS] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
 
         if (projectUser) {
-          this.IS_AVAILABLE = projectUser['user_available']
+          if (projectUser['user_available'] === false && projectUser['profileStatus'] === 'inactive') {
+            // console.log('teammateStatus ', this.teammateStatus) 
+            this.selectedStatus = this.teammateStatus[2].id;
+             console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[2].name);
+            this.teammateStatus = this.teammateStatus.slice(0)
+          } else if (projectUser['user_available'] === false && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
+            this.selectedStatus = this.teammateStatus[1].id;
+             console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[1].name);
+            this.teammateStatus = this.teammateStatus.slice(0)
+          } else if (projectUser['user_available'] === true && (projectUser['profileStatus'] === '' || !projectUser['profileStatus'])) {
+            this.selectedStatus = this.teammateStatus[0].id
+            this.teammateStatus = this.teammateStatus.slice(0)
+            console.log('[SIDEBAR-USER-DETAILS] - PROFILE_STATUS selected option', this.teammateStatus[0].name);
+          }
           this.IS_BUSY = projectUser['isBusy']
           this.USER_ROLE = projectUser['role']
           this.translateUserRole(this.USER_ROLE)
@@ -376,7 +353,7 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
   translateUserRole(role) {
     this.translate.get(role).subscribe((text: string) => {
         this.USER_ROLE_LABEL = text
-      });
+    });
   }
 
 
@@ -386,10 +363,21 @@ export class SidebarUserDetailsComponent implements OnInit, OnChanges {
 
 
 
-  changeAvailabilityStateInUserDetailsSidebar(available) {
-    this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', available);
+  changeAvailabilityStateInUserDetailsSidebar(selectedStatusID) {
+    this.logger.log('[SIDEBAR-USER-DETAILS] - changeAvailabilityState projectid', this.project._id, ' available 1: ', selectedStatusID);
+    
+    let IS_AVAILABLE = null
+    let profilestatus = ''
+    if (selectedStatusID === 1) {
+      IS_AVAILABLE = true
+    } else if (selectedStatusID === 2) {
+      IS_AVAILABLE = false
+    } else if (selectedStatusID === 3) {
+      IS_AVAILABLE = false
+      profilestatus = 'inactive'
+    }
 
-    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, available)
+    this.wsService.updateCurrentUserAvailability(this.tiledeskToken, this.project._id, IS_AVAILABLE, profilestatus)
       .subscribe((projectUser: any) => {
 
         this.logger.log('[SIDEBAR-USER-DETAILS] - PROJECT-USER UPDATED ', projectUser)

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

@@ -122,7 +122,7 @@ 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_ACTIVE_NOW');
+      this.status = this.translationMap.get('LABEL_AVAILABLE');
     } else {
       this.status = this.translationMap.get('LABEL_NOT_AVAILABLE');
       if (this.lastConnectionDate && this.lastConnectionDate.trim() !== '') {

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

@@ -591,12 +591,12 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     const keys = [
       'LABEL_AVAILABLE',
       'LABEL_NOT_AVAILABLE',
+      'LABEL_INACTIVE',
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_TO',
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
-      'LABEL_ACTIVE_NOW',
       'LABEL_IS_WRITING',
       'LABEL_INFO_ADVANCED',
       'ID_CONVERSATION',

package/src/app/pages/profile-info/profile-info.page.ts

@@ -106,12 +106,12 @@ export class ProfileInfoPage implements OnInit {
     const keys = [
       'LABEL_AVAILABLE',
       'LABEL_NOT_AVAILABLE',
+      'LABEL_INACTIVE',
       'LABEL_TODAY',
       'LABEL_TOMORROW',
       'LABEL_TO',
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
-      'LABEL_ACTIVE_NOW',
       'LABEL_IS_WRITING',
       'LABEL_LOGOUT'
     ];

package/src/app/services/websocket/websocket.service.ts

@@ -61,7 +61,7 @@ export class WebsocketService {
     })
   }
 
-  public updateCurrentUserAvailability(token: string, projectId: string, user_is_available: boolean) {
+  public updateCurrentUserAvailability(token: string, projectId: string, user_is_available: boolean, profile_status: string) {
     const httpOptions = {
       headers: new HttpHeaders({
         'Accept': 'application/json',
@@ -70,7 +70,10 @@ export class WebsocketService {
       })
     };
 
-    const body = { 'user_available': user_is_available };
+    const body = { 
+      'user_available': user_is_available,
+      'profileStatus': profile_status
+    };
 
     const url = this.apiUrl + projectId + '/project_users/';
 

package/src/app/shared/shared.module.ts

@@ -1,3 +1,5 @@
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { NetworkOfflineComponent } from './../components/network-offline/network-offline.component';
 import { ContactsDirectoryComponent } from './../components/contacts-directory/contacts-directory.component';
 import { HtmlComponent } from './../chatlib/conversation-detail/message/html/html.component';
@@ -140,6 +142,8 @@ import { SafeHtmlPipe } from '../directives/safe-html.pipe';
     CommonModule,
     IonicModule,
     MomentModule,
+    NgSelectModule,
+    FormsModule,
     TooltipModule.forRoot(DefaultTooltipOptions as TooltipOptions)
 
   ],

package/src/assets/i18n/ar.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "أنت: ",
         "LABEL_MSG_PUSH_START_CHAT": "لا محادثة حتى الآن",
         "LABEL_MSG_START_CHAT": "ابدأ الدردشة",
-        "LABEL_ACTIVE_NOW": "متوفرة",
         "LABEL_AVAILABLE": "متوفرة",
         "LABEL_NOT_AVAILABLE": "غير متاح",
+        "LABEL_INACTIVE":"غير نشط",
         "LABEL_NO_MSG_HERE": "لا توجد رسالة هنا حتى الآن ...",
         "LABEL_TODAY": "اليوم",
         "LABEL_TOMORROW": "في الامس",
@@ -185,9 +185,6 @@
         "USER_ID": "معرف المستخدم",
         "CLOSE_TOAST": "قريب",
         "WAITING_FOR_NETWORK": "في انتظار الشبكة",
-        "Available": "متوفرة",
-        "Unavailable": "غير متوفره",
-        "Busy": "مشغول",
         "YouAreAboutToJoinThisChat": "إذا انضممت إلى هذه المحادثة ، فستظهر في قائمة المحادثة. سيتعين عليك بعد ذلك تحديده ، بعد إغلاق الشريط الجانبي للمحادثات غير المعينة ، لبدء الدردشة مع المستخدم",
         "Cancel": "يلغي",
         "AreYouSure": "هل أنت متأكد؟",

package/src/assets/i18n/az.json

@@ -2,9 +2,9 @@
     "LABEL_TU": "Sən: ",
     "LABEL_MSG_PUSH_START_CHAT": "Hələ söhbət yoxdur",
     "LABEL_MSG_START_CHAT": "Söhbətə başlayın",
-    "LABEL_ACTIVE_NOW": "mövcuddur",
     "LABEL_AVAILABLE": "mövcuddur",
     "LABEL_NOT_AVAILABLE": "Mövcud deyil",
+    "LABEL_INACTIVE":"qeyri-aktiv",
     "LABEL_NO_MSG_HERE": "Burada hələ mesaj yoxdur...",
     "LABEL_TODAY": "bu gün",
     "LABEL_TOMORROW": "dünən",
@@ -185,9 +185,6 @@
     "USER_ID": "İstifadəçi adı",
     "CLOSE_TOAST": "Yaxın",
     "WAITING_FOR_NETWORK": "Şəbəkə gözlənilir",
-    "Available": "Mövcuddur",
-    "Unavailable": "Əlçatan deyil",
-    "Busy": "Məşğul",
     "YouAreAboutToJoinThisChat": "Bu söhbətə qoşulsanız, söhbət siyahısında görünəcək. Daha sonra istifadəçi ilə söhbətə başlamaq üçün təyin edilməmiş söhbətlərin yan panelini bağladıqdan sonra onu seçməli olacaqsınız",
     "Cancel": "Ləğv et",
     "AreYouSure": "Sən əminsən?",

package/src/assets/i18n/de.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "sie: ",
   "LABEL_MSG_PUSH_START_CHAT": "Noch kein Gespräch",
   "LABEL_MSG_START_CHAT": "Fangen Sie an zu chatten",
-  "LABEL_ACTIVE_NOW": "erhältlich",
   "LABEL_AVAILABLE": "erhältlich",
   "LABEL_NOT_AVAILABLE": "Nicht verfügbar",
+  "LABEL_INACTIVE":"inaktiv",
   "LABEL_NO_MSG_HERE": "Hier noch keine Nachricht...",
   "LABEL_TODAY": "heute",
   "LABEL_TOMORROW": "gestern",
@@ -185,9 +185,6 @@
   "USER_ID": "Benutzeridentifikation",
   "CLOSE_TOAST": "Nah dran",
   "WAITING_FOR_NETWORK": "Warte auf Netzwerk",
-  "Available": "Erhältlich",
-  "Unavailable": "Nicht verfügbar",
-  "Busy": "Beschäftigt",
   "YouAreAboutToJoinThisChat": "Wenn Sie an dieser Konversation teilnehmen, wird sie in der Konversationsliste angezeigt. Sie müssen es dann auswählen, nachdem Sie die Seitenleiste für nicht zugewiesene Konversationen geschlossen haben, um mit dem Benutzer zu chatten",
   "Cancel": "Abbrechen",
   "AreYouSure": "Bist du sicher?",

package/src/assets/i18n/en.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "you: ",
   "LABEL_MSG_PUSH_START_CHAT": "No conversation yet",
   "LABEL_MSG_START_CHAT": "Start chatting",
-  "LABEL_ACTIVE_NOW": "available",
   "LABEL_AVAILABLE": "available",
   "LABEL_NOT_AVAILABLE": "not available",
+  "LABEL_INACTIVE":"inactive",
   "LABEL_NO_MSG_HERE": "Still no message here...",
   "LABEL_TODAY": "today",
   "LABEL_TOMORROW": "yesterday",
@@ -185,9 +185,6 @@
   "USER_ID": "User ID",
   "CLOSE_TOAST": "Close",
   "WAITING_FOR_NETWORK": "Waiting for network",
-  "Available": "Available",
-  "Unavailable": "Unavailable",
-  "Busy": "Busy",
   "YouAreAboutToJoinThisChat": "If you join this conversation, it will appear in the conversation list. You will then have to select it, after closing the unassigned conversations sidebar, to start chatting with the user",
   "Cancel": "Cancel",
   "AreYouSure": "Are you sure?",

package/src/assets/i18n/es.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "tú: ",
   "LABEL_MSG_PUSH_START_CHAT": "Aún no hay conversación",
   "LABEL_MSG_START_CHAT": "Empezar a chatear",
-  "LABEL_ACTIVE_NOW": "disponible",
   "LABEL_AVAILABLE": "disponible",
   "LABEL_NOT_AVAILABLE": "no disponible",
+  "LABEL_INACTIVE":"inactiva",
   "LABEL_NO_MSG_HERE": "Todavía no hay mensajes...",
   "LABEL_TODAY": "hoy",
   "LABEL_TOMORROW": "ayer",
@@ -185,9 +185,6 @@
   "USER_ID": "ID Usuario",
   "CLOSE_TOAST": "Cerrar",
   "WAITING_FOR_NETWORK": "Esperando a la red",
-  "Available": "Disponible",
-  "Unavailable": "Indisponible",
-  "Busy": "Ocupado",
   "YouAreAboutToJoinThisChat": "Si te unes a esta conversación, aparecerá en la lista de conversaciones. Luego deberá seleccionarlo, después de cerrar la barra lateral de conversaciones no asignadas, para comenzar a chatear con el usuario.",
   "Cancel": "Cancelar",
   "AreYouSure": "¿Estás seguro?",

package/src/assets/i18n/fr.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "vous: ",
   "LABEL_MSG_PUSH_START_CHAT": "Pas encore de conversation",
   "LABEL_MSG_START_CHAT": "Commencez à discuter",
-  "LABEL_ACTIVE_NOW": "disponible",
   "LABEL_AVAILABLE": "disponible",
   "LABEL_NOT_AVAILABLE": "indisponible",
+  "LABEL_INACTIVE":"inactif",
   "LABEL_NO_MSG_HERE": "Toujours pas de message ici...",
   "LABEL_TODAY": "aujourd'hui",
   "LABEL_TOMORROW": "hier",
@@ -185,9 +185,6 @@
   "USER_ID": "Identifiant d'utilisateur",
   "CLOSE_TOAST": "Fermer",
   "WAITING_FOR_NETWORK": "En attente de réseau",
-  "Available": "Disponible",
-  "Unavailable": "Indisponible",
-  "Busy": "Occupé",
   "YouAreAboutToJoinThisChat": "Si vous rejoignez cette conversation, elle apparaîtra dans la liste des conversations. Vous devrez ensuite le sélectionner, après avoir fermé la barre latérale des conversations non attribuées, pour commencer à discuter avec l'utilisateur",
   "Cancel": "Annuler",
   "AreYouSure": "Es-tu sûr?",

package/src/assets/i18n/it.json

@@ -2,9 +2,9 @@
     "LABEL_TU": "tu: ",
     "LABEL_MSG_PUSH_START_CHAT": "Ancora nessuna conversazione",
     "LABEL_MSG_START_CHAT": "inizia a chattare",
-    "LABEL_ACTIVE_NOW": "disponibile",
     "LABEL_AVAILABLE": "disponibile",
     "LABEL_NOT_AVAILABLE": "non disponibile",
+    "LABEL_INACTIVE":"inattivo",
     "LABEL_NO_MSG_HERE": "Ancora nessun messaggio qui...",
     "LABEL_TODAY": "oggi",
     "LABEL_TOMORROW": "ieri",
@@ -185,9 +185,6 @@
     "USER_ID": "ID utente",
     "CLOSE_TOAST": "Chiudi",
     "WAITING_FOR_NETWORK": "In attesa di rete",
-    "Available": "Disponibile",
-    "Unavailable": "Non disponibile",
-    "Busy": "Occupato",
     "YouAreAboutToJoinThisChat": "Se ti unisci a questa conversazione, apparirà nell'elenco delle conversazioni. Dovrai quindi selezionarla, dopo aver chiuso la barra laterale delle conversazioni non assegnate, per iniziare a chattare con l'utente",
     "Cancel": "Annulla",
     "AreYouSure": "Sei sicuro?",

package/src/assets/i18n/kk.json

@@ -2,9 +2,9 @@
     "LABEL_TU": "сен: ",
     "LABEL_MSG_PUSH_START_CHAT": "Әзірге әңгіме жоқ",
     "LABEL_MSG_START_CHAT": "Сөйлесуді бастаңыз",
-    "LABEL_ACTIVE_NOW": "қолжетімді",
     "LABEL_AVAILABLE": "қолжетімді",
     "LABEL_NOT_AVAILABLE": "жоқ",
+    "LABEL_INACTIVE":"белсенді емес",
     "LABEL_NO_MSG_HERE": "Бұл жерде әлі хабар жоқ...",
     "LABEL_TODAY": "бүгін",
     "LABEL_TOMORROW": "кеше",
@@ -185,9 +185,6 @@
     "USER_ID": "Қолданушының ID",
     "CLOSE_TOAST": "Жабық",
     "WAITING_FOR_NETWORK": "Желі күтілуде",
-    "Available": "Қол жетімді",
-    "Unavailable": "Қолжетімсіз",
-    "Busy": "Бос емес",
     "YouAreAboutToJoinThisChat": "Егер сіз осы әңгімеге қосылсаңыз, ол сөйлесулер тізімінде пайда болады. Пайдаланушымен сөйлесуді бастау үшін тағайындалмаған сөйлесулердің бүйірлік тақтасын жапқаннан кейін оны таңдау керек",
     "Cancel": "Болдырмау",
     "AreYouSure": "Сіз сенімдісіз бе?",

package/src/assets/i18n/pt.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "vocês: ",
   "LABEL_MSG_PUSH_START_CHAT": "Nenhuma conversa ainda",
   "LABEL_MSG_START_CHAT": "Começar a conversar",
-  "LABEL_ACTIVE_NOW": "disponível",
   "LABEL_AVAILABLE": "disponível",
   "LABEL_NOT_AVAILABLE": "não disponível",
+  "LABEL_INACTIVE":"inativo",
   "LABEL_NO_MSG_HERE": "Ainda sem mensagem aqui...",
   "LABEL_TODAY": "hoje",
   "LABEL_TOMORROW": "ontem",
@@ -185,9 +185,6 @@
   "USER_ID": "ID do usuário",
   "CLOSE_TOAST": "Fechar",
   "WAITING_FOR_NETWORK": "Aguardando rede",
-  "Available": "Disponível",
-  "Unavailable": "Indisponível",
-  "Busy": "Ocupado",
   "YouAreAboutToJoinThisChat": "Se você participar desta conversa, ela aparecerá na lista de conversas. Você terá que selecioná-lo, depois de fechar a barra lateral de conversas não atribuídas, para começar a conversar com o usuário",
   "Cancel": "Cancelar",
   "AreYouSure": "Tem certeza?",

package/src/assets/i18n/ru.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "ты: ",
   "LABEL_MSG_PUSH_START_CHAT": "Разговора пока нет",
   "LABEL_MSG_START_CHAT": "Начать чат",
-  "LABEL_ACTIVE_NOW": "имеется в наличии",
   "LABEL_AVAILABLE": "имеется в наличии",
   "LABEL_NOT_AVAILABLE": "недоступно",
+  "LABEL_INACTIVE":"неактивный",
   "LABEL_NO_MSG_HERE": "До сих пор нет сообщения здесь...",
   "LABEL_TODAY": "сегодня",
   "LABEL_TOMORROW": "вчерашний день",
@@ -185,9 +185,6 @@
   "USER_ID": "Идентификатор пользователя",
   "CLOSE_TOAST": "Закрывать",
   "WAITING_FOR_NETWORK": "Ожидание сети",
-  "Available": "Доступный",
-  "Unavailable": "Недоступен",
-  "Busy": "Занятый",
   "YouAreAboutToJoinThisChat": "Если вы присоединитесь к этой беседе, она появится в списке бесед. Затем вам нужно будет выбрать его после закрытия боковой панели неназначенных разговоров, чтобы начать общение с пользователем.",
   "Cancel": "Отмена",
   "AreYouSure": "Уверены ли вы?",

package/src/assets/i18n/sr.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "ти: ",
         "LABEL_MSG_PUSH_START_CHAT": "Још нема разговора",
         "LABEL_MSG_START_CHAT": "Почнете разговор",
-        "LABEL_ACTIVE_NOW": "на располагању",
         "LABEL_AVAILABLE": "на располагању",
         "LABEL_NOT_AVAILABLE": "није доступно",
+        "LABEL_INACTIVE":"неактиван",
         "LABEL_NO_MSG_HERE": "Још увек нема поруке овде...",
         "LABEL_TODAY": "данас",
         "LABEL_TOMORROW": "јуче",
@@ -185,9 +185,6 @@
         "USER_ID": "ИД корисник",
         "CLOSE_TOAST": "Затвори",
         "WAITING_FOR_NETWORK": "Чека се мрежа",
-        "Available": "На располагању",
-        "Unavailable": "Недоступно",
-        "Busy": "Заузет",
         "YouAreAboutToJoinThisChat": "Ако се придружите овој конверзацији, она ће се појавити на листи разговора. Затим ћете морати да га изаберете, након што затворите бочну траку недодељених разговора, да бисте започели ћаскање са корисником",
         "Cancel": "Поништити, отказати",
         "AreYouSure": "Да ли сте сигурни?",

package/src/assets/i18n/sv.json

@@ -2,9 +2,9 @@
     "LABEL_TU": "du: ",
     "LABEL_MSG_PUSH_START_CHAT": "Ingen konversation ännu",
     "LABEL_MSG_START_CHAT": "Börja chatta",
-    "LABEL_ACTIVE_NOW": "tillgängligt",
     "LABEL_AVAILABLE": "tillgängligt",
     "LABEL_NOT_AVAILABLE": "inte tillgänglig",
+    "LABEL_INACTIVE":"inaktiv",
     "LABEL_NO_MSG_HERE": "Fortfarande inget meddelande här...",
     "LABEL_TODAY": "i dag",
     "LABEL_TOMORROW": "i går",
@@ -185,9 +185,6 @@
     "USER_ID": "användar ID",
     "CLOSE_TOAST": "Stänga",
     "WAITING_FOR_NETWORK": "Väntar på nätverk",
-    "Available": "Tillgängligt",
-    "Unavailable": "Inte tillgänglig",
-    "Busy": "Upptagen",
     "YouAreAboutToJoinThisChat": "Om du går med i den här konversationen kommer den att visas i konversationslistan. Du måste sedan välja den, efter att ha stängt sidofältet för otilldelade konversationer, för att börja chatta med användaren",
     "Cancel": "Annullera",
     "AreYouSure": "Är du säker?",

package/src/assets/i18n/tr.json

@@ -2,9 +2,9 @@
   "LABEL_TU": "sen: ",
   "LABEL_MSG_PUSH_START_CHAT": "Henüz görüşme yok",
   "LABEL_MSG_START_CHAT": "Sohbeti başlat",
-  "LABEL_ACTIVE_NOW": "mevcut",
   "LABEL_AVAILABLE": "mevcut",
   "LABEL_NOT_AVAILABLE": "müsait değil",
+  "LABEL_INACTIVE":"etkin değil",
   "LABEL_NO_MSG_HERE": "Hala mesaj yok...",
   "LABEL_TODAY": "bugün",
   "LABEL_TOMORROW": "dün",
@@ -185,9 +185,6 @@
   "USER_ID": "Kullanıcı kimliği",
   "CLOSE_TOAST": "Kapat",
   "WAITING_FOR_NETWORK": "Ağ bekleniyor",
-  "Available": "Mevcut",
-  "Unavailable": "Kullanım dışı",
-  "Busy": "Meşgul",
   "YouAreAboutToJoinThisChat": "Bu sohbete katılırsanız, konuşma listesinde görünecektir. Daha sonra, kullanıcıyla sohbet etmeye başlamak için, atanmamış konuşmaların kenar çubuğunu kapattıktan sonra onu seçmeniz gerekecektir.",
   "Cancel": "İptal etmek",
   "AreYouSure": "Emin misin?",

package/src/assets/i18n/uk.json

@@ -2,9 +2,9 @@
     "LABEL_TU": "ти: ",
     "LABEL_MSG_PUSH_START_CHAT": "Розмови ще немає",
     "LABEL_MSG_START_CHAT": "Почніть спілкуватися",
-    "LABEL_ACTIVE_NOW": "доступний",
     "LABEL_AVAILABLE": "доступний",
     "LABEL_NOT_AVAILABLE": "недоступний",
+    "LABEL_INACTIVE":"неактивний",
     "LABEL_NO_MSG_HERE": "Тут досі немає повідомлення...",
     "LABEL_TODAY": "сьогодні",
     "LABEL_TOMORROW": "вчора",
@@ -185,9 +185,6 @@
     "USER_ID": "ідентифікатор користувача",
     "CLOSE_TOAST": "Закрити",
     "WAITING_FOR_NETWORK": "Очікування мережі",
-    "Available": "Доступний",
-    "Unavailable": "Недоступно",
-    "Busy": "Зайняте",
     "YouAreAboutToJoinThisChat": "Якщо ви приєднаєтесь до цієї розмови, вона з’явиться в списку розмов. Потім вам потрібно буде вибрати його, закривши бічну панель непризначених розмов, щоб почати спілкуватися з користувачем",
     "Cancel": "Скасувати",
     "AreYouSure": "Ти впевнений?",

package/src/assets/i18n/uz.json

@@ -3,9 +3,9 @@
     "LABEL_TU": "siz: ",
     "LABEL_MSG_PUSH_START_CHAT": "Hali suhbat yo'q",
     "LABEL_MSG_START_CHAT": "Suhbatni boshlang",
-    "LABEL_ACTIVE_NOW": "mavjud",
     "LABEL_AVAILABLE": "mavjud",
     "LABEL_NOT_AVAILABLE": "mavjud emas",
+    "LABEL_INACTIVE":"harakatsiz",
     "LABEL_NO_MSG_HERE": "Bu yerda hali xabar yo'q...",
     "LABEL_TODAY": "Bugun",
     "LABEL_TOMORROW": "kecha",
@@ -186,9 +186,6 @@
     "USER_ID": "foydalanuvchi IDsi",
     "CLOSE_TOAST": "Yopish",
     "WAITING_FOR_NETWORK": "Tarmoq kutilmoqda",
-    "Available": "Mavjud",
-    "Unavailable": "Mavjud emas",
-    "Busy": "Band",
     "YouAreAboutToJoinThisChat": "Agar siz ushbu suhbatga qo'shilsangiz, u suhbatlar ro'yxatida paydo bo'ladi. Keyin, tayinlanmagan suhbatlar yon panelini yopganingizdan so'ng, foydalanuvchi bilan suhbatni boshlash uchun uni tanlashingiz kerak bo'ladi",
     "Cancel": "Bekor qilish",
     "AreYouSure": "Ishonchingiz komilmi?",

package/src/assets/images/teammate-status/avaible.svg

@@ -0,0 +1,9 @@
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#4CAF50;}
+</style>
+<path class="st0" d="M0,0h24v24H0V0z"/>
+<path class="st1" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
+</svg>

package/src/assets/images/teammate-status/inactive.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#697482;}
+</style>
+<path class="st0" d="M0,0h24v24H0V0z"/>
+<path class="st1" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
+</svg>

package/src/assets/images/teammate-status/unavaible.svg

@@ -0,0 +1,9 @@
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#F44336;}
+</style>
+<path class="st0" d="M0,0h24v24H0V0z"/>
+<path class="st1" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
+</svg>

package/src/chat-config-pre.json

@@ -23,7 +23,7 @@
     },
     "apiUrl": "https://tiledesk-server-pre.herokuapp.com/",
     "baseImageUrl": "https://firebasestorage.googleapis.com/v0/b/",
-    "dashboardUrl": "/dashboard/",
+    "dashboardUrl": "https://support-pre.tiledesk.com/dashboard/",
     "logLevel": "DEBUG",
     "authPersistence": "LOCAL",
     "supportMode": true,

package/src/global.scss

@@ -603,12 +603,6 @@ select:-webkit-autofill:focus {
     max-width: 35px;
 }
 
-.small-sidebar-status-icon {
-    left: 26px !important;
-    bottom: -1px !important;
-    width: 12px !important;
-    height: 12px !important;
-}
 
 .status-icon {
     position: absolute;
@@ -619,6 +613,11 @@ select:-webkit-autofill:focus {
     border: 2px solid #2d323e;
     border-radius: 50%;
     // background-color: #4caf50;
+
+    left: 26px;
+    bottom: -1px;
+    width: 12px;
+    height: 12px;
 }
 
 .small-sidebar-camera-icon {
@@ -696,9 +695,6 @@ select:-webkit-autofill:focus {
     color: #fff !important;
     pointer-events: none;
 }
-.is-user-online {
-    background-color: #4caf50;
-}
 
 .is-desktop-menu {
     margin-top: 40px;
@@ -786,6 +782,9 @@ select:-webkit-autofill:focus {
 .is-user-offline {
     background-color: #f44336;
 }
+.is-user-inactive {
+    background-color: #697482;
+}
 
 .is-desktop-menu {
     margin-top: 40px;
@@ -794,6 +793,65 @@ select:-webkit-autofill:focus {
     margin-top: 0px;
 }
 
+// select teammate status in user detail drawer
+.ng-select.teammate-status-in-drawer {
+
+    .ng-select-container {
+        background-color: #2d323e;
+        color: #fff;
+        border: 1px solid #2d323e;
+    }
+    &.ng-select-opened{
+        .ng-select-container {
+            background-color: #2d323e;
+            border: 1px solid #2d323e;
+        }
+    }
+
+    &.ng-select-focused:not(.ng-select-opened){
+         >.ng-select-container{
+            border: 1px solid #2d323e;
+            box-shadow: unset;
+         }
+    }
+
+    
+}
+
+.ng-dropdown-panel {
+    background-color: #2d323e;
+    border: 1px solid #2d323e;
+
+    &.ng-select-bottom {
+        border: 1px solid #2d323e;
+        margin-top: 8px;
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
+    }
+
+    .ng-dropdown-panel-items {
+        .ng-option {
+            background-color: #2d323e;
+            color: #fff;
+
+            &.ng-option-marked {
+                background-color: rgba(30, 33, 41, 0.3);
+                color: #fff;
+            }
+
+            &.ng-option-selected {
+                background-color: #2d323e;
+                color: #fff;
+            }
+
+            &.ng-option-marked.ng-option-selected{
+                background-color: rgba(30, 33, 41, 0.3);
+                color: #fff;
+            }
+        }
+        
+    }
+}
 
 
 /* *** SMALL SIDEBAR STYLE ***  */