@chat21/chat21-ionic 3.0.60 → 3.0.61-rc11

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, IterableDiffers, KeyValueDiffers, OnInit, Output, SimpleChange } from '@angular/core';
 import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
 import { convertMessage } from 'src/chat21-core/utils/utils';
@@ -9,12 +9,11 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 
 import * as moment from 'moment';
-// import { EventsService } from 'src/app/services/events-service';
-// import { TiledeskService } from '../../../services/tiledesk/tiledesk.service';
 import { NetworkService } from '../../../services/network-service/network.service';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { AlertController } from '@ionic/angular';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -25,8 +24,10 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 })
 export class IonListConversationsComponent extends ListConversationsComponent implements OnInit {
 
+  @Input() archiveActionNotAllowed: boolean;
   @Input() uidConvSelected: string;
   @Output() onCloseConversation = new EventEmitter<ConversationModel>();
+  @Output() onCloseAlert = new EventEmitter();
 
   convertMessage = convertMessage;
   isApp: boolean = false;
@@ -35,7 +36,22 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public browserLang: string;
 
   public PROJECT_FOR_PANEL: any;
-
+  public archive_btn_tooltip: string;
+  public resolve_btn_tooltip: string;
+  public alert_lbl: string;
+  public actionNotAllowed_lbl: string;
+  public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
+public ok_lbl: string;
+
+  tooltip_options = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 100
+  };
   /**
    * 
    * @param iterableDiffers 
@@ -47,12 +63,12 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     public kvDiffers: KeyValueDiffers,
     public platform: Platform,
     private translate: TranslateService,
-    // private events: EventsService,
-    // private tiledeskService: TiledeskService,
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
-    public tiledeskAuthService: TiledeskAuthService
+    public tiledeskAuthService: TiledeskAuthService,
+    public alertController: AlertController
+
   ) {
     super(iterableDiffers, kvDiffers)
     this.setMomentLocale();
@@ -78,6 +94,60 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
     // console.log('[ION-LIST-CONVS-COMP] - DASHBOARD_BASE_URL ', DASHBOARD_BASE_URL)
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
+    this.translateLbls();
+
+  }
+  ngOnInit() {
+    this.isApp = this.platform.is('ios') || this.platform.is('android')
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+
+  }
+
+  ngOnChanges(changes: { [property: string]: SimpleChange }) {
+    // Extract changes to the input property by its name
+    let change: SimpleChange = changes['archiveActionNotAllowed'];
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnChanges change ', change);
+    // console.log('[ION-LIST-CONVS-COMP] - ngOnChanges change currentValue ', change.currentValue)
+    if (change && change.currentValue === true) {
+      this.pesentAlertActionNotAllowed()
+    }
+    // Whenever the data in the parent changes, this method gets triggered. You 
+    // can act on the changes here. You will have both the previous value and the 
+    // current value here.
+  }
+
+
+  translateLbls() {
+    this.translate.get('Resolve')
+      .subscribe((text: string) => {
+        this.resolve_btn_tooltip = text;
+      });
+
+    this.translate.get('Archive')
+      .subscribe((text: string) => {
+        this.archive_btn_tooltip = text;
+      });
+
+    this.translate.get('ALERT_TITLE')
+      .subscribe((text: string) => {
+        this.alert_lbl = text;
+      });
+
+      this.translate.get('ActionNotAllowed')
+      .subscribe((text: string) => {
+        this.actionNotAllowed_lbl = text;
+      });
+
+      this.translate.get('YouAreNoLongerAmongTheTeammatesManagingThisConversation')
+      .subscribe((text: string) => {
+        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = text;
+      });
+
+      this.translate.get('CLOSE_ALERT_CONFIRM_LABEL')
+      .subscribe((text: string) => {
+        this.ok_lbl = text;
+      });
   }
 
   setMomentLocale() {
@@ -103,10 +173,29 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     moment.locale(chat_lang)
   }
 
-  ngOnInit() {
-    this.isApp = this.platform.is('ios') || this.platform.is('android')
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
-    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
+
+
+  async pesentAlertActionNotAllowed() {
+
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: this.alert_lbl,
+      subHeader: this.actionNotAllowed_lbl,
+      message: this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl,
+      buttons: [
+        {
+          text: this.ok_lbl,
+          handler: () => {
+            this.alertClosed();
+            // console.log('Confirm Okay');
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+
+
   }
 
 
@@ -130,7 +219,9 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   //   });
   // }
 
-
+  alertClosed() {
+    this.onCloseAlert.emit(true)
+  }
 
   closeConversation(conversation: ConversationModel) {
     var conversationId = conversation.uid;

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

@@ -1,50 +1,40 @@
-
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar>
-    
-    <ion-buttons slot="start">
+  <ion-toolbar style="height:60px">
+    <ion-buttons slot="start" style="height:60px">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text="" *ngIf="isMobile" (click)="goBackToConversationList()">
-      </ion-back-button> 
+      </ion-back-button>
     </ion-buttons>
 
     <ion-title [class.info-open]="openInfoConversation || openInfoMessage">
 
-      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr">
+      <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div *ngIf="conversationAvatar" class="avatar-container" [ngClass] = "{ 'avatar-container-ios': platformName === 'ios' }">
-          <app-avatar-profile
-            [itemAvatar] = conversationAvatar
-          ></app-avatar-profile>
+        <div *ngIf="conversationAvatar" class="avatar-container" (click)="onOpenCloseInfoConversation()" style="cursor: pointer"
+          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+          <app-avatar-profile [itemAvatar]=conversationAvatar></app-avatar-profile>
         </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>
+        <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>
         </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>
+          <app-user-typing [idConversation]=conversationAvatar.uid [idCurrentUser]=idLoggedUser [isDirect]=isDirect
+            [translationMap]=translationMap [color]=fontColor [membersConversation]=membersConversation>
+          </app-user-typing>
         </div>
 
       </div>
       <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
-      <div *ngIf="conversationAvatar" class="tile-info-with" (click)="onOpenCloseInfoConversation()" 
-      [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' }">        
+      <!-- (click)="onOpenCloseInfoConversation()" -->
+      <div *ngIf="conversationAvatar" class="tile-info-with" 
+        [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
         <!-- <span class="tile-username">{{ conversationAvatar.conversation_with_fullname }} </span> -->
         <span class="tile-username">{{ conversation_with_fullname }} </span>
-        
+
       </div>
 
       <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
@@ -55,15 +45,28 @@
     <!-- openInfoConversation  {{openInfoConversation}} -->
     <ion-buttons slot="end">
 
-          <ion-button  *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
-            <ion-icon slot="icon-only"  name="information-circle-outline"></ion-icon>
-            <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
-          
-          </ion-button>
-          <ion-button  *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
-            <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
-          </ion-button>
+      <!-- <ion-button ion-button fill="clear" color="primary" size="small" (click)="presentCreateTicketModal()" [ngClass]="{'resolve-conv-margin-right': !isMobile}">
+        <ion-icon name="ticket-outline"></ion-icon>
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Crea ticket' | translate}} </span>
+      </ion-button> -->
+
+      <ion-button *ngIf="idConv.startsWith('support-group') && conv_type !== 'archived'" ion-button fill="clear" color="primary" size="small" 
+      (click)="closeConversation()" [ngClass]="{'resolve-conv-margin-right': !isMobile}" [disabled]="conv_closed === true">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon name="archive-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+        <span style="text-transform: capitalize; margin-left: 5px;"> {{ 'Resolve' | translate}} </span>
+      </ion-button>
+
+      <ion-button *ngIf="!openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <!-- <ion-icon slot="icon-only" name="alert-circle-outline"></ion-icon> -->
+        <ion-icon slot="icon-only" name="information-circle-outline"></ion-icon>
+        <!-- <ion-icon slot="icon-only"  name="information-outline"></ion-icon> -->
+
+      </ion-button>
+      <ion-button *ngIf="openInfoConversation" ion-button fill="clear" (click)="onOpenCloseInfoConversation()">
+        <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
+      </ion-button>
 
     </ion-buttons>
 

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

@@ -58,7 +58,7 @@ ion-header {
         top: 0;
         left: 50px;
         vertical-align: middle;
-        cursor: pointer;
+        // cursor: pointer;
     }
     .tile-point {
         width: 10px;
@@ -158,4 +158,8 @@ ion-header {
 
 .avatar-container-ios {
     left: 55px;
+}
+
+.resolve-conv-margin-right {
+    margin-right: 52px;
 }

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

@@ -1,133 +1,215 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service'
 
 // Logger
-import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
-import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
-import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
-import { Platform } from '@ionic/angular';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service'
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
+import {
+  setConversationAvatar,
+  setChannelType,
+} from 'src/chat21-core/utils/utils'
+import { Platform } from '@ionic/angular'
+
+import { ModalController } from '@ionic/angular'
+import { EventsService } from 'src/app/services/events-service'
+import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
+
 @Component({
   selector: 'app-header-conversation-detail',
   templateUrl: './header-conversation-detail.component.html',
   styleUrls: ['./header-conversation-detail.component.scss'],
 })
 export class HeaderConversationDetailComponent implements OnInit, OnChanges {
-  @Input() conversationAvatar: any;
-  @Input() idLoggedUser: string;
-  @Input() isOpenInfoConversation: boolean;
-  @Input() isMobile: boolean;
-  @Input() translationMap: Map<string, string>;
-  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>();
+  @Input() conversationAvatar: any
+  @Input() idLoggedUser: string
+  @Input() conv_type: string
+  @Input() isOpenInfoConversation: boolean
+  @Input() isMobile: boolean
+  @Input() translationMap: Map<string, string>
+  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
   conversationWithFullname: string
-  openInfoConversation = true;
-  openInfoMessage = true;
-  DIRECT = 'direct';
-
-  isDirect = false;
-  isTyping = false;
-  borderColor = '#ffffff';
-  fontColor = '#949494';
-  membersConversation = ['SYSTEM'];
-  fullNameConv: string;
-  idConv: string;
-  conversation_with_fullname: string;
-  platformName: string;
-
-  private logger: LoggerService = LoggerInstance.getInstance();
+  openInfoConversation = true
+  openInfoMessage = true
+  DIRECT = 'direct'
+
+  isDirect = false
+  isTyping = false
+  borderColor = '#ffffff'
+  fontColor = '#949494'
+  membersConversation = ['SYSTEM']
+  fullNameConv: string
+  idConv: string
+  conversation_with_fullname: string
+  platformName: string
+  conv_closed: boolean = false;
+
+  private logger: LoggerService = LoggerInstance.getInstance()
 
   /**
    * Constructor
-   * @param imageRepoService 
+   * @param imageRepoService
    */
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
     public platform: Platform,
