@chat21/chat21-ionic 3.0.65-rc2 → 3.0.65

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # chat21-ionic ver 3.0
 
+### 3.0.65 in PROD
+- bug-fixed: icons in sidebar were not alignet correctly on Safari
+- bug-fixed: missing translations on sidebar-detail component and login-modal page on start when user logged in for the first time
+- bug-fixed: some icons not showed in side-bar user detail component: replaced material-design-icons with material-icons
+- bug-fixed: if removed conversation.uid is the selected ones, change url from /active to /archived with navigateByUrl after archivedConversation is completed
+- bug-fixed: truncate sender_fullname in conversation-list and conversation-detail header components
+- added: arabic translations language
+- changed: behaviour of is_new of a conversation (not update 'is_new' conversation property if conv is the selected one or if sender is me)
+
+### 3.0.65-rc3 - LATEST
+- changed: retrive conversations with 'onces' firebase event and remove lastTimestamp from added, changed and removed fireabase subscriptions event
+- bug-fixed: conversation not archived due to conversation_removed unhandled event
+- bug-fixed: if removed conversation.uid is the selected ones, change url from /active to /archived with navigateByUrl after archivedConversation is completed
+
 
 ### 3.0.65-rc2 - LATEST
 - changed: behaviour of is_new of a conversation (not update 'is_new' conversation property if conv is the selected one or if sender is me)

package/deploy_amazon_prod.sh

@@ -15,9 +15,9 @@ cp -p src/manifest.json platforms/browser/www/
 cp -p src/chat-config.json platforms/browser/www/
 
 cd platforms/browser/www
-# aws s3 sync . s3://tiledesk-console/v2/chat/
+aws s3 sync . s3://tiledesk-console/v2/chat/
 # aws s3 sync . s3://tiledesk-console/v2/chat/$version/
-aws s3 sync . s3://tiledesk-console/v2/chat/latest/
+# aws s3 sync . s3://tiledesk-console/v2/chat/latest/
 cd ../../../
 # aws cloudfront create-invalidation --distribution-id E36UIP90GOSFPM --paths "/*"
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.65-rc2",
+    "version": "3.0.65",
     "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
     "repository": {
@@ -60,7 +60,7 @@
         "file-saver": "^2.0.5",
         "firebase": "^8.6.7",
         "marked": "^2.0.1",
-        "material-design-icons": "^3.0.1",
+        "material-icons": "^1.11.2",
         "moment": "^2.24.0",
         "moment-timezone": "^0.5.28",
         "ng-connection-service": "^1.0.4",
@@ -119,4 +119,4 @@
             "ios"
         ]
     }
-}
+}

package/src/app/app.component.ts

@@ -37,7 +37,7 @@ import { LoginPage } from './pages/authentication/login/login.page';
 import { ConversationListPage } from './pages/conversations-list/conversations-list.page';
 
 // utils
-import { createExternalSidebar, checkPlatformIsMobile, isGroup, getParameterByName } from '../chat21-core/utils/utils';
+import { checkPlatformIsMobile, isGroup, getParameterByName, searchIndexInArrayForUid, compareValues } from '../chat21-core/utils/utils';
 import { STORAGE_PREFIX, PLATFORM_MOBILE, PLATFORM_DESKTOP, CHAT_ENGINE_FIREBASE, AUTH_STATE_OFFLINE, AUTH_STATE_ONLINE } from '../chat21-core/utils/constants';
 import { environment } from '../environments/environment';
 import { UserModel } from '../chat21-core/models/user';
@@ -481,6 +481,7 @@ export class AppComponent implements OnInit {
       }
       this.uploadService.initialize();
 
+      this.setLanguage(null)
       this.initAuthentication();
       this.initSubscriptions();
       this.initAudio();
