@chat21/chat21-ionic 3.0.61-rc2 → 3.0.61-rc21

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -1,9 +1,9 @@
 <!-- [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" -->
 <!-- [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px'}" -->
 <!-- isImage >{{isImage(message) }}    message.metadata.width {{message?.metadata?.width }}  -->
-<div id="bubble-message" [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
-   class="messages primary-color"
-  [class.emoticon]="message?.emoticon">
+<div id="bubble-message"
+  [ngStyle]="{'padding': (isImage(message) || isFrame(message))?'0px':'0 8px', 'width': (isImage(message) || isFrame(message))? message?.metadata?.width + 'px' : null }"
+  class="messages primary-color" [class.emoticon]="message?.emoticon">
 
 
   <div>
@@ -18,19 +18,13 @@
 
     <!-- [width]="getMetadataSize(message.metadata).width" 
     [height]="getMetadataSize(message.metadata).height" -->
-    <chat-image *ngIf="isImage(message)" 
-      [metadata]="message.metadata"
-     
-      [width]="message.metadata.width" 
-      [height]="message.metadata.height"
-      (onImageRendered)="onImageRenderedFN($event)">
+    <chat-image *ngIf="isImage(message)" [metadata]="message.metadata" [width]="message.metadata.width"
+      [height]="message.metadata.height" (onImageRendered)="onImageRenderedFN($event)">
     </chat-image>
 
     <!-- [width]="getMetadataSize(message.metadata).width"  -->
     <!-- [height]="getMetadataSize(message.metadata).height"> -->
-    <chat-frame *ngIf="isFrame(message)" 
-      [metadata]="message.metadata"
-      [width]="message.metadata.width" 
+    <chat-frame *ngIf="isFrame(message)" [metadata]="message.metadata" [width]="message.metadata.width"
       [height]="message.metadata.height">
     </chat-frame>
 
@@ -40,36 +34,27 @@
       [height]="message.metadata.height">
     </chat-frame> -->
 
-    <!-- message type:: text -->
-    <!-- <div *ngIf="message.type == 'text'">  -->
-      
-    <div *ngIf="message?.text" [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left"
-      content-type="template" (click)="handleTooltipEvents($event)">
-      <ng-template #timeTooltipLeft>
-        <!-- <span>{{message.timestamp | amTimeAgo}}</span> -->
-        <!-- <span> {{browserLang === 'it' ? (message.timestamp| amDateFormat:'DD MMM') : (message.timestamp |
-        amDateFormat:'MMM DD')}} </span> amCalendar -->
 
+    <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
+    <div *ngIf="message?.text">
+      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
+      <!-- <ng-template #timeTooltipLeft>
         <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template>
+      </ng-template> -->
 
-      <chat-text 
-        [text]="message?.text" 
-        [color]="textColor" 
-        [message]="message"
+      <chat-text [text]="message?.text" [color]="textColor" [message]="message"
+      [class.chat-text-emoticon]="message?.emoticon"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
         (onAfterMessageRender)="returnOnAfterMessageRender($event)">
       </chat-text>
-      <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-      <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
+      <ng-container *ngIf="areVisibleCAR && support_mode === true">
+        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
+          (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container>
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -21,7 +21,6 @@
         font-variant: normal;
         font-weight: 300;
         overflow: hidden;
-        
     }
     img {
         border-radius: 8px;
@@ -32,20 +31,33 @@
         height: auto;
         object-fit: cover;
     }
+
     .message_innerhtml {
         margin: 0px;
         // padding: 0px 14px;
-        &.marked{
-            padding:8px;
-            margin-block-start: -1em!important;
-            margin-block-end: -1em!important;
+        &.marked {
+            padding: 8px;
+            margin-block-start: -1em !important;
+            margin-block-end: -1em !important;
         }
-        
+
         .text-message {
             padding-top: 14px;
         }
     }
-    
 }
+// > .button-native
+.btn-add-msg-as-canned-response {
+    // padding-left: 5px ;
+    // padding-right: 5px ;
+    border-radius: 50%;
+    --padding-end: 7px;
+    --padding-start: 7px;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%);
+}
+
+// .emoticon {
+//     padding: 35px 0px !important;
+// }
 
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -8,6 +8,8 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { TranslateService } from '@ngx-translate/core';
 import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page'
+import { ModalController } from '@ionic/angular';
 @Component({
   selector: 'chat-bubble-message',
   templateUrl: './bubble-message.component.html',
@@ -17,13 +19,15 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
 
   @Input() message: MessageModel;
   @Input() textColor: string;
+  @Input() areVisibleCAR: boolean;
+  @Input() support_mode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onImageRendered = new EventEmitter<boolean>()
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-
+  @Input() addAsCannedResponseTooltipText : string;
   public browserLang: string;
 
   tooltipOptions = {
@@ -41,46 +45,14 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   constructor(
     public sanitizer: DomSanitizer,
     private translate: TranslateService,
-    public tiledeskAuthService: TiledeskAuthService
-    
+    public tiledeskAuthService: TiledeskAuthService,
+    public modalController: ModalController,
     ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
-
     this.setMomentLocale()
-    // this.browserLang = this.translate.getBrowserLang();
-  
-    // if (this.browserLang) {
-    //   if (this.browserLang === 'it') {
-
-
-    //     moment.locale('it', {
-    //       calendar: {
-    //         lastDay: '[Ieri alle] LT',
-    //         sameDay: '[Oggi alle] LT',
-    //         nextDay: '[Domani alle] LT',
-    //         lastWeek: '[Ultimo] dddd [alle] LT',
-    //         nextWeek: 'dddd [alle] LT',
-    //         sameElse: 'lll'
-    //       }
-    //     });
-
-    //   } else {
-    //     moment.locale('en', {
-    //       calendar: {
-    //         lastDay: '[Yesterday at] LT',
-    //         sameDay: '[Today at] LT',
-    //         nextDay: '[Tomorrow at] LT',
-    //         lastWeek: '[last] dddd [at] LT',
-    //         nextWeek: 'dddd [at] LT',
-    //         sameElse: 'lll'
-    //       }
-    //     });
-    //   }
-    // }
-
   }
 
 
@@ -109,15 +81,18 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         sameElse: 'LLLL'
       }
     });
+    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
+    //   console.log('[BUBBLE-MESSAGE] translations: ', labels);
+    // });
   }
 
   ngOnChanges() {
-    // console.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    this.logger.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
+    this.logger.log('BUBBLE-MSG ngOnChanges areVisibleCAR', this.areVisibleCAR)
+    this.logger.log('BUBBLE-MSG ngOnChanges support_mode', this.support_mode)
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
-      // console.log('BUBBLE-MSG ngOnChanges message > metadata', this.message.metadata)
     }
-
   }
 
 
@@ -184,11 +159,11 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         const domRepresentation = document.getElementsByClassName('chat-tooltip');
         if (domRepresentation) {
           const item = domRepresentation[0] as HTMLInputElement;
-          if (!item.classList.contains('tooltip-show')) {
+          if (item && !item.classList.contains('tooltip-show')) {
             item.classList.add('tooltip-show');
           }
           setTimeout(function () {
-            if (item.classList.contains('tooltip-show')) {
+            if (item && item.classList.contains('tooltip-show')) {
               item.classList.remove('tooltip-show');
             }
           }, that.tooltipOptions['hideDelayAfterClick']);
@@ -224,6 +199,26 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onImageRendered.emit(event)
   }
 
+  async presentCreateCannedResponseModal(): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
+    const attributes = {
+       message: this.message,
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: CreateCannedResponsePage,
+      componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await modal.present()
+  }
+
+
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}
   //   this.onBeforeMessageRender.emit(messageOBJ)

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.scss

@@ -4,7 +4,7 @@
     margin-top: -6px;
     margin-bottom: 5px;
     height: auto;
-
+    padding-left: 8px;
 
     .div-button {
         display: inline-block;

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

@@ -118,12 +118,17 @@
   <ion-note *ngIf="!conversation.archived" class="conversation_time">{{conversation.timestamp | amTimeAgo}}</ion-note>
 
   <ion-buttons slot="end">
-    <ion-button *ngIf="!conversation.archived"  tooltip="{{ archive_btn_tooltip }}" [options]="tooltipOptions" placement="bottom"
+    <ion-button *ngIf="!conversation.archived" [tooltip]="archiveTooltip"  [options]="tooltip_options" placement="bottom"  content-type="template"
       [ngClass]="{'hide': !isApp, 'button-on-desktop': !isApp, 'button-on-mobile': isApp  }"
       id="{{ 'close_conversation_button' + conversation.uid }}" class="close-conversation-button" ion-button clear
       item-end (click)="closeConversation(conversation);$event.stopPropagation();" padding>
       <ion-icon slot="icon-only" style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}"
         color="close-conversation" name="archive-outline" item-end></ion-icon>
+
+        <ng-template #archiveTooltip>
+          <span *ngIf="conversation?.recipient.startsWith('support-group')"> {{ resolve_btn_tooltip}} </span>
+          <span *ngIf="!conversation?.recipient.startsWith('support-group')"> {{ archive_btn_tooltip }} </span>
+        </ng-template>
     </ion-button>
     <!-- <ion-button *ngIf="conversation.archived" class="close-conversation-button" ion-button clear item-end disabled padding>
       <!- - <ion-icon  style="display:block;" id="{{ 'close_button_icon' + conversation.uid }}" color="close-conversation" name="archive-outline" item-end></ion-icon> - ->

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;
@@ -36,15 +37,20 @@ export class IonListConversationsComponent extends ListConversationsComponent im
 
   public PROJECT_FOR_PANEL: any;
   public archive_btn_tooltip: string;
-
-  tooltipOptions = {
-    'show-delay': 1500,
+  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': 200
+    'hide-delay': 100
   };
   /**
    * 
@@ -57,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();
@@ -88,18 +94,59 @@ 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.translateLbl();
+    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.
   }
 
-  translateLbl() {
+
+  translateLbls() {
     this.translate.get('Resolve')
       .subscribe((text: string) => {
-        // this.deleteContact_msg = text;
-        
+        this.resolve_btn_tooltip = text;
+      });
 
+    this.translate.get('Archive')
+      .subscribe((text: string) => {
         this.archive_btn_tooltip = text;
-       console.log('[ION-LIST-CONVS-COMP] getTranslations Resolve : ', 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;
       });
   }
 
@@ -126,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();
+
+
   }
 
 
@@ -153,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,49 +1,40 @@
-
 <ion-header no-border class="ion-no-border">
   <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()">        
@@ -54,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;
@@ -150,6 +150,7 @@ ion-header {
 
 .tile-info-with-ios {
     left: 82px !important;
+    top: 10px!important;
 }
 
 .user-presence-ios {
@@ -158,4 +159,9 @@ ion-header {
 
 .avatar-container-ios {
     left: 55px;
+    top: 10px;
+}
+
+.resolve-conv-margin-right {
+    margin-right: 52px;
 }