@chat21/chat21-ionic 3.0.79-rc.2 → 3.0.79-rc.3

package/src/app/components/navbar/navbar.component.ts

@@ -0,0 +1,189 @@
+import { AppConfigProvider } from 'src/app/services/app-config';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { EventsService } from 'src/app/services/events-service';
+import { ProjectsService } from './../../services/projects/projects.service';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { Project } from 'src/chat21-core/models/projects';
+import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+})
+export class NavbarComponent implements OnInit {
+
+  @Input() isSoundEnabled: boolean;
+  @Output() onSoundChange = new EventEmitter<string>();
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+  private tiledeskToken: string;
+
+  public projects: Project[];
+  public project: any;
+  private USER_ROLE: string;
+
+  public translationsMap: Map<string, string> = new Map();
+
+  public openDropdownProjects: boolean = false
+  private public_Key: string;
+  public isVisible: boolean;
+  public MT: boolean;
+
+  constructor(
+    private projectsService: ProjectsService,
+    private tiledeskAuthService: TiledeskAuthService,
+    private appConfigProvider: AppConfigProvider,
+    private translateService: CustomTranslateService, 
+    private events: EventsService,  
+  ) { }
+
+  ngOnInit() {
+    this.listenToUserGoOnline();
+    this.getStoredProjectAndUserRole();
+    this.initTranslations();
+    this.getOSCODE();
+  }
+
+  initTranslations(){
+    let keys= [
+      "NAVBAR.SIMULATE_VISITOR",
+      "NAVBAR.PROJECT_SETTINGS",
+      "NAVBAR.VIEW_ALL_PROJECTS",
+      "NAVBAR.ADD_PROJECT",
+      "NAVBAR.RECENT_PROJECTS",
+      "NAVBAR.OTHER_PROJECTS"
+    ]
+
+    this.translationsMap = this.translateService.translateLanguage(keys)
+  }
+
+  listenToUserGoOnline(){
+    this.events.subscribe('go:online', (isOnline)=> {
+      this.logger.log('[NAVBAR] listen to go:online --> ', isOnline);
+      if(isOnline){
+        this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
+        this.getProjects()
+      }
+    });
+  }
+
+  getProjects() {
+    this.logger.log('[NAVBAR] calling getProjects ... ');
+    this.projectsService.getProjects(this.tiledeskToken).subscribe((projects: any) => {
+      this.logger.log('[NAVBAR] getProjects PROJECTS ', projects);
+      if (projects) {
+          // this.projects = projects;
+          this.projects = projects.filter((project: any) => {
+              // this.logger.log('[NAVBAR] getProjects PROJECTS status ', project.id_project.status);
+              return project.id_project.status === 100;
+          });
+          this.logger.log('[NAVBAR] getProjects this.projects ', this.projects);
+      }
+    }, (error) => {
+        this.logger.error('[NAVBAR] getProjects - ERROR ', error)
+    }, () => {
+        this.logger.log('[NAVBAR] getProjects - COMPLETE')
+    });
+  }
+
+  getStoredProjectAndUserRole() {
+    this.events.subscribe('storage:last_project',project =>{
+      this.logger.log('[NAVBAR] stored_project ', project)
+      if (project && project !== 'undefined') {
+        this.project = project;
+        this.USER_ROLE = project.role;
+      }
+    })
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigProvider.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[NAVBAR] AppConfigService getAppConfig public_Key', this.public_Key)
+    this.logger.log('[NAVBAR] public_Key', this.public_Key)
+
+    let keys = this.public_Key.split("-");
+    // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
+
+    keys.forEach(key => {
+        // this.logger.log('NavbarComponent public_Key key', key)
+        if (key.includes("PAY")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let pay = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
+            if (pay[1] === "F") {
+                this.isVisible = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            } else {
+                this.isVisible = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
+            }
+        }
+
+        if (key.includes("MTT")) {
+            // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
+            let mt = key.split(":");
+            // this.logger.log('PUBLIC-KEY (Navbar) - mt key&value', mt);
+            if (mt[1] === "F") {
+                this.MT = false;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            } else {
+                this.MT = true;
+                // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+            }
+        }
+    });
+
+    if (!this.public_Key.includes("MTT")) {
+        this.MT = false;
+        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    }
+
+  }
+
+
+  onClickSound(event: string){
+    this.onSoundChange.emit(event)
+  }
+
+
+  testWidgetPage() {
+    const simulateVisitorBtnElem = <HTMLElement>document.querySelector('.simulate-visitor-btn');
+    simulateVisitorBtnElem.blur();
+    // + '&isOpen=true'
+    const url = this.appConfigProvider.getConfig().testsiteBaseUrl + '?tiledesk_projectid=' + this.project.id_project.id + '&project_name=' + this.project.id_project.name + '&role=' + this.USER_ROLE
+    window.open(url, '_blank');
+  }
+
+  onClickDropdownOption(event: string){
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    let url = baseUrl
+    if(event === 'projectSettings'){
+      url = baseUrl + 'project/' + this.project.id_project.id + '/project-settings/general'
+    }else if(event ==='allProjects'){
+      url = baseUrl + 'project/'
+    }else if('addProject'){
+      url = baseUrl + 'create-new-project/' 
+    }
+    window.open(url, '_blank');
+  }
+
+  goToHome(id_project: string, project_name: string,) {
+    // this.logger.log('!NAVBAR  goToHome prjct ', prjct)
+    this.logger.log('[NAVBAR] goToHome id_project ', id_project, 'project_name', project_name)
+    // RUNS ONLY IF THE THE USER CLICK OVER A PROJECT WITH THE ID DIFFERENT FROM THE CURRENT PROJECT ID
+    const baseUrl = this.appConfigProvider.getConfig().dashboardUrl
+    if (id_project !== this.project.id_project.id) {
+      // this.subscription.unsubscribe();
+      // this.unsubscribe$.next();
+      // this.unsubscribe$.complete();
+
+      const url = this.appConfigProvider.getConfig().dashboardUrl + `/project/${id_project}/home`
+      window.open(url, '_blank');
+
+    }
+}
+
+}

package/src/app/components/project-item/project-item.component.ts

@@ -1,3 +1,4 @@
+import { ConversationModel } from 'src/chat21-core/models/conversation';
 import { EventsService } from './../../services/events-service';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
@@ -11,6 +12,8 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
 import { WebSocketJs } from 'src/app/services/websocket/websocket-js';
 import { AppConfigProvider } from 'src/app/services/app-config';
+import { ConvertRequestToConversation } from 'src/chat21-core/utils/convertRequestToConversation';
+import { compareValues } from 'src/chat21-core/utils/utils';
 
 @Component({
   selector: 'app-project-item',
@@ -28,6 +31,7 @@ export class ProjectItemComponent implements OnInit {
   tiledeskToken: string;
 
   unservedRequestCount: number = 0;
+  unservedConversations: ConversationModel[] = [];
   currentUserRequestCount: number;
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
@@ -54,7 +58,8 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
     private appConfigProvider: AppConfigProvider,
-    public events: EventsService
+    public events: EventsService,
+    public convertRequestToConversation: ConvertRequestToConversation
   ) { }
 
   ngOnInit() {
@@ -308,6 +313,11 @@ export class ProjectItemComponent implements OnInit {
           if (r['status'] === 100) {
             if (this.hasmeInAgents(r['agents']) === true) {
               count = count + 1;
+              let conv = this.convertRequestToConversation.getConvFromRequest(r)
+              if(!this.unservedConversations.find((el) => {return el.uid === conv.uid})){
+                this.unservedConversations.push(conv)
+                this.unservedConversations.sort(compareValues('timestamp', 'desc'))
+              }
             }
           }
         });

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

@@ -21,10 +21,6 @@ import { ConversationDetailPage } from './conversation-detail.page';
 // tslint:disable-next-line: max-line-length
 import { HeaderConversationDetailComponent } from '../../components/conversation-detail/header-conversation-detail/header-conversation-detail.component';
 import { MessageTextAreaComponent } from '../../components/conversation-detail/message-text-area/message-text-area.component';
-import { BubbleDayMessageComponent } from '../../components/conversation-detail/bubble-day-message/bubble-day-message.component';
-import { BubbleSystemMessageComponent } from '../../components/conversation-detail/bubble-system-message/bubble-system-message.component';
-import { BubbleMyMessageComponent } from '../../components/conversation-detail/bubble-my-message/bubble-my-message.component';
-import { BubbleOthersMessageComponent } from '../../components/conversation-detail/bubble-others-message/bubble-others-message.component';
 // import { InfoContentComponent } from '../../components/conversation-info/info-content/info-content.component';
 // import { InfoDirectComponent } from '../../components/conversation-info/info-direct/info-direct.component';
 import { InfoContentComponent } from 'src/app/components/conversation-info/info-content/info-content.component';
@@ -65,10 +61,6 @@ import { PickerModule } from '@ctrl/ngx-emoji-mart';
     HeaderConversationDetailComponent,
     MessageTextAreaComponent,
     CannedResponseComponent,
-    // BubbleDayMessageComponent,
-    // BubbleSystemMessageComponent,
-    // BubbleMyMessageComponent,
-    // BubbleOthersMessageComponent,
     // InfoContentComponent,
     // InfoSupportGroupComponent,
     // InfoDirectComponent,

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

@@ -1,3 +1,4 @@
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 import { URL_SOUND_LIST_CONVERSATION } from './../../../chat21-core/utils/constants'
 import {
   Component,
@@ -10,6 +11,7 @@ import {
   HostListener,
   ChangeDetectorRef,
   Renderer2,
+  isDevMode
 } from '@angular/core'
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router'
 import {
@@ -151,8 +153,9 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   conversation_count: number;
   showSpinner: boolean = true;
   dropEvent: any;
-  conversation: any;
+  conversation: ConversationModel;
   USER_ROLE: string;
+
   isMine = isMine
   isInfo = isInfo
   isFirstMessage = isFirstMessage
@@ -760,6 +763,18 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     }
   }
 
+  onConversationLoaded(conversation): ConversationModel{
+    if(conversation.attributes && conversation.attributes['projectId']){
+      let project = localStorage.getItem(conversation.attributes['projectId'])
+      if(project){
+        project = JSON.parse(project)
+        conversation.attributes.project_name = project['name']
+      }
+
+      return conversation
+    }
+  }
+
   setHeaderContent() {
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationWith', this.conversationWith)
     //   this.logger.log('[CONVS-DETAIL] - setHeaderContent conversationsHandlerService', this.conversationsHandlerService)
@@ -769,6 +784,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
         this.logger.debug('[CONV-COMP] setHeaderContent getConversationDetail: conversationsHandlerService ', this.conversationWith, conv, this.conv_type)
         if (conv) {
+          this.conversation = this.onConversationLoaded(conv)
           this.conversationAvatar = setConversationAvatar(
             conv.conversation_with,
             conv.conversation_with_fullname,
@@ -783,6 +799,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
             this.logger.debug('[CONV-COMP] setHeaderContent getConversationDetail: archivedConversationsHandlerService', this.conversationWith, conv)
             if (conv) {
               console.log('[CONVS-DETAIL] - setHeaderContent getConversationDetail (archived)', this.conversationWith, 'CONVS', conv)
+              this.conversation = this.onConversationLoaded(conv)
               this.conversationAvatar = setConversationAvatar(
                 conv.conversation_with,
                 conv.conversation_with_fullname,
@@ -802,7 +819,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       this.logger.debug('[CONV-COMP] setHeaderContent getConversationDetail: archivedConversationsHandlerService', this.conversationWith, this.conv_type)
       this.archivedConversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
         if (conv) {
-
+          this.conversation = this.onConversationLoaded(conv)
           this.conversationAvatar = setConversationAvatar(
             conv.conversation_with,
             conv.conversation_with_fullname,
@@ -816,6 +833,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         if(!conv){
           this.conversationsHandlerService.getConversationDetail(this.conversationWith, (conv) => {
             if (conv) {
+              this.conversation = this.onConversationLoaded(conv)
               this.conversationAvatar = setConversationAvatar(
                 conv.conversation_with,
                 conv.conversation_with_fullname,
@@ -917,6 +935,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.channelType,
         attributes,
       )
+
+      isDevMode()? null : this.segmentNewAgentMessage(this.conversation)
     }
   }
   // ----------------------------------------------------------
@@ -1766,6 +1786,55 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     clearTimeout(this.setTimeoutWritingMessages)
   }
 
+
+  segmentNewAgentMessage(conversation: ConversationModel){
+    let user = this.loggedUser
+    try {
+      window['analytics'].page("Chat Conversation Detail Page, Message Added", {});
+    } catch (err) {
+      this.logger.error('Event:Message Added [page] error', err);
+    }
+
+    try {
+      window['analytics'].identify(user.uid, {
+        name: user.firstname + ' ' + user.lastname,
+        email: user.email,
+        logins: 5,
+      });
+    } catch (err) {
+      this.logger.error('Event:Message Added [identify] error', err);
+    }
+
+    try {
+      window['analytics'].track('Message Added', {
+        "username": user.firstname + ' ' + user.lastname,
+        "userId": user.uid,
+        "conversation_id": conversation.uid,
+        "channel_type": conversation.channel_type,
+        "conversation_with": conversation.conversation_with,
+        "conversation_with_fullname": conversation.conversation_with_fullname,
+        "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
+        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+      },
+      {
+        "context": {
+          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
+        }
+      });
+    } catch (err) {
+      this.logger.error('Event:Message Added [track] error', err);
+    }
+
+    try {
+      window['analytics'].group(conversation.attributes.projectId, {
+        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
+        // plan: projectProfileName,
+      });
+    } catch (err) {
+      this.logger.error('Event:Message Added [group] error', err);
+    }
+  }
+
   // -------------------------------------------------------------
   // DRAG FILE
   // -------------------------------------------------------------

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

@@ -6,6 +6,7 @@ ion-header {
   border-bottom-width: thin;
   &:not(.mobile){
     border: none;
+    background: var(--list-bkg-color);
   }
 }
 

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

@@ -1,6 +1,6 @@
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { ArchivedConversationsHandlerService } from 'src/chat21-core/providers/abstract/archivedconversations-handler.service'
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, isDevMode, OnInit, ViewChild } from '@angular/core'
 import { IonContent, ModalController } from '@ionic/angular'
 import { ActivatedRoute, Router, NavigationExtras } from '@angular/router'
 // config
@@ -47,6 +47,7 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 import { NetworkService } from 'src/app/services/network-service/network.service'
 import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
+import { TYPE_DIRECT } from 'src/chat21-core/utils/constants';
 
 @Component({
   selector: 'app-conversations-list',
@@ -479,6 +480,7 @@ export class ConversationListPage implements OnInit {
         if (conversation) {
           this.onImageLoaded(conversation)
           this.onConversationLoaded(conversation)
+          !isDevMode() && conversation.is_new? this.segmentNewConversationAdded(conversation) : null;
         }
     })
 
@@ -515,27 +517,6 @@ export class ConversationListPage implements OnInit {
     this.logger.log('[CONVS-LIST-PAGE] - subscribeLoggedUserLogout uidConvSelected ',this.uidConvSelected)
   }
 
-  /**
-   * ::: subscribeChangedConversationSelected :::
-   * evento richiamato quando si seleziona un utente nell'elenco degli user
-   * apro dettaglio conversazione
-   */
-  // --------------------------------
-  // !!!!!! IS USED? ?????
-  // ------------------------------
-  subscribeChangedConversationSelected = (user: UserModel, type: string) => {
-    this.logger.log('[CONVS-LIST-PAGE]  ************** subscribeUidConvSelectedChanged navigateByUrl',user, type)
-    this.uidConvSelected = user.uid
-    this.logger.log('[CONVS-LIST-PAGE]  ************** uidConvSelected ', this.uidConvSelected)
-    // this.conversationsHandlerService.uidConvSelected = user.uid;
-    const conversationSelected = this.conversations.find( (item) => item.uid === this.uidConvSelected)
-    if (conversationSelected) {
-      this.logger.log('[CONVS-LIST-PAGE] --> uidConvSelected: ',this.conversationSelected, this.uidConvSelected)
-      this.conversationSelected = conversationSelected
-    }
-    // this.router.navigateByUrl('conversation-detail/' + user.uid + '?conversationWithFullname=' + user.fullname);
-  }
-
   /**
    * ::: subscribeProfileInfoButtonClicked :::
    * evento richiamato quando si seleziona bottone profile-info-modal
@@ -990,6 +971,54 @@ export class ConversationListPage implements OnInit {
     return indexes
   }
 
+  private segmentNewConversationAdded(conversation: ConversationModel){
+    let user = this.tiledeskAuthService.getCurrentUser()
+    try {
+      window['analytics'].page("Chat List Conversations Page, Conversation Added", {});
+    } catch (err) {
+      this.logger.error('Event:Conversation Added [page] error', err);
+    }
+
+    try {
+      window['analytics'].identify(user.uid, {
+        name: user.firstname + ' ' + user.lastname,
+        email: user.email,
+        logins: 5,
+      });
+    } catch (err) {
+      this.logger.error('Event:Conversation Added [identify] error', err);
+    }
+
+    try {
+      window['analytics'].track('Conversation Added', {
+        "username": user.firstname + ' ' + user.lastname,
+        "userId": user.uid,
+        "conversation_id": conversation.uid,
+        "channel_type": conversation.channel_type,
+        "conversation_with": conversation.conversation_with,
+        "conversation_with_fullname": conversation.conversation_with_fullname,
+        "department_name":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentName: null,
+        "department_id":(conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.departmentId: null,
+      },
+      {
+        "context": {
+          "groupId": (conversation.channel_type !== TYPE_DIRECT)? conversation.attributes.projectId: null
+        }
+      });
+    } catch (err) {
+      this.logger.error('Event:Conversation Added [track] error', err);
+    }
+
+    try {
+      window['analytics'].group(conversation.attributes.projectId, {
+        name: (conversation.attributes.project_name)? conversation.attributes.project_name : null,
+        // plan: projectProfileName,
+      });
+    } catch (err) {
+      this.logger.error('Event:Conversation Added [group] error', err);
+    }
+  }
+
   // ------------------------------------------------------------------
   // !!! Not used methods !!!
   // ------------------------------------------------------------------

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

@@ -1,3 +1,4 @@
+import { CannedResponsesService } from 'src/app/services/canned-responses/canned-responses.service';
 import { Component, Input, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@@ -38,6 +39,7 @@ export class CreateCannedResponsePage implements OnInit {
     private translate: TranslateService,
     public tiledeskAuthService: TiledeskAuthService,
     public tiledeskService: TiledeskService,
+    public cannedResponsesService: CannedResponsesService,
     private menu: MenuController,
     public events: EventsService,
     private route: ActivatedRoute,
@@ -181,19 +183,17 @@ export class CreateCannedResponsePage implements OnInit {
     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);
-      });
+    this.cannedResponsesService.add(this.tiledeskToken, this.prjctID, canned_response_title.trim(), canned_response_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);
+      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() {

package/src/app/services/canned-responses/canned-responses.service.ts

@@ -43,6 +43,32 @@ export class CannedResponsesService {
     }))
   }
 
+  // -------------------------------------------------------------------------------------
+  // @ Create - Save (POST) new canned response
+  // -------------------------------------------------------------------------------------
+  public add(token: string, projectid: string, title: string, message: string) {
+    const url =  this.apiUrl  + projectid + '/canned/'
+    this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - URL', url); 
+    
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: token
+      })
+    };
+
+    const body = {
+      title: title,
+      text: message
+    }
+
+    return this.http.post(url, JSON.stringify(body), httpOptions).pipe(map((res: any) => {
+      this.logger.log('[TILEDESK-SERVICE] - CREATE CANNED-RES - RES ', res);
+      return res
+    }))
+      
+  }
+
   public edit(token: string, projectid: string, canned: any){
     const cannedResponsesURL = this.apiUrl + projectid + "/canned/"+ canned._id;
     this.logger.log('[CANNED-RESPONSES-SERVICE] editCannedResponses - URL ', cannedResponsesURL);

package/src/app/services/projects/projects.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProjectsService } from './projects.service';
+
+describe('ProjectsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ProjectsService = TestBed.get(ProjectsService);
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/services/projects/projects.service.ts

@@ -0,0 +1,43 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
+import { Project } from 'src/chat21-core/models/projects';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { AppConfigProvider } from '../app-config';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProjectsService {
+
+  private apiUrl: string;
+  private logger: LoggerService = LoggerInstance.getInstance();
+
+  constructor(
+    public http: HttpClient,
+    public appConfigProvider: AppConfigProvider
+  ) {
+   
+    this.logger.log('[PROJECTS-SERVICE] HELLO !');
+    this.apiUrl = appConfigProvider.getConfig().apiUrl;
+    this.logger.log('[PROJECTS-SERVICE] apiUrl ', this.apiUrl);
+  }
+
+  public getProjects(token: string) {
+    const url = this.apiUrl  + "projects/";
+    this.logger.log('[PROJECTS-SERVICE] getProjects - URL ', url);
+
+    const httpOptions = {
+      headers: new HttpHeaders({
+        'Content-Type': 'application/json',
+        Authorization: token
+      })
+    };
+    
+    return this.http.get(url, httpOptions).pipe(map((res: Project[]) => {
+        this.logger.log('[PROJECTS-SERVICE] getProjects - RES ', res);
+        return res
+    }))
+  }
+}