@chat21/chat21-ionic 3.4.33 → 3.4.34

package/CHANGELOG.md

@@ -8,6 +8,9 @@
 ### **Copyright**: 
 *Tiledesk SRL*
 
+# 3.4.34 in PROD
+- **added**: role handling in the affected components (sidebar, navbar, conversations list, conversation detail) using shared `hasRole` checks and `ProjectUser.rolePermissions`.
+
 # 3.4.33 in PROD
 
 # 3.4.32 in PROD

package/package.json

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

package/src/app/app.component.ts

@@ -44,6 +44,7 @@ import { conversationToMessage } from 'src/chat21-core/utils/utils-message';
 import { ProjectService } from './services/projects/project.service';
 import { ContactsService } from './services/contacts/contacts.service';
 import { TiledeskService } from './services/tiledesk/tiledesk.service';
+import { ProjectUsersService } from './services/project_users/project-users.service';
 
 @Component({
   selector: 'app-root',
@@ -141,6 +142,7 @@ export class AppComponent implements OnInit {
     /**TILEDESK SERVICES */
     private tiledeskService: TiledeskService,
     private projectService: ProjectService,
+    private projectUsersService: ProjectUsersService,
     private contactsService: ContactsService
   ) {
 
@@ -1181,6 +1183,7 @@ export class AppComponent implements OnInit {
 
     this.tiledeskService.initialize(serverBaseURL)
     this.projectService.initialize(serverBaseURL)
+    this.projectUsersService.initialize(serverBaseURL)
     this.contactsService.initialize(serverBaseURL)
 
 

package/src/app/components/canned-response/canned-response.component.html

@@ -1,20 +1,30 @@
 <div>
-  <div class="canned-list" *ngIf="tagsCannedFilter.length > 0">
-    <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
-      class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
-      *ngFor="let canned of tagsCannedFilter; let i = index;"
-      (click)="onClickCannedFN(canned, $event)">
-      <div class="cannedContent">
-        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" #title></ion-input>
-        <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.text"  class="text truncate"></ion-input>
+  <div class="canned-list" *ngIf="!showLoading">
+    <span *ngIf="tagsCannedFilter.length > 0">
+      <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
+        class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
+        *ngFor="let canned of tagsCannedFilter; let i = index;"
+        (click)="onClickCannedFN(canned, $event)">
+        <div class="cannedContent">
+          <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" #title></ion-input>
+          <ion-input [class.readonly]="canned?.disabled" [readonly]="canned?.disabled" type="text" [(ngModel)]="canned.text"  class="text truncate"></ion-input>
+        </div>
+        <!-- <ion-icon class="canned-item-icon" name="pin" src="assets/images/pin.svg" slot=end *ngIf="canned.pinned" (click)="onPinCanned(canned, $event)"></ion-icon>
+        <ion-icon class="canned-item-icon" name="pin" src="assets/images/pinned.svg" slot=end (click)="onUnPinCanned(canned, $event)"></ion-icon> -->
+        <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="(canned.createdBy === loggedUser.uid && !canned.disabled) && roles[PERMISSIONS.CANNED_RESPONSES_UPDATE]" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
+        <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="(canned.createdBy === loggedUser.uid && canned.disabled) && roles[PERMISSIONS.CANNED_RESPONSES_UPDATE]" (click)="onEditCanned(canned, $event)"></ion-icon>
+        <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="(canned.createdBy === loggedUser.uid) && roles[PERMISSIONS.CANNED_RESPONSES_DELETE]" (click)="onDeleteCanned(canned, $event)"></ion-icon>
+      </ion-item>
+    </span>
+    <div class="no-data" *ngIf="tagsCannedFilter.length === 0">
+      <div class="container">
+        <ion-item button="false" lines="none" class="canned-item no-ripple border">
+          <ion-icon name="cloud-offline" slot="start"></ion-icon>
+          <ion-label>{{translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE')}}</ion-label>
+        </ion-item>
       </div>
-      <!-- <ion-icon class="canned-item-icon" name="pin" src="assets/img/pin.svg" slot=end *ngIf="canned.pinned" (click)="onPinCanned(canned, $event)"></ion-icon>
-      <ion-icon class="canned-item-icon" name="pin" src="assets/img/pinned.svg" slot=end (click)="onUnPinCanned(canned, $event)"></ion-icon> -->
-      <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
-      <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
-      <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
-    </ion-item>
-    <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
+    </div>
+    <ion-item *ngIf="roles[PERMISSIONS.CANNED_RESPONSES_CREATE]" class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
       <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
       <span class="add-canned-response-add-icon">+</span>
      <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
@@ -33,12 +43,5 @@
       <div class="label">{{translationMap.get('LABEL_LOADING')}}</div>
     </div>
   </div>
-  <div class="no-data" *ngIf="tagsCannedFilter.length === 0 && !showLoading">
-    <div class="container">
-      <ion-item button="false" lines="none" class="canned-item no-ripple border">
-        <ion-icon name="cloud-offline" slot="start"></ion-icon>
-        <ion-label>{{translationMap.get('THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE')}}</ion-label>
-      </ion-item>
-    </div>
-  </div>
+  
 </div>

package/src/app/components/canned-response/canned-response.component.scss

@@ -278,7 +278,5 @@ ion-item {
         display: flex;
         justify-content: center;
         flex-direction: column;
-        align-items: center;
-
     }
 }

package/src/app/components/canned-response/canned-response.component.ts

@@ -9,6 +9,7 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { compareValues, htmlEntities } from 'src/chat21-core/utils/utils';
 import { getProjectIdSelectedConversation } from 'src/chat21-core/utils/utils-message';
 import { PLAN_NAME } from 'src/chat21-core/utils/constants';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 
 @Component({
   selector: 'app-canned-response',
@@ -21,7 +22,7 @@ export class CannedResponseComponent implements OnInit {
   @Input() conversationWith: string;
   @Input() conversationWithFullname: string;
   @Input() currentString: string;
-  @Input() canShowCanned: boolean = true;
+  @Input() roles: Array<string>;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Output() onLoadedCannedResponses = new EventEmitter<[any]>();
@@ -36,6 +37,7 @@ export class CannedResponseComponent implements OnInit {
 
   public arrowkeyLocation = -1
 
+  PERMISSIONS = PERMISSIONS
   
   private logger: LoggerService = LoggerInstance.getInstance();
   constructor(

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

@@ -57,7 +57,7 @@
       <div class="buttons-left">
 
         <!-- CANNED RESPONSES -->
-        <ng-container *ngIf="areVisibleCAR && supportMode">
+        <ng-container *ngIf="areVisibleCAR && supportMode && cannedSection">
           <div class="canned-responses-btn-wpr" tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
               [disabled]="!conversationWith?.startsWith(CHANNEL_TYPE.SUPPORT_GROUP) || disableTextarea">

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

@@ -26,6 +26,7 @@ import { CopilotService } from 'src/app/services/copilot/copilot.service';
 import { BRAND_BASE_INFO } from 'src/app/utils/utils-resources';
 import { ProjectService } from 'src/app/services/projects/project.service';
 import { Project } from 'src/chat21-core/models/projects';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
 
 
 @Component({
@@ -49,6 +50,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @ViewChild('fileInput', { static: false }) fileInput: any;
 
   @Input() loggedUser: UserModel;
+  @Input() projectUser: ProjectUser;
   @Input() conversationWith: string;
   @Input() channelType: string;
   @Input() channel: string;
@@ -62,6 +64,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() offlineMsgEmail: boolean;
   @Input() whatsappTemplatesSection: boolean;
   @Input() isOpenInfoConversation: boolean;
+  @Input() cannedSection: boolean;
   @Input() stylesMap: Map<string, string>;
   @Input() translationMap: Map<string, string>;
   @Input() dropEvent: any;

package/src/app/components/conversation-info/info-group/info-group.component.ts

@@ -151,27 +151,29 @@ export class InfoGroupComponent implements OnInit, AfterViewInit, OnChanges {
             });
 
           this.contactsService.loadContactDetail(key).pipe(takeUntil(this.unsubscribe$)).subscribe(user => {
-              this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
-              // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
-
-              user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
-              // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
-              var index = this.member_array.findIndex(m => m.userid === user.uid);
-              this.logger.log('InfoGroupComponent member_array first of push index', index);
-              this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
-              if (index === -1) {
-                this.member_array.push(
-                  {
-                    userid: user.uid,
-                    avatar: user.avatar,
-                    color: user.color,
-                    email: user.email,
-                    fullname: user.fullname,
-                    imageurl: user.imageurl,
-                    userOnline: members_isonline_array[user.uid]['isSignin']
-                  })
-              } else {
-                this.logger.log('InfoGroupComponent member already exist in member_array');
+              if(user){
+                this.logger.log('InfoGroupComponent group detail loadContactDetail RES', user);
+                // this.logger.log('InfoGroupComponent group detail this.presenceService.BSIsOnline.value()', this.presenceService.BSIsOnline.getValue);
+
+                user.imageurl = this.imageRepoService.getImagePhotoUrl(key)
+                // this.member_array.push({ userid: user.uid, avatar: user.avatar, color: user.color, email: user.email, fullname: user.fullname, imageurl: user.imageurl, userOnline: isOnline })
+                var index = this.member_array.findIndex(m => m.userid === user.uid);
+                this.logger.log('InfoGroupComponent member_array first of push index', index);
+                this.logger.log('InfoGroupComponent member_array first of push', this.member_array);
+                if (index === -1) {
+                  this.member_array.push(
+                    {
+                      userid: user.uid,
+                      avatar: user.avatar,
+                      color: user.color,
+                      email: user.email,
+                      fullname: user.fullname,
+                      imageurl: user.imageurl,
+                      userOnline: members_isonline_array[user.uid]['isSignin']
+                    })
+                } else {
+                  this.logger.log('InfoGroupComponent member already exist in member_array');
+                }
               }
             }, (error) => {
               this.logger.error('InfoGroupComponent group detail loadContactDetail - ERROR  ', error);

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

@@ -34,7 +34,7 @@
       <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <ion-button *ngIf="writeto_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
+    <ion-button *ngIf="writeto_btn && isVisibleCNT && roles?.[PERMISSIONS.LEADS_READ]" ion-button fill="clear" (click)="onOpenContactsDirectory($event)"
       tooltip="{{translationMap?.get('ViewContactsList')}}" placement="bottom">
       <ion-icon slot="icon-only" name="create-outline"></ion-icon>
       <!-- <ion-icon slot="icon-only" name="people-outline"></ion-icon> -->

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

@@ -1,3 +1,4 @@
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
 import { ModalController } from '@ionic/angular'
 import { EventsService } from 'src/app/services/events-service'
@@ -17,6 +18,8 @@ export class HeaderConversationsList implements OnInit {
   @Input() sound_btn: string;
   @Input() isMobile: boolean;
   @Input() isVisibleTKT: boolean = true;
+  @Input() isVisibleCNT: boolean = true;;
+  @Input() roles: Array<string>;
   @Output() onSoundChange = new EventEmitter<string>()
   @Output() openContactsDirectory = new EventEmitter()
   @Output() openProfileInfo = new EventEmitter()
@@ -24,6 +27,7 @@ export class HeaderConversationsList implements OnInit {
   createTicketModal = null
   public translationMap: Map<string, string>;
 
+  PERMISSIONS = PERMISSIONS;
   constructor(
     public events: EventsService,
     public modalController: ModalController,
@@ -62,7 +66,7 @@ export class HeaderConversationsList implements OnInit {
   // }
 
   ngOnInit() {
-    // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
+    console.log('DDP HEADER SUPPORT MODE ', this.roles)
   }
 
   // START @Output() //

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

@@ -5,7 +5,7 @@
       </div>
       <div class="navbar-right">
         <!-- test site -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.SIMULATE_CONV]">
           <button class="btn simulate-visitor-btn" (click)="testWidgetPage()">
             <i class="material-icons">play_arrow</i>
             <!-- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}} -->
@@ -23,7 +23,7 @@
         </ng-container>
 
         <!--  ------ PROJECTS  DROPDOWN ------ -->
-        <ng-container *ngIf="project">
+        <ng-container *ngIf="project && roles?.[PERMISSIONS.CHANGE_PROJECT]">
             <li>
               <button class="btn dropdown-toggle project-dropdown" (click)="toggleProjectsDropdown()">
                 <span class="project-dropdown" style="text-transform: none"> {{ project?.id_project?.name }} </span>
@@ -49,7 +49,7 @@
                 </li>
   
                 <!--  ADD PROJECT -->
-                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')" class="add-project">
+                <li id="navbar_create_prjct" *ngIf="isVisibleMT" (click)="onClickDropdownOption('addProject')" class="add-project">
                   <a>
                     <i class="material-icons">add_circle_outline </i>
                     {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}

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

@@ -7,10 +7,13 @@ 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';
+import { ProjectUsersService } from 'src/app/services/project_users/project-users.service';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
+import { PERMISSIONS } from 'src/app/utils/permissions.constants';
+import { getOSCode, hasRole } from 'src/app/utils/utils';
 import { getUserStatusFromProjectUser } from 'src/chat21-core/utils/utils';
 import { TEAMMATE_STATUS } from 'src/chat21-core/utils/constants';
 import { WebsocketService } from 'src/app/services/websocket/websocket.service';
-import { ProjectUser } from 'src/chat21-core/models/project_user';
 
 @Component({
   selector: 'app-navbar',
@@ -36,10 +39,14 @@ export class NavbarComponent implements OnInit {
   public TEAMMATE_STATUS = TEAMMATE_STATUS
   private public_Key: string;
   public isVisible: boolean;
-  public MT: boolean;
+  public isVisibleMT: boolean;
 
+  public projectUser: ProjectUser;
+  public roles: { [key: string]: boolean }
+  PERMISSIONS = PERMISSIONS;
   constructor(
     private projectService: ProjectService,
+    public projectUsersService: ProjectUsersService,
     private tiledeskAuthService: TiledeskAuthService,
     private appConfigProvider: AppConfigProvider,
     private translateService: CustomTranslateService, 
@@ -109,11 +116,14 @@ export class NavbarComponent implements OnInit {
   }
 
   getStoredProjectAndUserRole() {
-    this.events.subscribe('storage:last_project',project =>{
+    this.events.subscribe('storage:last_project',async (project) =>{
       this.logger.log('[NAVBAR] stored_project ', project)
       if (project && project !== 'undefined') {
         this.project = project;
         this.USER_ROLE = project.role;
+        this.projectUser = await this.projectUsersService.getProjectUserByProjectId(project.id_project.id)
+        this.roles = this.checkRoles()
+        console.log('[SIDEBAR] roles ', this.roles)
       }
     })
   }
@@ -121,44 +131,24 @@ export class NavbarComponent implements OnInit {
   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);
-            }
-        }
-    });
+    
+    this.isVisibleMT = getOSCode("MTT", this.public_Key);
+
+  }
+
+  checkRoles(): { [key: string]: boolean } {
+    const permissionKeys = [
+      'CHANGE_PROJECT',
+      'SIMULATE_CONV',
+    ] as const;
 
-    if (!this.public_Key.includes("MTT")) {
-        this.MT = false;
-        // this.logger.log('PUBLIC-KEY (Navbar) - mt is', this.MT);
+    const roles: { [key: string]: boolean } = {};
+    for (const key of permissionKeys) {
+      const permission = PERMISSIONS[key];
+      roles[permission] = hasRole(this.projectUser, permission);
     }
+    
+    return roles;
 
   }
 

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

@@ -15,7 +15,7 @@ import { AppConfigProvider } from 'src/app/services/app-config';
 import { ConvertRequestToConversation } from 'src/chat21-core/utils/convertRequestToConversation';
 import { compareValues, getUserStatusFromProjectUser } from 'src/chat21-core/utils/utils';
 import { ProjectService } from 'src/app/services/projects/project.service';
-import { ProjectUser } from 'src/chat21-core/models/project_user';
+import { ProjectUser } from 'src/chat21-core/models/projectUsers';
 
 @Component({
   selector: 'app-project-item',