@chat21/chat21-ionic 3.0.97-rc.1 → 3.0.97-rc.3

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

@@ -58,7 +58,8 @@ import {
   MESSAGE_TYPE_OTHERS,
   URL_SOUND_LIST_CONVERSATION, 
   TYPE_DIRECT, 
-  TYPE_MSG_EMAIL
+  TYPE_MSG_EMAIL,
+  TYPE_MSG_FORM
 } from 'src/chat21-core/utils/constants'
 import {
   checkPlatformIsMobile,
@@ -125,6 +126,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   public translationsMap: Map<string, string> = new Map()
   public translationsHeaderMap: Map<string, string> = new Map() 
   public translationsContentMap: Map<string, string> = new Map()
+  public translationsInfoConversationMap: Map<string, string> = new Map() 
   public conversationAvatar: any
   public leadInfo: {lead_id: string, hasEmail: boolean , email: string, projectId: string, presence: {}};
   public liveInfo: {sourcePage: string, sourceTitle: string}
@@ -335,7 +337,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             conv.channel_type,
             null,
             conv.attributes['projectId'],
-            conv.attributes['project_name'])
+            conv.attributes['project_name']),
+            conv.attributes['channel']
         }
 
       }
@@ -603,7 +606,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'LABEL_LAST_ACCESS',
       'ARRAY_DAYS',
       
-      'LABEL_INFO_ADVANCED',
       'ID_CONVERSATION',
       'UPLOAD_FILE_ERROR',
       'LABEL_ENTER_MSG',
@@ -613,7 +615,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'FAILED_TO_UPLOAD_THE_FORMAT_IS NOT_SUPPORTED',
       'NO_INFORMATION_AVAILABLE',
       'CONTACT_ID',
-      'USER_ID',
+      
       'UPLOAD',
       'CANNED_RESPONSES',
       'NO_CANNED_RESPONSES',
@@ -665,9 +667,15 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       'COPY_MESSAGE_TOAST'
     ]
 
+    const keysContentInfo = [
+      'LABEL_INFO_ADVANCED',
+      'USER_ID'
+    ]
+
     this.translationsMap = this.customTranslateService.translateLanguage(keys)
     this.translationsHeaderMap = this.customTranslateService.translateLanguage(keysHeader)
     this.translationsContentMap = this.customTranslateService.translateLanguage(keysContentDetail)
+    this.translationsInfoConversationMap = this.customTranslateService.translateLanguage(keysContentInfo)
     this.logger.log('[CONVS-DETAIL] x this.translationMap ',this.translationsMap)
   }
 
@@ -776,7 +784,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   private setAttributes(): any {
     const attributes: any = {
       client: navigator.userAgent,
-      sourcePage: location.href,
+      sourcePage: location.href
     }
 
     //TODO: servono ???
@@ -839,7 +847,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             conv.channel_type,
             null,
             conv.attributes['projectId'],
-            conv.attributes['project_name']
+            conv.attributes['project_name'],
+            conv.attributes['channel']
           )
           
         }
@@ -856,7 +865,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 conv.channel_type,
                 null,
                 conv.attributes['projectId'],
-                conv.attributes['project_name']
+                conv.attributes['project_name'],
+                conv.attributes['channel']
               )
               let duration = getDateDifference(conv.timestamp, Date.now())
               duration.days > 10 && conv.channel_type !== TYPE_DIRECT? this.disableTextarea = true: this.disableTextarea = false
@@ -877,7 +887,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             conv.channel_type,
             null,
             conv.attributes['projectId'],
-            conv.attributes['project_name']
+            conv.attributes['project_name'],
+            conv.attributes['channel']
           )
           let duration = getDateDifference(conv.timestamp, Date.now())
           duration.days > 10 && conv.channel_type !== TYPE_DIRECT? this.disableTextarea = true: this.disableTextarea = false
@@ -892,7 +903,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
                 conv.channel_type,
                 null,
                 conv.attributes['projectId'],
