@chat21/chat21-ionic 3.0.85 → 3.0.86-rc.2

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

@@ -1,3 +1,4 @@
+import { TYPE_GROUP } from './../../../../chat21-core/utils/constants';
 import {
   Component,
   OnInit,
@@ -12,17 +13,13 @@ import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.
 // 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 { 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'
-import { TYPE_DIRECT } from 'src/chat21-core/utils/constants'
+import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants'
 
 @Component({
   selector: 'app-header-conversation-detail',
@@ -34,24 +31,22 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
   @Input() idLoggedUser: string
   @Input() conversationUid: string
   @Input() conv_type: string
-  @Input() isOpenInfoConversation: boolean = true
   @Input() isMobile: boolean
-  @Input() translationMap: Map<string, string>
-  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>()
+  @Input() translationsMap: Map<string, string>
   conversationWithFullname: string
   openInfoConversation = true
-  openInfoMessage = true
-
+  
   isDirect = false
-  isTyping = false
   borderColor = '#ffffff'
   fontColor = '#949494'
-  membersConversation = ['SYSTEM']
   platformName: string
-  conv_closed: boolean = false;
+  // conv_closed: boolean = false;
   IS_ON_IOS_MOBILE_DEVICE: boolean
   private logger: LoggerService = LoggerInstance.getInstance()
 
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP
+  TYPE_GROUP = TYPE_GROUP
+
   constructor(
     public imageRepoService: ImageRepoService,
     private route: ActivatedRoute,
@@ -72,8 +67,7 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     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.listenToConversationHasBeenClosed()
-    this.initialize();
+    // this.listenToConversationHasBeenClosed()
     // this.isOniOSMobileDevice()
   }
 
@@ -91,8 +85,8 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar)
     if (this.conversationAvatar) {
       this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
-    } 
-    this.openInfoConversation = this.isOpenInfoConversation
+      this.initialize()
+    }
   }
 
   // ----------------------------------------------------
@@ -102,8 +96,6 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     this.getPlatformName()
     if ( this.conversationAvatar && this.conversationAvatar.channelType === TYPE_DIRECT ) {
       this.isDirect = true
-    } else if (this.idLoggedUser) {
-      this.membersConversation.push(this.idLoggedUser)
     }
   }
 
@@ -118,32 +110,20 @@ export class HeaderConversationDetailComponent implements OnInit, OnChanges {
     }
   }
 
-  closeConversation() {
-    this.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
-    this.events.publish('conversation:closed', this.conversationUid)
-  }
-
-  listenToConversationHasBeenClosed() {
-    this.events.subscribe('conversationhasbeenclosed', (convId) => {
-      // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
-      if (convId === this.conversationUid) {
-        this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
-        this.conv_closed = true;
-      }
-    });
-  }
-
-
+  // closeConversation() {
+  //   this.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
+  //   this.events.publish('conversation:closed', this.conversationUid)
+  // }
 
-  onOpenCloseInfoConversation() {
-    this.openInfoMessage = false
-    this.openInfoConversation = !this.openInfoConversation
-    this.logger.log(
-      '[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ',
-      this.openInfoConversation,
-    )
-    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation)
-  }
+  // listenToConversationHasBeenClosed() {
+  //   this.events.subscribe('conversationhasbeenclosed', (convId) => {
+  //     // console.log('[CONVS-DETAIL][HEADER] conversationhasbeenclosed  convId', convId)
+  //     if (convId === this.conversationUid) {
+  //       this.logger.log('[CONVS-DETAIL][HEADER] the conversation was closed',)
+  //       this.conv_closed = true;
+  //     }
+  //   });
+  // }
 
   /** */
   pushPage(event) { }

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

@@ -0,0 +1,116 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar style="height:60px">
+    <div class="flex-container">
+      <div class="back-flex-container">
+        <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-buttons>
+      </div>
+      <div class="user-info-flex-container">
+        <div style="display: flex;">
+          <div>1</div>
+          <div>2</div>
+        </div>
+      </div>
+
+      <div class="resolve-flex-container">
+        <ion-buttons slot="end">
+
+          <!-- <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="conversationUid?.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>
+      </div>
+
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+
+
+
+<ion-title>
+
+  <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" >
+    <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
+    <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>
+      </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>
+    </div>
+
+  </div>
+  <!-- [ngClass] = "{ 'tile-info-with-ios': platformName === 'ios' ? '82px' : ''82px''  }" -->
+  <!-- (click)="onOpenCloseInfoConversation()" -->
+  <div *ngIf="conversationAvatar" class="tile-info-with" 
+    [ngClass]="{ 'tile-info-with-ios': platformName === 'ios' }">
+    <span class="tile-username">{{ conversationAvatar.conversation_with_fullname | truncate:50 }} </span>
+    <!-- <span class="tile-username">{{ conversation_with_fullname }} </span> -->
+
+  </div>
+
+  <!-- <div *ngIf="conversationWithFullname" class="tile-info-with" (click)="onOpenCloseInfoConversation()">        
+    <span class="tile-username">{{ conversationWithFullname }} </span>
+  </div> -->
+
+</ion-title>
+<!-- openInfoConversation  {{openInfoConversation}} -->
+<ion-buttons slot="end">
+
+  <!-- <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="conversationUid?.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/message-text-area/message-text-area.component.html

