@chat21/chat21-ionic 3.0.89-rc.1 → 3.0.90-rc.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # chat21-ionic ver 3.0
 
+### 3.0.90-rc.1
+- added: autofocus on first input
+- added: tiledesk logo on sidebar
+- added: sourceTitle if exist as message info; otherwize show sourcePage info from message attributes
+- added: email icon if chat message is sent also via email
+- changed: default color submit button
+- changed: removed login modal and moved to dashboard login on logout/first login
+- bug-fixed: chinese characters not displayed due to isEmojii function
+- bug-fixed: label not translated in navbar
+
+
+### 3.0.89 in PROD
+
 ### 3.0.89-rc.1
 - bug-fixed: projectId/project_name is undefined in conversations-list component
 

package/package.json

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

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

@@ -49,14 +49,14 @@ const routes: Routes = [
     path: 'unassigned-conversations',
     loadChildren: () => import('./pages/unassigned-conversations/unassigned-conversations.module').then( m => m.UnassignedConversationsPageModule)
   },
-  {
-    path: 'create-ticket',
-    loadChildren: () => import('./pages/create-ticket/create-ticket.module').then( m => m.CreateTicketPageModule)
-  },
   {
     path: 'create-requester',
     loadChildren: () => import('./pages/create-requester/create-requester.module').then( m => m.CreateRequesterPageModule)
   },
