@chat21/chat21-ionic 3.0.61-rc11 → 3.0.61-rc15

package/src/app/pages/conversations-list/conversations-list.page.ts

@@ -291,7 +291,7 @@ export class ConversationListPage implements OnInit {
     this.subscription.unsubscribe()
   }
 
-  ionViewDidEnter() {}
+  ionViewDidEnter() { }
 
   getLastProjectId(projectid: string) {
     this.logger.log('[CONVS-LIST-PAGE] - GET LAST PROJECT ID', projectid)
@@ -1080,16 +1080,13 @@ export class ConversationListPage implements OnInit {
   }
 
   listenToCloseConvFromHeaderConversation() {
-    this.events.subscribe('hasclosedconversation', (convId) => {
+    this.events.subscribe('conversation:closed', (convId) => {
       this.logger.log('[CONVS-LIST-PAGE] hasclosedconversation  convId', convId)
 
       const conversation = this.conversations.find(
         (conv) => conv.uid === convId,
       )
-      this.logger.log(
-        '[CONVS-LIST-PAGE] hasclosedconversation  conversation',
-        conversation,
-      )
+      this.logger.log('[CONVS-LIST-PAGE] hasclosedconversation  conversation', conversation)
       this.onCloseConversation(conversation)
     })
   }
@@ -1099,10 +1096,7 @@ export class ConversationListPage implements OnInit {
   // https://github.com/chat21/chat21-cloud-functions/blob/master/docs/api.md#delete-a-conversation
   // ----------------------------------------------------------------------------------------------
   onCloseConversation(conversation: ConversationModel) {
-    this.logger.log(
-      '[CONVS-LIST-PAGE] onCloseConversation  conversation',
-      conversation,
-    )
+    this.logger.log('[CONVS-LIST-PAGE] onCloseConversation  conversation', conversation)
 
     // -------------------------------------------------------------------------------------
     // Fix the display of the message "No conversation yet" when a conversation is archived
@@ -1111,17 +1105,11 @@ export class ConversationListPage implements OnInit {
     // -------------------------------------------------------------------------------------
     this.loadingIsActive = false
     // console.log('CONVS - CONV-LIST-PAGE onCloseConversation CONVS: ', conversation)
-    this.logger.log(
-      '[CONVS-LIST-PAGE] onCloseConversation loadingIsActive: ',
-      this.loadingIsActive,
-    )
+    this.logger.log('[CONVS-LIST-PAGE] onCloseConversation loadingIsActive: ', this.loadingIsActive)
     if (conversation) {
       const conversationId = conversation.uid
 
-      this.logger.log(
-        '[CONVS-LIST-PAGE] onCloseConversation conversationId: ',
-        conversationId,
-      )
+      this.logger.log( '[CONVS-LIST-PAGE] onCloseConversation conversationId: ', conversationId )
 
       const conversationWith_segments = conversationId.split('-')
       this.logger.log(

package/src/app/pages/create-canned-response/create-canned-response-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CreateCannedResponsePage } from './create-canned-response.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CreateCannedResponsePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CreateCannedResponsePageRoutingModule {}

package/src/app/pages/create-canned-response/create-canned-response.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule ,ReactiveFormsModule} from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CreateCannedResponsePageRoutingModule } from './create-canned-response-routing.module';
+
+import { CreateCannedResponsePage } from './create-canned-response.page';
+import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import { createTranslateLoader } from '../../../chat21-core/utils/utils';
+import { HttpClient } from '@angular/common/http';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    IonicModule,
+    CreateCannedResponsePageRoutingModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    })
+  ],
+  declarations: [CreateCannedResponsePage]
+})
+export class CreateCannedResponsePageModule {}

package/src/app/pages/create-canned-response/create-canned-response.page.html