@@ -627,16 +628,13 @@ export class AppComponent implements OnInit {
 
 
   translateToastMsgs() {
-    this.translate.get('AnErrorOccurredWhileUnsubscribingFromNotifications')
-      .subscribe((text: string) => {
+    this.translate.get('AnErrorOccurredWhileUnsubscribingFromNotifications').subscribe((text: string) => {
         this.toastMsgErrorWhileUnsubscribingFromNotifications = text;
       });
-    this.translate.get('CLOSE_TOAST')
-      .subscribe((text: string) => {
+    this.translate.get('CLOSE_TOAST').subscribe((text: string) => {
         this.toastMsgCloseToast = text;
       });
-    this.translate.get('WAITING_FOR_NETWORK')
-      .subscribe((text: string) => {
+    this.translate.get('WAITING_FOR_NETWORK').subscribe((text: string) => {
         this.toastMsgWaitingForNetwork = text;
       });
   }
@@ -867,7 +865,7 @@ export class AppComponent implements OnInit {
       }).catch((error: any) => {
         that.logger.error('[APP-COMP] ***soundMessage error*', error);
       });
-    }, 1000);
+    }, 4000);
   }
   /**---------------- SOUND FUNCTIONS --> END <--- +*/
   /***************************************************+*/
@@ -922,8 +920,8 @@ export class AppComponent implements OnInit {
       // that.conversationsChanged(conversations);
       if (conversation && conversation.is_new === true) {
         this.manageTabNotification()
-        this.updateConversationsOnStorage()
       }
+      if(conversation) this.updateConversationsOnStorage()
     });
 
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
@@ -1195,9 +1193,7 @@ export class AppComponent implements OnInit {
     // 1 - init chatConversationsHandler and  archviedConversationsHandler
     this.conversationsHandlerService.initialize(this.tenant, userId, translationMap);
     // this.subscribeToConvs()
-    const lastTimestamp = this.manageStoredConversations()
-    this.logger.log('[APP-COMP] initConversationsHandler: get lastTimestamp', lastTimestamp)
-    this.conversationsHandlerService.subscribeToConversations(lastTimestamp, () => {
+    this.conversationsHandlerService.subscribeToConversations(null, () => {
       // this.logger.log('[APP-COMP] - CONVS - INIT CONV')
       const conversations = this.conversationsHandlerService.conversations;
       this.logger.info('initialize FROM [APP-COMP] - [APP-COMP]-CONVS - INIT CONV CONVS', conversations)
@@ -1211,34 +1207,18 @@ export class AppComponent implements OnInit {
 
   }
 
-  // START: manage conversations on firebase upon last timestamp from stored conversations
-  private manageStoredConversations(): number {
-    let timestamp = 0
-    if(this.appStorageService.getItem('conversations')){
-      const conversationsStored = JSON.parse(this.appStorageService.getItem('conversations'))
-      if(conversationsStored && conversationsStored.length > 0) {
-        this.conversationsHandlerService.conversations = conversationsStored
-        timestamp = conversationsStored[0].timestamp
-        this.events.publish('appcompSubscribeToConvs:loadingIsActive', false);
-      }
-    }
-    return timestamp
-  }
-
   private updateConversationsOnStorage(){
     const that = this
     //reset timer and save conversation on storage after 2s
-    clearTimeout(this.setTimeoutConversationsEvent);
-    this.setTimeoutConversationsEvent = setTimeout(() => {
-      this.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
-      that.appStorageService.setItem('conversations', JSON.stringify(this.conversationsHandlerService.conversations))
-    }, 2000);
+  //   clearTimeout(this.setTimeoutConversationsEvent);
+  //   this.setTimeoutConversationsEvent = setTimeout(() => {
+  //     this.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
+  //     that.appStorageService.setItem('conversations', JSON.stringify(this.conversationsHandlerService.conversations))
+  //   }, 2000);
   }
-  // END: manage conversations on firebase upon last timestamp from stored conversations
 
   private initArchivedConversationsHandler(userId: string) {
     const keys = ['YOU'];
-
     const translationMap = this.translateService.translateLanguage(keys);
 
     this.logger.debug('[APP-COMP] initArchivedConversationsHandler ------------->', userId, this.tenant);
@@ -1305,3 +1285,4 @@ export class AppComponent implements OnInit {
     }
   }
 }
+

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

@@ -59,16 +59,12 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   setMomentLocale() {
     this.browserLang = this.translate.getBrowserLang();
     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);
-
 
     let chat_lang = ''
     if (this.browserLang && !stored_preferred_lang) {
@@ -81,15 +77,9 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
         sameElse: 'LLLL'
       }
     });
-    // this.translate.getTranslation(chat_lang).subscribe((labels: string) => {
-    //   console.log('[BUBBLE-MESSAGE] translations: ', labels);
-    // });
   }
 
   ngOnChanges() {
-    this.logger.log('BUBBLE-MSG Hello !!!! this.message ',  this.message)
-    this.logger.log('BUBBLE-MSG ngOnChanges areVisibleCAR', this.areVisibleCAR)
-    this.logger.log('BUBBLE-MSG ngOnChanges supportMode', this.supportMode)
     if (this.message && this.message.metadata && typeof this.message.metadata === 'object') {
       this.getMetadataSize(this.message.metadata)
     }

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

@@ -76,7 +76,7 @@
 
 
 <ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation?.uid === uidConvSelected"
-  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)" detail=false>
+  *ngFor="let conversation of listConversations; let index= index" (click)="openConversationByID(conversation)" detail=false>
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->

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

@@ -41,7 +41,7 @@ export class IonListConversationsComponent extends ListConversationsComponent im
   public alert_lbl: string;
   public actionNotAllowed_lbl: string;
   public youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl: string;
-public ok_lbl: string;
+  public ok_lbl: string;
 
   tooltip_options = {
     'show-delay': 0,
@@ -119,35 +119,22 @@ public ok_lbl: string;
 
 
   translateLbls() {
-    this.translate.get('Resolve')
-      .subscribe((text: string) => {
-        this.resolve_btn_tooltip = text;
-      });
-
-    this.translate.get('Archive')
-      .subscribe((text: string) => {
-        this.archive_btn_tooltip = text;
-      });
-
-    this.translate.get('ALERT_TITLE')
-      .subscribe((text: string) => {
-        this.alert_lbl = text;
-      });
-
-      this.translate.get('ActionNotAllowed')
-      .subscribe((text: string) => {
-        this.actionNotAllowed_lbl = text;
-      });
-
-      this.translate.get('YouAreNoLongerAmongTheTeammatesManagingThisConversation')
-      .subscribe((text: string) => {
-        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = text;
-      });
-
-      this.translate.get('CLOSE_ALERT_CONFIRM_LABEL')
-      .subscribe((text: string) => {
-        this.ok_lbl = text;
-      });
+    const translationKeys = [
+      'Resolve',
+      'Archive',
+      'ALERT_TITLE',
+      'ActionNotAllowed',
+      'CLOSE_ALERT_CONFIRM_LABEL',
+      'YouAreNoLongerAmongTheTeammatesManagingThisConversation'
+    ]
+    this.translate.get(['Resolve', 'Archive', 'ALERT_TITLE']).subscribe((translations: string) => {
+        this.resolve_btn_tooltip = translations['Resolve'];
+        this.archive_btn_tooltip = translations['Archive'];
+        this.alert_lbl = translations['ALERT_TITLE']
+        this.actionNotAllowed_lbl = translations['ActionNotAllowed']
+        this.ok_lbl = translations['CLOSE_ALERT_CONFIRM_LABEL']
+        this.youAreNoLongerAmongTheTeammatesManagingThisConversation_lbl = translations['YouAreNoLongerAmongTheTeammatesManagingThisConversation']
+    });
   }
 
   setMomentLocale() {
@@ -227,6 +214,7 @@ public ok_lbl: string;
     var conversationId = conversation.uid;
     this.logger.log('[ION-LIST-CONVS-COMP] - closeConversation - conversationId ', conversationId)
     this.onCloseConversation.emit(conversation)
+    let currentIndex = this.listConversations.findIndex(conv => conv.uid === conversation.uid)
   }
 
 

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

@@ -1,5 +1,5 @@
 <ion-header no-border class="ion-no-border">
-  <ion-toolbar style="height:60px">
+  <ion-toolbar>
     <ion-buttons slot="start" style="height:60px" *ngIf="isMobile">
       <!-- (click)="pushPage('conversations-list')" defaultHref="/conversations-list" -->
       <ion-back-button style="display: block;" text=""  (click)="goBackToConversationList()">

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

@@ -25,6 +25,8 @@ ion-header {
     }
     ion-title {
         text-align: left;
+        padding-inline: unset;
+        margin: 0px 10px;
         height: 40px;
         width: 100%;
     }

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

@@ -1,3 +1,4 @@
+import { EventsService } from './../../services/events-service';
 import { Component, EventEmitter, HostListener, OnInit, Output } from '@angular/core';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
 import { Subject } from 'rxjs';
@@ -53,6 +54,7 @@ export class ProjectItemComponent implements OnInit {
     public tiledeskService: TiledeskService,
     public webSocketJs: WebSocketJs,
     private appConfigProvider: AppConfigProvider,
+    public events: EventsService
   ) { }
 
   ngOnInit() {
@@ -209,10 +211,13 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - LAST PROJECT PARSED ', this.project)
     }
 
+    
+
 
   }
 
   doProjectSubscriptions(project) {
+    this.events.publish('storage:last_project', project)
     this.logger.log('[PROJECT-ITEM] doProjectSubscriptions project ', project)
     if (project) {
       const user_role = this.project.role

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

@@ -83,21 +83,14 @@ export class SidebarComponent implements OnInit {
 
 
   getStoredProjectAndUserRole() {
-    const stored_project = localStorage.getItem('last_project')
-    this.logger.log('[SIDEBAR] stored_project ', stored_project)
-    if (stored_project && stored_project !== 'undefined') {
-      const project = JSON.parse(stored_project)
-      this.logger.log('[SIDEBAR] project ', project)
-
-      this.project_id = project.id_project.id
-      this.logger.log('[SIDEBAR] project_id ', this.project_id)
-
-      this.USER_ROLE = project.role;
-      this.logger.log('[SIDEBAR] USER_ROLE ', this.USER_ROLE)
-      this.buildURLs(this.USER_ROLE)
-    } else {
-      this.logger.error('[SIDEBAR] stored_project not found in storage', stored_project)
-    }
+    this.events.subscribe('storage:last_project',project =>{
+      this.logger.log('[SIDEBAR] stored_project ', project)
+      if (project && project !== 'undefined') {
+        this.project_id = project.id_project.id
+        this.USER_ROLE = project.role;
+        this.buildURLs(this.USER_ROLE)
+      }
+    })
   }
 
   buildURLs(USER_ROLE) {

package/src/app/components/sidebar-user-details/sidebar-user-details.component.html

@@ -25,9 +25,9 @@
             onerror="this.src='assets/images/no_image_user.png'" />
 
         <div *ngIf="!USER_PHOTO_PROFILE_EXIST" class="user-img-in-sidebar-user-details"
-            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
+            [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.color + ')'}">
             <span id="sidebaravatar-altenative-user-avatar" class="sidebar-user-details-altenative-user-avatar">
-                {{ user?.fullname_initial }}
+                {{ user?.avatar }}
             </span>
         </div>
 
@@ -36,9 +36,7 @@
     <div class="user-details-user-isbusy" *ngIf="IS_BUSY === true" style="cursor:pointer"
         matTooltipClass="custom-mat-tooltip" matTooltip="{{IS_BUSY_msg}}" #tooltip="matTooltip"
         matTooltipPosition='right' matTooltipHideDelay="100">
-        <span class="material-icons user-details-user-isbusy-icon">
-            access_time
-        </span>
+        <span class="material-icons user-details-user-isbusy-icon">access_time</span>
     </div>
 
 
@@ -78,22 +76,20 @@
     <hr class="first-divider">
 
     <section *ngIf="isVisiblePAY" class="user-details-plan-info">
-        <span class="material-icons user-details-plan-icon">
-            apps
-            </span>
+        <span class="material-icons user-details-plan-icon">apps</span>
         <span>
-            <div> {{prjct_name}} </div>
+            <div> {{project?.name}} </div>
             <div style="display: inline-block;    margin-left: 26px;"> {{ profile_name_translated }} </div>
 
-            <div *ngIf="plan_type === 'payment' && plan_subscription_is_active === false"
-                style="color:#f44336; position:relative; top: -1px;;display: inline-block;">
-                <i *ngIf="plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+            <div *ngIf="project?.type === 'payment' && project?.isActiveSubscription === false"
+                style="color:#f44336; position:relative; top: -1px;display: inline-block;">
+                <i *ngIf="project?.plan_name !== 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip"
                     matTooltip="{{ SUBSCRIPTION_PAYMENT_PROBLEM_msg }}" #tooltip="matTooltip" matTooltipPosition='right'
                     matTooltipHideDelay="100">
                     error_outline
                 </i>
-                <i *ngIf="plan_name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
+                <i *ngIf="project?.plan_name === 'enterprise'" class="material-icons" style="vertical-align: middle; color:#f44336; cursor:pointer;    
                     font-size: 16px;" matTooltipClass="custom-mat-tooltip" matTooltip="{{ THE_PLAN_HAS_EXPIRED_msg }}"
                     #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
                     error_outline
@@ -103,12 +99,8 @@
     </section>
 
     <section class="user-details-help-center">
-        <span class="material-icons user-details-help-center-icon">
-            support
-            </span>
-            <span class="user-details-help-center" (click)="goToHelpCenter()"> 
-                Help center
-            </span>
+        <span class="material-icons user-details-help-center-icon">support</span>
+        <span class="user-details-help-center" (click)="goToHelpCenter()"> Help center</span>
     </section>
 
     <!-- <hr class="second-divider" style="margin-top: 20px;border: 0;
@@ -128,10 +120,7 @@
     </section>
 
     <section class="user-details-footer-chat-version">
-        <div class="chat-version">
-            <!-- &copy; {{test | date: 'yyyy'}} {{company_name}} ver {{version}} -->
-            ver {{version}}
-        </div>
+        <div class="chat-version"> ver {{version}}</div>
     </section>
 
 </div>

package/src/app/components/sidebar-user-details/sidebar-user-details.component.scss

@@ -280,6 +280,9 @@ button.user-details-btn-close {
     font-size: 20px;
     vertical-align: middle;
     margin-right: 3px;
+    svg{
+        fill: #a9afbb
+    }
 }
 
 .user-details-help-center {