-    private router: Router
+    private router: Router,
+    // public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService,
+    public events: EventsService,
+    public modalController: ModalController,
   ) {
-    this.route.paramMap.subscribe(params => {
-
-
+    this.route.paramMap.subscribe((params) => {
       // this.conversationWithFullname = params.get('FullNameConv');
-      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params);
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params)
       this.fullNameConv = params.get('FullNameConv')
-      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ', this.fullNameConv);
-      this.idConv = params.get('IDConv');
-      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with: ', this.idConv);
-    });
+      this.logger.log(
+        '[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ',
+        this.fullNameConv,
+      )
+      this.idConv = params.get('IDConv')
+      this.logger.log(
+        '[CONVS-DETAIL][HEADER] -> params > conversation_with: ',
+        this.idConv,
+      )
+    })
   }
 
   // ----------------------------------------------------
   // @ Lifehooks
   // ----------------------------------------------------
   ngOnInit() {
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser);
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar);
+   
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser, )
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar, )
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) -  conv_type', this.conv_type, )
     this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
-
-    this.initialize();
+    this.listenToConversationHasBeenClosed()
+    this.initialize()
   }
 
   ngOnChanges() {
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar);
+    this.logger.log(
+      '[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar',
+      this.conversationAvatar,
+    )
     if (this.conversationAvatar) {
-      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
+        this.conversationAvatar.uid,
+      )
     } else {
-      const channelType = setChannelType(this.idConv);
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType);
+      const channelType = setChannelType(this.idConv)
+      this.logger.log(
+        '[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ',
+        channelType,
+      )
       this.conversationAvatar = setConversationAvatar(
         this.idConv,
         this.fullNameConv,
         channelType,
-      );
+      )
       if (this.conversationAvatar) {
-        this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+        this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(
+          this.conversationAvatar.uid,
+        )
       }
