@chat21/chat21-ionic 3.0.86-rc.3 → 3.0.86-rc.4

package/src/app/modals/create-canned-response/create-canned-response.page.ts

@@ -1,5 +1,5 @@
 import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
@@ -10,6 +10,7 @@ import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { MenuController } from '@ionic/angular';
 import { EventsService } from 'src/app/services/events-service';
 import { ActivatedRoute } from '@angular/router';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 
 @Component({
   selector: 'app-create-canned-response',
@@ -17,13 +18,14 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./create-canned-response.page.scss'],
 })
 export class CreateCannedResponsePage implements OnInit {
-
-  public canned_response_title: string;
-  public canned_response_message: string;
-  validations_form: FormGroup;
+  
   @Input() message: any
   @Input() conversationWith: string;
-  logger: LoggerService = LoggerInstance.getInstance();
+
+  @ViewChild('div_input_topic', {static: true}) input_topic: ElementRef;
+  
+  cannedFormGroup: FormGroup;
+  private logger: LoggerService = LoggerInstance.getInstance();
 
   prjctID: string;
   tiledeskToken: string;
@@ -31,12 +33,13 @@ export class CreateCannedResponsePage implements OnInit {
   addWhiteSpaceBefore: boolean;
   mouseOverBtnAddRecipientNamePlaceholder: boolean = false;
   mouseOverBtnAddAgentNamePlaceholder: boolean = false;
-  conversation_id: string
+  translationsMap: Map<string, string> = new Map<string, string>()
   // public conversationWith: string;
   constructor(
     public modalController: ModalController,
     private formBuilder: FormBuilder,
     private translate: TranslateService,
+    private translateService: CustomTranslateService,
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
     public cannedResponsesService: CannedResponsesService,
@@ -57,23 +60,10 @@ export class CreateCannedResponsePage implements OnInit {
   ngOnInit() {
     // this.getCurrentProjectId();
     // console.log('[CREATE-CANNED-RES] - conversationWith ', this.conversationWith)
-    //  console.log('[CREATE-CANNED-RES] - message ', this.message)
-    if (this.message) {
-      this.conversation_id = this.message.recipient
-      this.logger.log('[CREATE-CANNED-RES] - conversationWith get from @input message (passed by bubble-message)', this.conversation_id)
-    } else {
-      this.logger.log('[CREATE-CANNED-RES] - @input message is UNDEFINED')
-    }
-    if (this.conversationWith) {
-      this.conversation_id = this.conversationWith;
-      this.logger.log('[CREATE-CANNED-RES] - conversationWith get from @input conversationWith (passed by conversation detail) ', this.conversation_id)
-    } else {
-      this.logger.log('[CREATE-CANNED-RES] - @input conversationWith is UNDEFINED')
-    }
-
+     console.log('[CREATE-CANNED-RES] - message ', this.message, this.conversationWith)
     this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
     this.logger.log('[CREATE-CANNED-RES] tiledeskToken ', this.tiledeskToken)
-    this.getCurrentProjectId(this.conversation_id, this.tiledeskToken);
+    this.getCurrentProjectId(this.conversationWith, this.tiledeskToken);
 
     // const stored_project = localStorage.getItem('last_project')
     // const storedPrjctObjct = JSON.parse(stored_project)
@@ -82,12 +72,44 @@ export class CreateCannedResponsePage implements OnInit {
     //   this.prjctID = storedPrjctObjct.id_project.id
     //   this.logger.log('[CREATE-CANNED-RES] this.prjctID ', this.prjctID)
     // }
-   
 
+    let keys= [
+      'Title',
+      'EnterCannedResponseTitle',
+      'Message',
+      'WriteMsgToSendToYourVisitors',
+      'AddCustomization',
+      'Add',
+      'First_name_of_recipient',
+      'First_name_of_agent',
+      'SelectACustomizationToAddToYourMessage',
+      'recipient_name_desc',
+      'agent_name_desc'
+    ]
+
+    this.translationsMap = this.translateService.translateLanguage(keys)
+
+    this.cannedFormGroup = this.buildForm()
+    this.cannedFormGroup.valueChanges.subscribe((value)=> {
+      value.title !== ''? this.input_topic.nativeElement.classList.add('hasValue') : this.input_topic.nativeElement.classList.remove('hasValue')
+    });
+    if(this.message && (this.message !== '' || this.message !== null)){
+      this.cannedFormGroup.patchValue({ message: this.message})
+    }
+  }
+
+  buildForm() : FormGroup{
+    return this.formBuilder.group({
+      title: ['', [Validators.required]],
+      message: ['', [Validators.required]]
+    });
+  }
 
-    this.buildForm()
+  addFocus(){
+    this.input_topic.nativeElement.querySelector('input[formcontrolname="title"]').focus()
   }
 
+
   getCurrentProjectId(conversation_id, tiledeskToken) {
     const conversationWith_segments = conversation_id.split('-')
     // Removes the last element of the array if is = to the separator
@@ -134,30 +156,7 @@ export class CreateCannedResponsePage implements OnInit {
   }
 
 
-  buildForm() {
-    this.validations_form = this.formBuilder.group({
-      title: new FormControl('', Validators.required),
-      message: new FormControl('', Validators.required),
-    });
-
-    this.setValues()
-  }
-
-  setValues() {
-    if (this.message && this.message.text) {
-      let cannedTitle = ''
-      const titleMaxCharacters = 37
-      if (this.message.text.length > titleMaxCharacters) {
-        cannedTitle = this.message.text.substring(0, titleMaxCharacters) + '...'
-      } else {
-        cannedTitle = this.message.text
-      }
-      this.logger.log('[CREATE-CANNED-RES] - cannedTitle  ', cannedTitle.trim())
-      this.logger.log('[CREATE-CANNED-RES] - cannedMsg  ', this.message.text.trim())
-      this.validations_form.controls['title'].setValue(cannedTitle);
-      this.validations_form.controls['message'].setValue(this.message.text);
-    }
-  }
+  
 
 
   validation_messages = {
@@ -169,21 +168,18 @@ export class CreateCannedResponsePage implements OnInit {
     ],
   };
 
-  onSubmit(values) {
-    this.logger.log('[CREATE-CANNED-RES] ON SUBMIT VALUES', values);
-    this.canned_response_title = values.title
-    this.canned_response_message = values.message
-    this.logger.log('[CREATE-CANNED-RES] ON SUBMIT canned_response_title', this.canned_response_title);
-    this.logger.log('[CREATE-CANNED-RES] ON SUBMIT canned_response_title', this.canned_response_message);
-    this.createResponse(this.canned_response_message, this.canned_response_title)
+  onSubmit() {
+    const canned = this.cannedFormGroup.value
+    this.logger.log('[CREATE-CANNED-RES] ON SUBMIT VALUES', canned);
+    this.createResponse(canned.message, canned.title)
   }
 
-  createResponse(canned_response_message, canned_response_title) {
+  createResponse(message: string, title: string) {
     this.showSpinnerCreateCannedResponse = true;
-    this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - MSG ', canned_response_message);
-    this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - TITLE ', canned_response_title);
+    this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - MSG ', message);
+    this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - TITLE ', title);
 
-    this.cannedResponsesService.add(this.tiledeskToken, this.prjctID, canned_response_title.trim(), canned_response_message.trim()).subscribe((responses: any) => {
+    this.cannedResponsesService.add(this.tiledeskToken, this.prjctID, title.trim(), message.trim()).subscribe((responses: any) => {
       this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP - RES ', responses);
     }, (error) => {
       this.logger.error('[CREATE-CANNED-RES]- CREATE CANNED RESP - ERROR  ', error);
@@ -201,50 +197,21 @@ export class CreateCannedResponsePage implements OnInit {
     this.menu.open('custom');
   }
 
-  addRecipientNamePlaceholderToTheMsg() {
-    this.menu.close('custom')
-    this.menu.enable(false, 'custom');
-    this.insertCustomField('$recipient_name')
-  }
-
-  onOverBtnAddRecipientNamePlaceholder() {
-    this.mouseOverBtnAddRecipientNamePlaceholder = true;
-    this.logger.log('[CREATE-CANNED-RES] - isOverRecipientName ', this.mouseOverBtnAddRecipientNamePlaceholder);
-  }
-
-  onOutBtnAddRecipientNamePlaceholder() {
-    this.mouseOverBtnAddRecipientNamePlaceholder = false;
-    this.logger.log('[CREATE-CANNED-RES] - isOutRecipientName ', this.mouseOverBtnAddRecipientNamePlaceholder);
-  }
-
-  addAgentNamePlaceholderToTheMsg() {
+  addPlaceholdertoMsg(key) {
     this.menu.close('custom')
     this.menu.enable(false, 'custom');
-    this.insertCustomField('$agent_name')
+    this.insertCustomField(key)
   }
 
-  onOverBtnAddAgentNamePlaceholder() {
-    this.mouseOverBtnAddAgentNamePlaceholder = true;
-    this.logger.log('[CREATE-CANNED-RES] - isOverAgentName ', this.mouseOverBtnAddAgentNamePlaceholder);
-  }
-
-  onOutBtnAddAgentNamePlaceholder() {
-    this.mouseOverBtnAddAgentNamePlaceholder = false;
-    this.logger.log('[CREATE-CANNED-RES] - isOutAgentName ', this.mouseOverBtnAddAgentNamePlaceholder);
-  }
-
-
-
-
 
   cannedResponseMessageChanged($event) {
-    this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED ', $event);
+    // this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED ', $event);
 
     if (/\s$/.test($event)) {
-      this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED - string contains space at last');
+      // this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED - string contains space at last');
       this.addWhiteSpaceBefore = false;
     } else {
-      this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED - string does not contain space at last');
+      // this.logger.log('[CREATE-CANNED-RES] - ON MSG CHANGED - string does not contain space at last');
       // IS USED TO ADD A WHITE SPACE TO THE 'PERSONALIZATION' VALUE IF THE STRING DOES NOT CONTAIN SPACE AT LAST
       this.addWhiteSpaceBefore = true;
     }
@@ -252,7 +219,7 @@ export class CreateCannedResponsePage implements OnInit {
   }
 
   insertCustomField(customfieldValue: string) {
-    const elTextarea = <HTMLElement>document.querySelector('.canned-response-texarea');
+    const elTextarea = <HTMLElement>document.querySelector('#message');
     this.logger.log('[CREATE-CANNED-RES] - GET TEXT AREA - elTextarea ', elTextarea);
     if (elTextarea) {
       this.insertAtCursor(elTextarea, customfieldValue)

package/src/app/modals/loader-preview/loader-preview.page.html

@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header no-border class="ion-no-border">
   <ion-toolbar>
     <ion-title>{{'Preview' | translate}}</ion-title>
     <ion-buttons slot="end">

package/src/app/modals/loader-preview/loader-preview.page.scss

@@ -71,7 +71,7 @@ ion-fab-button{
     // ion-content,
     .thumbnailsScroll {
         max-width: calc(100% - 60px);
-        height: 70px;
+        height: 50px;
         overflow-x: auto;
         overflow-y: hidden;
     }

package/src/app/modals/send-email/send-email.page.html

@@ -1,4 +1,4 @@
-<ion-header>
+<ion-header no-border class="ion-no-border">
   <ion-toolbar>
     <ion-title>{{'LABEL_EMAIL' | translate}}</ion-title>
     <ion-buttons slot="end">
@@ -20,7 +20,7 @@
       </div> -->
       <div class="field-wrapper" id="div_input_topic" #div_input_topic>
         <input type="text" formControlName="subject" >
-        <div class="field-placeholder"><span>{{translationMap?.get('SUBJECT')}}</span></div>
+        <div class="field-placeholder" (click)="addFocus()"><span>{{translationMap?.get('SUBJECT')}}</span></div>
       </div>
 
       <ion-label class="message-placeholder">{{translationMap?.get('MESSAGE')}}</ion-label>

package/src/app/modals/send-email/send-email.page.scss

@@ -29,25 +29,7 @@ ion-input{
     // outline: none;
 }
 
-ion-input:focus{
-    // border-color: rgb(5, 102, 255);
-}
 
-// ion-label{
-//     align-self: flex-start;
-//     display: inline-block;
-//     font-size: 12px;
-//     line-height: 16px;
-//     letter-spacing: -0.01em;
-//     padding: 0px 8px 2px;
-//     margin-left: 8px;
-//     background-color: rgb(255, 255, 255);
-//     position: absolute;
-//     top: 0px;
-//     transform: translateY(-7px);
-//     transition: transform 0.1s ease 0s;
-//     border-radius: 4px;
-// }
 
 .field-wrapper{
     position: relative;
@@ -80,7 +62,7 @@ ion-input:focus{
     z-index: 1;
 
     text-align: left;
-    width: 100%;
+    // width: 100%;
 }        
 
 .field-wrapper .field-placeholder span{
@@ -89,10 +71,11 @@ ion-input:focus{
 }
 
 .field-wrapper input:not([disabled]):focus~.field-placeholder,
+.field-placeholder:target,
 .field-wrapper.hasValue input:not([disabled])~.field-placeholder{
-    -webkit-transform: scale(.75) translateY(-35px) translateX(-75px);
-    transform: scale(.75) translateY(-35px) translateX(-75px);
-    color:#1A73E8;
+    -webkit-transform: scale(.75) translateY(-35px) translateX(-18px);
+    transform: scale(.75) translateY(-35px) translateX(-18px);
+    color:rgb(0,86,192);
     font-weight: bold; 
 }
 

package/src/app/modals/send-email/send-email.page.ts

@@ -46,6 +46,10 @@ export class SendEmailModal implements OnInit {
     }
   }
 
+  addFocus(){
+    this.input_topic.nativeElement.querySelector('input[formcontrolname="subject"]').focus()
+  }
+
   buildFormGroup(): FormGroup{
     return this.formBuilder.group({
       subject: ['', [Validators.required]],

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

@@ -1,3 +1,5 @@
+import { BubbleInfoPopoverComponent } from '../../components/bubbleMessageInfo-popover/bubbleinfo-popover.component';
+import { BubbleMessageComponent } from './../../chatlib/conversation-detail/message/bubble-message/bubble-message.component';
 import { CannedResponseComponent } from './../../components/canned-response/canned-response.component';
 import { TruncatePipe } from './../../directives/truncate.pipe';
 import { IonConversationDetailComponent } from '../../chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component';
@@ -61,6 +63,7 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
     CannedResponseComponent,
+    BubbleInfoPopoverComponent,
     // InfoContentComponent,
     // InfoSupportGroupComponent,
     // InfoDirectComponent,