@@ -1,66 +1,56 @@
-<!-- <ion-grid>
-  <ion-row id="message-text-area">
+<ion-grid>
+  <div class="footer-options-container">
+    <!-- CHAT-OPTION -->
+    <div class="section-option" id="chat"  tooltip="{{translationMap?.get('LABEL_CHAT')}}" [options]="tooltipOptions" placement="top">
+      <ion-button fill="clear" (click)="onOpenSection('chat')" [class.active]="section==='chat'">
+        <ion-icon name="chatbubbles"></ion-icon>
+        {{translationMap.get('LABEL_CHAT')}}
+      </ion-button>
+    </div>
+    <!-- EMAIL-OPTION -->
+    <div class="section-option" id="email"  tooltip="{{translationMap?.get('LABEL_EMAIL')}}" [options]="tooltipOptions" placement="top">
+      <ion-button fill="clear" [class.active]="section==='email'" (click)="onOpenSection('email')" [disabled]="channelType === 'direct'">
+        <ion-icon name="mail-open"></ion-icon>
+        {{translationMap.get('LABEL_EMAIL')}}
+      </ion-button>
+    </div>
+  </div>
+
+  <ion-row id="message-email" [style.display]="section==='email'? 'flex': 'none'">
     <ion-col col-auto>
-      <div class="buttons-left">
-
-        <ion-button ion-button fill="clear" class="upload-image-btn">
-          <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"
-            [accept]="fileUploadAccept">
-        </ion-button>
-      </div>
-
-      <div class="text-message">
-        <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);"
-          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
-        </ion-textarea>
-      </div>
-
-      <div class="buttons-right">
-        <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
-          (click)="sendMessage(messageString)">
-          <ion-icon
-            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
-            slot="icon-only" name="send"></ion-icon>
-        </ion-button>
-      </div>
+      <div *ngIf="leadInfo?.hasEmail" class="placeholder" (click)="onOpenEmailModal()">{{translationMap.get('EMAIL_PLACEHOLDER')}}</div>
+      <div *ngIf="!leadInfo?.hasEmail" class="placeholder noEmail">{{translationMap.get('EMAIL_NOT_FOUND_PLACEHOLDER')}}</div>
     </ion-col>
   </ion-row>
-</ion-grid> -->
 
-<!-- --------------------------------------------------------------------------------------------------------------------- -->
-<!-- ----------new -->
-<ion-grid>
-  <ion-row id="message-text-area">
+  <ion-row id="message-text-area" [style.display]="section==='chat'? 'flex': 'none'">
 
     <ion-col col-auto>
 
       <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
+        <!-- CANNED RESPONSES -->
         <ng-container *ngIf="areVisibleCAR && supportMode">
           <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 || disableTextarea">
+              [disabled]="!conversationWith?.startsWith(TYPE_SUPPORT_GROUP) || disableTextarea">
               <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
             </ion-button>
           </div>
-          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0"
+          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount === 0"
             tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="no-canned-responses-btn-badge">
             <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
-          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0"
+          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount > 0"
             tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="canned-responses-btn-badge">
             <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
         </ng-container>
 
-
+        <!-- UPLOAD ATTACHMENT -->
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"
           placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
@@ -95,7 +85,8 @@
             [perLine]="emojiPerLine" 
             [style.visibility]="showEmojiPicker?'visible':'hidden'"  
             [include]="emojiiCategories"
-            [color]="emojiColor" 
+            [color]="emojiColor"
+            [custom]="customEmojis"
             [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }"
             (emojiSelect)="addEmoji($event)">
           </emoji-mart>
@@ -110,12 +101,18 @@
 
       <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || supportMode === 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);" [disabled]="disableTextarea"
-          (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
+          [placeholder]="translationMap?.get('LABEL_ENTER_MSG_SHORT')" 
+          autosize="false" 
+          auto-grow="true" 
+          autofocus="true" 
+          [value]=""
+          [disabled]="disableTextarea"
+          [(ngModel)]="messageString" 
+          (ionChange)="ionChange($event);" 
+          (keydown.enter)="onKeydown($event, messageString)" 
+          (paste)="onPaste($event)">
         </ion-textarea>
       </div>
-
       <div class="buttons-right">
         <ion-button [disabled]="conversationEnabled === false" class="send-button right active" ion-button fill="clear"
           (click)="sendMessage(messageString)">

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

@@ -1,9 +1,76 @@
+.footer-options-container{
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 0px 16px 0px;
+    border-bottom: 1px solid rgb(239, 242, 246);
+    border-top: 3px solid var(--basic-blue);
+
+    .section-option{
+        line-height: 16px;
+        letter-spacing: -0.01em;
+        color: rgb(100, 116, 145);
+        position: relative;
+        display: flex;
+        align-items: flex-end;
+        border-radius: 4px;
+
+        ion-button{
+            color: rgb(135, 150, 175);
+            font-size: 11px;
+            margin: 2px;
+            padding-bottom: 0px;
+            --padding-start: 0px;
+            --ripple-color: transparent;
+            text-transform: unset;
+            height: 25px;
+            &.active{
+                color: var(--basic-blue);
+            }
+            ion-icon{
+                margin-right: 4px;
+                margin-left: 4px;
+            }
+        }
+    }
+}
+
+#message-email{
+    min-height: 40px;
+    max-height: 200px;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+
+    div.placeholder{
+        padding: 0;
+        margin: 0;
+        height: auto;
+        overflow: auto;
+        // min-height: 30px;
+        min-height: 37px; // NK edited
+        max-height: 37px; //184px;
+        padding: 9px 20px 9px;
+        cursor: pointer;
+
+        &.noEmail{
+            color: red;
+            cursor: not-allowed;
+            font-size: 12px
+        }
+    }
+}
 #message-text-area {
     min-height: 40px;
     max-height: 200px;
     height: auto;
     padding: 0;
     margin: 0;
+
+    ion-icon{
+        color: var(--basic-blue);
+    }
     .buttons-left {
         position: absolute;
         left: 0;
@@ -165,10 +232,6 @@
     border-radius: 50%;
 }
 
-.send-msg-activated {
-    color: #3880ff !important;
-}
-
 .send-msg-disabled {
     cursor: default;
     opacity: 0.8;