+  {
+    path: 'create-ticket',
+    loadChildren: () => import('./modals/create-ticket/create-ticket.module').then( m => m.CreateTicketPageModule)
+  },
   {
     path: 'create-canned-response',
     loadChildren: () => import('./modals/create-canned-response/create-canned-response.module').then( m => m.CreateCannedResponsePageModule)

package/src/app/app.component.html

@@ -6,7 +6,7 @@
     <app-network-offline></app-network-offline>
 
 
-    <app-navbar *ngIf="!IS_ON_MOBILE_DEVICE"
+    <app-navbar *ngIf="!IS_ON_MOBILE_DEVICE && lang"
       [isSoundEnabled]="isSoundEnabled"
       (onSoundChange)="onSoundChange($event)">
     </app-navbar>

package/src/app/app.component.ts

@@ -109,6 +109,7 @@ export class AppComponent implements OnInit {
   public executedInitializeAppByWatchConnection: boolean = false;
   private isInitialized: boolean = false;
   private version: string;
+  public lang: string; 
   IS_ONLINE: boolean;
   IS_ON_MOBILE_DEVICE: boolean;
   SUPPORT_MODE: boolean;
@@ -575,9 +576,11 @@ export class AppComponent implements OnInit {
     }
     else {
       this.logger.log('[APP-COMP] tranlatedLanguage not includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
+      chat_lang = 'en'
       this.translate.setDefaultLang('en');
       this.translate.use('en');
     }
+    this.lang=chat_lang
 
   }
 
@@ -746,10 +749,11 @@ export class AppComponent implements OnInit {
       this.IS_ONLINE = false;
       // clearTimeout(this.timeModalLogin);
       // this.timeModalLogin = setTimeout(() => {
-      if (!this.hadBeenCalledOpenModal) {
-        this.authModal = this.presentModal('initAuthentication');
-        this.hadBeenCalledOpenModal = true;
-      }
+      // if (!this.hadBeenCalledOpenModal) {
+      //   this.authModal = this.presentModal('initAuthentication');
+      //   this.hadBeenCalledOpenModal = true;
+      // }
+      this.goToDashboardLogin()
       // }, 1000);
     }
   }
@@ -1116,15 +1120,13 @@ export class AppComponent implements OnInit {
     this.chatManager.goOffLine();
 
     this.router.navigateByUrl('conversation-detail/'); //redirect to basePage
-    // this.goToDashboardLogin()
+    this.goToDashboardLogin()
     
-    // clearTimeout(this.timeModalLogin);
-    // this.timeModalLogin = setTimeout(() => {
-    if (!this.hadBeenCalledOpenModal) {
-      this.authModal = this.presentModal('goOffLine');
-      this.hadBeenCalledOpenModal = true
-    }
-    // }, 1000);
+
+    // if (!this.hadBeenCalledOpenModal) {
+    //   this.authModal = this.presentModal('goOffLine');
+    //   this.hadBeenCalledOpenModal = true
+    // }
 
     // this.unsubscribe$.next();
     // this.unsubscribe$.complete();
@@ -1132,7 +1134,7 @@ export class AppComponent implements OnInit {
   }
 
   goToDashboardLogin(){
-    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '/index.html'
+    let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
     const myWindow = window.open(DASHBOARD_URL, '_self');
     myWindow.focus();
   }

package/src/app/app.module.ts

@@ -82,10 +82,12 @@ import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storag
 import { ConversationListPageModule } from './pages/conversations-list/conversations-list.module';
 import { ConversationDetailPageModule } from './pages/conversation-detail/conversation-detail.module';
 import { LoginPageModule } from './pages/authentication/login/login.module';
-import { LoaderPreviewPageModule } from './modals/loader-preview/loader-preview.module';
-import { CreateTicketPageModule } from './pages/create-ticket/create-ticket.module';
 import { CreateRequesterPageModule } from './pages/create-requester/create-requester.module';
+// MODALS
+import { LoaderPreviewPageModule } from './modals/loader-preview/loader-preview.module';
+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';
 // UTILS
 import { ScrollbarThemeModule } from './utils/scrollbar-theme.directive';
 import { SharedModule } from 'src/app/shared/shared.module';
@@ -102,7 +104,7 @@ import { ConnectionService } from 'ng-connection-service';
 import { WebSocketJs } from './services/websocket/websocket-js';
 import { UnassignedConversationsPageModule } from './pages/unassigned-conversations/unassigned-conversations.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { SendEmailModalModule } from './modals/send-email/send-email.module';
+
 
 // FACTORIES
 export function createTranslateLoader(http: HttpClient) {

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -209,7 +209,11 @@
     
     <div class="base_receive sourcePage-container" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && message?.attributes?.sourcePage" [class.show]="showSourceInfo && showSourceInfoIndex===i">
       <svg xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" viewBox="0 0 24 24"  fill="none"><path _ngcontent-wrg-c96="" d="M0 0h24v24H0V0z" fill="none"></path><path _ngcontent-wrg-c96="" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm13.89 5.4c-.26-.81-1-1.4-1.9-1.4h-1v-3c0-.55-.45-1-1-1h-6v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C17.92 5.77 20 8.65 20 12c0 2.08-.81 3.98-2.11 5.4z"></path></svg>
-      <span title="{{message?.attributes?.sourcePage}}" class="truncate"><a target="_blank" href="{{message?.attributes?.sourcePage}}">{{message?.attributes?.sourcePage}}</a></span>
+      <a target="_blank" href="{{message?.attributes?.sourcePage}}" class="truncate">
+        <span title="{{message?.attributes?.sourcePage}}" *ngIf="!message?.attributes?.sourceTitle">{{message?.attributes?.sourcePage}}</span>
+        <span title="{{message?.attributes?.sourcePage}}" *ngIf="message?.attributes?.sourceTitle">{{message?.attributes?.sourceTitle}}</span>
+      </a>
+      
     </div>
 
     <!-- message type:: button &&  -->

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

@@ -17,7 +17,7 @@ import { Platform } from '@ionic/angular'
 
 import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
-import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CreateTicketPage } from 'src/app/modals/create-ticket/create-ticket.page'
 import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service'
 import { TYPE_DIRECT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants'
 

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
-import { CreateTicketPage } from 'src/app/pages/create-ticket/create-ticket.page'
+import { CreateTicketPage } from 'src/app/modals/create-ticket/create-ticket.page'
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service'
 @Component({
   selector: 'header-conversations-list',

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

@@ -1,8 +1,8 @@
 <ion-navbar class="navbar navbar-absolute">
   <div class="container-fluid">
-      <!-- <div class="navbar-left">
-        left
-      </div> -->
+      <div class="navbar-left">
+        <div class="title"> {{translationsMap?.get('LABEL_CHAT')}}</div>
+      </div>
       <div class="navbar-right">
         <!-- test site -->
         <ng-container *ngIf="project">

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

@@ -49,6 +49,15 @@ ion-navbar{
 
 .navbar-left{
     float: left;
+
+    display: inline-flex;
+    align-items: center;
+
+    padding-left: 15px;
+}
+
+.title{
+    font-size: 18px;
 }
 
 .simulate-visitor-btn{

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

@@ -59,7 +59,8 @@ export class NavbarComponent implements OnInit {
       "NAVBAR.VIEW_ALL_PROJECTS",
       "NAVBAR.ADD_PROJECT",
       "NAVBAR.RECENT_PROJECTS",
-      "NAVBAR.OTHER_PROJECTS"
+      "NAVBAR.OTHER_PROJECTS",
+      "LABEL_CHAT"
     ]
 
     this.translationsMap = this.translateService.translateLanguage(keys)

package/src/app/components/sidebar/sidebar.component.html

@@ -222,6 +222,20 @@
       </li>
 
 
+      <!-- ------------------------------------------- -->
+      <!-- LOGO TILEDESK  (click)="goToOfficialSite()" -->
+      <!-- ------------------------------------------- -->
+      <li  matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" class="logo"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="text-align: center;">
+          <a target="_blank" href="{{ tiledesk_url }}" class="customAncor">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="40px" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">
+              <path fill="#F18876" d="M51.8,28.2h-19c-1.7,0-3-1.3-3-3V6.4c0-1.7-1.3-3-3-3H8c-1.7,0-3,1.3-3,3v22v22c0,1.7,1.3,3,3,3H6.7h3.4  c0.8,0,1.3,0.2,1.9,0.8l2.3,2.3l2.1,2.1c0.8,0.8,1.7,0.8,2.4,0l2.1-2.1l2.3-2.3c0.6-0.6,1.1-0.8,1.9-0.8H52c1.7,0,3-1.3,3-3V31.2  C54.8,29.5,53.5,28.2,51.8,28.2"/>
+              <path fill="#E5BBAD" d="M52,24.2H36.8c-1.5,0-2.8-1.3-2.8-2.8V6.2c0-1.5,1.3-2.8,2.8-2.8H52c1.5,0,2.8,1.3,2.8,2.8v15.2  C54.8,22.9,53.5,24.2,52,24.2"/>
+            </svg>
+          </a>
+      </li>
+
+
       <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
   [plan_name]="plan_name"
   [plan_type]="plan_type"
@@ -236,41 +250,6 @@
   (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
 </app-sidebar-user-details> -->
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
     </ul>
   </div>
 </div>

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

@@ -57,6 +57,7 @@ export class SidebarComponent implements OnInit {
   dashboard_activities_url: string;
   dashboard_history_url: string;
   dashboard_settings_url: string;
+  tiledesk_url: string;
   constructor(
     public imageRepoService: ImageRepoService,
     public appStorageService: AppStorageService,
@@ -107,6 +108,7 @@ export class SidebarComponent implements OnInit {
     } else if (USER_ROLE === 'agent') {
       this.dashboard_settings_url = this.DASHBOARD_URL + this.project_id + '/cannedresponses'
     }
+    this.tiledesk_url = 'https://www.tiledesk.com'
 
   }
 

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

@@ -144,8 +144,8 @@
         justify-content: center;
     
         ion-button{
-            background-color: #f1f4f7;
-            color: rgb(98, 112, 139);
+            background-color:rgb(0,86,192);
+            color:#f1f4f7;
             border-radius: 4px;
             font-size: 18px;
             height: 46px;

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

@@ -96,6 +96,11 @@ export class CreateCannedResponsePage implements OnInit {
     if(this.message && (this.message !== '' || this.message !== null)){
       this.cannedFormGroup.patchValue({ message: this.message})
     }
+
+    const that = this
+    setTimeout(() => {
+      that.addFocus()
+    }, 1500);
   }
 
   buildForm() : FormGroup{

package/src/app/{pages → modals}/create-ticket/create-ticket.page.html

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

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

@@ -133,8 +133,8 @@ ion-label.message-placeholder{
     justify-content: center;
 
     ion-button{
-        background-color: #f1f4f7;
-        color: rgb(98, 112, 139);
+        background-color:rgb(0,86,192);
+        color:#f1f4f7;
         border-radius: 4px;
         font-size: 18px;
         height: 46px;

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

@@ -44,6 +44,11 @@ export class SendEmailModal implements OnInit {
     if(this.msg && (this.msg !== '' || this.msg !== null)){
       this.emailFormGroup.patchValue({ text: this.msg})
     }
+
+    const that = this
+    setTimeout(() => {
+      that.addFocus()
+    }, 1500);
   }
 
   addFocus(){

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

@@ -57,7 +57,8 @@ import {
   MESSAGE_TYPE_MINE,
   MESSAGE_TYPE_OTHERS,
   URL_SOUND_LIST_CONVERSATION, 
-  TYPE_DIRECT 
+  TYPE_DIRECT, 
+  TYPE_MSG_EMAIL
 } from 'src/chat21-core/utils/constants'
 import {
   checkPlatformIsMobile,
@@ -77,7 +78,7 @@ import {
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service'
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 
-import { Subject } from 'rxjs'
+import { Observable, Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 import { TiledeskService } from '../../services/tiledesk/tiledesk.service'
 import { NetworkService } from '../../services/network-service/network.service'
@@ -924,7 +925,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     
   }
 
-  sendEmail(message: string){
+  sendEmail(message: string): Observable<boolean>{
     const tiledeskToken= this.tiledeskAuthService.getTiledeskToken();
     const emailFormGroup = {
       to: this.leadInfo.email,
@@ -932,17 +933,21 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
       text: message,
       request_id: this.conversationWith
     }
+    let status = new Subject<boolean>();
     this.tiledeskService.sendEmail(tiledeskToken, this.leadInfo.projectId, emailFormGroup).subscribe((res)=> {
       this.logger.debug('[SEND-EMAIL-MODAL] subscribe to sendEmail API response -->', res)
       if(res && res.queued){
         this.presentToast(this.translationsMap.get('SEND_EMAIL_SUCCESS_OFFLINE_MESSAGE'), 'success', '', 2000)
+        status.next(true)
       }
     },(error)=> {
       this.logger.error('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL  - ERROR  ', error)
       this.presentToast(this.translationsMap.get('SEND_EMAIL_ERROR'), 'danger', '', 2000)
+      status.next(false)
     }, ()=> {
       this.logger.log('[SEND-EMAIL-MODAL] subscribe to sendEmail API CALL /* COMPLETE */')
     })
+    return status.asObservable();
   }
 
   returnSendMessage(e: any) {
@@ -1011,21 +1016,40 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.logger.log('[CONVS-DETAIL] - SEND MESSAGE msg: ', msg, ' - messages: ', this.messages, ' - loggedUser: ', this.loggedUser)
 
     if ((msg && msg.trim() !== '') || type !== TYPE_MSG_TEXT) {
-      this.conversationHandlerService.sendMessage(
-        msg,
-        type,
-        metadata,
-        this.conversationWith,
-        this.conversationWithFullname,
-        this.loggedUser.uid,
-        fullname,
-        this.channelType,
-        attributes,
-      )
-
+      
       if(this.isEmailEnabled && !this.leadIsOnline && this.leadInfo && this.leadInfo.email){
         this.logger.log('[CONVS-DETAIL] - SEND MESSAGE --> SENDING EMAIL', msg, this.leadInfo.email)
-        this.sendEmail(msg)
+        this.sendEmail(msg).subscribe(status => {
+          if(status){
+            //SEND MESSAGE ALSO AS EMAIL
+            attributes['channel']= TYPE_MSG_EMAIL
+          }
+
+          this.conversationHandlerService.sendMessage(
+            msg,
+            type,
+            metadata,
+            this.conversationWith,
+            this.conversationWithFullname,
+            this.loggedUser.uid,
+            fullname,
+            this.channelType,
+            attributes,
+          )
+        })
+      }else {
+        //send STANDARD TEXT MESSAGE
+        this.conversationHandlerService.sendMessage(
+          msg,
+          type,
+          metadata,
+          this.conversationWith,
+          this.conversationWithFullname,
+          this.loggedUser.uid,
+          fullname,
+          this.channelType,
+          attributes,
+        )
       }
       isDevMode()? null : this.segmentNewAgentMessage(this.conversation)
     }
@@ -1161,7 +1185,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
   }
 
   updateLeadInfo(msg){
-    if (msg.attributes && msg.attributes['updateUserFullname']) {
+    if (msg.attributes && msg.attributes.hasOwnProperty("updateUserFullname")) {
       const userFullname = msg.attributes['updateUserFullname'];
       this.logger.debug('[CONVS-DETAIL] newMessageAdded --> updateUserFullname', userFullname)
       this.conversationWithFullname = userFullname //update info for next sendMessage object
@@ -1175,7 +1199,7 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.conversation.attributes['project_name']
       )
     }
-    if (msg.attributes && msg.attributes['updateUserEmail']) {
+    if (msg.attributes && msg.attributes.hasOwnProperty("updateUserEmail")) {
       const userEmail = msg.attributes['updateUserEmail'];
       this.logger.debug('[CONVS-DETAIL] newMessageAdded --> userEmail', userEmail)
       this.conversationAvatar = setConversationAvatar(
@@ -1187,7 +1211,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
         this.conversation.attributes['project_name']
       )
       this.getLeadDetail()
-      
     }
   }
 

package/src/chat21-core/utils/utils-message.ts

@@ -139,7 +139,8 @@ export function isEmojii(message: any){
     if(!message) return false;
     const onlyEmojis = message.replace(new RegExp('[\u0000-\u1eeff]', 'g'), '')
     const visibleChars = message.replace(new RegExp('[\n\r\s]+|( )+', 'g'), '')
-    if(onlyEmojis === '' || visibleChars == '') return false
+    const chineseChars = message.replace(new RegExp('[\u4e00-\u9fa5]', 'g'), '')
+    if(onlyEmojis === '' || visibleChars == '' || chineseChars =='') return false
     return (onlyEmojis.length === visibleChars.length && onlyEmojis.length <= 2)
   } catch(e) {
     return false

package/src/global.scss

@@ -314,7 +314,7 @@ select:-webkit-autofill:focus {
 
 .sidebar .logo {
     position: relative;
-    padding: 13px 15px;
+    margin-top: auto;
     z-index: 4;
 }
 
@@ -447,10 +447,18 @@ select:-webkit-autofill:focus {
     margin-top: 0px;
 }
 
+.nav-container {
+    height: 100%;
+}
+
 .nav {
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    
 }
 
 .nav:before {