@chat21/chat21-ionic 3.0.60-rc6 → 3.0.60-rc8

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat21-ionic ver 3.0
 
+### 3.0.60-rc8
+- Fixes the bug:: "info" messages sent by "SYSTEM" are not translated
+- Adds the Portuguese language
+- Adds the French language
+- Adds the Russian language
+- Adds the Turkish language
+
+### 3.0.60-rc7
+- Adds German language
+- Adds a method that translates chat texts based on the language of the browser settings if no preferred language is selected in the dashboard or based on the preferred language (ignoring the browser language)
+- Manages the language used for translations from the "moment" library based on the language of the browser settings if no preferred language has been selected in the dashboard or on the preferred language selected (ignoring the browser language)
+- Adds the ability to manage the visibility of canned responses in env.sample, chat-config-tempalte.json and chat-config.json
+- Fixes the bug: in the 'item' that displays the pinned project and the number of the not assigned conversions  the tooltip is not correctly displayed
+
 ### 3.0.60-rc6
 - Fixes the bug: push notifications are initialized even if the "pushEngine" configuration variable is set to "none"
 - Adds spanish language

package/env.sample

@@ -3,7 +3,7 @@ DASHBOARD_URL=https://YOUR_DASHBOARD_URL
 WS_URL=wss://YOUR_TILEDESK_SERVER_URL?token=
 WS_URL_RELATIVE=********
 SERVER_BASE_URL=http://localhost:3000/
-
+FEATURES_TOKEN=CAR:F
 CHAT21_ENGINE=mqtt
 UPLOAD_ENGINE=native
 PUSH_ENGINE=none

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.60-rc6",
+    "version": "3.0.60-rc8",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.ts