@@ -0,0 +1,150 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{'AddNewCannedResponse' | translate}}</ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="closeModalCreateCannedResponseModal()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-menu side="start" menu-id="custom" content-id="main" class="my-custom-menu">
+  <!-- <ion-header>
+    <ion-toolbar color="tertiary">
+      <ion-title>Custom Menu</ion-title>
+    </ion-toolbar>
+  </ion-header> -->
+  <ion-content>
+    <ion-list>
+      <ion-item button (click)="addRecipientNamePlaceholderToTheMsg()"
+        (mouseover)="onOverBtnAddRecipientNamePlaceholder()"
+        (mouseout)="onOutBtnAddRecipientNamePlaceholder()">
+        <ion-label>
+          {{'First_name_of_recipient' | translate}}
+        </ion-label>
+      </ion-item>
+      <ion-item button (click)="addAgentNamePlaceholderToTheMsg()"
+        (mouseover)="onOverBtnAddAgentNamePlaceholder()"
+        (mouseout)="onOutBtnAddAgentNamePlaceholder()">
+        <ion-label>
+          {{'First_name_of_agent' | translate}}
+        </ion-label>
+      </ion-item>
+
+    </ion-list>
+    <!-- <ion-note> </ion-note> -->
+    <ion-grid>
+      <ion-row>
+        <ion-col class="ion-padding">
+          <div class="ion-text-center">
+            <h6
+              *ngIf="mouseOverBtnAddRecipientNamePlaceholder === false && mouseOverBtnAddAgentNamePlaceholder === false"
+              ion-text class="note-text">
+              <!-- Seleziona una valore personalizzato da aggiungere al messaggio. -->
+              {{'SelectACustomizationToAddToYourMessage' | translate}}
+            </h6>
+            <h6
+              *ngIf="mouseOverBtnAddRecipientNamePlaceholder === true && mouseOverBtnAddAgentNamePlaceholder === false"
+              ion-text class="note-text">
+              <!-- Il nome della persona a cui l'agente sta rispondendo verrà aggiunto al messaggio. -->
+              {{'recipient_name_desc' | translate}}
+            </h6>
+
+            <h6
+              *ngIf="mouseOverBtnAddRecipientNamePlaceholder === false && mouseOverBtnAddAgentNamePlaceholder === true"
+              ion-text class="note-text">
+              <!-- Il nome dell'agente che sta rispondendo verrà aggiunto al messaggio. -->
+              {{'agent_name_desc' | translate }}
+            </h6>
+
+          </div>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+
+  </ion-content>
+</ion-menu>
+<!-- <ion-router-outlet id="menuContent"></ion-router-outlet> -->
+
+<ion-content id="create-canned-response-content">
+  <form [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12">
+          <!-- ---------------------------------------------- -->
+          <!-- Canned response title -->
+          <!-- ---------------------------------------------- -->
+          <ion-item>
+            <ion-label class="custom-label-size" for="title" position="stacked" color="primary">
+              {{'Title' | translate}} *
+            </ion-label>
+            <ion-input placeholder="{{'EnterCannedResponseTitle' | translate}}" id="title" type="text" formControlName="title">
+            </ion-input>
+          </ion-item>
+          <div class="validation-errors">
+            <ng-container *ngFor="let validation of validation_messages.title">
+              <div class="error-message"
+                *ngIf="validations_form.get('title').hasError(validation.type) && (validations_form.get('title').dirty || validations_form.get('title').touched)">
+                <ion-icon name="information-circle-outline"></ion-icon>
+                <span class="validation-message"> {{ validation.message }} </span>
+              </div>
+            </ng-container>
+          </div>
+        </ion-col>
+
+        <!-- ---------------------------------------------- -->
+        <!-- Canned response Message -->
+        <!-- ---------------------------------------------- -->
+        <ion-col size="12">
+          <ion-item>
+            <ion-label class="custom-label-size" for="message" position="stacked" color="primary">
+              {{'Message' | translate}} *
+            </ion-label>
+            <ion-textarea  placeholder="{{'WriteMsgToSendToYourVisitors' | translate}}"
+              (ngModelChange)="cannedResponseMessageChanged($event)" class="canned-response-texarea" rows="4"
+              id="message" type="text" formControlName="message"></ion-textarea>
+          </ion-item>
+          <div class="validation-errors">
+            <ng-container *ngFor="let validation of validation_messages.message">
+              <div class="error-message"
+                *ngIf="validations_form.get('message').hasError(validation.type) && (validations_form.get('message').dirty || validations_form.get('message').touched)">
+                <ion-icon name="information-circle-outline"></ion-icon>
+                <span class="validation-message"> {{ validation.message }} </span>
+
+              </div>
+            </ng-container>
+          </div>
+        </ion-col>
+
+        <!-- ---------------------------------------------- -->
+        <!-- Button Add personalisation -->
+        <!-- ---------------------------------------------- -->
+        <ion-col size="12" style="text-align: right;">
+          <ion-button ion-button fill="clear" size="small" (click)="openAddPersonalisationMenu()">
+            <span style="color:#999999"> 
+              <!-- Aggiungi personalizzazione  -->
+              {{'AddCustomization' | translate}}
+            </span>
+          </ion-button>
+        </ion-col>
+
+          <!-- ---------------------------------------------- -->
+        <!-- Button Subbmit -->
+        <!-- ---------------------------------------------- -->
+        <ion-col size="12" style="text-align: center;">
+          <ion-button color="primary" class="submit-btn" type="submit" [disabled]="!validations_form.valid">
+            <ion-icon *ngIf="showSpinnerCreateCannedResponse === false" style="font-size: 1.9em;" slot="start"
+              name="add-circle-outline"></ion-icon>
+            <ion-spinner *ngIf="showSpinnerCreateCannedResponse === true"
+              style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2"></ion-spinner>
+            {{'Add' | translate}}
+          </ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+
+
+</ion-content>

package/src/app/pages/create-canned-response/create-canned-response.page.scss

@@ -0,0 +1,55 @@
+#create-canned-response-content {
+    .validation-errors {
+        height: 20px;
+        // margin-bottom: 16px;
+    }
+
+    .error-message {
+        // color: red;
+        // font-size: 14px;
+        // margin-left: 10px;
+        // margin-top: 10px;
+        ion-icon {
+            color: red;
+            font-size: 16px;
+            margin-left: 15px;
+            margin-right: 3px;
+            position: relative;
+            top: 3px;
+        }
+        .validation-message {
+            color: red;
+            font-size: 14px;
+            margin-top: 1px;
+        }
+    }
+
+    .submit-btn {
+        margin: 48px 12px 12px;
+        min-width: 150px;
+    }
+
+    ion-textarea {
+        --placeholder-color: #d3d3d3;
+        --placeholder-opacity: 1;
+    }
+    ion-input {
+        --placeholder-color: #d3d3d3;
+        --placeholder-opacity: 1;
+    }
+}
+
+.my-custom-menu {
+    --width: 500px;
+    margin-top: 57px;
+}
+
+.note-text {
+    color: #a6a6a6;
+}
+
+.custom-label-size {
+    font-size: 1.2em;
+}
+
+