-                conv.attributes['project_name']
+                conv.attributes['project_name'],
+                conv.attributes['channel']
               )
             }
             this.logger.log('[CONVS-DETAIL] - setHeaderContent > conversationAvatar: ', this.conversationAvatar)
@@ -1047,23 +1059,27 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         msg = `[${metadata.name}](${metadata.src})`
       }
     }
-
+    this.conversation.attributes && this.conversation.attributes['channel']? attributes.channel = this.conversation.attributes['channel']: null;
     metadata ? (metadata = metadata) : (metadata = '')
-    const emailSectionMsg = (attributes && attributes['channel']===TYPE_MSG_EMAIL)
+    this.logger.log('[CONVS-DETAIL] attributes--->>>> 1111',this.conversation.attributes, attributes)
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser)
-
+    
+    
+    const emailSectionMsg = (attributes && attributes['offline_channel']===TYPE_MSG_EMAIL)
+    const channelIsNotEmailOrForm = (attributes && attributes['channel'] && (attributes['channel'] === TYPE_MSG_EMAIL || attributes['channel']===TYPE_MSG_FORM))
+    
     if ((msg && msg.trim() !== '') || type !== TYPE_MSG_TEXT) {
 
       
       if(this.isEmailEnabled && 
           this.leadInfo && this.leadInfo.presence && this.leadInfo.presence['status']=== 'offline' &&  
-          this.leadInfo.email && !emailSectionMsg){
+          this.leadInfo.email && !emailSectionMsg && !channelIsNotEmailOrForm){
         this.logger.log('[CONVS-DETAIL] - SEND MESSAGE --> SENDING EMAIL', msg, this.leadInfo.email)
         let msgText = this.createEmailText(msg)
         this.sendEmail(msgText).subscribe(status => {
           if(status){
             //SEND MESSAGE ALSO AS EMAIL
-            attributes['channel']= 'offline_'+TYPE_MSG_EMAIL
+            attributes['offline_channel']= 'offline_'+TYPE_MSG_EMAIL
           }
 
           this.conversationHandlerService.sendMessage(
@@ -1095,6 +1111,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.segmentNewAgentMessage(this.conversation)
     }
   }
+
+
+
   // ----------------------------------------------------------
   // InitSubscriptions BS subscriptions
   // ----------------------------------------------------------
@@ -1238,7 +1257,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.channelType,
         null,
         this.conversation.attributes['projectId'],
-        this.conversation.attributes['project_name']
+        this.conversation.attributes['project_name'],
+        this.conversation.attributes['channel']
       )
     }
     if (msg.attributes && msg.attributes.hasOwnProperty("updateUserEmail")) {
@@ -1250,7 +1270,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.channelType,
         userEmail,
         this.conversation.attributes['projectId'],
-        this.conversation.attributes['project_name']
+        this.conversation.attributes['project_name'],
+        this.conversation.attributes['channel']
       )
       this.getLeadDetail()
     }
@@ -1622,23 +1643,23 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   // * if I'm in the conversation at the bottom of the page -> NO SOUND
   // * otherwise -> SOUND
   // ----------------------------------------------------------
