@chat21/chat21-ionic 3.0.97-rc.4 → 3.0.97

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # chat21-ionic ver 3.0
 
+### 3.0.97 in PROD
+
+### 3.0.97-rc.5
+- added: whatsapp templates section to send an already configured whatsapp templete only in case of a whatsapp conversation channel type
+- added: channel input var in message-text-area component to manage the type of current conversation
+- added: whatsappTemplatesBaseUrl env key to manage whatsapp templates only for whatsapp conversations
+- added: loader on contacts-directory page
+- changed: send-email modal UI form mobile platform
+- bug-fixed: do not show offline message if conversation has channel=whatsapp
+- bug-fixed: do not send automatic offline email if conversation has channel=whatsapp
+
 ### 3.0.97-rc.4
 - bug-fixed: error getting chat group members
 - bug-fixed: missing info-conversation accordion label 

package/README.md

@@ -104,6 +104,8 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         "dashboardUrl": "https://<YOUR-DASHBOARD-URL>"
         "testsiteBaseUrl": "https:<YOUR-WIDGET-URL>/test_widget_page/index.html"
         "wsUrl": 'ws://' + window.location.hostname + '/ws/',
+        "emailSection": true,
+        "whatsappTemplatesSection": true
     }
   };
   ```
@@ -126,6 +128,10 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
 
 * `archivedButton`: if set to true, it makes the button for viewing archived conversations visible
 
+* `emailSection`: if set to true, allows agents to send offline emails to users
+
+* `whatsappTemplatesSection`: if set to true, allows agents to set and send a whatsapp already configured template to users in an incoming whatsapp conversation
+
 ### Push notification
 * open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with < your messagingSenderId >
 More info here :  https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.97-rc.4",
+    "version": "3.0.97",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app-routing.module.ts

@@ -68,6 +68,10 @@ const routes: Routes = [
   {
     path: 'json-message',
     loadChildren: () => import('./modals/json-message/json-message.module').then( m => m.JsonMessagePageModule)
+  },
+  {
+    path: 'send-whatsapp-template',
+    loadChildren: () => import('./modals/send-whatsapp-template/send-whatsapp-template.module').then( m => m.SendWhatsappTemplateModalModule)
   }
 
 
@@ -76,6 +80,7 @@ const routes: Routes = [
 
 
 
+
   // {
   //   path: 'conversation-detail/:IDConv',
   //   loadChildren: () => import('./pages/conversation-detail/conversation-detail.module').then( m => m.ConversationDetailPageModule)

package/src/app/app.component.ts

@@ -1151,16 +1151,16 @@ export class AppComponent implements OnInit {
 
     this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
     if(this.IS_ON_MOBILE_DEVICE){
-        clearTimeout(this.timeModalLogin);
-        this.timeModalLogin = setTimeout(() => {
-          if (!this.hadBeenCalledOpenModal) {
-            this.authModal = this.presentModal('initAuthentication');
-            this.hadBeenCalledOpenModal = true;
-          }
-        }, 1000)
-      }else{
-        this.goToDashboardLogin()
-      }
+      clearTimeout(this.timeModalLogin);
+      this.timeModalLogin = setTimeout(() => {
+        if (!this.hadBeenCalledOpenModal) {
+          this.authModal = this.presentModal('initAuthentication');
+          this.hadBeenCalledOpenModal = true;
+        }
+      }, 1000)
+    }else{
+      this.goToDashboardLogin()
+    }
     
 
     // if (!this.hadBeenCalledOpenModal) {

package/src/app/app.module.ts

@@ -89,6 +89,7 @@ import { LoaderPreviewPageModule } from './modals/loader-preview/loader-preview.
 import { CreateTicketPageModule } from './modals/create-ticket/create-ticket.module';
 import { CreateCannedResponsePageModule } from './modals/create-canned-response/create-canned-response.module';
 import { SendEmailModalModule } from './modals/send-email/send-email.module';
+import { SendWhatsappTemplateModalModule } from './modals/send-whatsapp-template/send-whatsapp-template.module';
 import { JsonMessagePageModule } from './modals/json-message/json-message.module';
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
@@ -291,6 +292,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
     ConversationInfoModule,
     LoaderPreviewPageModule,
     SendEmailModalModule,
+    SendWhatsappTemplateModalModule,
     CreateTicketPageModule,
     CreateRequesterPageModule,
     CreateCannedResponsePageModule,

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

@@ -15,20 +15,27 @@
       </ion-button>
     </div>
 
-    <div *ngIf="section==='chat' && messageString && leadInfo?.presence['status']==='offline'" class="section-option offline-lead-tip" >
-      {{translationMap.get('EMAIL_OFFLINE_TIP')}}
+    <div *ngIf="whatsappTemplatesSection" class="section-option" id="template" tooltip="{{translationMap?.get('WHATSAPP.LABEL_WA_TEMPLATES')}}" placement="top">
+      <ion-button fill="clear" [class.active]="section==='templates'" (click)="onOpenSection('templates');onOpenTemplateModal()" [disabled]="channel !== CHANNEL_TYPE_WHATSAPP">
+        <ion-icon name="logo-whatsapp"></ion-icon>
+        {{translationMap?.get('WHATSAPP.LABEL_TEMPLATES')}}
+      </ion-button>
+    </div>
+
+    <div *ngIf="section==='chat' && channel !== CHANNEL_TYPE_WHATSAPP && messageString && leadInfo?.presence['status']==='offline'" class="section-option offline-lead-tip" >
+      {{translationMap.get('EMAIL.EMAIL_OFFLINE_TIP')}}
     </div>
 
   </div>
 
   <ion-row id="message-email" [style.display]="section==='email'? 'flex': 'none'">
     <ion-col col-auto>
-      <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>
+      <div *ngIf="leadInfo?.hasEmail" class="placeholder" (click)="onOpenEmailModal()">{{translationMap.get('EMAIL.EMAIL_PLACEHOLDER')}}</div>
+      <div *ngIf="!leadInfo?.hasEmail" class="placeholder noEmail">{{translationMap.get('EMAIL.EMAIL_NOT_FOUND_PLACEHOLDER')}}</div>
     </ion-col>
   </ion-row>
 
-  <ion-row id="message-text-area" [style.display]="section==='chat'? 'flex': 'none'">
+  <ion-row id="message-text-area" [style.display]="section==='chat' || section ==='templates'? 'flex': 'none'">
 
     <ion-col col-auto style="display: flex;">
 
@@ -40,7 +47,7 @@
             tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
               [disabled]="!conversationWith?.startsWith(TYPE_SUPPORT_GROUP) || disableTextarea">
-              <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
+              <ion-icon slot="icon-only" name="flash-outline" style="font-size: 24px;"></ion-icon>
             </ion-button>
           </div>
           <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount === 0"
@@ -57,7 +64,7 @@
         <!-- UPLOAD ATTACHMENT -->
         <div *ngIf="!IS_ON_MOBILE_DEVICE" class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
-            <ion-icon slot="icon-only" lazy="true" name="attach-outline"
+            <ion-icon slot="icon-only" 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">
@@ -71,8 +78,8 @@
         <div class="emoji-picker-btn-wpr" *ngIf="!IS_ON_MOBILE_DEVICE">
           <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-icon slot="icon-only" name="flash-outline" style="font-size: 24px;"></ion-icon> -->
+            <ion-icon slot="icon-only" name="happy-outline" style="font-size: 24px;"></ion-icon>
           </ion-button>
 
           <!-- <div class="emojiContainer" [style.height]="showEmojiPicker?'300px':'0px'"> -->

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

@@ -1,5 +1,6 @@
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { SendEmailModal } from './../../../modals/send-email/send-email.page';
+import { SendWhatsappTemplateModal } from './../../../modals/send-whatsapp-template/send-whatsapp-template.page';
 import { UserModel } from 'src/chat21-core/models/user';
 import { Component, OnInit, Output, EventEmitter, Input, AfterViewInit, ViewChild, ElementRef, OnChanges, HostListener, Renderer2, SimpleChange, SimpleChanges } from '@angular/core';
 
@@ -11,7 +12,7 @@ import { LoaderPreviewPage } from 'src/app/modals/loader-preview/loader-preview.
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_EMAIL, TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
+import { CHANNEL_TYPE_WHATSAPP, TYPE_MSG_EMAIL, TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 
@@ -45,6 +46,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() channelType: string;
+  @Input() channel: string;
   @Input() tagsCannedFilter: any;
   @Input() tagsCannedCount: number;
   @Input() areVisibleCAR: boolean;
@@ -52,7 +54,9 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() leadInfo: {lead_id: string, hasEmail: boolean, email: string, projectId: string, presence: {}};
   @Input() fileUploadAccept: string;
   @Input() emailSection: boolean;
+  @Input() whatsappTemplatesSection: boolean;
   @Input() isOpenInfoConversation: boolean;
+  @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;
   @Input() disableTextarea: boolean;
@@ -72,6 +76,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
   TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
+  CHANNEL_TYPE_WHATSAPP = CHANNEL_TYPE_WHATSAPP;
   msg: string
 
   section: string= 'chat'
@@ -80,7 +85,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   addWhiteSpaceBefore: boolean;
   emojiPerLine: number = 9
   emojiColor: string ="#3880ff"
-  emojiiCategories = [ 'recent', 'people', 'nature', 'activity'] //, 'custom']
+  emojiiCategories = [ 'recent', 'people', 'nature', 'activity', 'flags'] //, 'custom']
 
   customEmojis = [
     {
@@ -141,6 +146,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     }
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
+    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA] channel', this.channel, this.whatsappTemplatesSection, this.emailSection )
 
     // use case drop
     if (this.dropEvent) {
@@ -259,6 +265,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.presentEmailModal()
   }
 
+  onOpenTemplateModal(){
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] - onOpenTemplateModal');
+    this.prensentTemplateModal();
+  }
+
 
   /**
  * 
@@ -412,6 +423,36 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     return await modal.present();
   }
 
+  private async prensentTemplateModal():Promise<any> {
+    this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] openTemplateModal');
+    const attributes = {
+      enableBackdropDismiss: false, 
+      conversationWith: this.conversationWith,
+      projectId: this.leadInfo.projectId,
+      stylesMap: this.stylesMap,
+      translationMap: this.translationMap
+    };
+    const modal: HTMLIonModalElement = 
+      await this.modalController.create({
+        component: SendWhatsappTemplateModal,
+        componentProps: attributes,
+        swipeToClose: false,
+        backdropDismiss: true
+      })
+    modal.onDidDismiss().then((detail: any) => {
+      this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] send template returned-->', detail);
+      
+      if (detail && detail.data) {
+        let attributes = {
+          attachment: detail.data.attachment
+        }
+        let msg = "whatsapp template: " + detail.data.attachment.template.name + "\r\n" + detail.data.text;
+        this.eventSendMessage.emit({ msg: msg, type: TYPE_MSG_TEXT, metadata: null, attributes: attributes });
+      }
+    });
+    return await modal.present();
+  }
+
 
   ionChange(e: any) {
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ionChange event ", e);

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

@@ -7,9 +7,6 @@ import { IonicModule } from '@ionic/angular';
 import { SendEmailPageRoutingModule } from './send-email-routing.module';
 
 import { SendEmailModal } from './send-email.page';
-import { TranslateModule } from '@ngx-translate/core';
-import { createTranslateLoader } from 'src/chat21-core/utils/utils';
-import { HttpClient } from '@angular/common/http';
 
 @NgModule({
   imports: [
@@ -17,13 +14,6 @@ import { HttpClient } from '@angular/common/http';
     FormsModule,
     IonicModule,
     SendEmailPageRoutingModule,
-    TranslateModule.forChild({
-      loader: {
-        provide: TranslateModule,
-        useFactory: (createTranslateLoader),
-        deps: [HttpClient]
-      }
-    }),
     ReactiveFormsModule
   ],
   declarations: [SendEmailModal]

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

@@ -1,6 +1,6 @@
 <ion-header no-border class="ion-no-border">
   <ion-toolbar>
-    <ion-title>{{'LABEL_EMAIL' | translate}}</ion-title>
+    <ion-title>{{translationMap?.get('LABEL_EMAIL')}}</ion-title>
     <ion-buttons slot="end">
       <ion-button ion-button fill="clear" (click)="onClose()">
         <ion-icon slot="icon-only" name="close"></ion-icon>
@@ -10,7 +10,7 @@
 </ion-header>
 
 <ion-content>
-  <div class="content-container">
+  <div class="content-container" [attr.isMobile]="isMobile">
     <form [formGroup]="emailFormGroup" (ngSubmit)="onSubmit()">
       <!-- <div class="form-group row">
         <ion-item lines="none">
@@ -20,17 +20,17 @@
       </div> -->
       <div class="field-wrapper" id="div_input_topic" #div_input_topic>
         <input type="text" formControlName="subject" >
-        <div class="field-placeholder" (click)="addFocus()"><span>{{translationMap?.get('SUBJECT')}}</span></div>
+        <div class="field-placeholder" (click)="addFocus()"><span>{{translationMap?.get('EMAIL.SUBJECT')}}</span></div>
       </div>
 
-      <ion-label class="message-placeholder">{{translationMap?.get('MESSAGE')}}</ion-label>
+      <ion-label class="message-placeholder">{{translationMap?.get('EMAIL.MESSAGE')}}</ion-label>
       <div class="field-wrapper-email">
         <ion-textarea 
           formControlName="text"
           autosize="false" 
           auto-grow="true" 
           autofocus="true" 
-          placeholder="{{translationMap?.get('MESSAGE_PLACEHOLDER')}}">
+          placeholder="{{translationMap?.get('EMAIL.MESSAGE_PLACEHOLDER')}}">
         </ion-textarea>
         <div class="info-wrapper">
           <ion-label>Powered by</ion-label>

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

@@ -1,10 +1,24 @@
-ion-content{
-}
 
 .content-container{
     padding-top: 40px;
-    padding-left: 64px;
-    padding-right: 64px;
+    padding-left: 8%;
+    padding-right: 8%;
+
+}
+
+.content-container[isMobile= true]{
+    height: 100vh;
+    form{
+        height: 100%;
+    }
+    .field-wrapper-email{
+        height: 65%;
+        ion-textarea{
+            min-height: calc(100% - 50px);
+            max-height: calc(100% - 50px);
+        }
+    }
+
 }
 
 ion-label + ion-input:focus {

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

@@ -6,6 +6,7 @@ import { ModalController, ToastController } from '@ionic/angular';
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { UserModel } from 'src/chat21-core/models/user';
+import { checkPlatformIsMobile } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'send-email-modal',
@@ -26,6 +27,7 @@ export class SendEmailModal implements OnInit {
   
   emailFormGroup: FormGroup;
   private logger: LoggerService = LoggerInstance.getInstance()
+  public isMobile: boolean = false;
   
   constructor(
     public viewCtrl: ModalController,
@@ -36,6 +38,17 @@ export class SendEmailModal implements OnInit {
   ) { }
 
   ngOnInit() {
+    
+    if (checkPlatformIsMobile()) {
+      this.isMobile = true
+      // this.openInfoConversation = false; // indica se è aperto il box info conversazione
+      this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
+    } else {
+      this.isMobile = false
+      this.logger.log('[CONVS-DETAIL] - initialize -> checkPlatformIsMobile isMobile? ', this.isMobile)
+      // this.openInfoConversation = true;
+    }
+
     this.logger.log('[SEND-EMAIL-MODAL] Hello!')
     this.emailFormGroup = this.buildFormGroup();
     this.emailFormGroup.valueChanges.subscribe((value)=> {
@@ -74,11 +87,11 @@ export class SendEmailModal implements OnInit {
       this.logger.debug('[SEND-EMAIL-MODAL] subscribe to sendEmail API response -->', res)
       if(res && res.queued){
         this.viewCtrl.dismiss({form: this.emailFormGroup.value})
-        this.presentToast(this.translationMap.get('SEND_EMAIL_SUCCESS'), 'success')
+        this.presentToast(this.translationMap.get('EMAIL.SEND_EMAIL_SUCCESS'), 'success')
       }
     },(error)=> {
       this.logger.error('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL  - ERROR  ', error)
-      this.presentToast(this.translationMap.get('SEND_EMAIL_ERROR'), 'danger')
+      this.presentToast(this.translationMap.get('EMAIL.SEND_EMAIL_ERROR'), 'danger')
     }, ()=> {
       this.logger.log('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL /* COMPLETE */')
     })

package/src/app/modals/send-whatsapp-template/send-whatsapp-template-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SendWhatsappTemplateModal } from './send-whatsapp-template.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SendWhatsappTemplateModal
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SendWhatsappTemplatePageRoutingModule {}

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+import { SendWhatsappTemplatePageRoutingModule } from './send-whatsapp-template-routing.module';
+import { SendWhatsappTemplateModal } from './send-whatsapp-template.page';
+import { TranslateModule } from '@ngx-translate/core';
+import { createTranslateLoader } from 'src/chat21-core/utils/utils';
+import { HttpClient } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SendWhatsappTemplatePageRoutingModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateModule,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    })
+  ],
+  declarations: [SendWhatsappTemplateModal]
+})
+export class SendWhatsappTemplateModalModule {}

package/src/app/modals/send-whatsapp-template/send-whatsapp-template.page.html

@@ -0,0 +1,139 @@
+<ion-header no-border class="ion-no-border">
+  <ion-toolbar class="beta">
+    <ion-title *ngIf="!editTemplateView">{{ 'WHATSAPP.SELECT_MESSAGE_TEMPLATE' | translate }}</ion-title>
+    <ion-title *ngIf="editTemplateView">Review and send template</ion-title>
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="onClose()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content *ngIf="selectionView" class="content-container">
+
+  <ion-list lines="full">
+    <ion-item *ngFor="let template of templates" button detail="true" (click)="selectTemplate(template.id)">
+      <ion-label>
+        <div class="label-container">
+          <p class="template-name">{{ template.name }}</p>
+          <div>
+            <ion-icon *ngIf="template.status === 'APPROVED'" class="template-status-icon" name="ellipse"
+              style="color: green"></ion-icon>
+            <ion-icon *ngIf="template.status !== 'APPROVED'" class="template-status-icon" name="ellipse"
+              style="color: red"></ion-icon>
+          </div>
+          <div>
+            <p class="template-language">{{ template.language }}</p>
+          </div>
+        </div>
+        <div *ngFor="let comp of template.components">
+          <p *ngIf="comp.type === 'BODY'" class="body-preview-subtitle">{{ comp.text }}</p>
+        </div>
+      </ion-label>
+    </ion-item>
+
+  </ion-list>
+
+  <div class="loader" *ngIf="display_loader">
+    <div class="box">
+      <div class="spinner" [ngStyle]="{'border-top-color': stylesMap?.get('themeColor')}"></div>
+      <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
+    </div>
+  </div>
+
+</ion-content>
+
+<ion-content *ngIf="editTemplateView" class="content-container">
+  <div class="preview-container">
+    <div class="title-back">
+      <ion-button ion-button fill="clear" (click)="backToSelection()">
+        <ion-icon slot="icon-only" name="return-up-back"></ion-icon>
+      </ion-button>
+      <p class="template-name">{{ selected_template.name }}</p>
+    </div>
+    <div class="message-preview">
+
+      <div class="message-cloud">
+
+        <div class="header-preview">
+          <span *ngIf="header_component?.format === 'TEXT'">{{ header_component?.text }}</span>
+          <span *ngIf="header_component?.format === 'IMAGE'">
+            <img [src]="header_component.example.header_handle[0]" />
+          </span>
+
+        </div>
+
+        <div class="body-preview">
+          <span>{{ body_component?.text }}</span>
+        </div>
+
+        <div class="footer-preview">
+          <span>{{ footer_component?.text }}</span>
+        </div>
+
+      </div>
+
+      <div *ngIf="buttons_component" class="message-cloud-buttons">
+        <ion-button *ngFor="let btn of buttons_component.buttons" ion-button fill="clear" class="whatsapp-button">{{
+          btn.text }}</ion-button>
+      </div>
+
+    </div>
+  </div>
+
+  <div class="parameters-container">
+
+
+    <div *ngIf="header_component && header_component.example">
+      <p class="parameters-title">Header parameters</p>
+      <div *ngFor="let hp of header_component.example.header_text; index as i" class="parameter">
+        <div class="param-number">
+          <span>{{</span> {{ i + 1 }} <span>}}</span>
+        </div>
+        <div class="field-wrapper">
+          <input type="text" placeholder="{{hp}}" 
+            (input)="onParamHeaderChange($event.target.value, i+1)">
+        </div>
+
+      </div>
+    </div>
+
+    <div *ngIf="body_component.example">
+      <p class="parameters-title">Body parameters</p>
+      <div *ngFor="let bp of body_component.example.body_text[0]; index as i" class="parameter">
+        <div class="param-number">
+          <span>{{</span> {{ i + 1 }} <span>}}</span>
+        </div>
+        <div class="field-wrapper">
+          <input type="text" placeholder="{{bp}}" 
+            (input)="onParamBodyChange($event.target.value, i+1)">
+        </div>
+      </div>
+    </div>
+
+
+    <div *ngIf="!body_component.example">
+      <p style="font-style: italic; color: #a3a3a3;">No parameters</p>
+    </div>
+
+
+
+
+
+  </div>
+</ion-content>
+
+<ion-content *ngIf="displayError" class="content-container">
+    <div class="error-container">
+      <p class="error-message">{{labelError}}</p>
+    </div>
+</ion-content>
+
+
+
+<ion-footer *ngIf="editTemplateView">
+  <ion-button [disabled]="sendButtonDisabled" ion-button fill="clear" type="submit" (click)="sendTemplate()"><ion-icon
+    name="send-sharp"></ion-icon>{{translationMap?.get('LABEL_SEND')}}
+  </ion-button>
+</ion-footer>