package/src/app/pages/create-canned-response/create-canned-response.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CreateCannedResponsePage } from './create-canned-response.page';
+
+describe('CreateCannedResponsePage', () => {
+  let component: CreateCannedResponsePage;
+  let fixture: ComponentFixture<CreateCannedResponsePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCannedResponsePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CreateCannedResponsePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,319 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+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';
+
+@Component({
+  selector: 'app-create-canned-response',
+  templateUrl: './create-canned-response.page.html',
+  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();
+
+  prjctID: string;
+  tiledeskToken: string;
+  showSpinnerCreateCannedResponse: boolean = false;
+  addWhiteSpaceBefore: boolean;
+  mouseOverBtnAddRecipientNamePlaceholder: boolean = false;
+  mouseOverBtnAddAgentNamePlaceholder: boolean = false;
+  conversation_id: string
+  // public conversationWith: string;
+  constructor(
+    public modalController: ModalController,
+    private formBuilder: FormBuilder,
+    private translate: TranslateService,
+    public tiledeskAuthService: TiledeskAuthService,
+    public tiledeskService: TiledeskService,
+    private menu: MenuController,
+    public events: EventsService,
+    private route: ActivatedRoute,
+  ) {
+    //   this.route.paramMap.subscribe((params) => {
+    //  console.log('[CONVS-DETAIL] - constructor -> params: ', params)
+    //   this.conversationWith = params.get('IDConv')
+
+
+    // })
+  }
+
+
+
+  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')
+    }
+
+    this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CREATE-CANNED-RES] tiledeskToken ', this.tiledeskToken)
+    this.getCurrentProjectId(this.conversation_id, this.tiledeskToken);
+
+    // const stored_project = localStorage.getItem('last_project')
+    // const storedPrjctObjct = JSON.parse(stored_project)
+    // this.logger.log('[CREATE-CANNED-RES] storedPrjctObjct ', storedPrjctObjct)
+    // if (storedPrjctObjct) {
+    //   this.prjctID = storedPrjctObjct.id_project.id
+    //   this.logger.log('[CREATE-CANNED-RES] this.prjctID ', this.prjctID)
+    // }
+   
+
+
+    this.buildForm()
+  }
+
+  getCurrentProjectId(conversation_id, tiledeskToken) {
+    const conversationWith_segments = conversation_id.split('-')
+    // Removes the last element of the array if is = to the separator
+    if (
+      conversationWith_segments[conversationWith_segments.length - 1] === ''
+    ) {
+      conversationWith_segments.pop()
+    }
+
+    if (conversationWith_segments.length === 4) {
+      const lastArrayElement = conversationWith_segments[conversationWith_segments.length - 1]
+      this.logger.log('[CREATE-CANNED-RES] - lastArrayElement ', lastArrayElement)
+      this.logger.log('[CREATE-CANNED-RES]- lastArrayElement length', lastArrayElement.length)
+      if (lastArrayElement.length !== 32) {
+        conversationWith_segments.pop()
+      }
+    }
+
+    this.logger.log('[CREATE-CANNED-RES] - loadTagsCanned conversationWith_segments ', conversationWith_segments)
+    // let projectId = ''
+
+    if (conversationWith_segments.length === 4) {
+      this.prjctID = conversationWith_segments[2]
+      this.logger.log('[CREATE-CANNED-RES] - loadTagsCanned projectId ', this.prjctID)
+    } else {
+      this.getProjectIdByConversationWith(conversation_id, tiledeskToken)
+    }
+  }
+
+  getProjectIdByConversationWith(conversationWith: string, tiledeskToken: string) {
+    // const tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+
+    this.tiledeskService
+      .getProjectIdByConvRecipient(tiledeskToken, conversationWith)
+      .subscribe(
+        (res) => {
+          this.logger.log('[CREATE-CANNED-RES] - GET PROJECTID BY CONV RECIPIENT RES', res)
+          if (res) {
+            this.prjctID = res.id_project
+            this.logger.log('[CREATE-CANNED-RES] - GET PROJECTID BY CONV RECIPIENT projectId ', this.prjctID)
+
+          }
+        },
+        (error) => {
+          this.logger.error('[CREATE-CANNED-RES] - GET PROJECTID BY CONV RECIPIENT - ERROR  ', error)
+        },
+        () => {
+          this.logger.log('[CREATE-CANNED-RES] - GET PROJECTID BY CONV RECIPIENT * COMPLETE *',)
+        },
+      )
+  }
+
+
+  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 = {
+    'title': [
+      { type: 'required', message: this.translate.instant('TitleIsRequired') }
+    ],
+    'message': [
+      { type: 'required', message: this.translate.instant('MessageIsRequired') }
+    ],
+  };
+
+  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)
+  }
+
+  createResponse(canned_response_message, canned_response_title) {
+    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.tiledeskService.createCannedResponse(canned_response_message.trim(), canned_response_title.trim(), this.prjctID, this.tiledeskToken)
+      .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);
+        this.showSpinnerCreateCannedResponse = false;
+      }, () => {
+        this.logger.log('[CREATE-CANNED-RES] - CREATE CANNED RESP * COMPLETE *');
+        this.showSpinnerCreateCannedResponse = false;
+        this.closeModalCreateCannedResponseModal()
+        this.events.publish('newcannedresponse:created', true);
+      });
+  }
+
+  openAddPersonalisationMenu() {
+    this.menu.enable(true, 'custom');
+    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() {
+    this.menu.close('custom')
+    this.menu.enable(false, 'custom');
+    this.insertCustomField('$agent_name')
+  }
+
+  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);
+
+    if (/\s$/.test($event)) {
+      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');
+      // IS USED TO ADD A WHITE SPACE TO THE 'PERSONALIZATION' VALUE IF THE STRING DOES NOT CONTAIN SPACE AT LAST
+      this.addWhiteSpaceBefore = true;
+    }
+
+  }
+
+  insertCustomField(customfieldValue: string) {
+    const elTextarea = <HTMLElement>document.querySelector('.canned-response-texarea');
+    this.logger.log('[CREATE-CANNED-RES] - GET TEXT AREA - elTextarea ', elTextarea);
+    if (elTextarea) {
+      this.insertAtCursor(elTextarea, customfieldValue)
+    }
+  }
+  insertAtCursor(myField, myValue) {
+    this.logger.log('[CREATE-CANNED-RES] - insertAtCursor - myValue ', myValue);
+
+    if (this.addWhiteSpaceBefore === true) {
+      myValue = ' ' + myValue;
+      this.logger.log('[CREATE-CANNED-RES] - GET TEXT AREA - QUI ENTRO myValue ', myValue);
+    }
+
+    //IE support
+    if (myField.selection) {
+      myField.focus();
+      let sel = myField.selection.createRange();
+      sel.text = myValue;
+      // this.cannedResponseMessage = sel.text;
+    }
+    //MOZILLA and others
+    else if (myField.selectionStart || myField.selectionStart == '0') {
+      var startPos = myField.selectionStart;
+      this.logger.log('[CREATE-CANNED-RES] - insertAtCursor - startPos ', startPos);
+
+      var endPos = myField.selectionEnd;
+      this.logger.log('[CREATE-CANNED-RES] - insertAtCursor - endPos ', endPos);
+
+      myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
+
+      // place cursor at end of text in text input element
+      myField.focus();
+      var val = myField.value; //store the value of the element
+      myField.value = ''; //clear the value of the element
+      myField.value = val + ' '; //set that value back. 
+
+      // this.cannedResponseMessage = myField.value;
+
+      // this.texareaIsEmpty = false;
+      // myField.select();
+    } else {
+      myField.value += myValue;
+      // this.cannedResponseMessage = myField.value;
+    }
+  }
+
+
+  async closeModalCreateCannedResponseModal() {
+    if (this.menu) {
+      this.menu.close('custom')
+      this.menu.enable(false, 'custom');
+    }
+    await this.modalController.getTop()
+    this.modalController.dismiss({ confirmed: true })
+  }
+
+}

package/src/app/pages/create-requester/create-requester.page.html

@@ -52,7 +52,7 @@
         </ion-col>
         <!-- expand="block" -->
         <ion-col size="12" style="text-align: center;">
-          <ion-button color="primary" class="submit-btn" type="submit" [disabled]="!validations_form.valid" style="width:252.45px">
+          <ion-button color="primary" class="submit-btn" type="submit" [disabled]="!validations_form.valid" style="min-width:253px">
             <ion-icon *ngIf="showSpinnerCreateRequester === false" style="font-size: 1.9em;" slot="start" name="add-circle-outline"></ion-icon>
             <ion-spinner *ngIf="showSpinnerCreateRequester === true" style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2" ></ion-spinner>
             {{'CreateNewRequester' | translate}}</ion-button>

package/src/app/pages/create-requester/create-requester.page.ts

@@ -23,6 +23,7 @@ export class CreateRequesterPage implements OnInit {
   showSpinnerCreateRequester: boolean = false; 
   requester_id: string;
   logger: LoggerService = LoggerInstance.getInstance();
+  
   constructor(
     public modalController: ModalController,
     private formBuilder: FormBuilder,