@@ -98,7 +98,7 @@ export class AppComponent implements OnInit {
   public missingConnectionToast: any
   public executedInitializeAppByWatchConnection: boolean = false;
   private version: string;
- 
+
   // private isOnline: boolean = false;
 
   wsService: WebSocketJs;
@@ -443,7 +443,7 @@ export class AppComponent implements OnInit {
       // console.log("Check platform");
       this.getPlatformName();
 
-      this.setLanguage();
+      // this.setLanguage();
 
       // if (this.splashScreen) {
       this.splashScreen.hide();
@@ -521,19 +521,42 @@ export class AppComponent implements OnInit {
   }
 
   /** */
-  setLanguage() {
+  setLanguage(currentUser) {
+    // const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
+    this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUser);
+
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid;
+      this.logger.log('[APP-COMP] - setLanguage current_user uid: ', currentUserId);
+    }
     this.translate.setDefaultLang('en');
     this.translate.use('en');
-    this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
-    let language;
-    if (navigator.language.indexOf('-') !== -1) {
-      language = navigator.language.substring(0, navigator.language.indexOf('-'));
-    } else if (navigator.language.indexOf('_') !== -1) {
-      language = navigator.language.substring(0, navigator.language.indexOf('_'));
-    } else {
-      language = navigator.language;
+
+    const browserLang = this.translate.getBrowserLang();
+    this.logger.log('[APP-COMP] browserLang: ', browserLang);
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[APP-COMP] stored_preferred_lang: ', stored_preferred_lang);
+
+    let chat_lang = ''
+    if (browserLang && !stored_preferred_lang) {
+      chat_lang = browserLang
+    } else if (browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
     }
-    this.translate.use(language);
+
+    this.translate.use(chat_lang);
+
+    // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
+    // let language;
+    // if (navigator.language.indexOf('-') !== -1) {
+    //   language = navigator.language.substring(0, navigator.language.indexOf('-'));
+    // } else if (navigator.language.indexOf('_') !== -1) {
+    //   language = navigator.language.substring(0, navigator.language.indexOf('_'));
+    // } else {
+    //   language = navigator.language;
+    // }
+    // this.translate.use(language);
   }
 
 
@@ -802,7 +825,7 @@ export class AppComponent implements OnInit {
       .pipe(filter((state) => state !== null))
       .subscribe((state: any) => {
         this.logger.log('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
-     
+
         if (state && state === AUTH_STATE_ONLINE) {
           // const user = this.tiledeskAuthService.getCurrentUser();
           // if (this.isOnline === false) {
@@ -868,6 +891,7 @@ export class AppComponent implements OnInit {
     // }
     this.events.publish('go:online', true);
     const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.setLanguage(currentUser);
     // this.logger.printDebug('APP-COMP - goOnLine****', currentUser);
     this.logger.log('[APP-COMP] - GO-ONLINE - currentUser ', currentUser);
     this.chatManager.setTiledeskToken(tiledeskToken);
@@ -907,7 +931,7 @@ export class AppComponent implements OnInit {
     const supportmode = this.appConfigProvider.getConfig().supportMode;
     this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', supportmode);
     if (supportmode === true) {
-        this.webSocketClose()
+      this.webSocketClose()
     }
     // this.isOnline = false;
     // this.conversationsHandlerService.conversations = [];
@@ -1088,7 +1112,7 @@ export class AppComponent implements OnInit {
   }
 
   private initConversationsHandler(userId: string) {
-    const keys = ['YOU'];
+    const keys = ['YOU', 'INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU'];
     const translationMap = this.translateService.translateLanguage(keys);
 
     this.logger.log('[APP-COMP] initConversationsHandler ------------->', userId, this.tenant);

package/src/app/app.module.ts

@@ -90,7 +90,7 @@ import { ConversationInfoModule } from 'src/app/components/conversation-info/con
 
 
 // Directives
-import { TooltipModule } from 'ng2-tooltip-directive';
+
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { Network } from '@ionic-native/network/ngx';
 import { ConnectionService } from 'ng-connection-service';

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -6,6 +6,7 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { isFile, isFrame, isImage } from 'src/chat21-core/utils/utils-message';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TranslateService } from '@ngx-translate/core';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 import * as moment from 'moment';
 @Component({
   selector: 'chat-bubble-message',
@@ -36,53 +37,78 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   };
 
   private logger: LoggerService = LoggerInstance.getInstance()
+ 
   constructor(
     public sanitizer: DomSanitizer,
-    private translate: TranslateService) {
+    private translate: TranslateService,
+    public tiledeskAuthService: TiledeskAuthService
+    
+    ) {
     // console.log('BUBBLE-MSG Hello !!!!')
   }
 
   ngOnInit() {
+
+    this.setMomentLocale()
+    // this.browserLang = this.translate.getBrowserLang();
+  
+    // if (this.browserLang) {
+    //   if (this.browserLang === 'it') {
+
+
+    //     moment.locale('it', {
+    //       calendar: {
+    //         lastDay: '[Ieri alle] LT',
+    //         sameDay: '[Oggi alle] LT',
+    //         nextDay: '[Domani alle] LT',
+    //         lastWeek: '[Ultimo] dddd [alle] LT',
+    //         nextWeek: 'dddd [alle] LT',
+    //         sameElse: 'lll'
+    //       }
+    //     });
+
+    //   } else {
+    //     moment.locale('en', {
+    //       calendar: {
+    //         lastDay: '[Yesterday at] LT',
+    //         sameDay: '[Today at] LT',
+    //         nextDay: '[Tomorrow at] LT',
+    //         lastWeek: '[last] dddd [at] LT',
+    //         nextWeek: 'dddd [at] LT',
+    //         sameElse: 'lll'
+    //       }
+    //     });
+    //   }
+    // }
+
+  }
+
+
+  setMomentLocale() {
     this.browserLang = this.translate.getBrowserLang();
-    // console.log('BUBBLE-MSG ngOnInit browserLang ', this.browserLang)
-    if (this.browserLang) {
-      if (this.browserLang === 'it') {
-        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
-        // moment.locale('it')
-
-        moment.locale('it', {
-          calendar: {
-            lastDay: '[Ieri alle] LT',
-            sameDay: '[Oggi alle] LT',
-            nextDay: '[Domani alle] LT',
-            lastWeek: '[Ultimo] dddd [alle] LT',
-            nextWeek: 'dddd [alle] LT',
-            sameElse: 'lll'
-          }
-        });
-
-      } else {
-        // console.log('BUBBLE-MSG browserLang ', this.browserLang)
-        // moment.locale('en')
-
-        moment.locale('en', {
-          calendar: {
-            lastDay: '[Yesterday at] LT',
-            sameDay: '[Today at] LT',
-            nextDay: '[Tomorrow at] LT',
-            lastWeek: '[last] dddd [at] LT',
-            nextWeek: 'dddd [at] LT',
-            sameElse: 'lll'
-          }
-        });
-      }
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[BUBBLE-MESSAGE] - ngOnInit - currentUserId ', currentUserId)
     }
 
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[BUBBLE-MESSAGE] stored_preferred_lang: ', stored_preferred_lang);
 
 
-    // const yesterday = moment().subtract(1, 'day')
-    // console.log('BUBBLE-MSG yesterday ', yesterday)
-
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang , {
+      calendar: {
+        sameElse: 'LLLL'
+      }
+    });
   }
 
   ngOnChanges() {

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.ts

@@ -14,6 +14,7 @@ import * as moment from 'moment';
 import { NetworkService } from '../../../services/network-service/network.service';
 import { AppConfigProvider } from 'src/app/services/app-config';
 import { DomSanitizer } from '@angular/platform-browser'
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
 // import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 // import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
@@ -32,7 +33,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public logger: LoggerService = LoggerInstance.getInstance();
   public currentYear: any;
   public browserLang: string;
- 
+
   public PROJECT_FOR_PANEL: any;
 
   /**
@@ -51,21 +52,24 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     private networkService: NetworkService,
     private appConfigProvider: AppConfigProvider,
     private sanitizer: DomSanitizer,
+    public tiledeskAuthService: TiledeskAuthService
   ) {
     super(iterableDiffers, kvDiffers)
-    this.browserLang = this.translate.getBrowserLang();
-    if (this.browserLang) {
+    this.setMomentLocale();
 
-      moment.locale(this.browserLang)
-      // if (this.browserLang === 'it') {
-      //   // this.translate.use('it');
-      //   moment.locale('it')
 
-      // } else {
-      //   // this.translate.use('en');
-      //   moment.locale('en')
-      // }
-    }
+    // if (this.browserLang) {
+
+    //   moment.locale(this.browserLang)
+    //   // if (this.browserLang === 'it') {
+    //   //   // this.translate.use('it');
+    //   //   moment.locale('it')
+
+    //   // } else {
+    //   //   // this.translate.use('en');
+    //   //   moment.locale('en')
+    //   // }
+    // }
 
     this.currentYear = moment().format('YYYY');
     this.logger.log('[ION-LIST-CONVS-COMP] - currentYear ', this.currentYear)
@@ -76,13 +80,36 @@ export class IonListConversationsComponent extends ListConversationsComponent im
     this.PROJECT_FOR_PANEL = this.sanitizer.bypassSecurityTrustResourceUrl(DASHBOARD_BASE_URL + '#/project-for-panel');
   }
 
+  setMomentLocale() {
+    this.browserLang = this.translate.getBrowserLang();
+    const currentUser = this.tiledeskAuthService.getCurrentUser();
+    this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - currentUser ', currentUser)
+    let currentUserId = ''
+    if (currentUser) {
+      currentUserId = currentUser.uid
+      this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - currentUserId ', currentUserId)
+    }
+
+    const stored_preferred_lang = localStorage.getItem(currentUserId + '_lang');
+    this.logger.log('[ION-LIST-CONVS-COMP] stored_preferred_lang: ', stored_preferred_lang);
+
+
+    let chat_lang = ''
+    if (this.browserLang && !stored_preferred_lang) {
+      chat_lang = this.browserLang
+    } else if (this.browserLang && stored_preferred_lang) {
+      chat_lang = stored_preferred_lang
+    }
+    moment.locale(chat_lang)
+  }
+
   ngOnInit() {
     this.isApp = this.platform.is('ios') || this.platform.is('android')
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - IS-APP ', this.isApp)
     this.logger.log('[ION-LIST-CONVS-COMP] - ngOnInit - Platform', this.platform.platforms());
   }
 
- 
+
 
 
 

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

@@ -39,7 +39,8 @@
     <ion-col col-auto>
 
       <div class="start-buttons" style="position: absolute;display: flex;"> 
-       
+      
+        <ng-container *ngIf="areVisibleCAR">
         <div class="canned-responses-btn-wpr" style="margin-left: -5px;" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top">
           <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()" [disabled]="!IS_SUPPORT_GROUP_CONVERSATION">
             <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
@@ -51,6 +52,8 @@
         <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0" tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions"   placement="top" class="canned-responses-btn-badge">
           <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
         </div>
+      </ng-container>
+
  
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"  placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn">
@@ -64,7 +67,7 @@
         </div>
       </div>
 
-      <div class="text-message">
+      <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
           [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);"

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

@@ -67,6 +67,10 @@
             font-size: 15px;
         }
     }
+    .text-message-no-cr {
+         margin: 0 35px !important;
+        width: calc(100% - 70px) !important;
+    }
 }
 
 #fileInput {

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

@@ -44,7 +44,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
   @Input() tagsCannedCount: number;
-
+  @Input() areVisibleCAR: boolean;
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -133,7 +133,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
-    // console.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges  tagsCannedCount ", this.tagsCannedCount);
+    this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges areVisibleCAR; ", this.areVisibleCAR);
     
 
     this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)

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

@@ -32,29 +32,50 @@
             </div>
 
             <ng-template #conversationsInQueue>
-              <span>{{ unservedRequestCount }} {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}</span>
+              <span *ngIf="unservedRequestCount > 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 0">
+                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+
+              </span>
             </ng-template>
 
 
             <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions"
-                placement="top" content-type="template" (click)="openUnservedConvs()">
+              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName"
+                [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
                 <div class="project---name"> {{ project?.id_project?.name }} </div>
               </div>
               <ng-template #conversationsInQueueOnProjectName>
-                <span>{{ unservedRequestCount }} {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}</span>
+                <span *ngIf="unservedRequestCount > 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 0">
+                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+                </span>
               </ng-template>
 
               <div class="availabily-and-busy-wpr">
                 <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
-                  <div class="onoffswitch" 
+                  <div class="onoffswitch"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switchavailableunavailablestatus"
-                      tabindex="0" [checked]="project?.ws_projct_user_available">
+                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
                     <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
                   </div>
                 </div>
-              
+
 
                 <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
                 <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
@@ -92,7 +113,8 @@
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
                 [options]="tooltipOptions" placement="top" content-type="template">
 
-                <ion-button ion-button fill="clear" class="open-unserved-convs-btn" (click)="openUnservedConvsAndGoToProjectList()">
+                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+                  (click)="openUnservedConvsAndGoToProjectList()">
 
                   <span class="push-icon-and-list-wpr">
                     <!--   <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"

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

@@ -117,6 +117,8 @@ export class ProjectItemComponent implements OnInit {
       'Busy',
       'VIEW_ALL_CONVERSATIONS',
       'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
       'PINNED_PROJECT',
       'CHANGE_PINNED_PROJECT',
       "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
@@ -208,8 +210,6 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
       this.projectIdEvent.emit(project.id_project._id)
 
-
-
       if (user_role === 'agent') {
         this.ROLE_IS_AGENT = true;
 

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

@@ -159,6 +159,7 @@
             <app-message-text-area
               *ngIf="(openInfoConversation === false && isMobile === true) || (openInfoConversation === true && isMobile === false) || (openInfoConversation === false && isMobile === false)"
               [tagsCannedCount]="tagsCannedCount"
+              [areVisibleCAR]="areVisibleCAR"
               [loggedUser]="loggedUser" 
               [conversationWith]="conversationWith" 
               [tagsCannedFilter]="tagsCannedFilter"