-      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar);
+      this.logger.log(
+        '[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar',
+        this.conversationAvatar,
+      )
     }
 
-    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation', this.isOpenInfoConversation);
-    this.openInfoConversation = this.isOpenInfoConversation;
+    this.logger.log(
+      '[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation',
+      this.isOpenInfoConversation,
+    )
+    this.openInfoConversation = this.isOpenInfoConversation
   }
 
-
   // ----------------------------------------------------
   // @ Initialize (called in ngOnInit)
   // ----------------------------------------------------
   initialize() {
     this.getPlatformName()
-    if (this.conversationAvatar && this.conversationAvatar.channelType === this.DIRECT) {
-      this.isDirect = true;
+    if (
+      this.conversationAvatar &&
+      this.conversationAvatar.channelType === this.DIRECT
+    ) {
+      this.isDirect = true
     } else if (this.idLoggedUser) {
-      this.membersConversation.push(this.idLoggedUser);
+      this.membersConversation.push(this.idLoggedUser)
     }
   }
 
   getPlatformName() {
-    this.logger.log('getPlatformName this.platform', this.platform) 
+    this.logger.log('getPlatformName this.platform', this.platform)
     if (this.platform.is('ios')) {
       this.platformName = 'ios'
-      this.logger.log('getPlatformName platformName', this.platformName) 
-    } else if (this.platform.is('android')){
+      this.logger.log('getPlatformName platformName', this.platformName)
+    } else if (this.platform.is('android')) {
       this.platformName = 'android'
-      this.logger.log('getPlatformName platformName', this.platformName) 
+      this.logger.log('getPlatformName platformName', this.platformName)
     }
+  }
 
+  closeConversation() {
+    this.events.publish('hasclosedconversation', this.idConv)
   }
 
+  listenToConversationHasBeenClosed() {
+    this.events.subscribe('conversationhasbeenclosed', (convId) => {
+      // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
+        if (convId === this.idConv) {
+          this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
+          this.conv_closed = true;
+        }
+    });
+  }
+
+  
+
   onOpenCloseInfoConversation() {
-    this.openInfoMessage = false;
-    this.openInfoConversation = !this.openInfoConversation;
-    this.logger.log('[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ', this.openInfoConversation);
-    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation);
+    this.openInfoMessage = false
+    this.openInfoConversation = !this.openInfoConversation
+    this.logger.log(
+      '[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ',
+      this.openInfoConversation,
+    )
+    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation)
   }
 
   /** */