-  soundMessage() {
-    const that = this
-    this.audio = new Audio()
-    // this.audio.src = '/assets/sounds/pling.mp3';
-    this.audio.src = URL_SOUND_LIST_CONVERSATION
-    this.audio.load()
-    this.logger.log('[CONVS-DETAIL] soundMessage conversation this.audio',this.audio)
-    clearTimeout(this.setTimeoutSound)
-    this.setTimeoutSound = setTimeout(function () {
-      that.audio.play().then(() => {
-          // Audio is playing.
-          this.logger.log('[CONVS-DETAIL] soundMessag that.audio.src ',that.audio.src)
-      }).catch((error) => {
-          that.logger.error(error)
-      })
-    }, 1000)
-  }
+  // soundMessage() {
+  //   const that = this
+  //   this.audio = new Audio()
+  //   // this.audio.src = '/assets/sounds/pling.mp3';
+  //   this.audio.src = URL_SOUND_LIST_CONVERSATION
+  //   this.audio.load()
+  //   this.logger.log('[CONVS-DETAIL] soundMessage conversation this.audio',this.audio)
+  //   clearTimeout(this.setTimeoutSound)
+  //   this.setTimeoutSound = setTimeout(function () {
+  //     that.audio.play().then(() => {
+  //         // Audio is playing.
+  //         this.logger.log('[CONVS-DETAIL] soundMessag that.audio.src ',that.audio.src)
+  //     }).catch((error) => {
+  //         that.logger.error(error)
+  //     })
+  //   }, 1000)
+  // }
 
   onBeforeMessageRenderFN(event) {
     //this.onBeforeMessageRender.emit(event)
@@ -1732,6 +1753,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+  //DESKTOP HANDLER
   onOpenCloseInfoConversation(event){
     this.logger.debug('[CONVS-DETAIL] onOpenCloseInfoConversation - openInfoConversation ', event)
     this.resizeTextArea()
@@ -1739,6 +1761,14 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.USER_HAS_OPENED_CLOSE_INFO_CONV = true
   }
 
+  //MOBILE HANDLER
+  onOpenInfoConversation(event){
+    this.logger.debug('[CONVS-DETAIL] onOpenCloseInfoConversation - openInfoConversation ', event)
+    this.resizeTextArea()
+    this.openInfoConversation = event
+    this.USER_HAS_OPENED_CLOSE_INFO_CONV = true
+  }
+
   onOpenFooterSection(event: string){
     this.logger.debug('[CONVS-DETAIL] onOpenFooterSection - section ', event)
     if(event === 'email'){

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

@@ -1,4 +1,3 @@
-@import '~perfect-scrollbar/css/perfect-scrollbar.css';
 
 ion-header {
   border-bottom-style: solid;

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

@@ -23,7 +23,6 @@ import {
 } from '../../../chat21-core/utils/utils'
 
 import { EventsService } from '../../services/events-service'
-import PerfectScrollbar from 'perfect-scrollbar' // https://github.com/mdbootstrap/perfect-scrollbar
 
 // services
 import { ConversationsHandlerService } from 'src/chat21-core/providers/abstract/conversations-handler.service'
@@ -46,9 +45,10 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { NetworkService } from 'src/app/services/network-service/network.service'
 import { Subject } from 'rxjs'
-import { takeUntil } from 'rxjs/operators'
+import { skip, takeUntil } from 'rxjs/operators'
 import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils-message';
+import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 
 @Component({
   selector: 'app-conversations-list',
@@ -80,6 +80,7 @@ export class ConversationListPage implements OnInit {
   private isShowMenuPage = false
   private logger: LoggerService = LoggerInstance.getInstance()
   translationMapConversation: Map<string, string>
+  translationMapHeader: Map<string, string>
   stylesMap: Map<string, string>
 
   public conversationType = 'active'
@@ -97,15 +98,16 @@ export class ConversationListPage implements OnInit {
   public isMobile: boolean = false;
   public isInitialized: boolean = false;
 
-  tooltipOptions = {
-    'show-delay': 1500,
-    'tooltip-class': 'chat-tooltip',
-    'theme': 'light',
-    'shadow': false,
-    'hide-delay-mobile': 0,
-    'hideDelayAfterClick': 3000,
-    'hide-delay': 200,
-  }
+  // PROJECT AVAILABILITY INFO: start
+  project: { _id: string, name: string, type: string, isActiveSubscription: boolean, plan_name: string}
+  profile_name_translated: 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" },
+  ];
+  // PROJECT AVAILABILITY INFO: end
 
   constructor(
     private router: Router,
@@ -124,9 +126,10 @@ export class ConversationListPage implements OnInit {
     public tiledeskAuthService: TiledeskAuthService,
     public appConfigProvider: AppConfigProvider,
     public platform: Platform,
-    private networkService: NetworkService,
+    public wsService: WebsocketService,
   ) {
     this.checkPlatform();
+    this.translations();
     this.listenToAppCompConvsLengthOnInitConvs()
     this.listenToAppIsInitialized()
     this.listenToLogoutEvent()
@@ -136,7 +139,9 @@ export class ConversationListPage implements OnInit {
     this.listenToSwPostMessage()
     this.listenSupportConvIdHasChanged()
     // this.listenDirectConvIdHasChanged();
-    this.listenToCloseConvFromHeaderConversation()
+    this.listenToCloseConvFromHeaderConversation();
+    this.listenToCurrentStoredProject()
+    this.listenTocurrentProjectUserUserAvailability$()
   }
 
   private checkPlatform(){
@@ -149,6 +154,15 @@ export class ConversationListPage implements OnInit {
     }
   }
 
+  private translations(){
+    const keysConversation = ['CLOSED', 'Resolve']
+    const keysHeader = ['ProPlanTrial', 'FreePlan', 'PaydPlanNamePro', 'PaydPlanNameEnterprise']
+
+    this.translationMapConversation = this.translateService.translateLanguage( keysConversation )
+    this.translationMapHeader = this.translateService.translateLanguage( keysHeader )
+    
+  }
+
   listenSupportConvIdHasChanged() {
     this.events.subscribe('supportconvid:haschanged', (IDConv) => {
       // console.log('[CONVS-LIST-PAGE] - listen To convid:haschanged - convId', IDConv);
@@ -381,9 +395,7 @@ export class ConversationListPage implements OnInit {
   // }
 
   initArchivedConversationsHandler() {
-    const keysConversation = ['CLOSED', 'Resolve']
-    this.translationMapConversation = this.translateService.translateLanguage( keysConversation )
-
+    
     this.archivedConversationsHandlerService.subscribeToConversations(() => {
       this.logger.log('[CONVS-LIST-PAGE]-CONVS - conversations archived length ',this.archivedConversations.length)
     })
@@ -465,6 +477,76 @@ export class ConversationListPage implements OnInit {
     this.events.subscribe('storage:sound', value => this.sound_btn = value)
   }
 
+  listenToCurrentStoredProject() {
+    this.events.subscribe('storage:last_project', projectObjct => {
+      if (projectObjct && projectObjct !== 'undefined') {
+        // console.log('[CONVS-LIST-PAGE] - GET STORED PROJECT ', projectObjct)
+
+        this.project = {
+          _id: projectObjct['id_project']['_id'],
+          name: projectObjct['id_project']['name'],
+          type: projectObjct['id_project']['profile']['type'],
+          isActiveSubscription: projectObjct['id_project']['isActiveSubscription'],
+          plan_name: projectObjct['id_project']['profile']['name']
+        }
+
+        const trial_expired = projectObjct['id_project']['trialExpired']    
+        const profile_name = projectObjct['id_project']['profile']['name'];
+      
+        if (this.project.type === 'free') {
+
+          if (trial_expired === false) {
+            this.profile_name_translated = this.translationMapHeader.get('ProPlanTrial');
+          } else if (trial_expired === true) {
+             this.profile_name_translated = this.translationMapHeader.get('FreePlan');
+          }
+        } else if (this.project.type === 'payment' && profile_name === 'pro') {
+          this.profile_name_translated = this.translationMapHeader.get('PaydPlanNamePro');
+        } else if (this.project.type === 'payment' && profile_name === 'enterprise') {
+          this.profile_name_translated = this.translationMapHeader.get('PaydPlanNameEnterprise');
+        }
+      }
+    })
+
+    try {
+      // this.tiledeskToken = this.appStorageService.getItem('tiledeskToken');
+      // console.log('[SIDEBAR-USER-DETAILS] - GET STORED TOKEN ', this.tiledeskToken)
+    } catch (err) {
+      this.logger.error('[CONVS-LIST-PAGE] - GET STORED TOKEN ', err)
+    }
+  }
+
+  listenTocurrentProjectUserUserAvailability$() {
+    this.wsService.currentProjectUserAvailability$.pipe(skip(1)).subscribe((projectUser) => {
+        this.logger.log('[CONVS-LIST-PAGE] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS RES ', projectUser);
+
+        if (projectUser) {
+          if (projectUser['user_available'] === false && projectUser['profileStatus'] === 'inactive') {
+            // console.log('teammateStatus ', this.teammateStatus) 
+            this.selectedStatus = this.teammateStatus[2].id;
+            this.logger.debug('[CONVS-LIST-PAGE] - 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;
+            this.logger.debug('[CONVS-LIST-PAGE] - 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)
+            this.logger.debug('[CONVS-LIST-PAGE] - PROFILE_STATUS selected option', this.teammateStatus[0].name);
+          }
+          // this.IS_BUSY = projectUser['isBusy']
+          // this.USER_ROLE = projectUser['role']
+          // this.translateUserRole(this.USER_ROLE)
+        }
+
+      }, (error) => {
+        this.logger.error('[CONVS-LIST-PAGE] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS error ', error);
+      }, () => {
+        this.logger.log('[CONVS-LIST-PAGE] - $UBSC TO WS USER AVAILABILITY & BUSY STATUS * COMPLETE *');
+      })
+  }
+
   // ------------------------------------------------------------------
   //  SUBSCRIPTIONS
   // ------------------------------------------------------------------
@@ -868,12 +950,12 @@ export class ConversationListPage implements OnInit {
   // Opens logged user profile modal
   // ---------------------------------------------------------
   openProfileInfo(event: any) {
-    const TOKEN = this.messagingAuthService.getToken()
+    const TOKEN = this.tiledeskAuthService.getTiledeskToken()
     this.logger.log('[CONVS-LIST-PAGE] open ProfileInfoPage TOKEN ', TOKEN)
     if (checkPlatformIsMobile()) {
-      presentModal(this.modalController, ProfileInfoPage, { token: TOKEN })
+      presentModal(this.modalController, ProfileInfoPage, { token: TOKEN, selectedStatus: this.selectedStatus, project: this.project, profile_name_translated: this.profile_name_translated })
     } else {
-      this.navService.push(ProfileInfoPage, { token: TOKEN })
+      this.navService.push(ProfileInfoPage, { token: TOKEN, selectedStatus: this.selectedStatus, project: this.project, profile_name_translated: this.profile_name_translated })
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -14,7 +15,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 
 import { ProfileInfoPageRoutingModule } from './profile-info-routing.module';
 import { ProfileInfoPage } from './profile-info.page';
-import { TooltipModule } from 'ng2-tooltip-directive';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   imports: [
@@ -22,9 +23,10 @@ import { TooltipModule } from 'ng2-tooltip-directive';
     FormsModule,
     IonicModule,
     ProfileInfoPageRoutingModule,
-    TooltipModule,
     // AvatarModule,
     SharedModule,
+    NgSelectModule,
+    MatTooltipModule,
     TranslateModule.forChild({
       loader: {
         provide: TranslateLoader,

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

@@ -20,20 +20,18 @@
 
 
       <!-- <div class="avatar-container"> -->
-      <div class="avatar-container" [tooltip]="useruidTooltip" [options]="tooltipOptions" placement="top"
-        content-type="template" (click)="copyLoggedUserUID()">
+      <div class="avatar-container" tooltip="{{loggedUser.uid}}" placement="top"
+        contentType="template" (click)="copyLoggedUserUID()">
         <app-avatar-profile [itemAvatar]=itemAvatar></app-avatar-profile>
       </div>
-      <ng-template #useruidTooltip>
-        <span> {{loggedUser.uid}}</span>
-      </ng-template>
 
-      <div class="user-presence">
+
+      <!-- <div class="user-presence">
         <app-user-presence 
           [idUser]=loggedUser.uid 
           [translationMap]=translationMap>
         </app-user-presence>
-      </div>
+      </div> -->
 
 
       <!-- 
@@ -52,7 +50,7 @@
     </div>
   </div>
 
-  <ion-list *ngIf="loggedUser">
+  <div *ngIf="loggedUser" style="margin:10px">
     <!-- <ion-item lines="none" class="sidebar-items" (click)="onClickArchivedConversation()">
       <div tabindex="0"></div>
       <ion-icon name="archive-outline" class="sidebar-icons"></ion-icon>
@@ -61,15 +59,77 @@
       </ion-label>
     </ion-item> -->
 
-    <ion-item lines="none" class="sidebar-items" (click)="onLogout()">
-      <div tabindex="0"></div>
-      <ion-icon name="log-out-outline" class="sidebar-icons"></ion-icon>
-      <ion-label class="sidebar-labels">
-        <h3>{{ 'LABEL_LOGOUT' | translate }}</h3>
-      </ion-label>
-    </ion-item>
+    <section class="availability-section">
+      <!-- <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}}
+          </span>
+          <span *ngIf="!IS_AVAILABLE"
+              style="font-weight: 400 !important;text-transform: capitalize;font-size:14px; color:#a9afbb">
+              {{IS_UNAVAILABLE_msg}}
+          </span>
+      </mat-slide-toggle> -->
+      <ng-select style="text-align: left;" 
+        (change)="changeAvailabilityStateInUserDetailsSidebar(selectedStatus)" 
+        [(ngModel)]="selectedStatus" 
+        class="teammate-status-in-drawer profile-info" 
+        [items]="teammateStatus" 
+        bindLabel="name" bindValue="id"
+        [clearable]="false"
+        [searchable]="false">
+        <!-- {{teammateStatus.name}} -->
+          <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>
 
-  </ion-list>
+    <hr class="first-divider">
+
+    <section *ngIf="isVisiblePAY" class="user-details-plan-info">
+        <span class="material-icons user-details-plan-icon">apps</span>
+        <span>
+            <div> {{project?.name}} </div>
+            <div style="display: inline-block;    margin-left: 26px;"> {{ profile_name_translated }} </div>
+
+            <div *ngIf="project?.type === 'payment' && project?.isActiveSubscription === false"
+                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="{{ 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="{{ translationsMap.get('ThePlanHasExpired') }}"
+                    #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+                    error_outline
+                </i>
+            </div>
+        </span>
+    </section>
+
+    <section class="user-details-footer-section"
+        [ngClass]="{'footer-margin-top-pricing-no-visible': isVisiblePAY === false }">
+        <div role="button" class="logout-btn-wpr" (click)="onLogout()">
+            <i class="material-icons user-details-logout-icon" >
+                logout
+            </i>
+            <div class="user-details-logout-text"> 
+                 {{translationsMap.get('LABEL_LOGOUT')}} 
+            </div>
+        </div>
+    </section>
+
+  </div>
 
 </ion-content>
 

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

@@ -68,7 +68,78 @@
 //         }
 //     }
 
+.availability-section {
+    // top: 320px;
+    text-align: center;
+    background-color: #2d323e;
+    padding: 4px 0px;
+    width: 192px;
+    border-radius: 4px;
+    // -webkit-transform: translateX(-50%);
+    // transform: translateX(-50%);
+    // left: 50%;
+    margin: auto;
+    // position: absolute;
+}
+
+.first-divider {
+    // margin-top: 365px;
+    border: 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin-bottom: 20px;
+}
+
+.user-details-plan-info {
+    font-size: 13px;
+    text-transform: capitalize;
+    color: #a9afbb;
+    font-weight: 500;
+    line-height: 21px;
+}
+
+.user-details-plan-icon {
+    display: block;
+    float: left;
+    font-size: 20px;
+    margin-right: 6px;
+}
+
+.user-details-footer-section {
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    left: 50%;
+    margin: auto;
+    position: absolute;
+    text-align: center;
+
+    padding-bottom: 15px;
+    padding-top: 100px;
+    font-size: 16px;
+    font-weight: 400;
+    z-index: 1;
+    // bottom: 50px;
+    // bottom: 55px;
+    
+}
 
+.logout-btn-wpr {
+    cursor: pointer;
+    color: #fff;
+}
+
+.footer-margin-top-pricing-no-visible {
+    padding-top: 240px;
+}
+
+.user-details-logout-icon {
+    color: #a9afbb;
+    font-size: 30px;
+    // margin-top: 30px;
+}
+
+.user-details-logout-icon:hover {
+    color: #fff;
+}
 
 
 .current-user-profile {