@chat21/chat21-ionic 3.0.5-9.2 → 3.0.6-2.3

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

@@ -1,133 +1,218 @@
-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;
+  IS_ON_IOS_MOBILE_DEVICE: boolean
+  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.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
 
+    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.listenToConversationHasBeenClosed()
     this.initialize();
+    // this.isOniOSMobileDevice()
+  }
+
+  isOniOSMobileDevice() {
+    this.IS_ON_IOS_MOBILE_DEVICE = false;
+    if (/iPad|iPhone|iPod/i.test(window.navigator.userAgent)) {
+      this.IS_ON_IOS_MOBILE_DEVICE = true;
+
+    }
+    // console.log('[CONVS-DETAIL][HEADER] IS_ON_IOS_MOBILE_DEVICE ', this.IS_ON_IOS_MOBILE_DEVICE)
+    return this.IS_ON_IOS_MOBILE_DEVICE;
   }
 
   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.logger.log('[CONVS-DETAIL][HEADER] click on RESOLVE this.events', this.events) 
+    this.events.publish('conversation:closed', 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) { }
 
   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

@@ -1,64 +1,126 @@
-<ion-grid>
+<!-- <ion-grid>
   <ion-row id="message-text-area">
-
     <ion-col col-auto>
-
       <div class="buttons-left">
-    
-        <!-- <ion-button class="attach-button" ion-button fill="clear" style="display: none;">
-          <input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput" />
-          <label for="fileInput" icon-only ion-button>
-            <ion-icon slot="icon-only" name="attach"></ion-icon>
-          </label>
-        </ion-button> -->
 
         <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>
-          <!-- <ion-label slot="end">Upload Image</ion-label> -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, .pdf,.zip"> -->
-          <!-- https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv?rq=1 -->
-          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, audio/* ,video/*, text/html, text/plain, .csv, .pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .scss, .css, .json"> -->
+          <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">
-        <!-- [value]=""  -->
-        <!-- placeholder="{{ 'LABEL_ENTER_MSG' | translate }}" -->
-        <!-- (ionBlur)="txtfocus(0)" -->
-        <!-- autofocus="true" -->
-        <!-- autoFocus="true" // directive -->
-
-        <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 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>
-        <!-- (ionInput)="onChange($event);" -->
       </div>
 
       <div class="buttons-right">
-        <!-- [disabled]="conversationEnabled === false" -->
-        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
+        <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-icon
+            [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }"
+            slot="icon-only" name="send"></ion-icon>
         </ion-button>
       </div>
     </ion-col>
+  </ion-row>
+</ion-grid> -->
+
+<!-- --------------------------------------------------------------------------------------------------------------------- -->
+<!-- ----------new -->
+<ion-grid>
+  <ion-row id="message-text-area">
+
+    <ion-col col-auto>
 
+      <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
+        <ng-container *ngIf="areVisibleCAR && support_mode === true">
+          <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">
+              <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"
+            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"
+            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>
 
 
-  </ion-row>
+        <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">
+            <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>
+
+        <!-- <ion-icon (click)="showEmojiPicker = !showEmojiPicker" color="secondary" name="happy" style="zoom:2;"></ion-icon> -->
+        <!-- --------------------------------------------- -->
+        <!-- Emoji Picker Button  tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top" -->
+        <!-- --------------------------------------------- -->
+        <div class="emoji-picker-btn-wpr">
+          <ion-button ion-button fill="clear" class="emoji-picker-btn" (click)="showEmojiPicker = !showEmojiPicker"
+            [disabled]="disableTextarea">
+            <!-- <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon> -->
+            <ion-icon slot="icon-only" lazy="true" name="happy-outline" style="font-size: 24px;"></ion-icon>
+          </ion-button>
+
+          <!-- <div class="emojiContainer" [style.height]="showEmojiPicker?'300px':'0px'"> -->
+          <!--Show/Hide emoji picker. Don't use *ngIf because the component will be created again and again and cause performance issue-->
+          <!-- <emoji-picker (onEmojiSelect)="addEmoji($event)"></emoji-picker> -->
+          <!-- { position: 'absolute', bottom: '20px', right: '20px' }" -->
+          <!-- --------------------------------------------------------------------- -->
+          <!-- https://www.npmjs.com/package/@ctrl/ngx-emoji-mart/v/1.0.6 -->
+          <!-- --------------------------------------------------------------------- -->
+          <!-- [style]="{ position: 'absolute', bottom: '53px', right: '-246px' }" -->
+          <emoji-mart [showPreview]="false" [perLine]="emojiPerLine" [style.visibility]="showEmojiPicker?'visible':'hidden'"
+            (emojiSelect)="addEmoji($event)"  [ngClass]="{'emoji-mart-desktop': !IS_ON_MOBILE_DEVICE, 'emoji-mart-mobile': IS_ON_MOBILE_DEVICE }">
+          </emoji-mart>
+          <!-- </div> -->
 
+        </div>
+      </div>
+
+
+
+
+
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || support_mode === 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)">
+        </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>
+    </ion-col>
+
+  </ion-row>
 </ion-grid>

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

@@ -42,8 +42,14 @@
     }
     .text-message {
         position: relative;
-        margin: 0 35px;
-        width: calc(100% - 70px);
+        // margin: 0 35px;
+        // width: calc(100% - 70px);
+        // ----- new after adding canned open /close canned responses
+        // margin: 0 70px;
+        // width: calc(100% - 100px);
+        // ----- new after adding emoji picker
+        margin: 0 108px;
+        width: calc(100% - 140px);
         ion-textarea {
             // border-radius: 4px;
             border-radius: 20px; // NK edited
@@ -65,6 +71,10 @@
             font-size: 15px;
         }
     }
+    .text-message-no-cr {
+        margin: 0 72px !important;
+        width: calc(100% - 101px) !important;
+    }
 }
 
 #fileInput {
@@ -97,8 +107,58 @@
     --border-radius: 50%;
     --padding-end: 1px;
     --padding-start: 1px;
+    height: 33px !important;
+}
+
+.canned-responses-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 2px;
+    --padding-start: 2px;
+    height: 33px !important;
+    width: 33px;
+}
 
+.emoji-picker-btn {
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 2px;
+    --padding-start: 2px;
     height: 33px !important;
+    width: 33px;
+}
+
+.no-canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: red;
+    left: -3px;
+    cursor: pointer;
+}
+.no-canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.canned-responses-btn-badge {
+    position: absolute;
+    font-size: 12px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 1px 2px;
+    top: 4px;
+    color: #92949c;
+    left: -3px;
+    cursor: pointer;
+}
+
+.canned-responses-btn-badge:hover {
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 .upload-image-btn .button-native {
@@ -115,6 +175,17 @@
     pointer-events: none;
 }
 
+.emoji-mart-desktop {
+    position: absolute;
+    bottom: 53px;
+    right: -246px;
+}
+.emoji-mart-mobile {
+    position: absolute;
+    bottom: 50px;
+    right: -123px;
+    width: 230px;
+}
 //   input[placeholder] { text-overflow: ellipsis; }
 // ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
 // input:-moz-placeholder { text-overflow: ellipsis; }