-  pushPage(event) { }
+  pushPage(event) {}
 
   goBackToConversationList() {
-    this.router.navigateByUrl('/conversations-list');
+    this.router.navigateByUrl('/conversations-list')
   }
 
+  // -----------------------------------------------------------------
+  // PRESENT MODAL CREATE TICKET (MOVED IN ddp-deader.component.ts)
+  // -----------------------------------------------------------------
+  // async presentCreateTicketModal(e: any): Promise<any>{
+
+  //   // const attributes = {  enableBackdropDismiss: false };
+  //   const modal: HTMLIonModalElement =
+  //     await this.modalController.create({
+  //       component: CreateTicketPage,
+  //       // componentProps: attributes,
+  //       swipeToClose: false,
+  //       backdropDismiss: false
+  //     });
+  //   modal.onDidDismiss().then((detail: any) => {
+  //     this.logger.log('[CONVS-DETAIL][HEADER] ', detail.data);
+  //   });
+  //   return await modal.present();
+  // }
 }

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -42,7 +42,7 @@
       
         <ng-container *ngIf="areVisibleCAR">
         <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top">
-          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION">
+          <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
           </ion-button>
         </div>
@@ -56,7 +56,7 @@
 
  
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
-          <ion-button ion-button fill="clear" class="upload-image-btn">
+          <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
             <ion-icon slot="icon-only" lazy="true" name="attach-outline"
               style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
             <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
@@ -70,7 +70,7 @@
       <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
-          [(ngModel)]="messageString" (ionChange)="ionChange($event);"
+          [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"
           (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>
       </div>