From 242a97bda9734958ae5a525aa3878ad5e748249e Mon Sep 17 00:00:00 2001
From: Nicola Lanzilotto <nicola@tiledesk.com>
Date: Fri, 15 Dec 2023 13:08:12 +0100
Subject: [PATCH] Improvements and bug fixing

---
 CHANGELOG.md                                  |    3 +
 package-lock.json                             |    2 +-
 package.json                                  |    2 +-
 src/app/app-store/app-store.component.ts      |   47 +-
 src/app/auth/signup/signup.component.ts       |  268 +-
 .../components/footer/footer.component.html   |    2 +-
 src/app/components/footer/footer.component.ts |   34 +-
 .../components/sidebar/sidebar.component.html |  118 +-
 .../components/sidebar/sidebar.component.ts   | 3104 +++++++++--------
 .../department-edit-add.component.html        |   11 +-
 .../department-edit-add.component.ts          |  135 +-
 .../home-analytics-indicator.component.html   |    6 +-
 .../home-analytics-indicator.component.ts     |   51 +-
 .../home-convs-graph.component.html           |    2 +-
 .../home-convs-graph.component.ts             |   56 +-
 .../home-create-teammate.component.html       |    4 +-
 .../home-create-teammate.component.ts         |   88 +-
 src/app/home/home.component.html              |  182 +-
 src/app/home/home.component.ts                |  113 +-
 .../project-edit-add.component.html           |   10 +-
 .../project-edit-add.component.ts             |   44 +-
 .../user-edit-add.component.html              |    5 +-
 .../user-edit-add/user-edit-add.component.ts  |   63 +-
 src/app/users/users.component.html            |   16 +-
 src/app/users/users.component.ts              |   90 +-
 .../widget-set-up.component.html              |  682 ++--
 .../widget-set-up.component.scss              |    4 +
 .../widget-set-up/widget-set-up.component.ts  |    3 +
 .../history-and-nort-convs.component.html     |    6 +-
 29 files changed, 2833 insertions(+), 2318 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd769d465330..0c004fa1e767 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # tiledesk-dashboard
 
+### 2.4.80
+- Improvements and bug fixing
+
 ### 2.4.79
 - Adds the "News and documentation" section to the home page
 
diff --git a/package-lock.json b/package-lock.json
index c630dec12a99..e7e99c783759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-dashboard",
-  "version": "2.4.79",
+  "version": "2.4.80",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 16ca2d85ef59..ac11ced84b15 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-dashboard",
-  "version": "2.4.79",
+  "version": "2.4.80",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --aot",
diff --git a/src/app/app-store/app-store.component.ts b/src/app/app-store/app-store.component.ts
index ab125b0ef1e4..5ad256a1c49e 100644
--- a/src/app/app-store/app-store.component.ts
+++ b/src/app/app-store/app-store.component.ts
@@ -162,14 +162,7 @@ export class AppStoreComponent implements OnInit {
       })
   }
 
-  // getToken() {
-  //   this.auth.user_bs.subscribe((user) => {
-  //     if (user) {
-  //       this.TOKEN = user.token
-  //       this.userId = user._id
-  //     }
-  //   });
-  // }
+
 
   getOSCODE() {
     this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
@@ -205,10 +198,9 @@ export class AppStoreComponent implements OnInit {
       )
       .subscribe((project) => {
         if (project) {
-          this.project = project
-          this.projectId = project._id,
-
-            console.log('APP-STORE - projectId ', this.projectId)
+          this.project = project;
+          this.projectId = project._id;
+          this.logger.log('APP-STORE - projectId ', this.projectId)
         }
       });
   }
@@ -233,8 +225,37 @@ export class AppStoreComponent implements OnInit {
   getApps() {
     this.appStoreService.getApps().subscribe((_apps: any) => {
       this.apps = _apps.apps;
-      // console.log('APP-STORE - getApps APPS ', this.apps);
+      this.logger.log('APP-STORE - getApps APPS ', this.apps);
+
+
+      const paidApps = [
+        {
+          title: "WhatsApp Business", _id: "638a2564ccd1d40013e52125"
+        },
+        {
+          title: "Facebook Messenger", _id: "6421f8093e8de70013f78a5d"
+        },
+        {
+          title: "Help Center", _id: "643820f0edf2f350eeb2d835"
+        }
+      ]
+
+      if (!this.isVisiblePAY) {
+        this.apps = _apps.apps.filter(a => !paidApps.some(p => p._id == a._id));
+
+        this.logger.log('APP-STORE - Here yes')
+        this.logger.log('APP-STORE - getApps APPS after filter', this.apps)
+      }
+
+      const sendTranscriptAppIndex = this.apps.findIndex(object => {
+        return object._id === "64259aaf035da07321451424";
+      });
+
+      this.logger.log('sendTranscriptAppIndex ', sendTranscriptAppIndex);
+      this.apps.splice(sendTranscriptAppIndex, 1);
+
       this.apps.forEach(app => {
+      
         if (app.description.length > 118) {
           app.description = app.description.slice(0, 118) + '...'
         }
diff --git a/src/app/auth/signup/signup.component.ts b/src/app/auth/signup/signup.component.ts
index 56c0a6fd251f..35c2895a00ee 100755
--- a/src/app/auth/signup/signup.component.ts
+++ b/src/app/auth/signup/signup.component.ts
@@ -14,8 +14,10 @@ import moment from 'moment';
 import { LocalDbService } from 'app/services/users-local-db.service';
 import { ProjectService } from 'app/services/project.service';
 import { Project } from 'app/models/project-model';
-import { emailDomainWhiteList } from 'app/utils/util';
+import { emailDomainWhiteList, tranlatedLanguage } from 'app/utils/util';
 import { TitleCasePipe } from '@angular/common';
+import { WidgetSetUpBaseComponent } from 'app/widget_components/widget-set-up/widget-set-up-base/widget-set-up-base.component';
+import { WidgetService } from 'app/services/widget.service';
 
 type UserFields = 'email' | 'password' | 'firstName' | 'lastName' | 'terms';
 type FormErrors = { [u in UserFields]: string };
@@ -26,7 +28,7 @@ type FormErrors = { [u in UserFields]: string };
   styleUrls: ['./signup.component.scss'],
   providers: [TitleCasePipe]
 })
-export class SignupComponent implements OnInit, AfterViewInit {
+export class SignupComponent extends WidgetSetUpBaseComponent implements OnInit, AfterViewInit {
 
 
   // tparams = brand;
@@ -65,7 +67,9 @@ export class SignupComponent implements OnInit, AfterViewInit {
   storedRoute: string;
 
   public_Key: string;
+  areActivePay: boolean;
   MT: boolean;
+ 
   templateName: string;
   strongPassword = false;
   userForm: FormGroup;
@@ -78,6 +82,13 @@ export class SignupComponent implements OnInit, AfterViewInit {
   id_project: string;
   appSumoActivationEmail: string;
   isValidAppSumoActivationEmail: boolean;
+
+  browser_lang: string;
+  temp_SelectedLangName: string;
+  temp_SelectedLangCode: string;
+  selectedTranslationLabel: string;
+  selectedTranslationCode: string;
+
   // newUser = false; // to toggle login or signup form
   // passReset = false; // set to true when password reset is triggered
   // 'maxlength': 'Password cannot be more than 25 characters long.',
@@ -115,7 +126,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
     private fb: FormBuilder,
     private auth: AuthService,
     private router: Router,
-    private translate: TranslateService,
+    public translate: TranslateService,
     private route: ActivatedRoute,
     private notify: NotifyService,
     public appConfigService: AppConfigService,
@@ -123,9 +134,10 @@ export class SignupComponent implements OnInit, AfterViewInit {
     private logger: LoggerService,
     private localDbService: LocalDbService,
     private projectService: ProjectService,
-    public titleCasePipe: TitleCasePipe
+    public titleCasePipe: TitleCasePipe,
+    private widgetService: WidgetService
   ) {
-
+    super(translate);
     const brand = brandService.getBrand();
     // this.logger.log('>>> BRAND ' , brand) 
 
@@ -148,11 +160,11 @@ export class SignupComponent implements OnInit, AfterViewInit {
     this.getBrowserLang();
     this.getOSCODE();
     this.getQueryParamsAndSegmentRecordPageAndIdentify();
-    
+
     const hasSigninWithGoogle = this.localDbService.getFromStorage('swg')
     if (hasSigninWithGoogle) {
       this.localDbService.removeFromStorage('swg')
-      // console.log('[SIGN-UP] removeFromStorage swg')
+      // this.logger.log('[SIGN-UP] removeFromStorage swg')
     }
 
   }
@@ -238,7 +250,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
         var size = Object.keys(this.queryParams).length;
         // this.logger.log('queryParams size ', size)
         const storedRoute = this.localDbService.getFromStorage('wannago')
-        // console.log('[SIGN-UP] storedRoute', storedRoute)
+        // this.logger.log('[SIGN-UP] storedRoute', storedRoute)
         if (size > 0) {
 
           for (const [key, value] of Object.entries(this.queryParams)) {
@@ -334,6 +346,29 @@ export class SignupComponent implements OnInit, AfterViewInit {
       // this.logger.log('PUBLIC-KEY (SIGNUP) - mt is', this.MT);
     }
 
+    if (this.public_Key.includes("PAY") === true) {
+
+      keys.forEach(key => {
+        // this.logger.log('NavbarComponent public_Key key', key)
+        if (key.includes("PAY")) {
+          // this.logger.log('PUBLIC-KEY (SIGNUP) - key', key);
+          let pay = key.split(":");
+          // this.logger.log('PUBLIC-KEY (SIGNUP) - areActivePay key&value', pay);
+          if (pay[1] === "F") {
+            this.areActivePay = false;
+            // this.logger.log('PUBLIC-KEY (SIGNUP) - areActivePay is', this.areActivePay);
+          } else {
+            this.areActivePay = true;
+            // this.logger.log('PUBLIC-KEY (SIGNUP) - areActivePay is', this.areActivePay);
+          }
+        }
+      });
+
+    } else {
+      this.areActivePay = false;
+      // this.logger.log('PUBLIC-KEY (SIGNUP) - areActivePay is', this.areActivePay);
+    }
+
     this.checkCurrentUrlAndSkipWizard();
   }
 
@@ -377,7 +412,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
   checkCurrentUrlAndSkipWizard() {
 
     this.storedRoute = this.localDbService.getFromStorage('wannago')
-    // console.log('[SIGN-UP] storedRoute ', this.storedRoute)
+    // this.logger.log('[SIGN-UP] storedRoute ', this.storedRoute)
     if (this.storedRoute) {
       this.EXIST_STORED_ROUTE = true
     } else {
@@ -387,22 +422,22 @@ export class SignupComponent implements OnInit, AfterViewInit {
     if (this.storedRoute) {
       if (this.storedRoute.indexOf('/activate-product') !== -1) {
         const storedRouteSegment = this.storedRoute.split('/')
-        // console.log('[SIGN-UP] storedRouteSegment', storedRouteSegment)
+        // this.logger.log('[SIGN-UP] storedRouteSegment', storedRouteSegment)
         this.appSumoActivationEmail = storedRouteSegment[2]
-        // console.log('[SIGN-UP] this.appSumoActivationEmail ', this.appSumoActivationEmail)
+        // this.logger.log('[SIGN-UP] this.appSumoActivationEmail ', this.appSumoActivationEmail)
         this.userForm.patchValue({ 'email': this.appSumoActivationEmail })
-        this.isValidAppSumoActivationEmail= this.validateEmail(this.appSumoActivationEmail)
-        // console.log('[SIGN-UP] this.isValidAppSumoActivationEmail ', this.isValidAppSumoActivationEmail)
+        this.isValidAppSumoActivationEmail = this.validateEmail(this.appSumoActivationEmail)
+        // this.logger.log('[SIGN-UP] this.isValidAppSumoActivationEmail ', this.isValidAppSumoActivationEmail)
         const emailInputElm = document.getElementById("user-email") as HTMLInputElement;
-        // console.log('[SIGN-UP] emailInputElm ', emailInputElm)
+        // this.logger.log('[SIGN-UP] emailInputElm ', emailInputElm)
         emailInputElm.disabled = true;
       }
     }
 
 
-    // console.log('[SIGN-UP] checkCurrentUrlAndSkipWizard router.url  ', this.router.url)
-
     
+
+
     if (this.router.url.indexOf('/signup-on-invitation') !== -1) {
       this.SKIP_WIZARD = true;
       this.logger.log('[SIGN-UP] checkCurrentUrlAndSkipWizard SKIP_WIZARD ', this.SKIP_WIZARD)
@@ -420,10 +455,10 @@ export class SignupComponent implements OnInit, AfterViewInit {
   validateEmail(appSumoActivationEmail) {
     var validateEmailRegex = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)+$/
     if (appSumoActivationEmail.match(validateEmailRegex)) {
-      // console.log('Valid email address!')
+      // this.logger.log('Valid email address!')
       return true;
     } else {
-      // console.log('Invalid email address!')
+      // this.logger.log('Invalid email address!')
       return false;
     }
   }
@@ -432,7 +467,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
     this.pendingInvitationEmail = this.route.snapshot.params['pendinginvitationemail'];
 
     this.userForm.patchValue({ 'email': this.pendingInvitationEmail })
-    // console.log('[SIGN-UP] Pending Invitation Email (get From URL)  ', this.pendingInvitationEmail)
+    // this.logger.log('[SIGN-UP] Pending Invitation Email (get From URL)  ', this.pendingInvitationEmail)
   }
 
 
@@ -469,7 +504,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
     }
   }
 
- 
+
   signup() {
     this.showSpinnerInLoginBtn = true;
     const email = this.userForm.value['email']
@@ -522,12 +557,12 @@ export class SignupComponent implements OnInit, AfterViewInit {
           if (!isDevMode()) {
             if (window['analytics']) {
               let userFullname = ''
-              if (signupResponse.user.firstname && signupResponse.user.lastname)  {
+              if (signupResponse.user.firstname && signupResponse.user.lastname) {
                 userFullname = signupResponse.user.firstname + ' ' + signupResponse.user.lastname
               } else if (signupResponse.user.firstname && !signupResponse.user.lastname) {
                 userFullname = signupResponse.user.firstname
               }
-  
+
               try {
                 window['analytics'].identify(signupResponse.user._id, {
                   name: userFullname,
@@ -562,8 +597,8 @@ export class SignupComponent implements OnInit, AfterViewInit {
               // }
               // this.logger.log('[SIGN-UP] Signed Up button clicked event ', event)
 
-           
-  
+
+
 
               try {
                 window['analytics'].track("Signed Up", {
@@ -636,7 +671,7 @@ export class SignupComponent implements OnInit, AfterViewInit {
 
     this.auth.signin(userEmail, this.userForm.value['password'], this.appConfigService.getConfig().SERVER_BASE_URL, function (error) {
       self.logger.log('[SIGN-UP] autoSignin 1. POST DATA ', error);
-      // console.log('autoSignin: ', error);
+      // this.logger.log('autoSignin: ', error);
       if (!error) {
         // --------------------------------------------
         // Run widget login
@@ -652,20 +687,31 @@ export class SignupComponent implements OnInit, AfterViewInit {
           window['tiledesk_widget_login']();
         }
 
-        // console.log('[SIGN-UP] autoSignin storedRoute ', self.storedRoute)
-        // console.log('[SIGN-UP] autoSignin EXIST_STORED_ROUTE ', self.EXIST_STORED_ROUTE)
+        // this.logger.log('[SIGN-UP] autoSignin storedRoute ', self.storedRoute)
+        // this.logger.log('[SIGN-UP] autoSignin EXIST_STORED_ROUTE ', self.EXIST_STORED_ROUTE)
+
+        // this.logger.log('self.EXIST_STORED_ROUTE: ', self.EXIST_STORED_ROUTE, self.storedRoute);
+        // this.logger.log('self.SKIP_WIZARD: ', self.SKIP_WIZARD);
 
-        // console.log('self.EXIST_STORED_ROUTE: ', self.EXIST_STORED_ROUTE, self.storedRoute);
-        // console.log('self.SKIP_WIZARD: ', self.SKIP_WIZARD);
-        
         if (!self.EXIST_STORED_ROUTE) {
           if (self.SKIP_WIZARD === false) {
+
+            self.logger.log('self.areActivePay: ', self.areActivePay);
             // self.router.navigate(['/create-project']);
+            
             // self.createNewProject(signupResponse)
 
             // self.router.navigate(['/create-new-project']);
-            self.router.navigate(['/onboarding']);
-            
+            // self.router.navigate(['/onboarding']);
+
+            if (self.areActivePay) {
+              self.router.navigate(['/onboarding']);
+            } else if (!self.areActivePay) {
+              // self.router.navigate(['/create-new-project']);
+              self.createNewProject(signupResponse)
+              
+            }
+
           } else {
             self.router.navigate(['/projects']);
           }
@@ -728,7 +774,8 @@ export class SignupComponent implements OnInit, AfterViewInit {
 
           this.id_project = newproject._id
           // this.router.navigate([`/project/${this.id_project}/configure-widget`]);
-          this.router.navigate(['/create-new-project']);
+          // this.router.navigate(['/create-new-project']);
+          this.router.navigate(['/projects']);
         }
 
 
@@ -740,73 +787,69 @@ export class SignupComponent implements OnInit, AfterViewInit {
         this.logger.log('[SIGN-UP] CREATE NEW PROJECT - POST REQUEST * COMPLETE *');
         this.projectService.newProjectCreated(true);
 
+        
+
         const trialStarDate = moment(new Date(this.new_project.createdAt)).format("YYYY-MM-DD hh:mm:ss")
         // this.logger.log('[WIZARD - CREATE-PRJCT] POST DATA PROJECT trialStarDate ', trialStarDate);
         const trialEndDate = moment(new Date(this.new_project.createdAt)).add(14, 'days').format("YYYY-MM-DD hh:mm:ss")
         // this.logger.log('[WIZARD - CREATE-PRJCT] POST DATA PROJECT trialEndDate', trialEndDate)
 
-        if (!isDevMode()) {
-          if (window['analytics']) {
-            try {
-              window['analytics'].page("Signup, Create project", {
+        this.trackCreateProject(signupResponse, trialStarDate,  trialEndDate)
+        
 
-              });
-            } catch (err) {
-              this.logger.error('Signup Create project page error', err);
-            }
+        // setTimeout(() => {
+        //   this.DISPLAY_SPINNER = false;
+        // }, 2000);
 
-            let userFullname = ''
-            if (signupResponse.user.firstname && signupResponse.user.lastname)  {
-              userFullname = signupResponse.user.firstname + ' ' + signupResponse.user.lastname
-            } else if (signupResponse.user.firstname && !signupResponse.user.lastname) {
-              userFullname = signupResponse.user.firstname
-            }
+        // 'getProjectsAndSaveInStorage()' was called only on the onInit lifehook, now recalling also after the creation 
+        // of the new project resolve the bug  'the auth service not find the project in the storage'
+        this.getProjectsAndSaveInStorage();
+        this.addWidgetDefaultLanguage()
+      });
+  }
 
-            try {
-              window['analytics'].identify(signupResponse.user._id, {
-                name: userFullname,
-                email: signupResponse.user.email,
-                logins: 5,
-                plan: "Scale (trial)"
-              });
-            } catch (err) {
-              this.logger.error('Signup Create project identify error', err);
-            }
+  addWidgetDefaultLanguage() {
+    this.browser_lang = this.translate.getBrowserLang();
 
-            try {
-              window['analytics'].track('Trial Started', {
-                "userId": signupResponse.user._id,
-                "trial_start_date": trialStarDate,
-                "trial_end_date": trialEndDate,
-                "trial_plan_name": "Scale (trial)",
-                "context": {
-                  "groupId": this.new_project._id
-                }
-              });
-            } catch (err) {
-              this.logger.error('Signup Create track Trial Started event error', err);
-            }
+    if (tranlatedLanguage.includes(this.browser_lang)) {
+      const langName = this.getLanguageNameFromCode(this.browser_lang)
+      // this.logger.log('[WIZARD - CREATE-PRJCT] - langName ', langName)
 
-            try {
-              window['analytics'].group(this.new_project._id, {
-                name: this.new_project.name,
-                plan: "Scale (trial)",
-              });
-            } catch (err) {
-              this.logger.error('Signup Create project group error', err);
-            }
-          }
-        }
+      this.temp_SelectedLangName = langName;
+      this.temp_SelectedLangCode = this.browser_lang
+    } else {
 
-        setTimeout(() => {
-          // this.DISPLAY_SPINNER = false;
-        }, 2000);
+      this.temp_SelectedLangName = 'English';
+      this.temp_SelectedLangCode = 'en'
+    }
 
-        // 'getProjectsAndSaveInStorage()' was called only on the onInit lifehook, now recalling also after the creation 
-        // of the new project resolve the bug  'the auth service not find the project in the storage'
-        this.getProjectsAndSaveInStorage();
+    this.addNewLanguage(this.temp_SelectedLangCode, this.temp_SelectedLangName)
+
+  }
+
+  addNewLanguage(langCode, langName) {
+    this.selectedTranslationCode = langCode;
+    this.selectedTranslationLabel = langName;
+    this.logger.log('[SIGN-UP] ADD-NEW-LANG selectedTranslationCode', this.selectedTranslationCode);
+    this.logger.log('[SIGN-UP] ADD-NEW-LANG selectedTranslationLabel', this.selectedTranslationLabel);
 
+    this.widgetService.cloneLabel(this.temp_SelectedLangCode.toUpperCase())
+      .subscribe((res: any) => {
+        // this.logger.log('Multilanguage - addNewLanguage - CLONE LABEL RES ', res);
+        this.logger.log('[SIGN-UP] - ADD-NEW-LANG (clone-label) RES ', res.data);
+
+      }, error => {
+        this.logger.error('[SIGN-UP] ADD-NEW-LANG (clone-label) - ERROR ', error)
+      }, () => {
+        this.logger.log('[SIGN-UP] ADD-NEW-LANG (clone-label) * COMPLETE *')
       });
+
+    // // ADD THE NEW LANGUAGE TO BOTTOM NAV
+    const newLang = { code: this.temp_SelectedLangCode, name: this.temp_SelectedLangName };
+    this.logger.log('[SIGN-UP] Multilanguage saveNewLanguage newLang objct ', newLang);
+
+    this.availableTranslations.push(newLang)
+    this.logger.log('[SIGN-UP] Multilanguage saveNewLanguage availableTranslations ', this.availableTranslations)
   }
 
   getProjectsAndSaveInStorage() {
@@ -838,7 +881,60 @@ export class SignupComponent implements OnInit, AfterViewInit {
     });
   }
 
+  trackCreateProject(signupResponse, trialStarDate,  trialEndDate) {
+    if (!isDevMode()) {
+      if (window['analytics']) {
+        try {
+          window['analytics'].page("Signup, Create project", {
+
+          });
+        } catch (err) {
+          this.logger.error('Signup Create project page error', err);
+        }
+
+        let userFullname = ''
+        if (signupResponse.user.firstname && signupResponse.user.lastname) {
+          userFullname = signupResponse.user.firstname + ' ' + signupResponse.user.lastname
+        } else if (signupResponse.user.firstname && !signupResponse.user.lastname) {
+          userFullname = signupResponse.user.firstname
+        }
+
+        try {
+          window['analytics'].identify(signupResponse.user._id, {
+            name: userFullname,
+            email: signupResponse.user.email,
+            logins: 5,
+            plan: "Scale (trial)"
+          });
+        } catch (err) {
+          this.logger.error('Signup Create project identify error', err);
+        }
+
+        try {
+          window['analytics'].track('Trial Started', {
+            "userId": signupResponse.user._id,
+            "trial_start_date": trialStarDate,
+            "trial_end_date": trialEndDate,
+            "trial_plan_name": "Scale (trial)",
+            "context": {
+              "groupId": this.new_project._id
+            }
+          });
+        } catch (err) {
+          this.logger.error('Signup Create track Trial Started event error', err);
+        }
 
+        try {
+          window['analytics'].group(this.new_project._id, {
+            name: this.new_project.name,
+            plan: "Scale (trial)",
+          });
+        } catch (err) {
+          this.logger.error('Signup Create project group error', err);
+        }
+      }
+    }
+  }
 
   widgetReInit() {
     if (window && window['tiledesk']) {
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index c505498d411d..c016d96d733f 100755
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -32,7 +32,7 @@
                 </li>
 
                 <li *ngIf="display_contact_us_email">
-                    <span *ngIf="displayContactUs" style="font-size: 12px;">
+                    <span *ngIf="displayContactUs && areActivePay" style="font-size: 12px;">
                         <!-- <a target="_blank" href="mailto:{{contactUsEmail}}" style="text-transform: none">  -->
                         {{ 'NeedHelpWriteTo' | translate }}
                         <span style="font-weight:500">
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
index fcade4b4b49a..77e74d8d154d 100755
--- a/src/app/components/footer/footer.component.ts
+++ b/src/app/components/footer/footer.component.ts
@@ -4,6 +4,7 @@ import { environment } from '../../../environments/environment';
 // import brand from 'assets/brand/brand.json';
 import { BrandService } from './../../services/brand.service';
 import { LoggerService } from './../../services/logger/logger.service';
+import { AppConfigService } from 'app/services/app-config.service';
 // declare var require: any;
 @Component({
   selector: 'app-footer',
@@ -36,10 +37,14 @@ export class FooterComponent implements OnInit {
   contactUsEmail: string;
   displayContactUs: boolean;
 
+  public_Key: string;
+  areActivePay: boolean;
+
   constructor(
     public brandService: BrandService,
     private logger: LoggerService,
     private prjctPlanService: ProjectPlanService,
+    public appConfigService: AppConfigService
   ) {
     const brand = brandService.getBrand();
     this.company_name = brand['company_name'];
@@ -57,7 +62,34 @@ export class FooterComponent implements OnInit {
   ngOnInit() {
     this.logger.log('[FOOTER-COMP] version ', this.version);
     // this.brandLog()
-    this.getProjectPlan()
+    this.getOSCODE()
+  }
+
+  getOSCODE() {
+
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[FOOTER-COMP] getAppConfig - public_Key', this.public_Key);
+    let keys = this.public_Key.split("-");
+    this.logger.log('[FOOTER-COMP] - keys', keys)
+    keys.forEach(key => {
+
+      if (key.includes("PAY")) {
+        // this.logger.log('[FOOTER-COMP] PUBLIC-KEY - key', key);
+        let psa = key.split(":");
+        // this.logger.log('[FOOTER-COMP] PUBLIC-KEY - pay key&value', psa);
+        if (psa[1] === "F") {
+          this.areActivePay = false;
+        } else {
+          this.areActivePay = true;
+        }
+      }
+    });
+
+    if (!this.public_Key.includes("PAY")) {
+      this.areActivePay = false;
+    }
+
+    this.getProjectPlan();
   }
   getProjectPlan() {
     this.prjctPlanService.projectPlan$.subscribe(
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index d48f4878c8c6..61fb16aa0b24 100755
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -1,12 +1,12 @@
 <!-- *ngIf="project"  -->
 <div class="logo">
- 
+
   <div id="sidebaravatar-img-wpr" class="avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
     [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true }">
     <img id="sidebaravatar-img" class="avatar"
       *ngIf="userProfileImageExist === true || userImageHasBeenUploaded === true" [src]="getUserProfileImage()"
       onerror="this.src='assets/img/no_image_user.png'" />
-   
+
     <div id="sidebaravatar-no-img" class="avatar"
       *ngIf="userProfileImageExist !== true && userImageHasBeenUploaded !== true"
       [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + user?.fillColour + ')'}">
@@ -35,12 +35,8 @@
     <ul style="margin-top: 0px;" class="nav">
 
       <!-- CHAT  {{'Chat' | translate}}-->
-      <li id="openchat-a" *ngIf="project" routerLinkActive="active" 
-        matTooltipClass="custom-mat-tooltip"
-        matTooltip="Chat" 
-        #tooltip="matTooltip" 
-        matTooltipPosition='right' 
-        matTooltipHideDelay="100">
+      <li id="openchat-a" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
+        matTooltip="Chat" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
         <a id="openchat-a" #openchatbtn class="customAncor" target="_self" href="{{ CHAT_BASE_URL }}"
           (click)="openChat()" style="cursor: pointer; text-align: center;height: 40px;">
           <span id="openchat-span" style="position: relative;top: 3px;vertical-align: middle;">
@@ -76,9 +72,10 @@
       <!-- ---------------------------------- -->
       <ng-container *ngIf="USER_ROLE !== 'agent'">
         <li id="bot-anchor-wpr" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
-          matTooltip="Bots" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" style="height: 50px !important;"
+          matTooltip="Bots" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"
+          style="height: 50px !important;"
           [ngClass]="{'active': CHATBOT_ROUTE_IS_ACTIVE || EDIT_FAQ_ROUTE_IS_ACTIVE, 'menu_item_active': CREATE_FAQ_ROUTE_IS_ACTIVE || BOT_TEST_ROUTE_IS_ACTIVE}">
-          <a id="bot-anchor" #botbtn class="customAncor" routerLink="project/{{ project._id }}/bots/my-chatbots/all"   
+          <a id="bot-anchor" #botbtn class="customAncor" routerLink="project/{{ project._id }}/bots/my-chatbots/all"
             style="height: 40px;">
             <span class="bot-icon-wpr">
               <svg version="1.1" id="Objects" xmlns="http://www.w3.org/2000/svg"
@@ -103,14 +100,15 @@
         </li>
       </ng-container>
 
-      <ng-container>
-        <li id="monitor" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
-          #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"
-          [ngClass]="{'menu_item_active': CONV_DETAIL_ROUTE_IS_ACTIVE }" style="text-align: center; height: 50px !important;">
+      <ng-container *ngIf="isVisibleMON">
+        <li id="monitor" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
+          matTooltip="Monitor" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100"
+          [ngClass]="{'menu_item_active': CONV_DETAIL_ROUTE_IS_ACTIVE }"
+          style="text-align: center; height: 50px !important;">
           <a class="customAncor" routerLink="project/{{ project._id }}/wsrequests" style="height: 40px;">
 
-          <!-- <a class="customAncor" routerLink="project/{{ project._id }}/all-conversations" style="height: 40px;"> -->
-            
+            <!-- <a class="customAncor" routerLink="project/{{ project._id }}/all-conversations" style="height: 40px;"> -->
+
             <span class="realtime-icon-wpr" style="width: 30px;">
               <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
@@ -124,29 +122,37 @@
         </li>
       </ng-container>
 
+      <!-- ----------------------------- -->
       <!-- CONTACTS (LEADS)  -->
-      <li id="contacts" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
-        matTooltip="{{ 'Contacts' | translate }}" #tooltip="matTooltip" matTooltipPosition='right'
-        matTooltipHideDelay="100" style="height: 50px !important;"
-        [ngClass]="{'menu_item_active': CONTACT_EDIT_ROUTE_IS_ACTIVE || CONTACT_CONVS_ROUTE_IS_ACTIVE}">
-        <a class="customAncor" routerLink="project/{{ project._id }}/contacts">
-          <i class="material-icons sidebar-icons">contacts</i>
-        </a>
-      </li>
+      <!-- ----------------------------- -->
+      <ng-container *ngIf="isVisibleCNT">
+        <li id="contacts" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
+          matTooltip="{{ 'Contacts' | translate }}" #tooltip="matTooltip" matTooltipPosition='right'
+          matTooltipHideDelay="100" style="height: 50px !important;"
+          [ngClass]="{'menu_item_active': CONTACT_EDIT_ROUTE_IS_ACTIVE || CONTACT_CONVS_ROUTE_IS_ACTIVE}">
+          <a class="customAncor" routerLink="project/{{ project._id }}/contacts">
+            <i class="material-icons sidebar-icons">contacts</i>
+          </a>
+        </li>
+      </ng-container>
 
+      <!-- ----------------------------- -->
       <!-- APPS  -->
+      <!-- ----------------------------- -->
       <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
         <li id="apps" *ngIf="project" routerLinkActive="active" matTooltipClass="custom-mat-tooltip"
           matTooltip="{{ 'Apps' | translate }}" #tooltip="matTooltip" matTooltipPosition='right'
           matTooltipHideDelay="100" style="height: 50px !important;">
           <a class="customAncor" routerLink="project/{{ project._id }}/app-store">
             <i class="material-icons sidebar-icons">dashboard_customize</i>
-           
+
           </a>
         </li>
       </ng-container>
 
+      <!-- ----------------------------- -->
       <!-- ANALYTICS -->
+      <!-- ----------------------------- -->
       <ng-container *ngIf="isVisibleANA">
         <li id="analytics" *ngIf="project && USER_ROLE !== 'agent'" routerLinkActive="active"
           [ngClass]="{'active' : ANALYTICS_DEMO_ROUTE_IS_ACTIVE === true}" (click)="stopScroll()"
@@ -157,10 +163,11 @@
           </a>
         </li>
       </ng-container>
-
+      <!-- ----------------------------- -->
       <!-- ACTIVITIES -->
+      <!-- ----------------------------- -->
       <ng-container *ngIf="isVisibleACT">
-        <li id="activities"  *ngIf="project && USER_ROLE !== 'agent'" routerLinkActive="active"
+        <li id="activities" *ngIf="project && USER_ROLE !== 'agent'" routerLinkActive="active"
           [ngClass]="{'active' : ACTIVITIES_DEMO_ROUTE_IS_ACTIVE === true}" (click)="stopScroll()"
           matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Activities' | translate }}" #tooltip="matTooltip"
           matTooltipPosition='right' matTooltipHideDelay="100" style="height: 50px !important;">
@@ -169,11 +176,13 @@
           </a>
         </li>
       </ng-container>
-
+      
+      <!-- ----------------------------- -->
       <!-- REQUESTS HISTORY -->
-      <li  id="history" *ngIf="project" routerLinkActive="active" (click)="stopScroll()" matTooltipClass="custom-mat-tooltip"
-        matTooltip="{{ 'History' | translate }}" #tooltip="matTooltip" matTooltipPosition='right'
-        matTooltipHideDelay="100" style="height: 50px !important;">
+      <!-- ----------------------------- -->
+      <li id="history" *ngIf="project" routerLinkActive="active" (click)="stopScroll()"
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'History' | translate }}" #tooltip="matTooltip"
+        matTooltipPosition='right' matTooltipHideDelay="100" style="height: 50px !important;">
         <a class="customAncor" routerLink="project/{{ project._id }}/history">
           <i class="material-icons sidebar-icons">history</i>
         </a>
@@ -198,31 +207,30 @@
       EDIT_PROJECT_USER_ROUTE_IS_ACTIVE ||
       EDIT_DEPT_ROUTE_IS_ACTIVE ||
       CREATE_GROUP_ROUTE_IS_ACTIVE ||
-      EDIT_GROUP_ROUTE_IS_ACTIVE }" (click)="goToWidgetSetUpOrToCannedResponses()" style="cursor:pointer; height: 50px !important;"
-        matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Settings' | translate }}" #tooltip="matTooltip"
-        matTooltipPosition='right' matTooltipHideDelay="100">
-  
+      EDIT_GROUP_ROUTE_IS_ACTIVE }" (click)="goToWidgetSetUpOrToCannedResponses()"
+        style="cursor:pointer; height: 50px !important;" matTooltipClass="custom-mat-tooltip"
+        matTooltip="{{ 'Settings' | translate }}" #tooltip="matTooltip" matTooltipPosition='right'
+        matTooltipHideDelay="100">
+
         <a class="customAncor">
           <i class="material-icons sidebar-icons">settings</i>
         </a>
       </li>
 
-      <li class="tiledesk-logo"  matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" #tooltip="matTooltip"
-      matTooltipPosition='right' matTooltipHideDelay="100">
-        <a  class="customAncor"
-        target="_blank" href="https://www.tiledesk.com">
-        <svg xml:space="preserve"
-          xmlns:xlink="http://www.w3.org/1999/xlink" height="30px" viewBox="0 0 60 60" width="30px" x="0px"
-          xmlns="http://www.w3.org/2000/svg" y="0px" style="    position: relative; left: -1px;">
-          <path
-            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"
-            fill="#F18876"></path>
-          <path 
-            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"
-            fill="#E5BBAD"></path>
-        </svg>
-      </a>
-    </li>
+      <li class="tiledesk-logo" matTooltipClass="custom-mat-tooltip" matTooltip="Tiledesk" #tooltip="matTooltip"
+        matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor" target="_blank" href="https://www.tiledesk.com">
+          <svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="30px" viewBox="0 0 60 60"
+            width="30px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px" style="    position: relative; left: -1px;">
+            <path
+              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"
+              fill="#F18876"></path>
+            <path
+              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"
+              fill="#E5BBAD"></path>
+          </svg>
+        </a>
+      </li>
 
 
 
@@ -269,7 +277,7 @@
         <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/departments">
           <i class="fa fa-university sidebar-icons" style="font-size:16px !important"></i>
           <p class="onBlackBckgrnd">
- 
+
             <span *ngIf="isVisibleDEP"> {{'RoutingAndDepts' | translate}} </span>
             <span *ngIf="!isVisibleDEP"> Routing </span>
 
@@ -374,16 +382,16 @@
       <!-- -------------------------------------------------------- -->
       <li *ngIf="SHOW_SETTINGS_SUBMENU" routerLinkActive="active" (click)="stopScroll()">
         <a *ngIf="project" class="customAncor" routerLink="project/{{ project._id }}/project-settings/general">
-        
+
           <i class="material-icons sidebar-icons">
             construction
           </i>
           <p class="onBlackBckgrnd">
-         
+
             {{ 'ProjectSettings' | translate }}
           </p>
 
-   
+
         </a>
       </li>
     </ul>
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts
index 1af702423b5e..e85ff2ac088b 100755
--- a/src/app/components/sidebar/sidebar.component.ts
+++ b/src/app/components/sidebar/sidebar.component.ts
@@ -36,10 +36,10 @@ import { FaqKbService } from 'app/services/faq-kb.service';
 declare const $: any;
 
 declare interface RouteInfo {
-    path: string;
-    title: string;
-    icon: string;
-    class: string;
+  path: string;
+  title: string;
+  icon: string;
+  class: string;
 }
 
 //    export const ROUTES: RouteInfo[];
@@ -62,1727 +62,1743 @@ declare interface RouteInfo {
 // ];
 
 @Component({
-    selector: 'app-sidebar',
-    templateUrl: './sidebar.component.html',
-    styleUrls: ['./sidebar.component.scss']
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
 })
 export class SidebarComponent implements OnInit, AfterViewInit {
 
-    // tparams = brand;
-    // sidebarLogoWhite_Url = brand.company_logo_white__url;
-    // hidechangelogrocket = brand.sidebar__hide_changelog_rocket;
-    tparams: any;
-    sidebarLogoWhite_Url: string;
-    sidebarLogoNoText: string;
-    // hidechangelogrocket: boolean;
-
-    // background_bottom_section = brand.sidebar.background_bottom_section
-    // public_Key = environment.t2y12PruGU9wUtEGzBJfolMIgK; // now get from appconfig
-    public_Key: string;
-
-    @ViewChild('openchatbtn') private elementRef: ElementRef;
-    @ViewChild('homebtn') private homeBtnElement: ElementRef;
-
-
-    countClickOnOpenUserDetailSidebar: number = 0
-    menuItems: any[];
-
-    checked_route: string;
-
-    // SHOW_SETTINGS_SUBMENU = false;
-    SHOW_SETTINGS_SUBMENU = false;
-    SETTINGS_SUBMENU_WAS_OPEN: any;
-
-    // FOR THE CARETS IN SIDEBAR IN MOBILE MODE
-    SHOW_PRJCT_SUB = false;
-    SHOW_PROFILE_SUB = false;
-
-    // NO MORE USED
-    // isActive: string;
-
-    // switch up and down the caret of menu item settings
-    // trasform = 'none';
-    trasform = 'none';
-    trasform_projectname_caret = 'none';
-    transform_user_profile_caret = 'none';
-
-    unservedRequestCount: number;
-
-    // route: string;
-    LOGIN_PAGE: boolean;
-    // IS_UNAVAILABLE = false;
-    IS_AVAILABLE: boolean;
-    IS_BUSY: boolean;
-    IS_INACTIVE: boolean;
-    SIDEBAR_IS_SMALL: boolean = true;
-    projectUser_id: string;
-
-    project: Project;
-    projectId: string;
-    user: any;
-
-    ROUTES: RouteInfo[];
-    displayLogoutModal = 'none';
-
-    USER_ROLE: string = 'agent';
-
-    currentUserId: string
-
-    // CHAT_BASE_URL = environment.chat.CHAT_BASE_URL; // moved
-    // CHAT_BASE_URL = environment.CHAT_BASE_URL; // now get from appconfig
-    CHAT_BASE_URL: string;
-
-    userProfileImageExist: boolean;
-    userImageHasBeenUploaded: boolean;
-    userProfileImageurl: string;
-    timeStamp: any;
-
-    IS_MOBILE_MENU: boolean;
-    scrollpos: number;
-    elSidebarWrapper: any;
-
-    changeAvailabilitySuccessNoticationMsg: string;
-    changeAvailabilityErrorNoticationMsg: string;
-
-    isOverAvar = false;
-
-    availabilityCount: number;
-    _route: string;
-
-    ACTIVITIES_ROUTE_IS_ACTIVE: boolean;
-    ACTIVITIES_DEMO_ROUTE_IS_ACTIVE: boolean;
-    ANALYTICS_DEMO_ROUTE_IS_ACTIVE: boolean;
-    WIDGET_ROUTE_IS_ACTIVE: boolean;
-    ANALITYCS_ROUTE_IS_ACTIVE: boolean;
-    HOME_ROUTE_IS_ACTIVE: boolean;
-    APPS_ROUTE_IS_ACTIVE: boolean;
-    NOTIFICATION_EMAIL_IS_ACTIVE: boolean;
-    YOUR_PROJECT_ROUTE_IS_ACTIVE: boolean;
-    AUTOLOGIN_ROUTE_IS_ACTIVE: boolean;
-    // settings route
-    TRIGGER_ROUTE_IS_ACTIVE: boolean;
-    TAG_ROUTE_IS_ACTIVE: boolean;
-    CANNED_RESPONSES_ROUTE_IS_ACTIVE: boolean;
-    DEPTS_ROUTE_IS_ACTIVE: boolean;
-    EDIT_DEPT_ROUTE_IS_ACTIVE: boolean;
-    TEAMMATES_ROUTE_IS_ACTIVE: boolean;
-    GROUPS_ROUTE_IS_ACTIVE: boolean;
-    CREATE_GROUP_ROUTE_IS_ACTIVE: boolean;
-    EDIT_GROUP_ROUTE_IS_ACTIVE: boolean;
-    WIDGET_SETUP_ROUTE_IS_ACTIVE: boolean;
-    CHATBOT_ROUTE_IS_ACTIVE: boolean;
-    CREATE_FAQ_ROUTE_IS_ACTIVE: boolean;
-    EDIT_FAQ_ROUTE_IS_ACTIVE: boolean;
-    BOT_TEST_ROUTE_IS_ACTIVE: boolean;
-    PROJECT_SETTINGS_ROUTE_IS_ACTIVE: boolean;
-    ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE: boolean;
-    ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE: boolean;
-    PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE: boolean;
-    PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE: boolean;
-    INVITE_TEAMMATE_ROUTE_IS_ACTIVE: boolean;
-    EDIT_PROJECT_USER_ROUTE_IS_ACTIVE: boolean;
-    OPERATING_HOURS_ROUTE_IS_ACTIVE: boolean;
-    CONV_DETAIL_ROUTE_IS_ACTIVE: boolean;
-    CONTACT_EDIT_ROUTE_IS_ACTIVE: boolean;
-    CONTACT_CONVS_ROUTE_IS_ACTIVE: boolean;
-
-    IS_REQUEST_FOR_PANEL_ROUTE: boolean;
-    IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE: boolean;
-
-    prjct_profile_name: string;
-
-    prjct_trial_expired: boolean;
-    prjc_trial_days_left: number
-    prjc_trial_days_left_percentage: number
-    isVisibleANA: boolean;
-    isVisibleACT: boolean;
-    isVisibleTRI: boolean;
-    isVisibleGRO: boolean;
-    isVisibleDEP: boolean;
-    isVisibleOPH: boolean;
-    isVisibleCAR: boolean;
-    isVisibleLBS: boolean;
-    isVisibleAPP: boolean;
-    isVisiblePAY: boolean;
-    storageBucket: string;
-    baseUrl: string;
-    default_dept_id: string;
-    browserLang: string;
-    dsbrd_lang: string;
-    tlangparams: any
-    flag_url: string;
-    tooltip_text_for_availability_status: string
-    plan_subscription_is_active: boolean;
-    plan_name: string;
-    _prjct_profile_name: string;
-    plan_type: string;
-    prjct_name: string;
-    private unsubscribe$: Subject<any> = new Subject<any>();
-    current_selected_prjct: any;
-    new_messages_count: number;
-
-    NOTIFICATION_SOUND: string;
-    storedValuePrefix = 'dshbrd----'
-    hasPlayed = false
-    currentUrl: string;
-    audio: any;
-    myChatbotCount: number;
-    constructor(
-        private router: Router,
-        public location: Location,
-        private route: ActivatedRoute,
-        private projectService: ProjectService,
-        private auth: AuthService,
-        private usersService: UsersService,
-        private usersLocalDbService: LocalDbService,
-        private notify: NotifyService,
-        private uploadImageService: UploadImageService,
-        private uploadImageNativeService: UploadImageNativeService,
-        private translate: TranslateService,
-        public appConfigService: AppConfigService,
-
-        public brandService: BrandService,
-        public wsRequestsService: WsRequestsService,
-        private logger: LoggerService,
-        private sanitizer: DomSanitizer,
-        private faqKbService: FaqKbService,
-    ) {
-        this.logger.log('[SIDEBAR] !!!!! HELLO SIDEBAR')
-
-        const brand = brandService.getBrand();
-
-        this.tparams = brand;
-        if (brand) {
-            this.sidebarLogoWhite_Url = brand['company_logo_white__url'];
-            this.sidebarLogoNoText = brand['company_logo_no_text__url'];
-        }
+  // tparams = brand;
+  // sidebarLogoWhite_Url = brand.company_logo_white__url;
+  // hidechangelogrocket = brand.sidebar__hide_changelog_rocket;
+  tparams: any;
+  sidebarLogoWhite_Url: string;
+  sidebarLogoNoText: string;
+  // hidechangelogrocket: boolean;
+
+  // background_bottom_section = brand.sidebar.background_bottom_section
+  // public_Key = environment.t2y12PruGU9wUtEGzBJfolMIgK; // now get from appconfig
+  public_Key: string;
+
+  @ViewChild('openchatbtn') private elementRef: ElementRef;
+  @ViewChild('homebtn') private homeBtnElement: ElementRef;
+
+
+  countClickOnOpenUserDetailSidebar: number = 0
+  menuItems: any[];
+
+  checked_route: string;
+
+  SHOW_SETTINGS_SUBMENU = false;
+  SETTINGS_SUBMENU_WAS_OPEN: any;
+
+  // FOR THE CARETS IN SIDEBAR IN MOBILE MODE
+  SHOW_PRJCT_SUB = false;
+  SHOW_PROFILE_SUB = false;
+
+  // NO MORE USED
+  // isActive: string;
+
+  // switch up and down the caret of menu item settings
+  // trasform = 'none';
+  trasform = 'none';
+  trasform_projectname_caret = 'none';
+  transform_user_profile_caret = 'none';
+
+  unservedRequestCount: number;
+
+  // route: string;
+  LOGIN_PAGE: boolean;
+  // IS_UNAVAILABLE = false;
+  IS_AVAILABLE: boolean;
+  IS_BUSY: boolean;
+  IS_INACTIVE: boolean;
+  SIDEBAR_IS_SMALL: boolean = true;
+  projectUser_id: string;
+
+  project: Project;
+  projectId: string;
+  user: any;
+
+  ROUTES: RouteInfo[];
+  displayLogoutModal = 'none';
+
+  USER_ROLE: string = 'agent';
+
+  currentUserId: string
+
+  // CHAT_BASE_URL = environment.chat.CHAT_BASE_URL; // moved
+  // CHAT_BASE_URL = environment.CHAT_BASE_URL; // now get from appconfig
+  CHAT_BASE_URL: string;
+
+  userProfileImageExist: boolean;
+  userImageHasBeenUploaded: boolean;
+  userProfileImageurl: string;
+  timeStamp: any;
+
+  IS_MOBILE_MENU: boolean;
+  scrollpos: number;
+  elSidebarWrapper: any;
+
+  changeAvailabilitySuccessNoticationMsg: string;
+  changeAvailabilityErrorNoticationMsg: string;
+
+  isOverAvar = false;
+
+  availabilityCount: number;
+  _route: string;
+
+  ACTIVITIES_ROUTE_IS_ACTIVE: boolean;
+  ACTIVITIES_DEMO_ROUTE_IS_ACTIVE: boolean;
+  ANALYTICS_DEMO_ROUTE_IS_ACTIVE: boolean;
+  WIDGET_ROUTE_IS_ACTIVE: boolean;
+  ANALITYCS_ROUTE_IS_ACTIVE: boolean;
+  HOME_ROUTE_IS_ACTIVE: boolean;
+  APPS_ROUTE_IS_ACTIVE: boolean;
+  NOTIFICATION_EMAIL_IS_ACTIVE: boolean;
+  YOUR_PROJECT_ROUTE_IS_ACTIVE: boolean;
+  AUTOLOGIN_ROUTE_IS_ACTIVE: boolean;
+  // settings route
+  TRIGGER_ROUTE_IS_ACTIVE: boolean;
+  TAG_ROUTE_IS_ACTIVE: boolean;
+  CANNED_RESPONSES_ROUTE_IS_ACTIVE: boolean;
+  DEPTS_ROUTE_IS_ACTIVE: boolean;
+  EDIT_DEPT_ROUTE_IS_ACTIVE: boolean;
+  TEAMMATES_ROUTE_IS_ACTIVE: boolean;
+  GROUPS_ROUTE_IS_ACTIVE: boolean;
+  CREATE_GROUP_ROUTE_IS_ACTIVE: boolean;
+  EDIT_GROUP_ROUTE_IS_ACTIVE: boolean;
+  WIDGET_SETUP_ROUTE_IS_ACTIVE: boolean;
+  CHATBOT_ROUTE_IS_ACTIVE: boolean;
+  CREATE_FAQ_ROUTE_IS_ACTIVE: boolean;
+  EDIT_FAQ_ROUTE_IS_ACTIVE: boolean;
+  BOT_TEST_ROUTE_IS_ACTIVE: boolean;
+  PROJECT_SETTINGS_ROUTE_IS_ACTIVE: boolean;
+  ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE: boolean;
+  ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE: boolean;
+  PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE: boolean;
+  PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE: boolean;
+  INVITE_TEAMMATE_ROUTE_IS_ACTIVE: boolean;
+  EDIT_PROJECT_USER_ROUTE_IS_ACTIVE: boolean;
+  OPERATING_HOURS_ROUTE_IS_ACTIVE: boolean;
+  CONV_DETAIL_ROUTE_IS_ACTIVE: boolean;
+  CONTACT_EDIT_ROUTE_IS_ACTIVE: boolean;
+  CONTACT_CONVS_ROUTE_IS_ACTIVE: boolean;
+
+  IS_REQUEST_FOR_PANEL_ROUTE: boolean;
+  IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE: boolean;
+
+  prjct_profile_name: string;
+
+  prjct_trial_expired: boolean;
+  prjc_trial_days_left: number
+  prjc_trial_days_left_percentage: number
+  isVisibleANA: boolean;
+  isVisibleACT: boolean;
+  isVisibleTRI: boolean;
+  isVisibleGRO: boolean;
+  isVisibleDEP: boolean;
+  isVisibleOPH: boolean;
+  isVisibleCAR: boolean;
+  isVisibleLBS: boolean;
+  isVisibleAPP: boolean;
+  isVisiblePAY: boolean;
+  isVisibleMON: boolean;
+  isVisibleCNT: boolean;
+  storageBucket: string;
+  baseUrl: string;
+  default_dept_id: string;
+  browserLang: string;
+  dsbrd_lang: string;
+  tlangparams: any
+  flag_url: string;
+  tooltip_text_for_availability_status: string
+  plan_subscription_is_active: boolean;
+  plan_name: string;
+  _prjct_profile_name: string;
+  plan_type: string;
+  prjct_name: string;
+  private unsubscribe$: Subject<any> = new Subject<any>();
+  current_selected_prjct: any;
+  new_messages_count: number;
+
+  NOTIFICATION_SOUND: string;
+  storedValuePrefix = 'dshbrd----'
+  hasPlayed = false
+  currentUrl: string;
+  audio: any;
+  myChatbotCount: number;
+  constructor(
+    private router: Router,
+    public location: Location,
+    private route: ActivatedRoute,
+    private projectService: ProjectService,
+    private auth: AuthService,
+    private usersService: UsersService,
+    private usersLocalDbService: LocalDbService,
+    private notify: NotifyService,
+    private uploadImageService: UploadImageService,
+    private uploadImageNativeService: UploadImageNativeService,
+    private translate: TranslateService,
+    public appConfigService: AppConfigService,
+
+    public brandService: BrandService,
+    public wsRequestsService: WsRequestsService,
+    private logger: LoggerService,
+    private sanitizer: DomSanitizer,
+    private faqKbService: FaqKbService,
+  ) {
+    this.logger.log('[SIDEBAR] !!!!! HELLO SIDEBAR')
+
+    const brand = brandService.getBrand();
+
+    this.tparams = brand;
+    if (brand) {
+      this.sidebarLogoWhite_Url = brand['company_logo_white__url'];
+      this.sidebarLogoNoText = brand['company_logo_no_text__url'];
     }
-
-    ngOnInit() {
-        this.getLoggedUser();
-        this.getCurrentProjectProjectUsersProjectBots();
-        this.translateChangeAvailabilitySuccessMsg();
-        this.translateChangeAvailabilityErrorMsg();
-        this.getProfileImageStorage();
-        this.getUserAvailability();
-        this.getUserUserIsBusy();
-        this.getProjectUserId();
-        this.hasChangedAvailabilityStatusInUsersComp();
-        this.checkUserImageUploadIsComplete();
-        // used when the page is refreshed
-        this.checkUserImageExist();
-        this.subscribeToMyAvailibilityCount();
-        this.getCurrentRoute();
-        this.getOSCODE();
-
-        this.brandLog();
-        // this.getHasOpenBlogKey()
-        this.getChatUrl();
-        this.isMac();
-        this.listenHasDeleteUserProfileImage();
-        this.listenToForegroundNotificationCount();
-        this.listenSoundPreference();
-        this.getNotificationSoundPreferences();
-        this.getWsCurrentUserAvailability$();
-        // this.listenToMyChatbotCount()
-
+  }
+
+  ngOnInit() {
+    this.getLoggedUser();
+    this.getCurrentProjectProjectUsersProjectBots();
+    this.translateChangeAvailabilitySuccessMsg();
+    this.translateChangeAvailabilityErrorMsg();
+    this.getProfileImageStorage();
+    this.getUserAvailability();
+    this.getUserUserIsBusy();
+    this.getProjectUserId();
+    this.hasChangedAvailabilityStatusInUsersComp();
+    this.checkUserImageUploadIsComplete();
+    // used when the page is refreshed
+    this.checkUserImageExist();
+    this.subscribeToMyAvailibilityCount();
+    this.getCurrentRoute();
+    this.getOSCODE();
+
+    this.brandLog();
+    // this.getHasOpenBlogKey()
+    this.getChatUrl();
+    this.isMac();
+    this.listenHasDeleteUserProfileImage();
+    this.listenToForegroundNotificationCount();
+    this.listenSoundPreference();
+    this.getNotificationSoundPreferences();
+    this.getWsCurrentUserAvailability$();
+  }
+
+
+  getNotificationSoundPreferences() {
+    // NOTIFICATION_SOUND = 'enabled';
+    const storedNotificationSound = localStorage.getItem(this.storedValuePrefix + 'sound');
+
+    if (storedNotificationSound !== 'undefined' && storedNotificationSound !== null) {
+
+      this.NOTIFICATION_SOUND = storedNotificationSound;
+      this.logger.log('[SIDEBAR] NOTIFICATION_SOUND -  this.NOTIFICATION_SOUND', this.NOTIFICATION_SOUND)
+    } else {
+      this.NOTIFICATION_SOUND = 'enabled';
+      this.logger.log('[SIDEBAR] NOTIFICATION_SOUND -  this.NOTIFICATION_SOUND', this.NOTIFICATION_SOUND)
     }
-
-    // listenToMyChatbotCount() {
-
-    // }
-
+  }
+
+  listenSoundPreference() {
+    this.wsRequestsService.hasChangedSoundPreference$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((newSoundPreference) => {
+        this.logger.log('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED ', newSoundPreference);
+        this.NOTIFICATION_SOUND = newSoundPreference;
+      }, error => {
+        this.logger.error('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED * ERROR * ', error)
+      }, () => {
+        this.logger.log('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED *** COMPLETE *** ')
+      });
+  }
+
+  listenToForegroundNotificationCount() {
+    this.wsRequestsService.foregroundNotificationCount$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((foregroundNoticationCount) => {
+        this.logger.log('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT ', foregroundNoticationCount);
+        this.new_messages_count = foregroundNoticationCount;
+
+        if (this.NOTIFICATION_SOUND === 'enabled' && this.IS_REQUEST_FOR_PANEL_ROUTE === false && this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE === false) {
+          // this.logger.log('[NAVBAR] NOTIFICATION_SOUND (showNotification) hasPlayed ', this.hasPlayed)
+          if (this.hasPlayed === false) {
+            // this.logger.log('[NAVBAR] NOTIFICATION_SOUND (showNotification) hasPlayed (HERE IN IF)', this.hasPlayed)
+            this.audio = new Audio();
+
+            this.audio.src = 'assets/pling.mp3';
+            // console.log('sidebar audio src ',  this.audio.src )
+            this.audio.load();
+
+            this.audio.play().then(() => {
+
+              this.hasPlayed = true
+              this.logger.log('[SIDEBAR] - SOUND HAS PLAYED  hasPlayed ', this.hasPlayed)
+
+              setTimeout(() => {
+                this.hasPlayed = false;
+                this.logger.log('[SIDEBAR] - SOUND HAS PLAYED  hasPlayed ', this.hasPlayed)
+
+              }, 4000);
+            }).catch((error: any) => {
+              this.logger.log('[APP-COMP] ***soundMessage error*', error);
+            });
+          }
+        }
+      }, error => {
+        this.logger.error('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT * ERROR * ', error)
+      }, () => {
+        this.logger.log('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT *** COMPLETE *** ')
+      });
+  }
 
 
 
+  getLoggedUser() {
+    this.auth.user_bs.subscribe((user) => {
+      // console.log('[SIDEBAR] USER GET IN SIDEBAR ', user)
+      this.user = user;
+      if (user) {
+        this.createUserAvatar(user)
+        this.currentUserId = user._id;
+        this.logger.log('[SIDEBAR] Current USER ID ', this.currentUserId);
 
+        const stored_preferred_lang = localStorage.getItem(this.user._id + '_lang')
 
-    getNotificationSoundPreferences() {
-        // NOTIFICATION_SOUND = 'enabled';
-        const storedNotificationSound = localStorage.getItem(this.storedValuePrefix + 'sound');
+        if (stored_preferred_lang) {
+          this.dsbrd_lang = stored_preferred_lang;
+          this.getLangTranslation(this.dsbrd_lang)
+          this.flag_url = "assets/img/language_flag/" + stored_preferred_lang + ".png"
 
-        if (storedNotificationSound !== 'undefined' && storedNotificationSound !== null) {
+          this.logger.log('[SIDEBAR] flag_url (from stored_preferred_lang) ', this.flag_url)
 
-            this.NOTIFICATION_SOUND = storedNotificationSound;
-            this.logger.log('[SIDEBAR] NOTIFICATION_SOUND -  this.NOTIFICATION_SOUND', this.NOTIFICATION_SOUND)
+          this.logger.log('[SIDEBAR] stored_preferred_lang ', stored_preferred_lang)
         } else {
-            this.NOTIFICATION_SOUND = 'enabled';
-            this.logger.log('[SIDEBAR] NOTIFICATION_SOUND -  this.NOTIFICATION_SOUND', this.NOTIFICATION_SOUND)
-        }
-    }
+          this.browserLang = this.translate.getBrowserLang();
+          this.dsbrd_lang = this.browserLang;
+          this.getLangTranslation(this.dsbrd_lang)
+          this.logger.log('[SIDEBAR] - browser_lang ', this.browserLang)
+          this.flag_url = "assets/img/language_flag/" + this.browserLang + ".png"
 
-    listenSoundPreference() {
-        this.wsRequestsService.hasChangedSoundPreference$
-            .pipe(
-                takeUntil(this.unsubscribe$)
-            )
-            .subscribe((newSoundPreference) => {
-                this.logger.log('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED ', newSoundPreference);
-                this.NOTIFICATION_SOUND = newSoundPreference;
-            }, error => {
-                this.logger.error('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED * ERROR * ', error)
-            }, () => {
-                this.logger.log('[SIDEBAR] - LISTEN TO SOUND PREFERNCE CHANGED *** COMPLETE *** ')
-            });
+          this.logger.log('[SIDEBAR] flag_url (from browser_lang) ', this.flag_url)
+        }
+      }
+    });
+  }
+
+
+
+  createUserAvatar(user) {
+    this.logger.log('[USERS] - createProjectUserAvatar ', user)
+    let fullname = ''
+    if (user && user.firstname && user.lastname) {
+      fullname = user.firstname + ' ' + user.lastname
+      user['fullname_initial'] = avatarPlaceholder(fullname)
+      user['fillColour'] = getColorBck(fullname)
+    } else if (user && user.firstname) {
+      fullname = user.firstname
+      user['fullname_initial'] = avatarPlaceholder(fullname)
+      user['fillColour'] = getColorBck(fullname)
+    } else {
+      user['fullname_initial'] = 'N/A'
+      user['fillColour'] = 'rgb(98, 100, 167)'
     }
-
-    listenToForegroundNotificationCount() {
-        this.wsRequestsService.foregroundNotificationCount$
-            .pipe(
-                takeUntil(this.unsubscribe$)
-            )
-            .subscribe((foregroundNoticationCount) => {
-                this.logger.log('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT ', foregroundNoticationCount);
-                this.new_messages_count = foregroundNoticationCount;
-
-                if (this.NOTIFICATION_SOUND === 'enabled' && this.IS_REQUEST_FOR_PANEL_ROUTE === false && this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE === false) {
-                    // this.logger.log('[NAVBAR] NOTIFICATION_SOUND (showNotification) hasPlayed ', this.hasPlayed)
-                    if (this.hasPlayed === false) {
-                        // this.logger.log('[NAVBAR] NOTIFICATION_SOUND (showNotification) hasPlayed (HERE IN IF)', this.hasPlayed)
-                        this.audio = new Audio();
-
-                        this.audio.src = 'assets/pling.mp3';
-                        // console.log('sidebar audio src ',  this.audio.src )
-                        this.audio.load();
-
-                        this.audio.play().then(() => {
-
-                            this.hasPlayed = true
-                            this.logger.log('[SIDEBAR] - SOUND HAS PLAYED  hasPlayed ', this.hasPlayed)
-
-                            setTimeout(() => {
-                                this.hasPlayed = false;
-                                this.logger.log('[SIDEBAR] - SOUND HAS PLAYED  hasPlayed ', this.hasPlayed)
-
-                            }, 4000);
-                        }).catch((error: any) => {
-                            this.logger.log('[APP-COMP] ***soundMessage error*', error);
-                        });
-                    }
-                }
-            }, error => {
-                this.logger.error('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT * ERROR * ', error)
-            }, () => {
-                this.logger.log('[SIDEBAR] - FOREGROUND NOTIFICATION COUNT *** COMPLETE *** ')
-            });
+  }
+
+  getLangTranslation(dsbrd_lang_code) {
+    this.translate.get(dsbrd_lang_code)
+      .subscribe((translation: any) => {
+        this.logger.log('[SIDEBAR] getLangTranslation', translation)
+        this.tlangparams = { language_name: translation }
+      });
+  }
+
+  getChatUrl() {
+    this.CHAT_BASE_URL = this.appConfigService.getConfig().CHAT_BASE_URL;
+    // this.logger.log('[SIDEBAR] AppConfigService getAppConfig CHAT_BASE_URL', this.CHAT_BASE_URL);
+  }
+
+
+  brandLog() {
+    // this.logger.log('BRAND_JSON - SIDEBAR ', brand);
+    this.logger.log('[SIDEBAR] BRAND_JSON - sidebarlogourl ', this.sidebarLogoWhite_Url);
+
+  }
+
+  getProfileImageStorage() {
+    if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
+      const firebase_conf = this.appConfigService.getConfig().firebase;
+      this.storageBucket = firebase_conf['storageBucket'];
+      this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Firebase')
+    } else {
+      this.baseUrl = this.appConfigService.getConfig().SERVER_BASE_URL;
+      this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Native')
     }
 
 
+  }
 
-    getLoggedUser() {
-        this.auth.user_bs.subscribe((user) => {
-            // console.log('[SIDEBAR] USER GET IN SIDEBAR ', user)
-            this.user = user;
-            if (user) {
-                this.createUserAvatar(user)
-                this.currentUserId = user._id;
-                this.logger.log('[SIDEBAR] Current USER ID ', this.currentUserId);
-
-                const stored_preferred_lang = localStorage.getItem(this.user._id + '_lang')
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    this.logger.log('[SIDEBAR] AppConfigService getAppConfig public_Key', this.public_Key);
 
-                if (stored_preferred_lang) {
-                    this.dsbrd_lang = stored_preferred_lang;
-                    this.getLangTranslation(this.dsbrd_lang)
-                    this.flag_url = "assets/img/language_flag/" + stored_preferred_lang + ".png"
+    let keys = this.public_Key.split("-");
+    this.logger.log('[SIDEBAR] PUBLIC-KEY - public_Key keys', keys)
 
-                    this.logger.log('[SIDEBAR] flag_url (from stored_preferred_lang) ', this.flag_url)
+    keys.forEach(key => {
 
-                    this.logger.log('[SIDEBAR] stored_preferred_lang ', stored_preferred_lang)
-                } else {
-                    this.browserLang = this.translate.getBrowserLang();
-                    this.dsbrd_lang = this.browserLang;
-                    this.getLangTranslation(this.dsbrd_lang)
-                    this.logger.log('[SIDEBAR] - browser_lang ', this.browserLang)
-                    this.flag_url = "assets/img/language_flag/" + this.browserLang + ".png"
-
-                    this.logger.log('[SIDEBAR] flag_url (from browser_lang) ', this.flag_url)
-                }
-            }
-        });
-    }
+      if (key.includes("ANA")) {
 
+        let ana = key.split(":");
 
-
-    createUserAvatar(user) {
-        this.logger.log('[USERS] - createProjectUserAvatar ', user)
-        let fullname = ''
-        if (user && user.firstname && user.lastname) {
-            fullname = user.firstname + ' ' + user.lastname
-            user['fullname_initial'] = avatarPlaceholder(fullname)
-            user['fillColour'] = getColorBck(fullname)
-        } else if (user && user.firstname) {
-            fullname = user.firstname
-            user['fullname_initial'] = avatarPlaceholder(fullname)
-            user['fillColour'] = getColorBck(fullname)
+        if (ana[1] === "F") {
+          this.isVisibleANA = false;
         } else {
-            user['fullname_initial'] = 'N/A'
-            user['fillColour'] = 'rgb(98, 100, 167)'
+          this.isVisibleANA = true;
         }
-    }
-
-    getLangTranslation(dsbrd_lang_code) {
-        this.translate.get(dsbrd_lang_code)
-            .subscribe((translation: any) => {
-                this.logger.log('[SIDEBAR] getLangTranslation', translation)
-                this.tlangparams = { language_name: translation }
-            });
-    }
-
-    getChatUrl() {
-        this.CHAT_BASE_URL = this.appConfigService.getConfig().CHAT_BASE_URL;
-        // this.logger.log('[SIDEBAR] AppConfigService getAppConfig CHAT_BASE_URL', this.CHAT_BASE_URL);
-    }
+      }
 
+      if (key.includes("ACT")) {
+        let act = key.split(":");
+        if (act[1] === "F") {
+          this.isVisibleACT = false;
+        } else {
+          this.isVisibleACT = true;
+        }
+      }
 
-    brandLog() {
-        // this.logger.log('BRAND_JSON - SIDEBAR ', brand);
-        this.logger.log('[SIDEBAR] BRAND_JSON - sidebarlogourl ', this.sidebarLogoWhite_Url);
+      if (key.includes("TRI")) {
+        let tri = key.split(":");
+        if (tri[1] === "F") {
+          this.isVisibleTRI = false;
+        } else {
+          this.isVisibleTRI = true;
+        }
+      }
 
-    }
+      if (key.includes("GRO")) {
+        let gro = key.split(":");
+        if (gro[1] === "F") {
+          this.isVisibleGRO = false;
+        } else {
+          this.isVisibleGRO = true;
+        }
+      }
 
-    getProfileImageStorage() {
-        if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
-            const firebase_conf = this.appConfigService.getConfig().firebase;
-            this.storageBucket = firebase_conf['storageBucket'];
-            this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Firebase')
+      if (key.includes("DEP")) {
+        let dep = key.split(":");
+        if (dep[1] === "F") {
+          this.isVisibleDEP = false;
         } else {
-            this.baseUrl = this.appConfigService.getConfig().SERVER_BASE_URL;
-            this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Native')
+          this.isVisibleDEP = true;
         }
+      }
 
+      if (key.includes("OPH")) {
+        let oph = key.split(":");
+        if (oph[1] === "F") {
+          this.isVisibleOPH = false;
+        } else {
+          this.isVisibleOPH = true;
+        }
+      }
 
-    }
+      if (key.includes("CAR")) {
+        let car = key.split(":");
+        if (car[1] === "F") {
+          this.isVisibleCAR = false;
+        } else {
+          this.isVisibleCAR = true;
+        }
+      }
 
-    getOSCODE() {
-        this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
-        this.logger.log('[SIDEBAR] AppConfigService getAppConfig public_Key', this.public_Key);
-
-        let keys = this.public_Key.split("-");
-        this.logger.log('[SIDEBAR] PUBLIC-KEY - public_Key keys', keys)
-
-        keys.forEach(key => {
-
-            if (key.includes("ANA")) {
-
-                let ana = key.split(":");
-
-                if (ana[1] === "F") {
-                    this.isVisibleANA = false;
-                } else {
-                    this.isVisibleANA = true;
-                }
-            }
-
-            if (key.includes("ACT")) {
-                let act = key.split(":");
-                if (act[1] === "F") {
-                    this.isVisibleACT = false;
-                } else {
-                    this.isVisibleACT = true;
-                }
-            }
-
-            if (key.includes("TRI")) {
-                let tri = key.split(":");
-                if (tri[1] === "F") {
-                    this.isVisibleTRI = false;
-                } else {
-                    this.isVisibleTRI = true;
-                }
-            }
-
-            if (key.includes("GRO")) {
-                let gro = key.split(":");
-                if (gro[1] === "F") {
-                    this.isVisibleGRO = false;
-                } else {
-                    this.isVisibleGRO = true;
-                }
-            }
-
-            if (key.includes("DEP")) {
-                let dep = key.split(":");
-                if (dep[1] === "F") {
-                    this.isVisibleDEP = false;
-                } else {
-                    this.isVisibleDEP = true;
-                }
-            }
-
-            if (key.includes("OPH")) {
-                let oph = key.split(":");
-                if (oph[1] === "F") {
-                    this.isVisibleOPH = false;
-                } else {
-                    this.isVisibleOPH = true;
-                }
-            }
-
-            if (key.includes("CAR")) {
-                let car = key.split(":");
-                if (car[1] === "F") {
-                    this.isVisibleCAR = false;
-                } else {
-                    this.isVisibleCAR = true;
-                }
-            }
-
-            if (key.includes("LBS")) {
-                let lbs = key.split(":");
-                if (lbs[1] === "F") {
-                    this.isVisibleLBS = false;
-                } else {
-                    this.isVisibleLBS = true;
-                }
-            }
-
-            if (key.includes("APP")) {
-                let lbs = key.split(":");
-                if (lbs[1] === "F") {
-                    this.isVisibleAPP = false;
-                } else {
-                    this.isVisibleAPP = true;
-                }
-            }
-
-            if (key.includes("PAY")) {
-
-                let pay = key.split(":");
-
-                if (pay[1] === "F") {
-                    this.isVisiblePAY = false;
-                } else {
-                    this.isVisiblePAY = true;
-                }
-            }
-        });
-
-        if (!this.public_Key.includes("CAR")) {
-            this.isVisibleCAR = false;
+      if (key.includes("LBS")) {
+        let lbs = key.split(":");
+        if (lbs[1] === "F") {
+          this.isVisibleLBS = false;
+        } else {
+          this.isVisibleLBS = true;
         }
+      }
 
-        if (!this.public_Key.includes("LBS")) {
-            this.isVisibleLBS = false;
+      if (key.includes("APP")) {
+        let lbs = key.split(":");
+        if (lbs[1] === "F") {
+          this.isVisibleAPP = false;
+        } else {
+          this.isVisibleAPP = true;
         }
+      }
 
-        if (!this.public_Key.includes("APP")) {
-            this.isVisibleAPP = false;
+      if (key.includes("PAY")) {
+        let pay = key.split(":");
+        if (pay[1] === "F") {
+          this.isVisiblePAY = false;
+        } else {
+          this.isVisiblePAY = true;
         }
-        if (!this.public_Key.includes("PAY")) {
-            this.isVisiblePAY = false;
+      }
+      if (key.includes("MON")) {
+        let pay = key.split(":");
+        if (pay[1] === "F") {
+          this.isVisibleMON = false;
+        } else {
+          this.isVisibleMON = true;
         }
-    }
+      }
 
+      if (key.includes("CNT")) {
+        let pay = key.split(":");
+        if (pay[1] === "F") {
+          this.isVisibleCNT = false;
+        } else {
+          this.isVisibleCNT = true;
+        }
+      }
+    });
 
-    getCurrentRoute() {
-        this.router.events.subscribe((event: NavigationEvent) => {
-            if (event instanceof NavigationEnd) {
-                if (event.url.indexOf('/request-for-panel') !== -1) {
-                    this.IS_REQUEST_FOR_PANEL_ROUTE = true;
-                    // console.log('[NAVBAR] NavigationEnd - IS_REQUEST_FOR_PANEL_ROUTE  ', this.IS_REQUEST_FOR_PANEL_ROUTE);
-                } else {
-                    this.IS_REQUEST_FOR_PANEL_ROUTE = false;
-                    // console.log('[NAVBAR] NavigationEnd - IS_REQUEST_FOR_PANEL_ROUTE  ', this.IS_REQUEST_FOR_PANEL_ROUTE);
-                }
-
-                if (event.url.indexOf('/unserved-request-for-panel') !== -1) {
-                    this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE  ', this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE);
-                } else {
-                    this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE = false;
-                    // console.log('[SIDEBAR] NavigationEnd- IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE  ', this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE);
-                }
-
-                if (event.url.indexOf('/autologin') !== -1) {
-                    // console.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
-                    this.AUTOLOGIN_ROUTE_IS_ACTIVE = true;
-
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
-                    this.AUTOLOGIN_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url === '/projects') {
-                    this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
-                    this.YOUR_PROJECT_ROUTE_IS_ACTIVE = true;
-
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
-                    this.YOUR_PROJECT_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/activities') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
-                    this.ACTIVITIES_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
-                    this.ACTIVITIES_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/activities-demo') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
-                    this.ACTIVITIES_DEMO_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
-                    this.ACTIVITIES_DEMO_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/analytics-demo') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics-demo route IS ACTIVE  ', event.url);
-                    this.ANALYTICS_DEMO_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics-demo route IS NOT ACTIVE  ', event.url);
-                    this.ANALYTICS_DEMO_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/widget') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE widget route IS ACTIVE  ', event.url);
-                    this.WIDGET_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE widget route IS NOT ACTIVE  ', event.url);
-                    this.WIDGET_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/analytics') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics route IS ACTIVE  ', event.url);
-                    this.ANALITYCS_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics route IS NOT ACTIVE  ', event.url);
-                    this.ANALITYCS_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/home') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
-                    this.HOME_ROUTE_IS_ACTIVE = true;
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
-                    this.HOME_ROUTE_IS_ACTIVE = false;
-                }
-
-                if (event.url.indexOf('/notification-email') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
-                    this.NOTIFICATION_EMAIL_IS_ACTIVE = true;
-                    // this.smallSidebar(true)
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
-                    this.NOTIFICATION_EMAIL_IS_ACTIVE = false;
-                    // this.smallSidebar(false)
-                }
-
-                if (event.url.indexOf('/app-store') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
-                    this.APPS_ROUTE_IS_ACTIVE = true;
-                    // this.smallSidebar(true)
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
-                    this.APPS_ROUTE_IS_ACTIVE = false;
-                    // this.smallSidebar(false)
-                }
-                // ------------------------------------------------------------------------------------------------
-                // the following are also route of settings
-                // ------------------------------------------------------------------------------------------------
-                if (event.url.indexOf('/trigger') !== -1) {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
-                    this.TRIGGER_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - TRIGGER_ROUTE_IS_ACTIVE ', this.TRIGGER_ROUTE_IS_ACTIVE);
-                } else {
-                    // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
-                    this.TRIGGER_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - TRIGGER_ROUTE_IS_ACTIVE ', this.TRIGGER_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/labels') !== -1) {
-                    this.TAG_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - TAG_ROUTE_IS_ACTIVE ', this.TAG_ROUTE_IS_ACTIVE);
-                } else {
-                    this.TAG_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - TAG_ROUTE_IS_ACTIVE ', this.TAG_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/cannedresponses') !== -1) {
-                    this.CANNED_RESPONSES_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CANNED_RESPONSES_ROUTE_IS_ACTIVE ', this.CANNED_RESPONSES_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CANNED_RESPONSES_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CANNED_RESPONSES_ROUTE_IS_ACTIVE ', this.CANNED_RESPONSES_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/departments') !== -1) {
-                    this.DEPTS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - DEPTS_ROUTE_IS_ACTIVE ', this.DEPTS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.DEPTS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - DEPTS_ROUTE_IS_ACTIVE ', this.DEPTS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/department/edit/') !== -1) {
-                    this.EDIT_DEPT_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_DEPT_ROUTE_IS_ACTIVE ', this.EDIT_DEPT_ROUTE_IS_ACTIVE);
-                } else {
-                    this.EDIT_DEPT_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_DEPT_ROUTE_IS_ACTIVE ', this.EDIT_DEPT_ROUTE_IS_ACTIVE);
-                }
-
-
-                if (event.url.indexOf('/users') !== -1) {
-                    this.TEAMMATES_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - TEAMMATES_ROUTE_IS_ACTIVE ', this.TEAMMATES_ROUTE_IS_ACTIVE);
-                } else {
-                    this.TEAMMATES_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - TEAMMATES_ROUTE_IS_ACTIVE ', this.TEAMMATES_ROUTE_IS_ACTIVE);;
-                }
-
-                if (event.url.indexOf('/groups') !== -1) {
-                    this.GROUPS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - GROUPS_ROUTE_IS_ACTIVE ', this.GROUPS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.GROUPS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - GROUPS_ROUTE_IS_ACTIVE ', this.GROUPS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/group/create') !== -1) {
-                    this.CREATE_GROUP_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CREATE_GROUP_ROUTE_IS_ACTIVE ', this.CREATE_GROUP_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CREATE_GROUP_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CREATE_GROUP_ROUTE_IS_ACTIVE ', this.CREATE_GROUP_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/group/edit') !== -1) {
-                    this.EDIT_GROUP_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_GROUP_ROUTE_IS_ACTIVE ', this.EDIT_GROUP_ROUTE_IS_ACTIVE);
-                } else {
-                    this.EDIT_GROUP_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_GROUP_ROUTE_IS_ACTIVE ', this.EDIT_GROUP_ROUTE_IS_ACTIVE);
-                }
-
-
-                if (event.url.indexOf('/widget-set-up') !== -1) {
-                    this.WIDGET_SETUP_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - WIDGET_SETUP_ROUTE_IS_ACTIVE ', this.WIDGET_SETUP_ROUTE_IS_ACTIVE);
-                } else {
-                    this.WIDGET_SETUP_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - WIDGET_SETUP_ROUTE_IS_ACTIVE ', this.WIDGET_SETUP_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/bots') !== -1) {
-                    this.CHATBOT_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CHATBOT_ROUTE_IS_ACTIVE ', this.CHATBOT_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CHATBOT_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CHATBOT_ROUTE_IS_ACTIVE ', this.CHATBOT_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/createfaq') !== -1) {
-                    this.CREATE_FAQ_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CREATE_FAQ_ROUTE_IS_ACTIVE ', this.CREATE_FAQ_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CREATE_FAQ_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CREATE_FAQ_ROUTE_IS_ACTIVE ', this.CREATE_FAQ_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/editfaq') !== -1) {
-                    this.EDIT_FAQ_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_FAQ_ROUTE_IS_ACTIVE ', this.EDIT_FAQ_ROUTE_IS_ACTIVE);
-                } else {
-                    this.EDIT_FAQ_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_FAQ_ROUTE_IS_ACTIVE ', this.EDIT_FAQ_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/faq/test/') !== -1) {
-                    this.BOT_TEST_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - BOT_TEST_ROUTE_IS_ACTIVE ', this.BOT_TEST_ROUTE_IS_ACTIVE);
-                } else {
-                    this.BOT_TEST_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - BOT_TEST_ROUTE_IS_ACTIVE ', this.BOT_TEST_ROUTE_IS_ACTIVE);
-                }
-
-
-                if (event.url.indexOf('/hours') !== -1) {
-                    this.OPERATING_HOURS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - OPERATING_HOURS_ROUTE_IS_ACTIVE ', this.OPERATING_HOURS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.OPERATING_HOURS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - OPERATING_HOURS_ROUTE_IS_ACTIVE ', this.OPERATING_HOURS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/project-settings/') !== -1) {
-                    this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - PROJECT_SETTINGS_ROUTE_IS_ACTIVE ', this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - SETTINGS_IS_ACTIVE ', this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/notification-email') !== -1) {
-                    this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE ', this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE);
-                } else {
-                    this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE ', this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/smtp-settings') !== -1) {
-                    this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE ', this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE ', this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/webhook') !== -1) {
-                    this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE);
-                } else {
-                    this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/payments') !== -1) {
-                    this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/user/add') !== -1) {
-                    this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - INVITE_TEAMMATE_ROUTE_IS_ACTIVE ', this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE);
-                } else {
-                    this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - INVITE_TEAMMATE_ROUTE_IS_ACTIVE ', this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/user/edit/') !== -1) {
-                    this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_PROJECT_USER_ROUTE_IS_ACTIVE ', this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE);
-                } else {
-                    this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - EDIT_PROJECT_USER_ROUTE_IS_ACTIVE ', this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/messages') !== -1) {
-                    this.CONV_DETAIL_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CONV_DETAIL_ROUTE_IS_ACTIVE ', this.CONV_DETAIL_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CONV_DETAIL_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CONV_DETAIL_ROUTE_IS_ACTIVE ', this.CONV_DETAIL_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/contact/edit/') !== -1) {
-                    this.CONTACT_EDIT_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CONTACT_EDIT_ROUTE_IS_ACTIVE ', this.CONTACT_EDIT_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CONTACT_EDIT_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CONTACT_EDIT_ROUTE_IS_ACTIVE ', this.CONTACT_EDIT_ROUTE_IS_ACTIVE);
-                }
-
-                if (event.url.indexOf('/contact/') !== -1) {
-                    this.CONTACT_CONVS_ROUTE_IS_ACTIVE = true;
-                    // console.log('[SIDEBAR] NavigationEnd - CONTACT_CONVS_ROUTE_IS_ACTIVE ', this.CONTACT_CONVS_ROUTE_IS_ACTIVE);
-                } else {
-                    this.CONTACT_CONVS_ROUTE_IS_ACTIVE = false;
-                    // console.log('[SIDEBAR] NavigationEnd - CONTACT_CONVS_ROUTE_IS_ACTIVE ', this.CONTACT_CONVS_ROUTE_IS_ACTIVE);
-                }
-            }
-        });
+    if (!this.public_Key.includes("CAR")) {
+      this.isVisibleCAR = false;
     }
 
-
-    subscribeToMyAvailibilityCount() {
-        this.projectService.myAvailabilityCount
-            .subscribe((num: number) => {
-                this.logger.log('[SIDEBAR] subscribeToMyAvailibilityCount ', num)
-                this.availabilityCount = num;
-            })
+    if (!this.public_Key.includes("LBS")) {
+      this.isVisibleLBS = false;
     }
 
-    translateChangeAvailabilitySuccessMsg() {
-        this.translate.get('ChangeAvailabilitySuccessNoticationMsg')
-            .subscribe((text: string) => {
-                this.changeAvailabilitySuccessNoticationMsg = text;
-                // this.logger.log('+ + + change Availability Success Notication Msg', text)
-            });
+    if (!this.public_Key.includes("APP")) {
+      this.isVisibleAPP = false;
     }
-
-    translateChangeAvailabilityErrorMsg() {
-        this.translate.get('ChangeAvailabilityErrorNoticationMsg')
-            .subscribe((text: string) => {
-                this.changeAvailabilityErrorNoticationMsg = text;
-                // this.logger.log('+ + + change Availability Error Notication Msg', text)
-            });
+    if (!this.public_Key.includes("PAY")) {
+      this.isVisiblePAY = false;
     }
-
-
-    listenHasDeleteUserProfileImage() {
-        this.getLoggedUser()
-        if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
-            this.uploadImageService.hasDeletedUserPhoto.subscribe((hasDeletedImage) => {
-                this.logger.log('[SIDEBAR] - hasDeletedImage ? ', hasDeletedImage, '(usecase Firebase)');
-                this.userImageHasBeenUploaded = false
-                this.userProfileImageExist = false
-            });
-        } else {
-            this.uploadImageNativeService.hasDeletedUserPhoto.subscribe((hasDeletedImage) => {
-                this.logger.log('[SIDEBAR] - hasDeletedImage ? ', hasDeletedImage, '(usecase Native)');
-                this.userImageHasBeenUploaded = false
-                this.userProfileImageExist = false
-            });
-        }
-
+    if (!this.public_Key.includes("MON")) {
+      this.isVisibleMON = false;
     }
 
-
-    checkUserImageExist() {
-        this.usersService.userProfileImageExist.subscribe((image_exist) => {
-            this.logger.log('[SIDEBAR] - USER PROFILE EXIST ? ', image_exist);
-            this.userProfileImageExist = image_exist;
-
-            if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
-                if (this.storageBucket && this.userProfileImageExist === true) {
-                    this.logger.log('[SIDEBAR] - USER PROFILE EXIST - BUILD userProfileImageurl');
-                    this.setImageProfileUrl(this.storageBucket)
-                }
-            } else {
-                if (this.baseUrl && this.userProfileImageExist === true) {
-                    this.setImageProfileUrl_Native(this.baseUrl)
-                }
-            }
-        });
+    if (!this.public_Key.includes("CNT")) {
+      this.isVisibleCNT = false;
     }
 
 
+    
+  }
 
-    checkUserImageUploadIsComplete() {
-        if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
-            this.uploadImageService.userImageWasUploaded.subscribe((image_exist) => {
-                this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE ? ', image_exist, '(usecase Firebase)');
-                this.userImageHasBeenUploaded = image_exist;
-                if (this.storageBucket && this.userImageHasBeenUploaded === true) {
-                    this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE - BUILD userProfileImageurl ');
-                    this.setImageProfileUrl(this.storageBucket)
-                }
-            });
-        } else {
 
-            // NATIVE
-            this.uploadImageNativeService.userImageWasUploaded_Native.subscribe((image_exist) => {
-                this.logger.log('[SIDEBAR] USER PROFILE IMAGE - IMAGE UPLOADING IS COMPLETE ? ', image_exist, '(usecase Native)');
+  getCurrentRoute() {
+    this.router.events.subscribe((event: NavigationEvent) => {
+      if (event instanceof NavigationEnd) {
+        if (event.url.indexOf('/request-for-panel') !== -1) {
+          this.IS_REQUEST_FOR_PANEL_ROUTE = true;
+          // console.log('[NAVBAR] NavigationEnd - IS_REQUEST_FOR_PANEL_ROUTE  ', this.IS_REQUEST_FOR_PANEL_ROUTE);
+        } else {
+          this.IS_REQUEST_FOR_PANEL_ROUTE = false;
+          // console.log('[NAVBAR] NavigationEnd - IS_REQUEST_FOR_PANEL_ROUTE  ', this.IS_REQUEST_FOR_PANEL_ROUTE);
+        }
 
-                this.userImageHasBeenUploaded = image_exist;
-                this.uploadImageNativeService.userImageDownloadUrl_Native.subscribe((imageUrl) => {
-                    this.userProfileImageurl = imageUrl
-                    this.timeStamp = (new Date()).getTime();
-                })
-            })
+        if (event.url.indexOf('/unserved-request-for-panel') !== -1) {
+          this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE = true;
+          // console.log('[SIDEBAR] NavigationEnd - IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE  ', this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE);
+        } else {
+          this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE = false;
+          // console.log('[SIDEBAR] NavigationEnd- IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE  ', this.IS_UNSERVEDREQUEST_FOR_PANEL_ROUTE);
         }
-    }
 
-    setImageProfileUrl_Native(storage) {
-        this.userProfileImageurl = storage + 'images?path=uploads%2Fusers%2F' + this.currentUserId + '%2Fimages%2Fthumbnails_200_200-photo.jpg';
-        this.logger.log('[SIDEBAR] PROFILE IMAGE (USER-PROFILE ) - userProfileImageurl ', this.userProfileImageurl);
-        this.timeStamp = (new Date()).getTime();
-    }
+        if (event.url.indexOf('/autologin') !== -1) {
+          // console.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
+          this.AUTOLOGIN_ROUTE_IS_ACTIVE = true;
 
-    setImageProfileUrl(storageBucket) {
-        this.userProfileImageurl = 'https://firebasestorage.googleapis.com/v0/b/' + storageBucket + '/o/profiles%2F' + this.currentUserId + '%2Fphoto.jpg?alt=media';
-        this.timeStamp = (new Date()).getTime();
-    }
-
-    getUserProfileImage() {
-        if (this.timeStamp) {
-            // this.logger.log('PROFILE IMAGE (USER-PROFILE IN SIDEBAR-COMP) - getUserProfileImage ', this.userProfileImageurl);
-            return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl + '&' + this.timeStamp);
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
+          this.AUTOLOGIN_ROUTE_IS_ACTIVE = false;
         }
-        return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl)
-    }
-
 
+        if (event.url === '/projects') {
+          this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
+          this.YOUR_PROJECT_ROUTE_IS_ACTIVE = true;
 
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
+          this.YOUR_PROJECT_ROUTE_IS_ACTIVE = false;
+        }
 
-    getProjectUserId() {
-        this.usersService.project_user_id_bs.subscribe((projectUser_id) => {
-            this.logger.log('[SIDEBAR] - PROJECT-USER-ID ', projectUser_id);
+        if (event.url.indexOf('/activities') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
+          this.ACTIVITIES_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
+          this.ACTIVITIES_ROUTE_IS_ACTIVE = false;
+        }
 
-            // if (this.projectUser_id) {
-            //     this.logger.log('[SIDEBAR] - PROJECT-USER-ID (THIS)  ', this.projectUser_id);
-            //     this.logger.log('[SIDEBAR] - PROJECT-USER-ID ', projectUser_id);
+        if (event.url.indexOf('/activities-demo') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS ACTIVE  ', event.url);
+          this.ACTIVITIES_DEMO_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE activities-demo route IS NOT ACTIVE  ', event.url);
+          this.ACTIVITIES_DEMO_ROUTE_IS_ACTIVE = false;
+        }
 
-            //     this.usersService.unsubscriptionToWsCurrentUser(projectUser_id)
-            // }
-            if (projectUser_id) {
-                this.projectUser_id = projectUser_id;
-            }
-        });
-    }
+        if (event.url.indexOf('/analytics-demo') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics-demo route IS ACTIVE  ', event.url);
+          this.ANALYTICS_DEMO_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics-demo route IS NOT ACTIVE  ', event.url);
+          this.ANALYTICS_DEMO_ROUTE_IS_ACTIVE = false;
+        }
 
-    // ============ SUBSCRIPTION TO user_is_available_bs, project_user_id_bs AND user_is_busy$ PUBLISHED BY THE USER SERVICE USED
-    /* WF: when the user select A PROJECT,
-       - in the HOME COMP is made a call-back to get the PROJECT-USER OBJECT
-       - the HOME COMP PASS THE PROJECT-USER AVAILABILITY AND THE PROJECT-USER-ID  AND USER IS BUSY TO THE  USER SERVICE
-       - the USER-SERVICE PUBLISH THE PROJECT-USER AVAILABILITY AND THE PROJECT-USER ID
-       - the SIDEBAR (this component) SUBSCRIBES THESE VALUES
-    */
-    getUserAvailability() {
-        this.usersService.user_is_available_bs.subscribe((user_available) => {
-            this.IS_AVAILABLE = user_available;
-            // console.log('[SIDEBAR] - USER IS AVAILABLE ', this.IS_AVAILABLE);
-        });
-    }
+        if (event.url.indexOf('/widget') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE widget route IS ACTIVE  ', event.url);
+          this.WIDGET_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE widget route IS NOT ACTIVE  ', event.url);
+          this.WIDGET_ROUTE_IS_ACTIVE = false;
+        }
 
-    getUserUserIsBusy() {
-        this.usersService.user_is_busy$.subscribe((user_isbusy) => {
-            this.IS_BUSY = user_isbusy;
-            // THE VALUE OS  IS_BUSY IS THEN UPDATED WITH THE VALUE RETURNED FROM THE WEBSOCKET getWsCurrentUserIsBusy$()
-            // WHEN, FOR EXAMPLE IN PROJECT-SETTINGS > ADVANCED THE NUM OF MAX CHAT IS 3 AND THE 
-            this.logger.log('[SIDEBAR] - USER IS BUSY (from db)', this.IS_BUSY);
-        });
-    }
+        if (event.url.indexOf('/analytics') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics route IS ACTIVE  ', event.url);
+          this.ANALITYCS_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE analytics route IS NOT ACTIVE  ', event.url);
+          this.ANALITYCS_ROUTE_IS_ACTIVE = false;
+        }
 
+        if (event.url.indexOf('/home') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
+          this.HOME_ROUTE_IS_ACTIVE = true;
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
+          this.HOME_ROUTE_IS_ACTIVE = false;
+        }
 
-    // changeAvailabilityState(IS_AVAILABLE, profilestatus) {
-    //     this.logger.log('[SIDEBAR] - CHANGE STATUS - USER IS AVAILABLE ? ', IS_AVAILABLE);
-    //     this.logger.log('[SIDEBAR]- CHANGE STATUS - PROJECT USER ID: ', this.projectUser_id);
+        if (event.url.indexOf('/notification-email') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
+          this.NOTIFICATION_EMAIL_IS_ACTIVE = true;
+          // this.smallSidebar(true)
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
+          this.NOTIFICATION_EMAIL_IS_ACTIVE = false;
+          // this.smallSidebar(false)
+        }
 
+        if (event.url.indexOf('/app-store') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
+          this.APPS_ROUTE_IS_ACTIVE = true;
+          // this.smallSidebar(true)
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
+          this.APPS_ROUTE_IS_ACTIVE = false;
+          // this.smallSidebar(false)
+        }
+        // ------------------------------------------------------------------------------------------------
+        // the following are also route of settings
+        // ------------------------------------------------------------------------------------------------
+        if (event.url.indexOf('/trigger') !== -1) {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS ACTIVE  ', event.url);
+          this.TRIGGER_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - TRIGGER_ROUTE_IS_ACTIVE ', this.TRIGGER_ROUTE_IS_ACTIVE);
+        } else {
+          // this.logger.log('[SIDEBAR] NavigationEnd - THE home route IS NOT ACTIVE  ', event.url);
+          this.TRIGGER_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - TRIGGER_ROUTE_IS_ACTIVE ', this.TRIGGER_ROUTE_IS_ACTIVE);
+        }
 
-    //     // this.usersService.updateProjectUser(this.projectUser_id, IS_AVAILABLE).subscribe((projectUser: any) => {
-    //     // DONE - WORKS NK-TO-TEST - da implementare quando viene implementato il servizio - serve per cambiare lo stato di disponibilità dell'utente corrente
-    //     // anche in USER & GROUP bisogna cambiare per la riga dell'utente corrente   
-    //     this.usersService.updateCurrentUserAvailability(this.projectId, IS_AVAILABLE).subscribe((projectUser: any) => { // non 
+        if (event.url.indexOf('/labels') !== -1) {
+          this.TAG_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - TAG_ROUTE_IS_ACTIVE ', this.TAG_ROUTE_IS_ACTIVE);
+        } else {
+          this.TAG_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - TAG_ROUTE_IS_ACTIVE ', this.TAG_ROUTE_IS_ACTIVE);
+        }
 
-    //         this.logger.log('[SIDEBAR] PROJECT-USER UPDATED ', projectUser)
+        if (event.url.indexOf('/cannedresponses') !== -1) {
+          this.CANNED_RESPONSES_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CANNED_RESPONSES_ROUTE_IS_ACTIVE ', this.CANNED_RESPONSES_ROUTE_IS_ACTIVE);
+        } else {
+          this.CANNED_RESPONSES_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CANNED_RESPONSES_ROUTE_IS_ACTIVE ', this.CANNED_RESPONSES_ROUTE_IS_ACTIVE);
+        }
 
-    //         // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
-    //         this.usersService.availability_btn_clicked(true)
+        if (event.url.indexOf('/departments') !== -1) {
+          this.DEPTS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - DEPTS_ROUTE_IS_ACTIVE ', this.DEPTS_ROUTE_IS_ACTIVE);
+        } else {
+          this.DEPTS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - DEPTS_ROUTE_IS_ACTIVE ', this.DEPTS_ROUTE_IS_ACTIVE);
+        }
 
-    //     }, (error) => {
-    //         this.logger.error('[SIDEBAR] PROJECT-USER UPDATED ERR  ', error);
-    //         // =========== NOTIFY ERROR ===========
-    //         // this.notify.showNotification('An error occurred while updating status', 4, 'report_problem');
-    //         this.notify.showWidgetStyleUpdateNotification(this.changeAvailabilityErrorNoticationMsg, 4, 'report_problem');
+        if (event.url.indexOf('/department/edit/') !== -1) {
+          this.EDIT_DEPT_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_DEPT_ROUTE_IS_ACTIVE ', this.EDIT_DEPT_ROUTE_IS_ACTIVE);
+        } else {
+          this.EDIT_DEPT_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_DEPT_ROUTE_IS_ACTIVE ', this.EDIT_DEPT_ROUTE_IS_ACTIVE);
+        }
 
-    //     }, () => {
-    //         this.logger.log('[SIDEBAR] PROJECT-USER UPDATED  * COMPLETE *');
 
-    //         // =========== NOTIFY SUCCESS===========
-    //         // this.notify.showNotification('status successfully updated', 2, 'done');
-    //         this.notify.showWidgetStyleUpdateNotification(this.changeAvailabilitySuccessNoticationMsg, 2, 'done');
+        if (event.url.indexOf('/users') !== -1) {
+          this.TEAMMATES_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - TEAMMATES_ROUTE_IS_ACTIVE ', this.TEAMMATES_ROUTE_IS_ACTIVE);
+        } else {
+          this.TEAMMATES_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - TEAMMATES_ROUTE_IS_ACTIVE ', this.TEAMMATES_ROUTE_IS_ACTIVE);;
+        }
 
+        if (event.url.indexOf('/groups') !== -1) {
+          this.GROUPS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - GROUPS_ROUTE_IS_ACTIVE ', this.GROUPS_ROUTE_IS_ACTIVE);
+        } else {
+          this.GROUPS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - GROUPS_ROUTE_IS_ACTIVE ', this.GROUPS_ROUTE_IS_ACTIVE);
+        }
 
-    //         // this.getUserAvailability()
-    //         this.getProjectUser();
-    //     });
-    // }
+        if (event.url.indexOf('/group/create') !== -1) {
+          this.CREATE_GROUP_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CREATE_GROUP_ROUTE_IS_ACTIVE ', this.CREATE_GROUP_ROUTE_IS_ACTIVE);
+        } else {
+          this.CREATE_GROUP_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CREATE_GROUP_ROUTE_IS_ACTIVE ', this.CREATE_GROUP_ROUTE_IS_ACTIVE);
+        }
 
-    // IF THE AVAILABILITY STATUS IS CHANGED from THE USER.COMP AVAILABLE / UNAVAILABLE TOGGLE BTN
-    // RE-RUN getAllUsersOfCurrentProject TO UPDATE AVAILABLE / UNAVAILABLE BTN ON THE TOP OF THE SIDEBAR
-    hasChangedAvailabilityStatusInUsersComp() {
-        this.usersService.has_changed_availability_in_users.subscribe((has_changed_availability) => {
-            //    console.log('[SIDEBAR] SUBSCRIBES TO HAS CHANGED AVAILABILITY FROM THE USERS COMP', has_changed_availability)
+        if (event.url.indexOf('/group/edit') !== -1) {
+          this.EDIT_GROUP_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_GROUP_ROUTE_IS_ACTIVE ', this.EDIT_GROUP_ROUTE_IS_ACTIVE);
+        } else {
+          this.EDIT_GROUP_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_GROUP_ROUTE_IS_ACTIVE ', this.EDIT_GROUP_ROUTE_IS_ACTIVE);
+        }
 
-            if (this.project) {
-                this.getProjectUser()
-            }
-            // this.getWsCurrentUserAvailability$()
-        })
-    }
 
+        if (event.url.indexOf('/widget-set-up') !== -1) {
+          this.WIDGET_SETUP_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - WIDGET_SETUP_ROUTE_IS_ACTIVE ', this.WIDGET_SETUP_ROUTE_IS_ACTIVE);
+        } else {
+          this.WIDGET_SETUP_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - WIDGET_SETUP_ROUTE_IS_ACTIVE ', this.WIDGET_SETUP_ROUTE_IS_ACTIVE);
+        }
 
+        if (event.url.indexOf('/bots') !== -1) {
+          this.CHATBOT_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CHATBOT_ROUTE_IS_ACTIVE ', this.CHATBOT_ROUTE_IS_ACTIVE);
+        } else {
+          this.CHATBOT_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CHATBOT_ROUTE_IS_ACTIVE ', this.CHATBOT_ROUTE_IS_ACTIVE);
+        }
 
+        if (event.url.indexOf('/createfaq') !== -1) {
+          this.CREATE_FAQ_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CREATE_FAQ_ROUTE_IS_ACTIVE ', this.CREATE_FAQ_ROUTE_IS_ACTIVE);
+        } else {
+          this.CREATE_FAQ_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CREATE_FAQ_ROUTE_IS_ACTIVE ', this.CREATE_FAQ_ROUTE_IS_ACTIVE);
+        }
 
-    // *** NOTE: THE SAME CALLBACK IS RUNNED IN THE HOME.COMP ***
-    getProjectUser() {
-        //    console.log('[SIDEBAR]  !!! SIDEBAR CALL GET-PROJECT-USER')
-        this.usersService.getProjectUserByUserId(this.currentUserId).subscribe((projectUser: any) => {
-            this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID  ', projectUser);
-            this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT-ID ', this.projectId);
-            this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - CURRENT-USER-ID ', this.user._id);
-            // console.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT USER ', projectUser);
-            this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT USER LENGTH', projectUser.length);
-            if ((projectUser) && (projectUser.length !== 0)) {
-                // this.logger.log('[SIDEBAR] PROJECT-USER ID ', projectUser[0]._id)
-                // this.logger.log('[SIDEBAR] USER IS AVAILABLE ', projectUser[0].user_available)
-                // this.logger.log('[SIDEBAR] USER IS BUSY (from db)', projectUser[0].isBusy)
-                // this.user_is_available_bs = projectUser.user_available;
+        if (event.url.indexOf('/editfaq') !== -1) {
+          this.EDIT_FAQ_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_FAQ_ROUTE_IS_ACTIVE ', this.EDIT_FAQ_ROUTE_IS_ACTIVE);
+        } else {
+          this.EDIT_FAQ_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_FAQ_ROUTE_IS_ACTIVE ', this.EDIT_FAQ_ROUTE_IS_ACTIVE);
+        }
 
-                // NOTE_nk: comment this this.subsTo_WsCurrentUser(projectUser[0]._id)
-                this.subsTo_WsCurrentUser(projectUser[0]._id)
+        if (event.url.indexOf('/faq/test/') !== -1) {
+          this.BOT_TEST_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - BOT_TEST_ROUTE_IS_ACTIVE ', this.BOT_TEST_ROUTE_IS_ACTIVE);
+        } else {
+          this.BOT_TEST_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - BOT_TEST_ROUTE_IS_ACTIVE ', this.BOT_TEST_ROUTE_IS_ACTIVE);
+        }
 
-                if (projectUser[0].user_available !== undefined) {
-                    this.usersService.user_availability(projectUser[0]._id, projectUser[0].user_available, projectUser[0].isBusy, projectUser[0])
-                }
 
-                // ADDED 21 AGO
-                if (projectUser[0].role !== undefined) {
-                    this.logger.log('[SIDEBAR] GET PROJECT USER ROLE FOR THE PROJECT ', this.projectId, ' »» ', projectUser[0].role);
+        if (event.url.indexOf('/hours') !== -1) {
+          this.OPERATING_HOURS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - OPERATING_HOURS_ROUTE_IS_ACTIVE ', this.OPERATING_HOURS_ROUTE_IS_ACTIVE);
+        } else {
+          this.OPERATING_HOURS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - OPERATING_HOURS_ROUTE_IS_ACTIVE ', this.OPERATING_HOURS_ROUTE_IS_ACTIVE);
+        }
 
-                    // ASSIGN THE projectUser[0].role VALUE TO USER_ROLE
-                    this.USER_ROLE = projectUser[0].role;
+        if (event.url.indexOf('/project-settings/') !== -1) {
+          this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - PROJECT_SETTINGS_ROUTE_IS_ACTIVE ', this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE);
+        } else {
+          this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - SETTINGS_IS_ACTIVE ', this.PROJECT_SETTINGS_ROUTE_IS_ACTIVE);
+        }
 
-                    // SEND THE ROLE TO USER SERVICE THAT PUBLISH
-                    this.usersService.user_role(projectUser[0].role);
+        if (event.url.indexOf('/notification-email') !== -1) {
+          this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE ', this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE);
+        } else {
+          this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE ', this.ENTERPRISE_NOTIFICATION_EMAIL_ROUTE_IS_ACTIVE);
+        }
 
-                }
-            } else {
-                // this could be the case in which the current user was deleted as a member of the current project
-                this.logger.log('[SIDEBAR] PROJECT-USER UNDEFINED ')
-            }
+        if (event.url.indexOf('/smtp-settings') !== -1) {
+          this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE ', this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE);
+        } else {
+          this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE ', this.ENTERPRISE_SMTP_SETTINGS_ROUTE_IS_ACTIVE);
+        }
 
-        }, (error) => {
-            this.logger.error('[SIDEBAR] PROJECT-USER GET BY PROJECT-ID & CURRENT-USER-ID  ', error);
-        }, () => {
-            this.logger.log('[SIDEBAR] PROJECT-USER GET BY PROJECT ID & CURRENT-USER-ID  * COMPLETE *');
-        });
-    }
+        if (event.url.indexOf('/webhook') !== -1) {
+          this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE);
+        } else {
+          this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_WEBHOOK_ROUTE_IS_ACTIVE);
+        }
 
+        if (event.url.indexOf('/payments') !== -1) {
+          this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE);
+        } else {
+          this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE ', this.PRJCT_SETTINGS_PAYMENTS_ROUTE_IS_ACTIVE);
+        }
 
-    subsTo_WsCurrentUser(currentuserprjctuserid) {
-        this.logger.log('[SIDEBAR] - SUBSCRIBE TO WS CURRENT-USER AVAILABILITY  prjct user id of current user ', currentuserprjctuserid);
-        // this.usersService.subscriptionToWsCurrentUser(currentuserprjctuserid);
-        this.wsRequestsService.subscriptionToWsCurrentUser(currentuserprjctuserid);
+        if (event.url.indexOf('/user/add') !== -1) {
+          this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - INVITE_TEAMMATE_ROUTE_IS_ACTIVE ', this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE);
+        } else {
+          this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - INVITE_TEAMMATE_ROUTE_IS_ACTIVE ', this.INVITE_TEAMMATE_ROUTE_IS_ACTIVE);
+        }
 
-        this.getWsCurrentUserAvailability$();
-        this.getWsCurrentUserIsBusy$();
-    }
+        if (event.url.indexOf('/user/edit/') !== -1) {
+          this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_PROJECT_USER_ROUTE_IS_ACTIVE ', this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE);
+        } else {
+          this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - EDIT_PROJECT_USER_ROUTE_IS_ACTIVE ', this.EDIT_PROJECT_USER_ROUTE_IS_ACTIVE);
+        }
 
+        if (event.url.indexOf('/messages') !== -1) {
+          this.CONV_DETAIL_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CONV_DETAIL_ROUTE_IS_ACTIVE ', this.CONV_DETAIL_ROUTE_IS_ACTIVE);
+        } else {
+          this.CONV_DETAIL_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CONV_DETAIL_ROUTE_IS_ACTIVE ', this.CONV_DETAIL_ROUTE_IS_ACTIVE);
+        }
 
+        if (event.url.indexOf('/contact/edit/') !== -1) {
+          this.CONTACT_EDIT_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CONTACT_EDIT_ROUTE_IS_ACTIVE ', this.CONTACT_EDIT_ROUTE_IS_ACTIVE);
+        } else {
+          this.CONTACT_EDIT_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CONTACT_EDIT_ROUTE_IS_ACTIVE ', this.CONTACT_EDIT_ROUTE_IS_ACTIVE);
+        }
 
-    getWsCurrentUserAvailability$() {
-        // this.usersService.currentUserWsAvailability$
-        this.wsRequestsService.currentUserWsAvailability$
-            .pipe(
-                takeUntil(this.unsubscribe$)
-            )
-            .subscribe((data) => {
-                // console.log('[SIDEBAR] - GET WS CURRENT-USER - data ', data);
-                if (data !== null) {
-                    if (data['user_available'] === false && data['profileStatus'] === "inactive") {
-                        this.IS_AVAILABLE = false;
-                        this.IS_INACTIVE = true;
-                        // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_INACTIVE ' , this.IS_INACTIVE) 
-                    } else if (data['user_available'] === false && (data['profileStatus'] === '' || !data['profileStatus'])) {
-                        this.IS_AVAILABLE = false;
-                        this.IS_INACTIVE = false;
-                        // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
-                    } else if (data['user_available'] === true && (data['profileStatus'] === '' || !data['profileStatus'])) {
-                        this.IS_AVAILABLE = true;
-                        this.IS_INACTIVE = false;
-                        // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
-                    }
-
-                    // if (this.IS_AVAILABLE === true) {
-                    //     this.tooltip_text_for_availability_status = this.translate.instant('CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE')
-                    // } else {
-                    //     this.tooltip_text_for_availability_status = this.translate.instant('CHANGE_TO_YOUR_STATUS_TO_AVAILABLE')
-                    // }
-                }
-            }, error => {
-                this.logger.error('[SIDEBAR] - GET WS CURRENT-USER AVAILABILITY * error * ', error)
-            }, () => {
-                this.logger.log('[SIDEBAR] - GET WS CURRENT-USER AVAILABILITY *** complete *** ')
-            });
+        if (event.url.indexOf('/contact/') !== -1) {
+          this.CONTACT_CONVS_ROUTE_IS_ACTIVE = true;
+          // console.log('[SIDEBAR] NavigationEnd - CONTACT_CONVS_ROUTE_IS_ACTIVE ', this.CONTACT_CONVS_ROUTE_IS_ACTIVE);
+        } else {
+          this.CONTACT_CONVS_ROUTE_IS_ACTIVE = false;
+          // console.log('[SIDEBAR] NavigationEnd - CONTACT_CONVS_ROUTE_IS_ACTIVE ', this.CONTACT_CONVS_ROUTE_IS_ACTIVE);
+        }
+      }
+    });
+  }
+
+
+  subscribeToMyAvailibilityCount() {
+    this.projectService.myAvailabilityCount
+      .subscribe((num: number) => {
+        this.logger.log('[SIDEBAR] subscribeToMyAvailibilityCount ', num)
+        this.availabilityCount = num;
+      })
+  }
+
+  translateChangeAvailabilitySuccessMsg() {
+    this.translate.get('ChangeAvailabilitySuccessNoticationMsg')
+      .subscribe((text: string) => {
+        this.changeAvailabilitySuccessNoticationMsg = text;
+        // this.logger.log('+ + + change Availability Success Notication Msg', text)
+      });
+  }
+
+  translateChangeAvailabilityErrorMsg() {
+    this.translate.get('ChangeAvailabilityErrorNoticationMsg')
+      .subscribe((text: string) => {
+        this.changeAvailabilityErrorNoticationMsg = text;
+        // this.logger.log('+ + + change Availability Error Notication Msg', text)
+      });
+  }
+
+
+  listenHasDeleteUserProfileImage() {
+    this.getLoggedUser()
+    if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
+      this.uploadImageService.hasDeletedUserPhoto.subscribe((hasDeletedImage) => {
+        this.logger.log('[SIDEBAR] - hasDeletedImage ? ', hasDeletedImage, '(usecase Firebase)');
+        this.userImageHasBeenUploaded = false
+        this.userProfileImageExist = false
+      });
+    } else {
+      this.uploadImageNativeService.hasDeletedUserPhoto.subscribe((hasDeletedImage) => {
+        this.logger.log('[SIDEBAR] - hasDeletedImage ? ', hasDeletedImage, '(usecase Native)');
+        this.userImageHasBeenUploaded = false
+        this.userProfileImageExist = false
+      });
     }
 
-    getWsCurrentUserIsBusy$() {
-        // this.usersService.currentUserWsIsBusy$
-        this.wsRequestsService.currentUserWsIsBusy$
-            .pipe(
-                takeUntil(this.unsubscribe$)
-            )
-            .subscribe((currentuser_isbusy) => {
-                // this.logger.log('[SIDEBAR] - GET WS CURRENT-USER - currentuser_isbusy? ', currentuser_isbusy);
-                if (currentuser_isbusy !== null) {
-                    this.IS_BUSY = currentuser_isbusy;
-                    // this.logger.log('[SIDEBAR] - GET WS CURRENT-USER (from ws)- this.IS_BUSY? ', this.IS_BUSY);
-                }
-            }, error => {
-                this.logger.error('[SIDEBAR] - GET WS CURRENT-USER IS BUSY * error * ', error)
-            }, () => {
-                this.logger.log('[SIDEBAR] - GET WS CURRENT-USER IS BUSY *** complete *** ')
-            });
+  }
 
 
-    }
+  checkUserImageExist() {
+    this.usersService.userProfileImageExist.subscribe((image_exist) => {
+      this.logger.log('[SIDEBAR] - USER PROFILE EXIST ? ', image_exist);
+      this.userProfileImageExist = image_exist;
 
+      if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
+        if (this.storageBucket && this.userProfileImageExist === true) {
+          this.logger.log('[SIDEBAR] - USER PROFILE EXIST - BUILD userProfileImageurl');
+          this.setImageProfileUrl(this.storageBucket)
+        }
+      } else {
+        if (this.baseUrl && this.userProfileImageExist === true) {
+          this.setImageProfileUrl_Native(this.baseUrl)
+        }
+      }
+    });
+  }
 
-    // NO MORE USED - SUBSTITUDED WITH changeAvailabilityState
-    // availale_unavailable_status(hasClickedChangeStatus: boolean) {
-    //     hasClickedChangeStatus = hasClickedChangeStatus;
-    //     if (hasClickedChangeStatus) {
-    //         //   this.display = 'block';
 
-    //         this.IS_AVAILABLE = hasClickedChangeStatus
-    //         this.logger.log('HAS CLICKED CHANGE STATUS - IS_AVAILABLE ? ', this.IS_AVAILABLE);
-    //     }
 
-    //     if (!hasClickedChangeStatus) {
-    //         //   this.display = 'none';
-    //         this.logger.log('HAS CLICKED CHANGE STATUS ', hasClickedChangeStatus);
-    //         this.IS_AVAILABLE = hasClickedChangeStatus
-    //         this.logger.log('HAS CLICKED CHANGE STATUS - IS_AVAILABLE ? ', this.IS_AVAILABLE);
-    //     }
-    // }
+  checkUserImageUploadIsComplete() {
+    if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
+      this.uploadImageService.userImageWasUploaded.subscribe((image_exist) => {
+        this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE ? ', image_exist, '(usecase Firebase)');
+        this.userImageHasBeenUploaded = image_exist;
+        if (this.storageBucket && this.userImageHasBeenUploaded === true) {
+          this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE - BUILD userProfileImageurl ');
+          this.setImageProfileUrl(this.storageBucket)
+        }
+      });
+    } else {
 
+      // NATIVE
+      this.uploadImageNativeService.userImageWasUploaded_Native.subscribe((image_exist) => {
+        this.logger.log('[SIDEBAR] USER PROFILE IMAGE - IMAGE UPLOADING IS COMPLETE ? ', image_exist, '(usecase Native)');
 
-    // GET CURRENT PROJECT - IF IS DEFINED THE CURRENT PROJECT GET THE PROJECTUSER
-    getCurrentProjectProjectUsersProjectBots() {
-        this.logger.log('[SIDEBAR] - CALLING GET CURRENT PROJECT  ', this.project)
-        this.auth.project_bs.subscribe((project) => {
-            this.project = project
-            // console.log('[SIDEBAR] project from AUTH service subscription  ', this.project)
-            if (this.project) {
-                this.projectId = this.project._id
-                this.getProjectUserRole(this.projectId);
-                this.findCurrentProjectAmongAll(this.projectId)
-
-                this.prjct_profile_name = this.project.profile_name;
-                this.prjct_trial_expired = this.project.trial_expired;
-                this.prjc_trial_days_left = this.project.trial_days_left;
-                // this.prjc_trial_days_left_percentage = ((this.prjc_trial_days_left *= -1) * 100) / 30
-                this.prjc_trial_days_left_percentage = (this.prjc_trial_days_left * 100) / 30;
-
-                // this.prjc_trial_days_left_percentage IT IS 
-                // A NEGATIVE NUMBER AND SO TO DETERMINE THE PERCENT IS MADE AN ADDITION
-                const perc = 100 + this.prjc_trial_days_left_percentage
-                // this.logger.log('[SIDEBAR] project perc ', perc)
-
-
-                this.prjc_trial_days_left_percentage = this.round5(perc)
-                // this.logger.log('[SIDEBAR] project trial days left % rounded', this.prjc_trial_days_left_percentage);
-
-                this.getProjectUser();
-                // this.getFaqKbByProjectId()
-            }
-        });
+        this.userImageHasBeenUploaded = image_exist;
+        this.uploadImageNativeService.userImageDownloadUrl_Native.subscribe((imageUrl) => {
+          this.userProfileImageurl = imageUrl
+          this.timeStamp = (new Date()).getTime();
+        })
+      })
     }
-
-    getFaqKbByProjectId() {
-        this.faqKbService.getFaqKbByProjectId().subscribe((faqKb: any) => {
-            if (faqKb) {
-                this.myChatbotCount = faqKb.length
-                this.logger.log('[SIDEBAR] - GET BOTS BY PROJECT ID - myChatbotCount', this.myChatbotCount);
-            }
-        }, (error) => {
-            this.logger.error('[SIDEBAR] GET BOTS ERROR ', error);
-
-        }, () => {
-            this.logger.log('[SIDEBAR] GET BOTS COMPLETE');
-        });
+  }
+
+  setImageProfileUrl_Native(storage) {
+    this.userProfileImageurl = storage + 'images?path=uploads%2Fusers%2F' + this.currentUserId + '%2Fimages%2Fthumbnails_200_200-photo.jpg';
+    this.logger.log('[SIDEBAR] PROFILE IMAGE (USER-PROFILE ) - userProfileImageurl ', this.userProfileImageurl);
+    this.timeStamp = (new Date()).getTime();
+  }
+
+  setImageProfileUrl(storageBucket) {
+    this.userProfileImageurl = 'https://firebasestorage.googleapis.com/v0/b/' + storageBucket + '/o/profiles%2F' + this.currentUserId + '%2Fphoto.jpg?alt=media';
+    this.timeStamp = (new Date()).getTime();
+  }
+
+  getUserProfileImage() {
+    if (this.timeStamp) {
+      // this.logger.log('PROFILE IMAGE (USER-PROFILE IN SIDEBAR-COMP) - getUserProfileImage ', this.userProfileImageurl);
+      return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl + '&' + this.timeStamp);
     }
+    return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl)
+  }
 
-    getProjectUserRole(projectId) {
-        // console.log('[SIDEBAR] - PROJECT USER ROLE projectId ', projectId);
-        const storedProjectJson = localStorage.getItem(projectId);
-        if (storedProjectJson) {
-            const projectObject = JSON.parse(storedProjectJson);
-            this.USER_ROLE = projectObject['role'];
-            // console.log('[SIDEBAR] - PROJECT USER ROLE get from storage ', this.USER_ROLE);
-        } else {
-
-            this.usersService.project_user_role_bs.subscribe((user_role) => {
-                this.USER_ROLE = user_role;
-                this.logger.log('[SIDEBAR] - 1. SUBSCRIBE PROJECT_USER_ROLE_BS ', this.USER_ROLE);
-                if (this.USER_ROLE) {
-                    // console.log('[SIDEBAR] - PROJECT USER ROLE get from $ subsription', this.USER_ROLE);
-                    if (this.USER_ROLE === 'agent') {
-                        this.SHOW_SETTINGS_SUBMENU = false;
-                    }
-                }
-
-            });
+
+
+
+  getProjectUserId() {
+    this.usersService.project_user_id_bs.subscribe((projectUser_id) => {
+      this.logger.log('[SIDEBAR] - PROJECT-USER-ID ', projectUser_id);
+
+      // if (this.projectUser_id) {
+      //     this.logger.log('[SIDEBAR] - PROJECT-USER-ID (THIS)  ', this.projectUser_id);
+      //     this.logger.log('[SIDEBAR] - PROJECT-USER-ID ', projectUser_id);
+
+      //     this.usersService.unsubscriptionToWsCurrentUser(projectUser_id)
+      // }
+      if (projectUser_id) {
+        this.projectUser_id = projectUser_id;
+      }
+    });
+  }
+
+  // ============ SUBSCRIPTION TO user_is_available_bs, project_user_id_bs AND user_is_busy$ PUBLISHED BY THE USER SERVICE USED
+  /* WF: when the user select A PROJECT,
+     - in the HOME COMP is made a call-back to get the PROJECT-USER OBJECT
+     - the HOME COMP PASS THE PROJECT-USER AVAILABILITY AND THE PROJECT-USER-ID  AND USER IS BUSY TO THE  USER SERVICE
+     - the USER-SERVICE PUBLISH THE PROJECT-USER AVAILABILITY AND THE PROJECT-USER ID
+     - the SIDEBAR (this component) SUBSCRIBES THESE VALUES
+  */
+  getUserAvailability() {
+    this.usersService.user_is_available_bs.subscribe((user_available) => {
+      this.IS_AVAILABLE = user_available;
+      // console.log('[SIDEBAR] - USER IS AVAILABLE ', this.IS_AVAILABLE);
+    });
+  }
+
+  getUserUserIsBusy() {
+    this.usersService.user_is_busy$.subscribe((user_isbusy) => {
+      this.IS_BUSY = user_isbusy;
+      // THE VALUE OS  IS_BUSY IS THEN UPDATED WITH THE VALUE RETURNED FROM THE WEBSOCKET getWsCurrentUserIsBusy$()
+      // WHEN, FOR EXAMPLE IN PROJECT-SETTINGS > ADVANCED THE NUM OF MAX CHAT IS 3 AND THE 
+      this.logger.log('[SIDEBAR] - USER IS BUSY (from db)', this.IS_BUSY);
+    });
+  }
+
+
+  // changeAvailabilityState(IS_AVAILABLE, profilestatus) {
+  //     this.logger.log('[SIDEBAR] - CHANGE STATUS - USER IS AVAILABLE ? ', IS_AVAILABLE);
+  //     this.logger.log('[SIDEBAR]- CHANGE STATUS - PROJECT USER ID: ', this.projectUser_id);
+
+
+  //     // this.usersService.updateProjectUser(this.projectUser_id, IS_AVAILABLE).subscribe((projectUser: any) => {
+  //     // DONE - WORKS NK-TO-TEST - da implementare quando viene implementato il servizio - serve per cambiare lo stato di disponibilità dell'utente corrente
+  //     // anche in USER & GROUP bisogna cambiare per la riga dell'utente corrente   
+  //     this.usersService.updateCurrentUserAvailability(this.projectId, IS_AVAILABLE).subscribe((projectUser: any) => { // non 
+
+  //         this.logger.log('[SIDEBAR] PROJECT-USER UPDATED ', projectUser)
+
+  //         // NOTIFY TO THE USER SERVICE WHEN THE AVAILABLE / UNAVAILABLE BUTTON IS CLICKED
+  //         this.usersService.availability_btn_clicked(true)
+
+  //     }, (error) => {
+  //         this.logger.error('[SIDEBAR] PROJECT-USER UPDATED ERR  ', error);
+  //         // =========== NOTIFY ERROR ===========
+  //         // this.notify.showNotification('An error occurred while updating status', 4, 'report_problem');
+  //         this.notify.showWidgetStyleUpdateNotification(this.changeAvailabilityErrorNoticationMsg, 4, 'report_problem');
+
+  //     }, () => {
+  //         this.logger.log('[SIDEBAR] PROJECT-USER UPDATED  * COMPLETE *');
+
+  //         // =========== NOTIFY SUCCESS===========
+  //         // this.notify.showNotification('status successfully updated', 2, 'done');
+  //         this.notify.showWidgetStyleUpdateNotification(this.changeAvailabilitySuccessNoticationMsg, 2, 'done');
+
+
+  //         // this.getUserAvailability()
+  //         this.getProjectUser();
+  //     });
+  // }
+
+  // IF THE AVAILABILITY STATUS IS CHANGED from THE USER.COMP AVAILABLE / UNAVAILABLE TOGGLE BTN
+  // RE-RUN getAllUsersOfCurrentProject TO UPDATE AVAILABLE / UNAVAILABLE BTN ON THE TOP OF THE SIDEBAR
+  hasChangedAvailabilityStatusInUsersComp() {
+    this.usersService.has_changed_availability_in_users.subscribe((has_changed_availability) => {
+      //    console.log('[SIDEBAR] SUBSCRIBES TO HAS CHANGED AVAILABILITY FROM THE USERS COMP', has_changed_availability)
+
+      if (this.project) {
+        this.getProjectUser()
+      }
+      // this.getWsCurrentUserAvailability$()
+    })
+  }
+
+
+
+
+  // *** NOTE: THE SAME CALLBACK IS RUNNED IN THE HOME.COMP ***
+  getProjectUser() {
+    //    console.log('[SIDEBAR]  !!! SIDEBAR CALL GET-PROJECT-USER')
+    this.usersService.getProjectUserByUserId(this.currentUserId).subscribe((projectUser: any) => {
+      this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID  ', projectUser);
+      this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT-ID ', this.projectId);
+      this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - CURRENT-USER-ID ', this.user._id);
+      // console.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT USER ', projectUser);
+      this.logger.log('[SIDEBAR] PROJECT-USER GET BY USER-ID - PROJECT USER LENGTH', projectUser.length);
+      if ((projectUser) && (projectUser.length !== 0)) {
+        // this.logger.log('[SIDEBAR] PROJECT-USER ID ', projectUser[0]._id)
+        // this.logger.log('[SIDEBAR] USER IS AVAILABLE ', projectUser[0].user_available)
+        // this.logger.log('[SIDEBAR] USER IS BUSY (from db)', projectUser[0].isBusy)
+        // this.user_is_available_bs = projectUser.user_available;
+
+        // NOTE_nk: comment this this.subsTo_WsCurrentUser(projectUser[0]._id)
+        this.subsTo_WsCurrentUser(projectUser[0]._id)
+
+        if (projectUser[0].user_available !== undefined) {
+          this.usersService.user_availability(projectUser[0]._id, projectUser[0].user_available, projectUser[0].isBusy, projectUser[0])
         }
-    }
-
-
-
-    findCurrentProjectAmongAll(projectId: string) {
-        this.projectService.getProjects().subscribe((projects: any) => {
-            // const current_selected_prjct = projects.filter(prj => prj.id_project.id === projectId);
-            // console.log('[SIDEBAR] - GET PROJECTS - current_selected_prjct ', current_selected_prjct);
-
-            this.current_selected_prjct = projects.find(prj => prj.id_project.id === projectId);
-            this.logger.log('[SIDEBAR] - GET PROJECTS - _current_selected_prjct ', this.current_selected_prjct);
-
-
-            if (this.current_selected_prjct) {
-                this.logger.log('[SIDEBAR] PROJECT PROFILE TYPE', this.current_selected_prjct.id_project.profile.type);
-                this.logger.log('[SIDEBAR] PROJECT PROFILE NAME', this.current_selected_prjct.id_project.profile.name);
-                this.logger.log('[SIDEBAR] PROJECT TRIAL EXPIRED', this.current_selected_prjct.id_project.trialExpired);
-                this.logger.log('[SIDEBAR] PROJECT SUBSCRIPTION IS ACTIVE', this.current_selected_prjct.id_project.isActiveSubscription);
-                this.plan_subscription_is_active = this.current_selected_prjct.id_project.isActiveSubscription;
-                this.plan_name = this.current_selected_prjct.id_project.profile.name;
-                this.plan_type = this.current_selected_prjct.id_project.profile.type;
-                this.prjct_name = this.current_selected_prjct.id_project.name;
-                // if (this.current_selected_prjct.id_project.profile.type === 'free') {
-                //     if (this.current_selected_prjct.id_project.trialExpired === false) {
-                //         if (this.isVisiblePAY) {
-                //             this.getProPlanTrialTranslation();
-                //         } else {
-                //             this.getUnavailablePlanProfile()
-                //         }
-                //     } else {
-                //         if (this.isVisiblePAY) {
-                //             this.getPaidPlanTranslation(this.current_selected_prjct.id_project.profile.name);
-                //         } else {
-                //             this.getUnavailablePlanProfile()
-                //         }
-                //     }
-                // } else if (this.current_selected_prjct.id_project.profile.type === 'payment') {
-                //     if (this.isVisiblePAY) {
-                //         this.getPaidPlanTranslation(this.current_selected_prjct.id_project.profile.name);
-                //     } else {
-                //         this.getUnavailablePlanProfile()
-                //     }
-                // }
-            }
-            this.logger.log('[SIDEBAR] - GET PROJECTS - projects ', projects);
-        }, error => {
-            this.logger.error('[SIDEBAR] - GET PROJECTS - ERROR: ', error);
-        }, () => {
-            this.logger.log('[SIDEBAR] - GET PROJECTS * COMPLETE * ');
-        });
-    }
-
-    // getProPlanTrialTranslation() {
-    //     this.translate.get('ProPlanTrial')
-    //         .subscribe((translation: any) => {
-    //             this._prjct_profile_name = translation;
-
-    //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
-    //         });
-    // }
 
-    // getPaidPlanTranslation(project_profile_name) {
-    //     this.translate.get('PaydPlanName', { projectprofile: project_profile_name })
-    //         .subscribe((text: string) => {
-    //             this._prjct_profile_name = text;
-    //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
-    //         });
-    // }
+        // ADDED 21 AGO
+        if (projectUser[0].role !== undefined) {
+          this.logger.log('[SIDEBAR] GET PROJECT USER ROLE FOR THE PROJECT ', this.projectId, ' »» ', projectUser[0].role);
 
-    // getUnavailablePlanProfile() {
-    //     this.translate.get('ProfileNotAvailable')
-    //         .subscribe((text: string) => {
-    //             this._prjct_profile_name = text;
-    //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
-    //         });
-    // }
+          // ASSIGN THE projectUser[0].role VALUE TO USER_ROLE
+          this.USER_ROLE = projectUser[0].role;
 
+          // SEND THE ROLE TO USER SERVICE THAT PUBLISH
+          this.usersService.user_role(projectUser[0].role);
 
+        }
+      } else {
+        // this could be the case in which the current user was deleted as a member of the current project
+        this.logger.log('[SIDEBAR] PROJECT-USER UNDEFINED ')
+      }
+
+    }, (error) => {
+      this.logger.error('[SIDEBAR] PROJECT-USER GET BY PROJECT-ID & CURRENT-USER-ID  ', error);
+    }, () => {
+      this.logger.log('[SIDEBAR] PROJECT-USER GET BY PROJECT ID & CURRENT-USER-ID  * COMPLETE *');
+    });
+  }
+
+
+  subsTo_WsCurrentUser(currentuserprjctuserid) {
+    this.logger.log('[SIDEBAR] - SUBSCRIBE TO WS CURRENT-USER AVAILABILITY  prjct user id of current user ', currentuserprjctuserid);
+    // this.usersService.subscriptionToWsCurrentUser(currentuserprjctuserid);
+    this.wsRequestsService.subscriptionToWsCurrentUser(currentuserprjctuserid);
+
+    this.getWsCurrentUserAvailability$();
+    this.getWsCurrentUserIsBusy$();
+  }
+
+
+
+  getWsCurrentUserAvailability$() {
+    // this.usersService.currentUserWsAvailability$
+    this.wsRequestsService.currentUserWsAvailability$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((data) => {
+        // console.log('[SIDEBAR] - GET WS CURRENT-USER - data ', data);
+        if (data !== null) {
+          if (data['user_available'] === false && data['profileStatus'] === "inactive") {
+            this.IS_AVAILABLE = false;
+            this.IS_INACTIVE = true;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_INACTIVE ' , this.IS_INACTIVE) 
+          } else if (data['user_available'] === false && (data['profileStatus'] === '' || !data['profileStatus'])) {
+            this.IS_AVAILABLE = false;
+            this.IS_INACTIVE = false;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
+          } else if (data['user_available'] === true && (data['profileStatus'] === '' || !data['profileStatus'])) {
+            this.IS_AVAILABLE = true;
+            this.IS_INACTIVE = false;
+            // console.log('[SIDEBAR] - GET WS CURRENT-USER - data - IS_AVAILABLE ' , this.IS_AVAILABLE) 
+          }
+
+          // if (this.IS_AVAILABLE === true) {
+          //     this.tooltip_text_for_availability_status = this.translate.instant('CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE')
+          // } else {
+          //     this.tooltip_text_for_availability_status = this.translate.instant('CHANGE_TO_YOUR_STATUS_TO_AVAILABLE')
+          // }
+        }
+      }, error => {
+        this.logger.error('[SIDEBAR] - GET WS CURRENT-USER AVAILABILITY * error * ', error)
+      }, () => {
+        this.logger.log('[SIDEBAR] - GET WS CURRENT-USER AVAILABILITY *** complete *** ')
+      });
+  }
+
+  getWsCurrentUserIsBusy$() {
+    // this.usersService.currentUserWsIsBusy$
+    this.wsRequestsService.currentUserWsIsBusy$
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((currentuser_isbusy) => {
+        // this.logger.log('[SIDEBAR] - GET WS CURRENT-USER - currentuser_isbusy? ', currentuser_isbusy);
+        if (currentuser_isbusy !== null) {
+          this.IS_BUSY = currentuser_isbusy;
+          // this.logger.log('[SIDEBAR] - GET WS CURRENT-USER (from ws)- this.IS_BUSY? ', this.IS_BUSY);
+        }
+      }, error => {
+        this.logger.error('[SIDEBAR] - GET WS CURRENT-USER IS BUSY * error * ', error)
+      }, () => {
+        this.logger.log('[SIDEBAR] - GET WS CURRENT-USER IS BUSY *** complete *** ')
+      });
+
+
+  }
+
+
+  // NO MORE USED - SUBSTITUDED WITH changeAvailabilityState
+  // availale_unavailable_status(hasClickedChangeStatus: boolean) {
+  //     hasClickedChangeStatus = hasClickedChangeStatus;
+  //     if (hasClickedChangeStatus) {
+  //         //   this.display = 'block';
+
+  //         this.IS_AVAILABLE = hasClickedChangeStatus
+  //         this.logger.log('HAS CLICKED CHANGE STATUS - IS_AVAILABLE ? ', this.IS_AVAILABLE);
+  //     }
+
+  //     if (!hasClickedChangeStatus) {
+  //         //   this.display = 'none';
+  //         this.logger.log('HAS CLICKED CHANGE STATUS ', hasClickedChangeStatus);
+  //         this.IS_AVAILABLE = hasClickedChangeStatus
+  //         this.logger.log('HAS CLICKED CHANGE STATUS - IS_AVAILABLE ? ', this.IS_AVAILABLE);
+  //     }
+  // }
+
+
+  // GET CURRENT PROJECT - IF IS DEFINED THE CURRENT PROJECT GET THE PROJECTUSER
+  getCurrentProjectProjectUsersProjectBots() {
+    this.logger.log('[SIDEBAR] - CALLING GET CURRENT PROJECT  ', this.project)
+    this.auth.project_bs.subscribe((project) => {
+      this.project = project
+      // console.log('[SIDEBAR] project from AUTH service subscription  ', this.project)
+      if (this.project) {
+        this.projectId = this.project._id
+        this.getProjectUserRole(this.projectId);
+        this.findCurrentProjectAmongAll(this.projectId)
+
+        this.prjct_profile_name = this.project.profile_name;
+        this.prjct_trial_expired = this.project.trial_expired;
+        this.prjc_trial_days_left = this.project.trial_days_left;
+        // this.prjc_trial_days_left_percentage = ((this.prjc_trial_days_left *= -1) * 100) / 30
+        this.prjc_trial_days_left_percentage = (this.prjc_trial_days_left * 100) / 30;
+
+        // this.prjc_trial_days_left_percentage IT IS 
+        // A NEGATIVE NUMBER AND SO TO DETERMINE THE PERCENT IS MADE AN ADDITION
+        const perc = 100 + this.prjc_trial_days_left_percentage
+        // this.logger.log('[SIDEBAR] project perc ', perc)
+
+
+        this.prjc_trial_days_left_percentage = this.round5(perc)
+        // this.logger.log('[SIDEBAR] project trial days left % rounded', this.prjc_trial_days_left_percentage);
+
+        this.getProjectUser();
+        // this.getFaqKbByProjectId()
+      }
+    });
+  }
+
+  getFaqKbByProjectId() {
+    this.faqKbService.getFaqKbByProjectId().subscribe((faqKb: any) => {
+      if (faqKb) {
+        this.myChatbotCount = faqKb.length
+        this.logger.log('[SIDEBAR] - GET BOTS BY PROJECT ID - myChatbotCount', this.myChatbotCount);
+      }
+    }, (error) => {
+      this.logger.error('[SIDEBAR] GET BOTS ERROR ', error);
+
+    }, () => {
+      this.logger.log('[SIDEBAR] GET BOTS COMPLETE');
+    });
+  }
+
+  getProjectUserRole(projectId) {
+    // console.log('[SIDEBAR] - PROJECT USER ROLE projectId ', projectId);
+    const storedProjectJson = localStorage.getItem(projectId);
+    if (storedProjectJson) {
+      const projectObject = JSON.parse(storedProjectJson);
+      this.USER_ROLE = projectObject['role'];
+      // console.log('[SIDEBAR] - PROJECT USER ROLE get from storage ', this.USER_ROLE);
+    } else {
+
+      this.usersService.project_user_role_bs.subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[SIDEBAR] - 1. SUBSCRIBE PROJECT_USER_ROLE_BS ', this.USER_ROLE);
+        if (this.USER_ROLE) {
+          // console.log('[SIDEBAR] - PROJECT USER ROLE get from $ subsription', this.USER_ROLE);
+          if (this.USER_ROLE === 'agent') {
+            this.SHOW_SETTINGS_SUBMENU = false;
+          }
+        }
 
-    round5(x) {
-        // const percentageRounded = Math.ceil(x / 5) * 5;
-        // this.logger.log('SIDEBAR project trial days left % rounded', percentageRounded);
-        // return Math.ceil(x / 5) * 5;
-        return x % 5 < 3 ? (x % 5 === 0 ? x : Math.floor(x / 5) * 5) : Math.ceil(x / 5) * 5
+      });
     }
-
-    ngAfterViewInit() {
-
+  }
+
+
+
+  findCurrentProjectAmongAll(projectId: string) {
+    this.projectService.getProjects().subscribe((projects: any) => {
+      // const current_selected_prjct = projects.filter(prj => prj.id_project.id === projectId);
+      // console.log('[SIDEBAR] - GET PROJECTS - current_selected_prjct ', current_selected_prjct);
+
+      this.current_selected_prjct = projects.find(prj => prj.id_project.id === projectId);
+      this.logger.log('[SIDEBAR] - GET PROJECTS - _current_selected_prjct ', this.current_selected_prjct);
+
+
+      if (this.current_selected_prjct) {
+        this.logger.log('[SIDEBAR] PROJECT PROFILE TYPE', this.current_selected_prjct.id_project.profile.type);
+        this.logger.log('[SIDEBAR] PROJECT PROFILE NAME', this.current_selected_prjct.id_project.profile.name);
+        this.logger.log('[SIDEBAR] PROJECT TRIAL EXPIRED', this.current_selected_prjct.id_project.trialExpired);
+        this.logger.log('[SIDEBAR] PROJECT SUBSCRIPTION IS ACTIVE', this.current_selected_prjct.id_project.isActiveSubscription);
+        this.plan_subscription_is_active = this.current_selected_prjct.id_project.isActiveSubscription;
+        this.plan_name = this.current_selected_prjct.id_project.profile.name;
+        this.plan_type = this.current_selected_prjct.id_project.profile.type;
+        this.prjct_name = this.current_selected_prjct.id_project.name;
+        // if (this.current_selected_prjct.id_project.profile.type === 'free') {
+        //     if (this.current_selected_prjct.id_project.trialExpired === false) {
+        //         if (this.isVisiblePAY) {
+        //             this.getProPlanTrialTranslation();
+        //         } else {
+        //             this.getUnavailablePlanProfile()
+        //         }
+        //     } else {
+        //         if (this.isVisiblePAY) {
+        //             this.getPaidPlanTranslation(this.current_selected_prjct.id_project.profile.name);
+        //         } else {
+        //             this.getUnavailablePlanProfile()
+        //         }
+        //     }
+        // } else if (this.current_selected_prjct.id_project.profile.type === 'payment') {
+        //     if (this.isVisiblePAY) {
+        //         this.getPaidPlanTranslation(this.current_selected_prjct.id_project.profile.name);
+        //     } else {
+        //         this.getUnavailablePlanProfile()
+        //     }
+        // }
+      }
+      this.logger.log('[SIDEBAR] - GET PROJECTS - projects ', projects);
+    }, error => {
+      this.logger.error('[SIDEBAR] - GET PROJECTS - ERROR: ', error);
+    }, () => {
+      this.logger.log('[SIDEBAR] - GET PROJECTS * COMPLETE * ');
+    });
+  }
+
+  // getProPlanTrialTranslation() {
+  //     this.translate.get('ProPlanTrial')
+  //         .subscribe((translation: any) => {
+  //             this._prjct_profile_name = translation;
+
+  //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
+  //         });
+  // }
+
+  // getPaidPlanTranslation(project_profile_name) {
+  //     this.translate.get('PaydPlanName', { projectprofile: project_profile_name })
+  //         .subscribe((text: string) => {
+  //             this._prjct_profile_name = text;
+  //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
+  //         });
+  // }
+
+  // getUnavailablePlanProfile() {
+  //     this.translate.get('ProfileNotAvailable')
+  //         .subscribe((text: string) => {
+  //             this._prjct_profile_name = text;
+  //             this.logger.log('[SIDEBAR] PLAN NAME ', this._prjct_profile_name)
+  //         });
+  // }
+
+
+
+  round5(x) {
+    // const percentageRounded = Math.ceil(x / 5) * 5;
+    // this.logger.log('SIDEBAR project trial days left % rounded', percentageRounded);
+    // return Math.ceil(x / 5) * 5;
+    return x % 5 < 3 ? (x % 5 === 0 ? x : Math.floor(x / 5) * 5) : Math.ceil(x / 5) * 5
+  }
+
+  ngAfterViewInit() {
+
+  }
+
+
+  isMobileMenu() {
+    // console.log('SIDEBAR_IS_SMALL', this.SIDEBAR_IS_SMALL)
+    if ($(window).width() > 991) {
+      this.IS_MOBILE_MENU = false
+      // this.logger.log('[SIDEBAR] - IS MOBILE MENU ', this.IS_MOBILE_MENU);
+      // USED FOR THE SMALL SIDEBAR
+      // const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
+      // const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
+      // const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
+      // if (this.SIDEBAR_IS_SMALL === false) {
+      //     if (this.YOUR_PROJECT_ROUTE_IS_ACTIVE === false && this.AUTOLOGIN_ROUTE_IS_ACTIVE) {
+      //         elemMainPanel.style.width = "calc(100% - 260px)";
+      //         elemSidebar.style.width = "260px"
+      //         elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
+      //     }
+      // } else if (this.SIDEBAR_IS_SMALL === true) {
+      //     elemMainPanel.style.width = "calc(100% - 70px)"
+      //     elemSidebar.style.width = "70px"
+      //     elemSidebarWrapper.setAttribute('style', 'width: 70px; background-color: #2d323e!important');
+      // }
+      return false;
     }
 
-
-    isMobileMenu() {
-        // console.log('SIDEBAR_IS_SMALL', this.SIDEBAR_IS_SMALL)
-        if ($(window).width() > 991) {
-            this.IS_MOBILE_MENU = false
-            // this.logger.log('[SIDEBAR] - IS MOBILE MENU ', this.IS_MOBILE_MENU);
-            // USED FOR THE SMALL SIDEBAR
-            // const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
-            // const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
-            // const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
-            // if (this.SIDEBAR_IS_SMALL === false) {
-            //     if (this.YOUR_PROJECT_ROUTE_IS_ACTIVE === false && this.AUTOLOGIN_ROUTE_IS_ACTIVE) {
-            //         elemMainPanel.style.width = "calc(100% - 260px)";
-            //         elemSidebar.style.width = "260px"
-            //         elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
-            //     }
-            // } else if (this.SIDEBAR_IS_SMALL === true) {
-            //     elemMainPanel.style.width = "calc(100% - 70px)"
-            //     elemSidebar.style.width = "70px"
-            //     elemSidebarWrapper.setAttribute('style', 'width: 70px; background-color: #2d323e!important');
-            // }
-            return false;
-        }
-
-        this.IS_MOBILE_MENU = true
-
-        // USED FOR THE SMALL SIDEBAR
-        // const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
-        // const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
-        // const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
-        // elemMainPanel.style.width = "100%"
-        // elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
-        // elemSidebar.style.width = "260px"
-        // // this.logger.log('[SIDEBAR] - IS MOBILE MENU ', this.IS_MOBILE_MENU);
-
-        return true;
-    };
-
-    isMac(): boolean {
-        this.logger.log('[SIDEBAR] NAVIGATOR PLATFORM', navigator.platform)
-        let bool = false;
-        if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
-            bool = true;
-        }
-        return bool;
+    this.IS_MOBILE_MENU = true
+
+    // USED FOR THE SMALL SIDEBAR
+    // const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
+    // const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
+    // const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
+    // elemMainPanel.style.width = "100%"
+    // elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
+    // elemSidebar.style.width = "260px"
+    // // this.logger.log('[SIDEBAR] - IS MOBILE MENU ', this.IS_MOBILE_MENU);
+
+    return true;
+  };
+
+  isMac(): boolean {
+    this.logger.log('[SIDEBAR] NAVIGATOR PLATFORM', navigator.platform)
+    let bool = false;
+    if (navigator.platform.toUpperCase().indexOf('MAC') >= 0 || navigator.platform.toUpperCase().indexOf('IPAD') >= 0) {
+      bool = true;
     }
-
-    @HostListener('window:resize', ['$event'])
-    onResize(event: any) {
-        // this.logger.log('SIDEBAR - WINDOW WIDTH ON RESIZE', event.target.innerWidth);
-        if (event.target.innerWidth > 991) {
-            this.IS_MOBILE_MENU = false
-        } else {
-            this.IS_MOBILE_MENU = true
-        }
+    return bool;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    // this.logger.log('SIDEBAR - WINDOW WIDTH ON RESIZE', event.target.innerWidth);
+    if (event.target.innerWidth > 991) {
+      this.IS_MOBILE_MENU = false
+    } else {
+      this.IS_MOBILE_MENU = true
     }
+  }
+
+  // smallSidebar(IS_SMALL) {
+  //     this.SIDEBAR_IS_SMALL = IS_SMALL;
+  //     this.logger.log('[SIDEBAR] smallSidebar ', IS_SMALL)
+
+  //     const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
+  //     const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
+  //     const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
+  //     const elemHtmlTag = <HTMLElement>document.querySelector('html');
+  //     this.logger.log('[SIDEBAR] smallSidebar', elemHtmlTag)
+  //     elemHtmlTag.style.overflowY = 'auto';
+  //     // this.logger.log('elemAppSidebar', elemAppSidebar)
+
+  //     if (IS_SMALL === true) {
+  //         elemSidebar.setAttribute('style', 'width: 70px;');
+  //         elemSidebarWrapper.setAttribute('style', 'width: 70px; background-color: #2d323e!important');
+  //         elemMainPanel.setAttribute('style', 'width:calc(100% - 70px);');
+  //         elemMainPanel.style.overflowX = 'hidden';
+  //         elemSidebarWrapper.style.height = "calc(100vh - 45px)";
+
+  //     } else {
+  //         if (this.YOUR_PROJECT_ROUTE_IS_ACTIVE === false && this.AUTOLOGIN_ROUTE_IS_ACTIVE === false) {
+  //             elemSidebar.setAttribute('style', 'width: 260px;');
+  //             elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
+  //             elemMainPanel.setAttribute('style', 'width:calc(100% - 260px);');
+  //             elemSidebarWrapper.style.height = "calc(100vh - 60px)";
+  //         }
+  //     }
+  // }
+
+
+
+
+  onScroll(event: any): void {
+    // this.logger.log('[SIDEBAR] RICHIAMO ON SCROLL ');
+    this.elSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
+    this.scrollpos = this.elSidebarWrapper.scrollTop
+    // this.logger.log('[SIDEBAR] SCROLL POSITION', this.scrollpos)
+  }
+
+  stopScroll() {
+    // const el = <HTMLElement>document.querySelector('.sidebar-wrapper');
+    this.logger.log('[SIDEBAR] SCROLL TO', this.scrollpos);
+    this.logger.log('[SIDEBAR] SCROLL TO elSidebarWrapper ', this.elSidebarWrapper)
+
+    // const oh = <HTMLElement>document.querySelector('.oh');
+    // this.logger.log('[SIDEBAR] SCROLL TO operating hours ', oh)
+    // oh.scrollIntoView();
+
+    if (this.elSidebarWrapper) {
+
+      this.elSidebarWrapper.scrollTop = this.scrollpos;
+      // this.elSidebarWrapper.scrollTo(0,242)
+    }
+  }
 
-    // smallSidebar(IS_SMALL) {
-    //     this.SIDEBAR_IS_SMALL = IS_SMALL;
-    //     this.logger.log('[SIDEBAR] smallSidebar ', IS_SMALL)
-
-    //     const elemSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
-    //     const elemSidebar = <HTMLElement>document.querySelector('.sidebar');
-    //     const elemMainPanel = <HTMLElement>document.querySelector('.main-panel');
-    //     const elemHtmlTag = <HTMLElement>document.querySelector('html');
-    //     this.logger.log('[SIDEBAR] smallSidebar', elemHtmlTag)
-    //     elemHtmlTag.style.overflowY = 'auto';
-    //     // this.logger.log('elemAppSidebar', elemAppSidebar)
-
-    //     if (IS_SMALL === true) {
-    //         elemSidebar.setAttribute('style', 'width: 70px;');
-    //         elemSidebarWrapper.setAttribute('style', 'width: 70px; background-color: #2d323e!important');
-    //         elemMainPanel.setAttribute('style', 'width:calc(100% - 70px);');
-    //         elemMainPanel.style.overflowX = 'hidden';
-    //         elemSidebarWrapper.style.height = "calc(100vh - 45px)";
-
-    //     } else {
-    //         if (this.YOUR_PROJECT_ROUTE_IS_ACTIVE === false && this.AUTOLOGIN_ROUTE_IS_ACTIVE === false) {
-    //             elemSidebar.setAttribute('style', 'width: 260px;');
-    //             elemSidebarWrapper.setAttribute('style', 'width: 260px;background-color: #2d323e!important');
-    //             elemMainPanel.setAttribute('style', 'width:calc(100% - 260px);');
-    //             elemSidebarWrapper.style.height = "calc(100vh - 60px)";
-    //         }
-    //     }
-    // }
-
+  onEvent($event) {
+    this.logger.log('[SIDEBAR] SCROLL event ', $event);
+    event.stopPropagation();
+  }
 
 
+  goToHome() {
+    this.router.navigate(['/project/' + this.projectId + '/home']);
+  }
 
-    onScroll(event: any): void {
-        // this.logger.log('[SIDEBAR] RICHIAMO ON SCROLL ');
-        this.elSidebarWrapper = <HTMLElement>document.querySelector('.sidebar-wrapper');
-        this.scrollpos = this.elSidebarWrapper.scrollTop
-        // this.logger.log('[SIDEBAR] SCROLL POSITION', this.scrollpos)
-    }
 
-    stopScroll() {
-        // const el = <HTMLElement>document.querySelector('.sidebar-wrapper');
-        this.logger.log('[SIDEBAR] SCROLL TO', this.scrollpos);
-        this.logger.log('[SIDEBAR] SCROLL TO elSidebarWrapper ', this.elSidebarWrapper)
 
-        // const oh = <HTMLElement>document.querySelector('.oh');
-        // this.logger.log('[SIDEBAR] SCROLL TO operating hours ', oh)
-        // oh.scrollIntoView();
 
-        if (this.elSidebarWrapper) {
 
-            this.elSidebarWrapper.scrollTop = this.scrollpos;
-            // this.elSidebarWrapper.scrollTo(0,242)
-        }
+  goToWidgetSetUpOrToCannedResponses() {
+    if (this.USER_ROLE !== 'agent') {
+      this.goToWidgetSetUp()
+    } else if (this.USER_ROLE === 'agent') {
+      this.goToCannedResponses()
     }
 
-    onEvent($event) {
-        this.logger.log('[SIDEBAR] SCROLL event ', $event);
-        event.stopPropagation();
-    }
+  }
+  goToWidgetSetUp() {
+    this.router.navigate(['project/' + this.project._id + '/widget-set-up'])
+  }
 
+  goToCannedResponses() {
+    this.router.navigate(['project/' + this.projectId + '/cannedresponses']);
+  }
+  // goToOperatingHours() {
+  //     this.router.navigate(['/project/' + this.projectId + '/hours']);
+  // }
 
-    goToHome() {
-        this.router.navigate(['/project/' + this.projectId + '/home']);
-    }
 
+  // goToBlogChangelog() {
+  //     const url = 'https://www.tiledesk.com/category/changelog/';
+  //     window.open(url, '_blank');
 
+  //     this.usersLocalDbService.savChangelogDate()
+  //     this.hidechangelogrocket = true;
+  // }
 
+  goToProjects() {
+    this.logger.log('[SIDEBAR] IS MOBILE -  HAS CLICCKED GO TO PROJECT')
+    this.router.navigate(['/projects']);
 
+    // (in AUTH SERVICE ) RESET PROJECT_BS AND REMOVE ITEM PROJECT FROM STORAGE WHEN THE USER GO TO PROJECTS PAGE
+    this.auth.hasClickedGoToProjects()
+    this.logger.log('[SIDEBAR] IS MOBILE project AFTER GOTO PROJECTS ', this.project)
+  }
 
-    goToWidgetSetUpOrToCannedResponses() {
-        if (this.USER_ROLE !== 'agent') {
-            this.goToWidgetSetUp()
-        } else if (this.USER_ROLE === 'agent') {
-            this.goToCannedResponses()
-        }
+  has_clicked_settings(SHOW_SETTINGS_SUBMENU: boolean) {
+    this.SHOW_SETTINGS_SUBMENU = SHOW_SETTINGS_SUBMENU;
+    this.logger.log('[SIDEBAR] HAS CLICKED SETTINGS - SHOW_SETTINGS_SUBMENU ', this.SHOW_SETTINGS_SUBMENU);
 
+    // SAVE IN 'show_settings_submenu' KEY OF LOCAL STORAGE THE VALUE OF this.SHOW_SETTINGS_SUBMENU
+    // (IS USED TO DISPLAY / HIDE THE SUBMENU WHEN THE PAGE IS REFRESHED)
+    localStorage.setItem('show_settings_submenu', `${this.SHOW_SETTINGS_SUBMENU}`);
+
+    if (this.SHOW_SETTINGS_SUBMENU === true) {
+      this.trasform = 'rotate(180deg)';
+    } else {
+      this.trasform = 'none';
     }
-    goToWidgetSetUp() {
-        this.router.navigate(['project/' + this.project._id + '/widget-set-up'])
+  }
+
+  // USED FOR SIDEBAR IN MOBILE MODE (TOGGLE THE CARET OF THE 'PROJECT NAME' DROPDOWN-MENU)
+  has_cliked_hidden_project(SHOW_PRJCT_SUB) {
+    this.logger.log('[SIDEBAR] HAS CLICKED PROJECT NAME ON MOBILE - SHOW SUBMENU ', this.SHOW_PRJCT_SUB);
+    if (this.SHOW_PRJCT_SUB === true) {
+      this.trasform_projectname_caret = 'rotate(180deg)';
+    } else {
+      this.trasform_projectname_caret = 'none';
     }
-
-    goToCannedResponses() {
-        this.router.navigate(['project/' + this.projectId + '/cannedresponses']);
+  }
+
+  // USED FOR SIDEBAR IN MOBILE MODE (TOGGLE THE CARET OF THE 'NAME OF THE CURRENT USER' DROPDOWN-MENU)
+  has_cliked_hidden_profile(SHOW_PROFILE_SUB) {
+    this.logger.log('[SIDEBAR] HAS CLICKED NAME OF THE CURRENT USER ON MOBILE - SHOW SUBMENU ', this.SHOW_PRJCT_SUB);
+    if (this.SHOW_PROFILE_SUB === true) {
+      this.transform_user_profile_caret = 'rotate(180deg)';
+    } else {
+      this.transform_user_profile_caret = 'none';
     }
-    // goToOperatingHours() {
-    //     this.router.navigate(['/project/' + this.projectId + '/hours']);
-    // }
-
+  }
 
-    // goToBlogChangelog() {
-    //     const url = 'https://www.tiledesk.com/category/changelog/';
-    //     window.open(url, '_blank');
 
-    //     this.usersLocalDbService.savChangelogDate()
-    //     this.hidechangelogrocket = true;
-    // }
-
-    goToProjects() {
-        this.logger.log('[SIDEBAR] IS MOBILE -  HAS CLICCKED GO TO PROJECT')
-        this.router.navigate(['/projects']);
 
-        // (in AUTH SERVICE ) RESET PROJECT_BS AND REMOVE ITEM PROJECT FROM STORAGE WHEN THE USER GO TO PROJECTS PAGE
-        this.auth.hasClickedGoToProjects()
-        this.logger.log('[SIDEBAR] IS MOBILE project AFTER GOTO PROJECTS ', this.project)
-    }
+  openLogoutModal() {
+    this.logger.log('[SIDEBAR] - calling openLogoutModal - PROJRCT ID ', this.projectId);
+    this.displayLogoutModal = 'block';
+    this.auth.hasOpenedLogoutModal(true);
 
-    has_clicked_settings(SHOW_SETTINGS_SUBMENU: boolean) {
-        this.SHOW_SETTINGS_SUBMENU = SHOW_SETTINGS_SUBMENU;
-        this.logger.log('[SIDEBAR] HAS CLICKED SETTINGS - SHOW_SETTINGS_SUBMENU ', this.SHOW_SETTINGS_SUBMENU);
+    // if (this.projectId !== undefined) {
+    //     this.usersService.logout_btn_clicked_from_mobile_sidebar(true);
+    // } else {
+    //     this.usersService.logout_btn_clicked_from_mobile_sidebar_project_undefined(true);
+    // }
+  }
 
-        // SAVE IN 'show_settings_submenu' KEY OF LOCAL STORAGE THE VALUE OF this.SHOW_SETTINGS_SUBMENU
-        // (IS USED TO DISPLAY / HIDE THE SUBMENU WHEN THE PAGE IS REFRESHED)
-        localStorage.setItem('show_settings_submenu', `${this.SHOW_SETTINGS_SUBMENU}`);
+  onCloseModal() {
+    this.displayLogoutModal = 'none';
+  }
 
-        if (this.SHOW_SETTINGS_SUBMENU === true) {
-            this.trasform = 'rotate(180deg)';
-        } else {
-            this.trasform = 'none';
-        }
-    }
+  onCloseLogoutModalHandled() {
+    this.displayLogoutModal = 'none';
+  }
 
-    // USED FOR SIDEBAR IN MOBILE MODE (TOGGLE THE CARET OF THE 'PROJECT NAME' DROPDOWN-MENU)
-    has_cliked_hidden_project(SHOW_PRJCT_SUB) {
-        this.logger.log('[SIDEBAR] HAS CLICKED PROJECT NAME ON MOBILE - SHOW SUBMENU ', this.SHOW_PRJCT_SUB);
-        if (this.SHOW_PRJCT_SUB === true) {
-            this.trasform_projectname_caret = 'rotate(180deg)';
-        } else {
-            this.trasform_projectname_caret = 'none';
-        }
-    }
+  onLogoutModalHandled() {
+    this.logout();
+    this.displayLogoutModal = 'none';
+  }
 
-    // USED FOR SIDEBAR IN MOBILE MODE (TOGGLE THE CARET OF THE 'NAME OF THE CURRENT USER' DROPDOWN-MENU)
-    has_cliked_hidden_profile(SHOW_PROFILE_SUB) {
-        this.logger.log('[SIDEBAR] HAS CLICKED NAME OF THE CURRENT USER ON MOBILE - SHOW SUBMENU ', this.SHOW_PRJCT_SUB);
-        if (this.SHOW_PROFILE_SUB === true) {
-            this.transform_user_profile_caret = 'rotate(180deg)';
-        } else {
-            this.transform_user_profile_caret = 'none';
-        }
-    }
+  logout() {
+    this.auth.showExpiredSessionPopup(false);
+    this.auth.signOut('sidebar');
 
+  }
 
+  removeChatBtnFocus() {
+    this.notify.publishHasClickedChat(true);
+    this.elementRef.nativeElement.blur();
+  }
 
-    openLogoutModal() {
-        this.logger.log('[SIDEBAR] - calling openLogoutModal - PROJRCT ID ', this.projectId);
-        this.displayLogoutModal = 'block';
-        this.auth.hasOpenedLogoutModal(true);
+  openChat() {
+    this.elementRef.nativeElement.blur();
+    this.notify.publishHasClickedChat(true);
+    // console.log('SIDEBAR openChat ' )
 
-        // if (this.projectId !== undefined) {
-        //     this.usersService.logout_btn_clicked_from_mobile_sidebar(true);
-        // } else {
-        //     this.usersService.logout_btn_clicked_from_mobile_sidebar_project_undefined(true);
-        // }
+    // --- new 
+    if (this.current_selected_prjct) {
+      localStorage.setItem('last_project', JSON.stringify(this.current_selected_prjct))
     }
-
-    onCloseModal() {
-        this.displayLogoutModal = 'none';
+    // let baseUrl = this.CHAT_BASE_URL + '#/conversation-detail/'
+    // let url = baseUrl
+    // const myWindow = window.open(url, '_self', 'Tiledesk - Open Source Live Chat');
+    // myWindow.focus();
+
+
+    // --- already commented ---
+    // const chatTabCount = localStorage.getItem('tabCount');
+    // this.logger.log('[SIDEBAR] openChat chatTabCount ', chatTabCount);
+    // if (chatTabCount) {
+    //     if (+chatTabCount > 0) {
+    //         this.logger.log('[SIDEBAR] openChat chatTabCount > 0 ')
+
+    //         this.openWindow('Tiledesk - Open Source Live Chat', url + '?conversation_detail');
+    //         // this.focusWin('Tiledesk - Open Source Live Chat')
+    //         // window.open('Tiledesk - Open Source Live Chat', url).focus();
+    //     } else if (chatTabCount && +chatTabCount === 0) {
+    //         this.openWindow('Tiledesk - Open Source Live Chat', url);
+    //     }
+    // } else {
+    //     this.openWindow('Tiledesk - Open Source Live Chat', url);
+    // }
+  }
+
+  @HostListener('document:mousedown', ['$event'])
+  onMouseDown(event) {
+    // console.log('mousedown event', event)
+    // console.log('mousedown event.target.id', event.target.id)
+    // console.log('mousedown event.target', event.target)
+    // console.log('mousedown event.which', event.which)
+    // --------------------------------------------------------------------
+    // event.which === 1  left button - event.which === 3 right button
+    // --------------------------------------------------------------------
+    if ((event.target.id.startsWith('openchat') && event.which === 3) || (event.target.id.startsWith('openchat') && event.which === 1)) {
+      this.logger.log('SIDEBAR openChat HAS CLIKED ON OPEN CHAT WITH THE RIGHT BTN')
+      localStorage.setItem('last_project', JSON.stringify(this.current_selected_prjct))
     }
 
-    onCloseLogoutModalHandled() {
-        this.displayLogoutModal = 'none';
-    }
+  }
 
-    onLogoutModalHandled() {
-        this.logout();
-        this.displayLogoutModal = 'none';
+  openWindow(winName: any, winURL: any) {
+    const myWindows = new Array();
+    if (myWindows[winName] && !myWindows[winName].closed) {
+      alert('window already exists');
+    } else {
+      myWindows[winName] = window.open(winURL, winName);
     }
-
-    logout() {
-        this.auth.showExpiredSessionPopup(false);
-        this.auth.signOut('sidebar');
-
+  }
+
+  focusWin(winName: any) {
+    const myWindows = new Array();
+    if (myWindows[winName] && !myWindows[winName].closed) {
+      myWindows[winName].focus();
+    } else {
+      // alert('cannot focus closed or nonexistant window');
+      this.logger.log('[SIDEBAR] - cannot focus closed or nonexistant window');
     }
+  }
 
-    removeChatBtnFocus() {
-        this.notify.publishHasClickedChat(true);
-        this.elementRef.nativeElement.blur();
-    }
 
-    openChat() {
-        this.elementRef.nativeElement.blur();
-        this.notify.publishHasClickedChat(true);
-        // console.log('SIDEBAR openChat ' )
 
-        // --- new 
-        if (this.current_selected_prjct) {
-            localStorage.setItem('last_project', JSON.stringify(this.current_selected_prjct))
-        }
-        // let baseUrl = this.CHAT_BASE_URL + '#/conversation-detail/'
-        // let url = baseUrl
-        // const myWindow = window.open(url, '_self', 'Tiledesk - Open Source Live Chat');
-        // myWindow.focus();
-
-
-        // --- already commented ---
-        // const chatTabCount = localStorage.getItem('tabCount');
-        // this.logger.log('[SIDEBAR] openChat chatTabCount ', chatTabCount);
-        // if (chatTabCount) {
-        //     if (+chatTabCount > 0) {
-        //         this.logger.log('[SIDEBAR] openChat chatTabCount > 0 ')
-
-        //         this.openWindow('Tiledesk - Open Source Live Chat', url + '?conversation_detail');
-        //         // this.focusWin('Tiledesk - Open Source Live Chat')
-        //         // window.open('Tiledesk - Open Source Live Chat', url).focus();
-        //     } else if (chatTabCount && +chatTabCount === 0) {
-        //         this.openWindow('Tiledesk - Open Source Live Chat', url);
-        //     }
-        // } else {
-        //     this.openWindow('Tiledesk - Open Source Live Chat', url);
-        // }
-    }
-
-    @HostListener('document:mousedown', ['$event'])
-    onMouseDown(event) {
-        // console.log('mousedown event', event)
-        // console.log('mousedown event.target.id', event.target.id)
-        // console.log('mousedown event.target', event.target)
-        // console.log('mousedown event.which', event.which)
-        // --------------------------------------------------------------------
-        // event.which === 1  left button - event.which === 3 right button
-        // --------------------------------------------------------------------
-        if ((event.target.id.startsWith('openchat') && event.which === 3) || (event.target.id.startsWith('openchat') && event.which === 1)) {
-            this.logger.log('SIDEBAR openChat HAS CLIKED ON OPEN CHAT WITH THE RIGHT BTN')
-            localStorage.setItem('last_project', JSON.stringify(this.current_selected_prjct))
-        }
 
-    }
 
-    openWindow(winName: any, winURL: any) {
-        const myWindows = new Array();
-        if (myWindows[winName] && !myWindows[winName].closed) {
-            alert('window already exists');
-        } else {
-            myWindows[winName] = window.open(winURL, winName);
-        }
-    }
+  // SE IMPLEMENTATO NELL 'AFTER VIEW INIT' RITORNA ERRORE:
+  // Cannot read property 'nativeElement' of undefined
+  // PER ORA LO COMMENTO NELL 'AFTER VIEW INIT'
+  checkForUnathorizedRoute() {
+    this.router.events.subscribe((val) => {
+      if (this.location.path() !== '') {
+        this.checked_route = this.location.path();
+        this.logger.log('[SIDEBAR] CHECKED ROUTE ', this.checked_route)
+        if (this.checked_route.indexOf('/unauthorized') !== -1) {
 
-    focusWin(winName: any) {
-        const myWindows = new Array();
-        if (myWindows[winName] && !myWindows[winName].closed) {
-            myWindows[winName].focus();
-        } else {
-            // alert('cannot focus closed or nonexistant window');
-            this.logger.log('[SIDEBAR] - cannot focus closed or nonexistant window');
+          // RESOLVE THE BUG 'HOME button remains focused WHEN AN USER WITH AGENT ROLE TRY TO ACCESS TO AN UNATHORIZED PAGE 
+          // IS REDIRECTED TO THE unauthorized page
+          this.homeBtnElement.nativeElement.blur();
         }
-    }
-
+      }
+    })
+  }
 
+  mouseOver(_isOverAvar: boolean) {
+    this.isOverAvar = _isOverAvar
+    // this.logger.log('[SIDEBAR] Mouse Over Avatar Container ', _isOverAvar)
+  }
 
 
+  isOdd(countClickOnOpenUserDetailSidebar) {
+    return countClickOnOpenUserDetailSidebar % 2;
+  }
 
-    // SE IMPLEMENTATO NELL 'AFTER VIEW INIT' RITORNA ERRORE:
-    // Cannot read property 'nativeElement' of undefined
-    // PER ORA LO COMMENTO NELL 'AFTER VIEW INIT'
-    checkForUnathorizedRoute() {
-        this.router.events.subscribe((val) => {
-            if (this.location.path() !== '') {
-                this.checked_route = this.location.path();
-                this.logger.log('[SIDEBAR] CHECKED ROUTE ', this.checked_route)
-                if (this.checked_route.indexOf('/unauthorized') !== -1) {
+  openUserDetailSidePanel() {
+    this.countClickOnOpenUserDetailSidebar++
+    this.logger.log('[SIDEBAR] countClickOnOpenUserDetailSidebar', this.countClickOnOpenUserDetailSidebar)
+    // const countClickOnOpenUserDetailSidebarIsAnOddNum = this.isOdd(this.countClickOnOpenUserDetailSidebar)
+    // console.log('[SIDEBAR] countClickOnOpenUserDetailSidebarIsAnOddNum', countClickOnOpenUserDetailSidebarIsAnOddNum)
 
-                    // RESOLVE THE BUG 'HOME button remains focused WHEN AN USER WITH AGENT ROLE TRY TO ACCESS TO AN UNATHORIZED PAGE 
-                    // IS REDIRECTED TO THE unauthorized page
-                    this.homeBtnElement.nativeElement.blur();
-                }
-            }
-        })
-    }
+    const elSidebarUserDtls = <HTMLElement>document.querySelector('#user-details');
+    this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
 
-    mouseOver(_isOverAvar: boolean) {
-        this.isOverAvar = _isOverAvar
-        // this.logger.log('[SIDEBAR] Mouse Over Avatar Container ', _isOverAvar)
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
+      elSidebarUserDtls.classList.add("active");
     }
 
-
-    isOdd(countClickOnOpenUserDetailSidebar) {
-        return countClickOnOpenUserDetailSidebar % 2;
+    if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar > 1) {
+      // console.log('[SIDEBAR] this.countClickOnOpenUserDetailSidebar HERE', this.countClickOnOpenUserDetailSidebar)
+      if (elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR] elSidebarUserDtls contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.remove("active");
+      } else if (!elSidebarUserDtls.classList.contains('active')) {
+        this.logger.log('[SIDEBAR] elSidebarUserDtls NOT contains class ACTIVE', elSidebarUserDtls)
+        elSidebarUserDtls.classList.add("active");
+      }
     }
-
-    openUserDetailSidePanel() {
-        this.countClickOnOpenUserDetailSidebar++
-        this.logger.log('[SIDEBAR] countClickOnOpenUserDetailSidebar', this.countClickOnOpenUserDetailSidebar)
-        // const countClickOnOpenUserDetailSidebarIsAnOddNum = this.isOdd(this.countClickOnOpenUserDetailSidebar)
-        // console.log('[SIDEBAR] countClickOnOpenUserDetailSidebarIsAnOddNum', countClickOnOpenUserDetailSidebarIsAnOddNum)
-
-        const elSidebarUserDtls = <HTMLElement>document.querySelector('#user-details');
-        this.logger.log('[SIDEBAR] OPEN USER DTLS SIDE PANEL elSidebarUserDtls ', elSidebarUserDtls)
-
-        if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar === 1) {
-            elSidebarUserDtls.classList.add("active");
-        }
-
-        if (elSidebarUserDtls && this.countClickOnOpenUserDetailSidebar > 1) {
-            // console.log('[SIDEBAR] this.countClickOnOpenUserDetailSidebar HERE', this.countClickOnOpenUserDetailSidebar)
-            if (elSidebarUserDtls.classList.contains('active')) {
-                this.logger.log('[SIDEBAR] elSidebarUserDtls contains class ACTIVE', elSidebarUserDtls)
-                elSidebarUserDtls.classList.remove("active");
-            } else if (!elSidebarUserDtls.classList.contains('active')) {
-                this.logger.log('[SIDEBAR] elSidebarUserDtls NOT contains class ACTIVE', elSidebarUserDtls)
-                elSidebarUserDtls.classList.add("active");
-            }
-        }
-        // if (elSidebarUserDtls && countClickOnOpenUserDetailSidebarIsAnOddNum === 1) {
-        //     elSidebarUserDtls.classList.add("active");
-        // }
-        // if (elSidebarUserDtls && countClickOnOpenUserDetailSidebarIsAnOddNum === 0) {
-        //     elSidebarUserDtls.classList.remove("active");
-        // }
-
-        // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-        // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
-        // if (elemNavbar) {
-        //     elemNavbar.classList.add("navbar-absolute-custom-class");
-        // }
-        // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-        // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-        // if (elemNavbarBrand) {
-        //     elemNavbarBrand.classList.add("navbar-brand-z-index-zero")
-        // }
-    }
-
-    // onCloseUserDetailsSidebar($event) {
-    //     this.logger.log('[SIDEBAR] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
-    //     // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
-    //     const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
-    //     this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
-    //     if (elemNavbar) {
-    //         elemNavbar.classList.remove("navbar-absolute-custom-class")
-    //     }
-
-    //     const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
-    //     this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
-    //     if (elemNavbarBrand) {
-    //         elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
-    //     }
+    // if (elSidebarUserDtls && countClickOnOpenUserDetailSidebarIsAnOddNum === 1) {
+    //     elSidebarUserDtls.classList.add("active");
     // }
-
-    // goToAnalytics() {
-    //     this.router.navigate(['project/' + this.projectId + '/analytics']);
+    // if (elSidebarUserDtls && countClickOnOpenUserDetailSidebarIsAnOddNum === 0) {
+    //     elSidebarUserDtls.classList.remove("active");
     // }
 
-    // goToActivities() {
-    //     this.router.navigate(['project/' + this.projectId + '/activities']);
+    // const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
+    // this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
+    // if (elemNavbar) {
+    //     elemNavbar.classList.add("navbar-absolute-custom-class");
+    // }
+    // const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+    // this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+    // if (elemNavbarBrand) {
+    //     elemNavbarBrand.classList.add("navbar-brand-z-index-zero")
     // }
+  }
+
+  // onCloseUserDetailsSidebar($event) {
+  //     this.logger.log('[SIDEBAR] HAS_CLICKED_CLOSE_USER_DETAIL ', $event)
+  //     // this.HAS_CLICKED_OPEN_USER_DETAIL = $event
+  //     const elemNavbar = <HTMLElement>document.querySelector('.navbar-absolute');
+  //     this.logger.log('[SIDEBAR] elemNavBar ', elemNavbar)
+  //     if (elemNavbar) {
+  //         elemNavbar.classList.remove("navbar-absolute-custom-class")
+  //     }
+
+  //     const elemNavbarBrand = <HTMLElement>document.querySelector('.navbar-brand');
+  //     this.logger.log('[SIDEBAR] elemNavbarBrand ', elemNavbarBrand)
+  //     if (elemNavbarBrand) {
+  //         elemNavbarBrand.classList.remove("navbar-brand-z-index-zero")
+  //     }
+  // }
+
+  // goToAnalytics() {
+  //     this.router.navigate(['project/' + this.projectId + '/analytics']);
+  // }
+
+  // goToActivities() {
+  //     this.router.navigate(['project/' + this.projectId + '/activities']);
+  // }
 
 
 
diff --git a/src/app/department-edit-add/department-edit-add.component.html b/src/app/department-edit-add/department-edit-add.component.html
index aa4ba5cf65ba..3f518cbb4a9b 100755
--- a/src/app/department-edit-add/department-edit-add.component.html
+++ b/src/app/department-edit-add/department-edit-add.component.html
@@ -349,11 +349,12 @@ <h3 class="card_title__underlined" style="margin-top: 25px;">
                         </option>
                       </select>
 
-                      <!-- 
-                    // -------------------------------------------------------------------
-                    // Create a new group link
-                    // ------------------------------------------------------------------- -->
-                      <span
+                       
+                      <!-- ------------------------------------------------------------------- -->
+                      <!-- Create a new group link -->
+                      <!-- ------------------------------------------------------------------- -->
+              
+                      <span *ngIf="isVisibleGroups"
                         style="display: block;font-size: 12px;font-weight: 400; color: #7695a5; line-height: 1.2em; padding-top: 3px;">
                         {{ "DeptsAddEditPage.SelectAnExistingOne" | translate }}
                         <span style="color: #03a5e8; cursor:pointer;" (click)="openCreateGroupRightSideBar()">
diff --git a/src/app/department-edit-add/department-edit-add.component.ts b/src/app/department-edit-add/department-edit-add.component.ts
index 0ace51610f33..82301b3c2ebd 100755
--- a/src/app/department-edit-add/department-edit-add.component.ts
+++ b/src/app/department-edit-add/department-edit-add.component.ts
@@ -13,13 +13,14 @@ import { TranslateService } from '@ngx-translate/core';
 import { NotifyService } from '../core/notify.service';
 import { slideInOutAnimation } from '../_animations/index';
 import { UsersService } from '../services/users.service';
-import { avatarPlaceholder, getColorBck, goToCDSVersion } from '../utils/util';
+import { APP_SUMO_PLAN_NAME, PLAN_NAME, avatarPlaceholder, getColorBck, goToCDSVersion } from '../utils/util';
 import { AppConfigService } from '../services/app-config.service';
 import { ComponentCanDeactivate } from '../core/pending-changes.guard';
 import { LoggerService } from '../services/logger/logger.service';
 import { Subject, Observable } from 'rxjs';
 import { takeUntil } from 'rxjs/operators'
 import { FaqKb } from 'app/models/faq_kb-model';
+import { ProjectPlanService } from 'app/services/project-plan.service';
 declare const $: any;
 const swal = require('sweetalert');
 
@@ -114,7 +115,23 @@ export class DepartmentEditAddComponent implements OnInit, AfterViewInit, Compon
   cancelMsg: string;
   areTouSureYouWantToNavigateAwayFromThisPageWithoutSaving: string
   isChromeVerGreaterThan100: boolean;
-  USER_ROLE: string
+  USER_ROLE: string;
+  public_Key: string;
+  isVisibleGroups: boolean;
+
+  prjct_id: string
+  prjct_name: string
+  profile_name: string
+  projectPlanAgentsNo: number
+  prjct_profile_name: string
+  browserLang: string
+  prjct_profile_type: any;
+  subscription_is_active: any
+  subscription_end_date: any
+  seatsLimit: any;
+  trial_expired: any;
+  appSumoProfile: string
+
   constructor(
     private router: Router,
     private route: ActivatedRoute,
@@ -127,7 +144,8 @@ export class DepartmentEditAddComponent implements OnInit, AfterViewInit, Compon
     private notify: NotifyService,
     private usersService: UsersService,
     public appConfigService: AppConfigService,
-    private logger: LoggerService
+    private logger: LoggerService,
+    private prjctPlanService: ProjectPlanService
   ) { }
 
 
@@ -212,6 +230,7 @@ export class DepartmentEditAddComponent implements OnInit, AfterViewInit, Compon
   ngOnInit() {
     this.auth.checkRoleForCurrentProject();
     this.getProfileImageStorage();
+    this.getOSCODE()
 
     this.logger.log('[DEPT-EDIT-ADD] selectedDeptId FROM @INPUT: ', this.ws_requestslist_deptIdSelected)
     this.logger.log('[DEPT-EDIT-ADD] display_dept_sidebar FROM @INPUT: ', this.display_dept_sidebar)
@@ -288,6 +307,114 @@ export class DepartmentEditAddComponent implements OnInit, AfterViewInit, Compon
     this.getBrowserVersion()
   }
 
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK
+    this.logger.log('[USERS] getAppConfig - public_Key', this.public_Key)
+
+    let keys = this.public_Key.split('-')
+    keys.forEach((key) => {
+      if (key.includes('GRO')) {
+        // this.logger.log('[DEPT-EDIT-ADD] - PUBLIC-KEY (Users) - key', key);
+        let gro = key.split(':')
+        // this.logger.log('[DEPT-EDIT-ADD] - PUBLIC-KEY (Users) - gro key&value', gro);
+
+        if (gro[1] === 'F') {
+          this.isVisibleGroups = false
+          // this.logger.log('[DEPT-EDIT-ADD] - PUBLIC-KEY (Users) - gro isVisibleGroups', this.isVisibleGroups);
+        } else {
+          this.isVisibleGroups = true
+          // this.logger.log('[DEPT-EDIT-ADD] - PUBLIC-KEY (Users) - gro isVisibleGroups', this.isVisibleGroups);
+        }
+      }
+    })
+
+    if (!this.public_Key.includes("GRO")) {
+      this.isVisibleGroups = false;
+    }
+
+    this.getProjectPlan()
+  }
+
+  getProjectPlan() {
+    this.prjctPlanService.projectPlan$.subscribe(
+      (projectProfileData: any) => {
+        this.logger.log('[USERS] - GET PROJECT PLAN - RES ', projectProfileData)
+        if (projectProfileData) {
+          this.prjct_id = projectProfileData._id
+          this.prjct_name = projectProfileData.name
+          this.projectPlanAgentsNo = projectProfileData.profile_agents;
+          this.subscription_is_active = projectProfileData.subscription_is_active;
+          this.subscription_end_date = projectProfileData.subscription_end_date;
+          this.prjct_profile_type = projectProfileData.profile_type;
+          this.profile_name = projectProfileData.profile_name;
+          this.trial_expired = projectProfileData.trial_expired;
+
+          if (projectProfileData && projectProfileData.extra3) {
+            this.logger.log('[HOME] Find Current Project Among All extra3 ', projectProfileData.extra3)
+            this.appSumoProfile = APP_SUMO_PLAN_NAME[projectProfileData.extra3]
+            this.logger.log('[USERS] Find Current Project appSumoProfile ', this.appSumoProfile)
+          }
+
+          if (projectProfileData.profile_type === 'free') {
+            if (projectProfileData.trial_expired === false) {
+              this.prjct_profile_name = PLAN_NAME.B + " plan (trial)"
+              this.isVisibleGroups = true
+            } else {
+              this.prjct_profile_name = "Free plan";
+              this.isVisibleGroups = false
+             
+            }
+          } else if (projectProfileData.profile_type === 'payment') {
+            if (this.subscription_is_active === true) {
+              if (projectProfileData.profile_name === PLAN_NAME.A) {
+                if (!this.appSumoProfile) {
+                  this.prjct_profile_name = PLAN_NAME.A + " plan";
+                  this.isVisibleGroups = false
+                } else {
+                  this.prjct_profile_name = PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';
+                  this.isVisibleGroups = false
+                }
+              } else if (projectProfileData.profile_name === PLAN_NAME.B) {
+                if (!this.appSumoProfile) {
+                  this.prjct_profile_name = PLAN_NAME.B + " plan";
+                  this.isVisibleGroups = true
+                } else {
+                  this.prjct_profile_name = PLAN_NAME.B + " plan " + '(' + this.appSumoProfile + ')';;
+                  this.isVisibleGroups = true
+                }
+              } else if (projectProfileData.profile_name === PLAN_NAME.C) {
+                this.prjct_profile_name = PLAN_NAME.C + " plan";
+                this.isVisibleGroups = true
+                
+              }
+
+            } else if (this.subscription_is_active === false) {
+             
+              if (projectProfileData.profile_name === PLAN_NAME.A) {
+                this.prjct_profile_name = PLAN_NAME.A + " plan";
+                this.isVisibleGroups = false
+
+              } else if (projectProfileData.profile_name === PLAN_NAME.B) {
+                this.prjct_profile_name = PLAN_NAME.B + " plan";
+                this.isVisibleGroups = false
+
+              } else if (projectProfileData.profile_name === PLAN_NAME.C) {
+                this.prjct_profile_name = PLAN_NAME.C + " plan";
+                this.isVisibleGroups = false
+              }
+            }
+          }
+        }
+      },
+      (err) => {
+        this.logger.error('[USERS] GET PROJECT PROFILE - ERROR', err)
+      },
+      () => {
+        this.logger.log('[USERS] GET PROJECT PROFILE * COMPLETE *')
+      },
+    )
+  }
+
   getUserRole() {
     this.usersService.project_user_role_bs
       .pipe(
@@ -295,7 +422,7 @@ export class DepartmentEditAddComponent implements OnInit, AfterViewInit, Compon
       )
       .subscribe((userRole) => {
 
-        this.logger.log('[HOME] - SUBSCRIPTION TO USER ROLE »»» ', userRole)
+        this.logger.log('[DEPT-EDIT-ADD] - SUBSCRIPTION TO USER ROLE »»» ', userRole)
         // used to display / hide 'WIDGET' and 'ANALITCS' in home.component.html
         this.USER_ROLE = userRole;
       })
diff --git a/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.html b/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.html
index f134772d3163..05eb6cad875f 100644
--- a/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.html
+++ b/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.html
@@ -23,7 +23,7 @@
         </div>
         <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
           <!-- truncate -->
-          <div *ngIf="USER_ROLE !== 'agent'" class="text-accent-link-on-white text-md font-medium ">
+          <div *ngIf="USER_ROLE !== 'agent' && isVisibleANA" class="text-accent-link-on-white text-md font-medium ">
             <div class="arrow-container" (click)="goToContacts()">
               <div id="arrow_1" class="arrow-wrapper">
                 <div class="text-block" style="margin-right: 16px;">
@@ -65,7 +65,7 @@
         </div> -->
         <div class="flex items-baseline justify-center w-full mt-5 text-secondary">
           <!-- truncate -->
-          <div *ngIf="USER_ROLE !== 'agent'" class="text-accent-link-on-white text-md font-medium ">
+          <div *ngIf="USER_ROLE !== 'agent' && isVisibleANA" class="text-accent-link-on-white text-md font-medium ">
             <div class="arrow-container" (click)="goToVisitorsAnalytics()">
               <div id="arrow_1" class="arrow-wrapper">
                 <div class="text-block" style="margin-right: 16px;">
@@ -107,7 +107,7 @@
         <!-- <div class="other-analytics-text truncate">
           {{'Last30DaysMessages' | translate}}
         </div> -->
-        <div *ngIf="USER_ROLE !== 'agent'" class="flex items-baseline justify-center w-full mt-5 text-secondary">
+        <div *ngIf="USER_ROLE !== 'agent' && isVisibleANA" class="flex items-baseline justify-center w-full mt-5 text-secondary">
           <!-- truncate -->
           <div class="text-accent-link-on-white text-md font-medium ">
             <div class="arrow-container" (click)="goToMessagesAnalytics()">
diff --git a/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.ts b/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.ts
index 72822f48635c..2a13b171173a 100644
--- a/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.ts
+++ b/src/app/home-components/home-analytics-indicator/home-analytics-indicator.component.ts
@@ -7,6 +7,7 @@ import { Router } from '@angular/router';
 import { UsersService } from 'app/services/users.service';
 import { ContactsService } from 'app/services/contacts.service';
 import { LoggerService } from 'app/services/logger/logger.service';
+import { AppConfigService } from 'app/services/app-config.service';
 @Component({
   selector: 'appdashboard-home-analytics-indicator',
   templateUrl: './home-analytics-indicator.component.html',
@@ -20,6 +21,9 @@ export class HomeAnalyticsIndicatorComponent implements OnInit {
   countOfActiveContacts: number;
   countOfVisitors: number;
   countOfLastMonthMsgs: number;
+  public_Key: string;
+  isVisibleANA: boolean;
+
   constructor(
     private analyticsService: AnalyticsService,
     public translate: TranslateService,
@@ -27,21 +31,18 @@ export class HomeAnalyticsIndicatorComponent implements OnInit {
     private router: Router,
     private contactsService: ContactsService,
     private logger: LoggerService,
+    public appConfigService: AppConfigService
   ) { }
 
    // -----------------------------------------------------------------------------------------------------
   // @ Lifecycle hooks
   // -----------------------------------------------------------------------------------------------------
   ngOnInit(): void {
-    this.getUserRole() 
-    this.inizializeHomeStatic()
+    this.getUserRole();
+    this.inizializeHomeStatic();
+    this.getOSCODE();
   }
 
-  inizializeHomeStatic() {
-    this.getActiveContactsCount();
-    this.getVisitorsCount();
-    this.getLastMounthMessagesCount();
-  }
 
   ngOnChanges(changes: SimpleChanges) {
     this.logger.log('[HOME-ANALITICS] ngOnChanges changes ', changes)
@@ -57,6 +58,42 @@ export class HomeAnalyticsIndicatorComponent implements OnInit {
     }
   }
 
+  inizializeHomeStatic() {
+    this.getActiveContactsCount();
+    this.getVisitorsCount();
+    this.getLastMounthMessagesCount();
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    // this.logger.log('[HOME-ANALITICS] AppConfigService getAppConfig public_Key', this.public_Key);
+    let keys = this.public_Key.split("-");
+    // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY keys', keys)
+    keys.forEach(key => {
+      // this.logger.log('[HOME-ANALITICS] public_Key key', key)
+      
+      if (key.includes("ANA")) {
+        // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - key', key);
+        let ana = key.split(":");
+        // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana key&value', ana);
+
+        if (ana[1] === "F") {
+          this.isVisibleANA = false;
+          // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana isVisible', this.isVisibleANA);
+        } else {
+          this.isVisibleANA = true;
+          // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana isVisible', this.isVisibleANA);
+        }
+      }     
+    });
+
+    if (!this.public_Key.includes("ANA")) {
+      // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - key.includes("V1L")', this.public_Key.includes("ANA"));
+      this.isVisibleANA = false;
+    }
+
+  }
+
 
   getUserRole() {
     this.usersService.project_user_role_bs
diff --git a/src/app/home-components/home-convs-graph/home-convs-graph.component.html b/src/app/home-components/home-convs-graph/home-convs-graph.component.html
index b1bc3ae57239..9211d26b4ad3 100644
--- a/src/app/home-components/home-convs-graph/home-convs-graph.component.html
+++ b/src/app/home-components/home-convs-graph/home-convs-graph.component.html
@@ -7,7 +7,7 @@
         <div class="mr-4 text-2xl md:text-3xl graph-title tracking-tight leading-7">
           Conversations Overview
         </div>
-        <div *ngIf="USER_ROLE !== 'agent'" class="text-accent-link-on-black" (click)="goToRequestsAnalytics()">
+        <div *ngIf="USER_ROLE !== 'agent' && isVisibleANA" class="text-accent-link-on-black" (click)="goToRequestsAnalytics()">
           <span> More filter in Analytics </span>
           <span class="material-icons m-i-arrow-on-black">
             keyboard_arrow_right
diff --git a/src/app/home-components/home-convs-graph/home-convs-graph.component.ts b/src/app/home-components/home-convs-graph/home-convs-graph.component.ts
index 3a26f86c0c9f..56888a1a23e2 100644
--- a/src/app/home-components/home-convs-graph/home-convs-graph.component.ts
+++ b/src/app/home-components/home-convs-graph/home-convs-graph.component.ts
@@ -10,6 +10,7 @@ import { UsersService } from 'app/services/users.service';
 import { Router } from '@angular/router';
 import { ContactsService } from 'app/services/contacts.service';
 import { LoggerService } from 'app/services/logger/logger.service';
+import { AppConfigService } from 'app/services/app-config.service';
 
 @Component({
   selector: 'appdashboard-home-convs-graph',
@@ -40,7 +41,8 @@ export class HomeConvsGraphComponent implements OnInit, OnChanges {
   countOfActiveContacts: number;
   countOfVisitors: number;
   countOfLastMonthMsgs: number;
-
+  public_Key: string;
+  isVisibleANA: boolean;
 
   /**
    * Constructor
@@ -52,6 +54,7 @@ export class HomeConvsGraphComponent implements OnInit, OnChanges {
     private router: Router,
     private contactsService: ContactsService,
     private logger: LoggerService,
+    public appConfigService: AppConfigService
   ) { }
 
 
@@ -66,17 +69,11 @@ export class HomeConvsGraphComponent implements OnInit, OnChanges {
     this.getMonthsName();
     this.getUserRole();
     this.translateString();
-    this.inizializeHomeStatic()
+    this.inizializeHomeStatic();
+    this.getOSCODE();
   }
   
-  inizializeHomeStatic() {
-    this.getRequestByLastNDayMerge(this.numOfDays);
-    // this.getLastMounthRequestsCount();
-    // this.getActiveContactsCount();
-    // this.getVisitorsCount();
-    // this.getLastMounthMessagesCount();
-   
-  }
+ 
 
   ngOnChanges(changes: SimpleChanges) {
     this.logger.log('[HOME-CONVS-GRAPH] ngOnChanges changes ', changes)
@@ -94,6 +91,45 @@ export class HomeConvsGraphComponent implements OnInit, OnChanges {
     }
   }
 
+  inizializeHomeStatic() {
+    this.getRequestByLastNDayMerge(this.numOfDays);
+    // this.getLastMounthRequestsCount();
+    // this.getActiveContactsCount();
+    // this.getVisitorsCount();
+    // this.getLastMounthMessagesCount();
+   
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    // this.logger.log('[HOME-ANALITICS] AppConfigService getAppConfig public_Key', this.public_Key);
+    let keys = this.public_Key.split("-");
+    // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY keys', keys)
+    keys.forEach(key => {
+      // this.logger.log('[HOME-ANALITICS] public_Key key', key)
+      
+      if (key.includes("ANA")) {
+        // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - key', key);
+        let ana = key.split(":");
+        // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana key&value', ana);
+
+        if (ana[1] === "F") {
+          this.isVisibleANA = false;
+          // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana isVisible', this.isVisibleANA);
+        } else {
+          this.isVisibleANA = true;
+          // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - ana isVisible', this.isVisibleANA);
+        }
+      }     
+    });
+
+    if (!this.public_Key.includes("ANA")) {
+      // this.logger.log('[HOME-ANALITICS] PUBLIC-KEY - key.includes("V1L")', this.public_Key.includes("ANA"));
+      this.isVisibleANA = false;
+    }
+
+  }
+
   /**
    * On destroy
    */
diff --git a/src/app/home-components/home-create-teammate/home-create-teammate.component.html b/src/app/home-components/home-create-teammate/home-create-teammate.component.html
index f6c4bae26d51..aaf73819f308 100644
--- a/src/app/home-components/home-create-teammate/home-create-teammate.component.html
+++ b/src/app/home-components/home-create-teammate/home-create-teammate.component.html
@@ -186,7 +186,7 @@
                 #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
                 error
             </span>
-            <span class="redeemed-temmates-redeemed-num" matTooltipClass="ct-custom-mat-tooltip"
+            <span *ngIf="areActivePay" class="redeemed-temmates-redeemed-num" matTooltipClass="ct-custom-mat-tooltip"
                 matTooltip="View detail in Teammates & Groups" #tooltip="matTooltip" matTooltipPosition='below'
                 matTooltipHideDelay="100" (click)="goToTeammates()"
                 [ngStyle]="{'color': countOfPendingInvites + projectUsersLength > seatsLimit ? '#f44336' : '#2196f3'}">
@@ -195,7 +195,7 @@
                     ({{ countOfPendingInvites }} pending )
                 </span>
             </span>
-            of {{ seatsLimit }} available for the {{prjct_profile_name}}.
+           <span *ngIf="areActivePay"> of {{ seatsLimit }} available for the {{prjct_profile_name}}. </span> 
         </div>
 
         <div *ngIf="USER_ROLE === 'agent'" class="temmates-redeemed">
diff --git a/src/app/home-components/home-create-teammate/home-create-teammate.component.ts b/src/app/home-components/home-create-teammate/home-create-teammate.component.ts
index 376f167dc46c..10a8c8694106 100644
--- a/src/app/home-components/home-create-teammate/home-create-teammate.component.ts
+++ b/src/app/home-components/home-create-teammate/home-create-teammate.component.ts
@@ -57,6 +57,9 @@ export class HomeCreateTeammateComponent implements OnInit {
   USER_ROLE: string;
   numOfTeammatesNotDiplayed: number;
   countOfTeammates: number;
+  public_Key: string;
+  areActivePay: boolean;
+
   constructor(
     public auth: AuthService,
     private logger: LoggerService,
@@ -74,10 +77,38 @@ export class HomeCreateTeammateComponent implements OnInit {
     this.getCurrentProjectAndPrjctTeammates();
     // this.getGroupsByProjectId();
     this.getUserRole()
-    this.getProjectPlan();
     this.getPendingInvitation()
     this.getCurrentProject()
     this.getLoggedUser()
+    this.getOSCODE()
+  }
+
+  getOSCODE() {
+    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
+    // this.logger.log('[HOME-CREATE-TEAMMATE] AppConfigService getAppConfig public_Key', this.public_Key);
+    let keys = this.public_Key.split("-");
+    // this.logger.log('[HOME-CREATE-TEAMMATE] PUBLIC-KEY keys', keys)
+    keys.forEach(key => {
+      // this.logger.log('[HOME-CREATE-TEAMMATE] public_Key key', key)
+      if (key.includes("PAY")) {
+        // this.logger.log('[HOME-CREATE-TEAMMATE] PUBLIC-KEY - key', key);
+        let psa = key.split(":");
+        // this.logger.log('[HOME-CREATE-TEAMMATE] PUBLIC-KEY - pay key&value', psa);
+        if (psa[1] === "F") {
+          this.areActivePay = false;
+        } else {
+          this.areActivePay = true;
+        }
+      }
+    });
+
+    if (!this.public_Key.includes("PAY")) {
+      // this.logger.log('[HOME-CREATE-TEAMMATE] PUBLIC-KEY  - key.includes("PAY")', this.public_Key.includes("PAY"));
+      this.areActivePay = false;
+    }
+
+    this.getProjectPlan();
+
   }
 
   getCurrentProject() {
@@ -144,16 +175,21 @@ export class HomeCreateTeammateComponent implements OnInit {
 
             if (projectProfileData.trial_expired === false) {
               this.prjct_profile_name = PLAN_NAME.B + " (trial)"
-              this.profile_name_for_segment =  PLAN_NAME.B + " (trial)"
-              this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
-              // this.seatsLimit = PLAN_SEATS.free
-             
+              this.profile_name_for_segment = PLAN_NAME.B + " (trial)"
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
+              } else {
+                this.seatsLimit = 1000;
+              }
               this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
             } else {
               this.prjct_profile_name = "Free plan";
               this.profile_name_for_segment = "Free plan";
-              this.seatsLimit = PLAN_SEATS.free
-              
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS.free
+              } else {
+                this.seatsLimit = 1000;
+              }
               this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
             }
           } else if (projectProfileData.profile_type === 'payment') {
@@ -162,13 +198,13 @@ export class HomeCreateTeammateComponent implements OnInit {
                 if (!this.appSumoProfile) {
                   this.prjct_profile_name = PLAN_NAME.A + " plan";
                   this.seatsLimit = PLAN_SEATS[PLAN_NAME.A]
-                  this.profile_name_for_segment =  PLAN_NAME.A + " plan";
-                  
+                  this.profile_name_for_segment = PLAN_NAME.A + " plan";
+
                   this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', PLAN_NAME.A, ' SEATS LIMIT: ', this.seatsLimit)
                   this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - prjct_profile_name: ', this.prjct_profile_name)
                 } else {
                   this.prjct_profile_name = PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';
-                  this.profile_name_for_segment =  PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';;
+                  this.profile_name_for_segment = PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';;
                   this.seatsLimit = APPSUMO_PLAN_SEATS[projectProfileData.extra3];
                   this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - prjct_profile_name ', this.prjct_profile_name, ' SEATS LIMIT: ', this.seatsLimit)
                 }
@@ -182,7 +218,7 @@ export class HomeCreateTeammateComponent implements OnInit {
                   this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - prjct_profile_name: ', this.prjct_profile_name)
                 } else {
                   this.prjct_profile_name = PLAN_NAME.B + " plan " + '(' + this.appSumoProfile + ')';
-                  this.profile_name_for_segment =  this.prjct_profile_name
+                  this.profile_name_for_segment = this.prjct_profile_name
                   this.seatsLimit = APPSUMO_PLAN_SEATS[projectProfileData.extra3];
                   this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - prjct_profile_name ', this.prjct_profile_name, ' SEATS LIMIT: ', this.seatsLimit)
                 }
@@ -202,21 +238,21 @@ export class HomeCreateTeammateComponent implements OnInit {
                 this.prjct_profile_name = PLAN_NAME.A + " plan";
                 this.profile_name_for_segment = PLAN_NAME.A + " plan";
                 this.seatsLimit = PLAN_SEATS.free
-               
+
                 this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', PLAN_NAME.A, ' SEATS LIMIT: ', this.seatsLimit)
 
               } else if (projectProfileData.profile_name === PLAN_NAME.B) {
                 this.prjct_profile_name = PLAN_NAME.B + " plan";
                 this.profile_name_for_segment = PLAN_NAME.B + " plan";
                 this.seatsLimit = PLAN_SEATS.free
-               
+
                 this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', PLAN_NAME.B, ' SEATS LIMIT: ', this.seatsLimit)
 
               } else if (projectProfileData.profile_name === PLAN_NAME.C) {
                 this.prjct_profile_name = PLAN_NAME.C + " plan";
                 this.profile_name_for_segment = PLAN_NAME.C + " plan";
                 this.seatsLimit = PLAN_SEATS.free
-                
+
                 this.logger.log('[HOME-CREATE-TEAMMATE] - GET PROJECT PLAN - PLAN_NAME ', PLAN_NAME.C, ' SEATS LIMIT: ', this.seatsLimit)
               }
             }
@@ -344,8 +380,8 @@ export class HomeCreateTeammateComponent implements OnInit {
               groupArray.push({ groupName: groups[i].name, groupMembers: groups[i].members })
               this.logger.log('[HOME-CREATE-TEAMMATE] - GET GROUPS BY PROJECT ID > GROUP ARRAY ', groupArray)
 
-             
-        
+
+
               //   if (groups[i].members && groups[i].members.length > 0) {
               //     for (let j = 0; j < groups[i].members.length; j++) {
               //       this.logger.log('[HOME-CREATE-TEAMMATE] - GET GROUPS BY PROJECT ID > GROUP MEMBERS > MEMBER', groups[i].members[j])
@@ -371,7 +407,7 @@ export class HomeCreateTeammateComponent implements OnInit {
             //   this.logger.log('[HOME-CREATE-TEAMMATE] - GET GROUPS BY PROJECT ID > groupArrayGrouped ', groupArrayGrouped)
             // }
 
-          
+
           }
         })
 
@@ -451,7 +487,7 @@ export class HomeCreateTeammateComponent implements OnInit {
 
   presentModalInviteTeammate() {
     this.logger.log('[HOME-CREATE-TEAMMATE] - presentModalAddKb ');
-    const addKbBtnEl = <HTMLElement>document.querySelector('#home-material-btn'); 
+    const addKbBtnEl = <HTMLElement>document.querySelector('#home-material-btn');
     this.logger.log('[HOME-CREATE-TEAMMATE] - presentModalAddKb addKbBtnEl ', addKbBtnEl);
     addKbBtnEl.blur()
     const dialogRef = this.dialog.open(HomeInviteTeammateModalComponent, {
@@ -465,7 +501,7 @@ export class HomeCreateTeammateComponent implements OnInit {
       this.logger.log(`[HOME-CREATE-TEAMMATE] Dialog result:`, result);
 
       if (result) {
-        if (result.email && result.role)  {
+        if (result.email && result.role) {
           this.logger.log(`[HOME-CREATE-TEAMMATE] email:`, result.email, ' role ', result.role);
 
           if (this.projectUsersLength + this.countOfPendingInvites < this.seatsLimit) {
@@ -484,11 +520,11 @@ export class HomeCreateTeammateComponent implements OnInit {
 
   presentModalOnlyOwnerCanManageTheAccountPlan() {
     this.notify.presentModalOnlyOwnerCanManageTheAccountPlan('Only teammates with the owner role can manage the account’s plan', 'Learn more about default roles')
-    
+
   }
 
-  doInviteUser(email, role){
-    
+  doInviteUser(email, role) {
+
     this.usersService.inviteUser(email, role).subscribe((project_user: any) => {
       this.logger.log('[HOME-CREATE-TEAMMATE] - INVITE USER - POST SUBSCRIPTION PROJECT-USER - RES project_user)', project_user);
       this.logger.log('[HOME-CREATE-TEAMMATE] - INVITE USER - POST SUBSCRIPTION PROJECT-USER - RES project_user.id_project', project_user.id_project);
@@ -501,7 +537,7 @@ export class HomeCreateTeammateComponent implements OnInit {
 
       // HANDLE THE ERROR "Pending Invitation already exist"
       if (project_user.success === false && project_user.msg === 'Pending Invitation already exist.') {
- 
+
         this.openDialogInviteTeammateError(email + ' has already been invited.')
 
         // this.PENDING_INVITATION_ALREADY_EXIST = true;
@@ -550,7 +586,7 @@ export class HomeCreateTeammateComponent implements OnInit {
 
       }
     }, () => {
-     this.logger.log('[HOME-CREATE-TEAMMATE] - INVITE USER  * COMPLETE *');
+      this.logger.log('[HOME-CREATE-TEAMMATE] - INVITE USER  * COMPLETE *');
       // this.INVITE_YOURSELF_ERROR = false;
       // this.INVITE_OTHER_ERROR = false;
       // this.INVITE_USER_ALREADY_MEMBER_ERROR = false;
@@ -562,7 +598,7 @@ export class HomeCreateTeammateComponent implements OnInit {
       if (!isDevMode()) {
         if (window['analytics']) {
           let userFullname = ''
-          if (this.CURRENT_USER && this.CURRENT_USER.firstname && this.CURRENT_USER.lastname)  {
+          if (this.CURRENT_USER && this.CURRENT_USER.firstname && this.CURRENT_USER.lastname) {
             userFullname = this.CURRENT_USER.firstname + ' ' + this.CURRENT_USER.lastname
           } else if (this.CURRENT_USER && this.CURRENT_USER.firstname && !this.CURRENT_USER.lastname) {
             userFullname = this.CURRENT_USER.firstname
@@ -583,7 +619,7 @@ export class HomeCreateTeammateComponent implements OnInit {
             window['analytics'].track('Invite Sent', {
               "invitee_email": email,
               "invitee_role": this.invitedProjectUser.role,
-              "page":"Home"
+              "page": "Home"
             }, {
               "context": {
                 "groupId": this.invitedProjectUser.id_project
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index e4aebc29cf7a..13e4a841cffb 100755
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -22,13 +22,13 @@
                 <!-- rounded-full -->
                 <div class="flex-0 w-16 h-16  overflow-hidden">
                   <!-- <img src="assets/images/avatars/brian-hughes.jpg" class="w-full h-full object-cover"> -->
-                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+                  <svg *ngIf="isVisiblePay" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 65.2 65.2"
                     style="enable-background:new 0 0 65.2 65.2;" xml:space="preserve" class="td--logo">
                     <g>
                       <path fill="#F18876" d="M54.9,29.8H35.6c-1.7,0-3-1.4-3-3V7.5c0-1.7-1.4-3-3-3H10.3c-1.7,0-3,1.4-3,3v22.3v22.3c0,1.7,1.4,3,3,3H9h3.5
-		c0.7,0,1.4,0.3,1.9,0.8l2.2,2.2l2.1,2.1c0.7,0.7,1.8,0.7,2.5,0l2.1-2.1l2.2-2.2c0.5-0.5,1.2-0.8,1.9-0.8h27.6c1.7,0,3-1.4,3-3V32.8
-    C58,31.2,56.6,29.8,54.9,29.8" />
+		                    c0.7,0,1.4,0.3,1.9,0.8l2.2,2.2l2.1,2.1c0.7,0.7,1.8,0.7,2.5,0l2.1-2.1l2.2-2.2c0.5-0.5,1.2-0.8,1.9-0.8h27.6c1.7,0,3-1.4,3-3V32.8
+                        C58,31.2,56.6,29.8,54.9,29.8" />
                     </g>
                     <g class="running">
                       <path [ngClass]="{
@@ -38,11 +38,25 @@
                         'c-plan-badge': current_prjct?.plan_badge_background_type === 'c_plan_badge',
                         'unsupported-plan-badge': current_prjct?.plan_badge_background_type === 'unsupported_plan_badge'
                         }" d="M56.1,25.7H38.5c-1,0-1.8-0.8-1.8-1.8V6.3c0-1,0.8-1.8,1.8-1.8h17.6c1,0,1.8,0.8,1.8,1.8v17.6
-		C58,24.9,57.1,25.7,56.1,25.7" />
+		                    C58,24.9,57.1,25.7,56.1,25.7" />
                     </g>
                   </svg>
 
-
+                  <svg *ngIf="!isVisiblePay" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 65.2 65.2"
+                    style="enable-background:new 0 0 65.2 65.2;" xml:space="preserve" class="td--logo">
+                    <g>
+                      <path fill="#F18876" d="M54.9,29.8H35.6c-1.7,0-3-1.4-3-3V7.5c0-1.7-1.4-3-3-3H10.3c-1.7,0-3,1.4-3,3v22.3v22.3c0,1.7,1.4,3,3,3H9h3.5
+                      c0.7,0,1.4,0.3,1.9,0.8l2.2,2.2l2.1,2.1c0.7,0.7,1.8,0.7,2.5,0l2.1-2.1l2.2-2.2c0.5-0.5,1.2-0.8,1.9-0.8h27.6c1.7,0,3-1.4,3-3V32.8
+                      C58,31.2,56.6,29.8,54.9,29.8" />
+                    </g>
+                    <g class="running">
+                      <path 
+                       d="M56.1,25.7H38.5c-1,0-1.8-0.8-1.8-1.8V6.3c0-1,0.8-1.8,1.8-1.8h17.6c1,0,1.8,0.8,1.8,1.8v17.6
+                      C58,24.9,57.1,25.7,56.1,25.7" 
+                      fill="#E5BBAD"/>
+                    </g>
+                  </svg>
 
                 </div>
                 <!-- style="flex-direction: row !important;" -->
@@ -96,11 +110,8 @@
                     [ngClass]="{'oph-disabled': !OPERATING_HOURS_ACTIVE || DISPLAY_OPH_AS_DISABLED, 'oph-enabled': OPERATING_HOURS_ACTIVE && !DISPLAY_OPH_AS_DISABLED }"
                     style="box-shadow: unset;margin-right: 16px;    position: relative;"
                     [satPopoverAnchor]="editOperatingHours" (click)="editOperatingHours.toggle();"
-                    matTooltipClass="custom-mat-tooltip" 
-                    matTooltip="Adjust operating hours"
-                    #tooltip="matTooltip" 
-                    matTooltipPosition='below' 
-                    matTooltipHideDelay="100">
+                    matTooltipClass="custom-mat-tooltip" matTooltip="Adjust operating hours" #tooltip="matTooltip"
+                    matTooltipPosition='below' matTooltipHideDelay="100">
                     <mat-icon style="color: #fff;position: relative;top: -2px;">date_range</mat-icon>
                   </button>
 
@@ -170,13 +181,15 @@
 
                 <mat-menu #dashletMenu="matMenu">
                   <!-- *ngIf="displayAnalyticsConvsGraph" -->
-                  <button *ngIf="isVisibleANA" mat-menu-item (click)="$event.stopPropagation()">
+                  <!-- *ngIf="isVisibleANA" -->
+                  <button mat-menu-item (click)="$event.stopPropagation()">
                     <mat-checkbox class="home-settings-checkbox" [checked]="displayAnalyticsConvsGraph"
                       (change)="switchAnalyticsConvsGraph($event.checked)"></mat-checkbox>
                     <span>Conversations chart</span>
                   </button>
                   <!-- *ngIf="displayAnalyticsIndicators" -->
-                  <button *ngIf="isVisibleANA"  mat-menu-item (click)="$event.stopPropagation()">
+                  <!-- *ngIf="isVisibleANA" -->
+                  <button mat-menu-item (click)="$event.stopPropagation()">
                     <mat-checkbox class="home-settings-checkbox" [checked]="displayAnalyticsIndicators"
                       (change)="switchAnalyticsIndicators($event.checked)">
                     </mat-checkbox>
@@ -218,11 +231,11 @@
                   <!-- --------------------- -->
 
 
-                  <!-- <button mat-menu-item (click)="$event.stopPropagation()">
+                  <button mat-menu-item (click)="$event.stopPropagation()">
                     <mat-checkbox class="home-settings-checkbox" [checked]="displayNewsFeed"
                       (change)="switchNewsFeed($event.checked)"></mat-checkbox>
                     <span>News Feed</span>
-                  </button> -->
+                  </button>
                 </mat-menu>
               </div>
             </div>
@@ -290,10 +303,10 @@
             </div>
           </div>
         </div> <!-- ./ bg-card -->
-        
+
         <div class="home-blocks-wpr">
 
-          
+
           <!-- // Skeleton START -->
           <div *ngIf="showskeleton" class="skeleton">
 
@@ -301,7 +314,7 @@
             <mat-card class="card mat-elevation-z3 is-loading">
               <mat-card-content>
                 <div class="content">
-      
+
                   <div style="margin-bottom: 16px;">
                     <h2></h2>
                     <div style="display: flex; flex-direction: row;">
@@ -318,7 +331,7 @@ <h2></h2>
                   </div>
 
                   <h3 style="margin-bottom: 16px;"></h3>
-      
+
                   <div style="width: 100%; display: flex; flex-direction: row; justify-content: flex-start;">
                     <div class="fake-box"></div>
                     <div class="fake-box"></div>
@@ -332,18 +345,18 @@ <h3 style="margin-bottom: 16px;"></h3>
             <mat-card class="card mat-elevation-z3 is-loading">
               <mat-card-content>
                 <div class="content">
-      
+
                   <div>
                     <h2></h2>
                     <p></p>
                     <p style="width: 560px;"></p>
                   </div>
-                  
+
                   <div class="fake-footer">
                     <button style="width: 250px; margin-right: 10px;"></button>
                     <button></button>
                   </div>
-      
+
                 </div>
               </mat-card-content>
             </mat-card>
@@ -352,7 +365,7 @@ <h2></h2>
             <mat-card class="card mat-elevation-z3 is-loading">
               <mat-card-content>
                 <div class="content">
-      
+
                   <div style="margin-bottom: 16px;">
                     <h2 style="width: 180px;"></h2>
                     <div style="display: flex; flex-direction: row;">
@@ -360,15 +373,15 @@ <h2 style="width: 180px;"></h2>
                       <div class="fake-circle"></div>
                       <div class="fake-circle"></div>
                     </div>
-                    
+
                   </div>
-                  
+
                   <p style="width: 560px;"></p>
-                  
+
                   <div class="fake-footer">
                     <button></button>
                   </div>
-      
+
                 </div>
               </mat-card-content>
             </mat-card>
@@ -377,7 +390,7 @@ <h2 style="width: 180px;"></h2>
             <mat-card class="card mat-elevation-z3 is-loading">
               <mat-card-content>
                 <div class="content">
-      
+
                   <div>
                     <h2></h2>
 
@@ -390,28 +403,26 @@ <h2></h2>
                       <button style="width: 120px;"></button>
                     </div>
                   </div>
-                  
-      
+
+
                 </div>
               </mat-card-content>
             </mat-card>
           </div>
           <!-- // Skeleton END -->
-      
-          
+
+
           <ng-container *ngIf="!showskeleton ">
             <span *ngIf="USER_ROLE !== 'agent'">
-              <div  class="home--blocks" id="homeBlocks" *ngFor="let item of child_list_order">
+              <div class="home--blocks" id="homeBlocks" *ngFor="let item of child_list_order">
 
                 <!-- ----------------------- -->
                 <!-- Child 1 Convs Graph -->
                 <!-- ----------------------- -->
                 <ng-container *ngIf="item.type === 'child1'">
                   <appdashboard-home-convs-graph *ngIf="displayAnalyticsConvsGraph"
-                    [displayAnalyticsConvsGraph]="displayAnalyticsConvsGraph" 
-                    [projectId]="projectId"
-                    [USER_ROLE]="USER_ROLE"
-                    (trackUserAction)="trackUserAction($event)">
+                    [displayAnalyticsConvsGraph]="displayAnalyticsConvsGraph" [projectId]="projectId"
+                    [USER_ROLE]="USER_ROLE" (trackUserAction)="trackUserAction($event)">
                   </appdashboard-home-convs-graph>
                 </ng-container>
 
@@ -420,8 +431,7 @@ <h2></h2>
                 <!-- ----------------------- -->
                 <ng-container *ngIf="item.type === 'child2'">
                   <appdashboard-home-analytics-indicator *ngIf="displayAnalyticsIndicators" [projectId]="projectId"
-                    [USER_ROLE]="USER_ROLE"
-                    (trackUserAction)="trackUserAction($event)">
+                    [USER_ROLE]="USER_ROLE" (trackUserAction)="trackUserAction($event)">
                   </appdashboard-home-analytics-indicator>
                 </ng-container>
 
@@ -429,38 +439,27 @@ <h2></h2>
                 <!-- Child 3 Whatsapp Wizard -->
                 <!-- ----------------------- -->
                 <ng-container *ngIf="item.type === 'child3'">
-                  <appdashboard-home-whatsapp-account-wizard   *ngIf="displayWhatsappAccountWizard"
-                    style="margin-bottom: 18px;"
-                    (goToConnectWA)="goToConnectWA()" 
-                    (goToCreateChatbot)="goToCreateChatbot()"
-                    (hasTestedBotOnWa)="hasTestedBotOnWa()" 
-                    [whatsAppIsConnected]="whatsAppIsConnected"
-                    [wadepartmentName]="wadepartmentName" 
-                    [chatbotConnectedWithWA]='chatbotConnectedWithWA'
-                    [waBotId]="waBotId" 
-                    [use_case_for_child]="use_case_for_child"
-                    [solution_channel_for_child]="solution_channel_for_child" 
-                    [solution_for_child]="solution_for_child"
-                    [testBotOnWA]="testBotOnWA" 
-                    [botIdForTestWA]="botIdForTestWA"
-                    (hasCreatedChatbot)="hasCreatedChatbot($event)">
-                </appdashboard-home-whatsapp-account-wizard>
-              </ng-container>
+                  <appdashboard-home-whatsapp-account-wizard *ngIf="displayWhatsappAccountWizard"
+                    style="margin-bottom: 18px;" (goToConnectWA)="goToConnectWA()"
+                    (goToCreateChatbot)="goToCreateChatbot()" (hasTestedBotOnWa)="hasTestedBotOnWa()"
+                    [whatsAppIsConnected]="whatsAppIsConnected" [wadepartmentName]="wadepartmentName"
+                    [chatbotConnectedWithWA]='chatbotConnectedWithWA' [waBotId]="waBotId"
+                    [use_case_for_child]="use_case_for_child" [solution_channel_for_child]="solution_channel_for_child"
+                    [solution_for_child]="solution_for_child" [testBotOnWA]="testBotOnWA"
+                    [botIdForTestWA]="botIdForTestWA" (hasCreatedChatbot)="hasCreatedChatbot($event)">
+                  </appdashboard-home-whatsapp-account-wizard>
+                </ng-container>
 
                 <!-- ----------------------- -->
                 <!-- Child 4 Whatsapp Account-->
                 <!-- ----------------------- -->
                 <ng-container *ngIf="item.type === 'child4'">
-                  <appdashboard-home-whatsapp-account *ngIf="displayConnectWhatsApp" 
-                    style=" z-index: 11;"
-                    #childWhatsappAccount 
-                    (onClickOnUnistallApp)="onClickOnUnistallApp()"
+                  <appdashboard-home-whatsapp-account *ngIf="displayConnectWhatsApp" style=" z-index: 11;"
+                    #childWhatsappAccount (onClickOnUnistallApp)="onClickOnUnistallApp()"
                     (onClickOnGoToLearnMoreOrManageApp)="onClickOnGoToLearnMoreOrManageApp()"
                     (onClickOnDisplayWhatsAppWizard)="onClickOnDisplayWhatsAppWizard()"
-                    [whatsAppIsInstalled]="whatsAppIsInstalled" 
-                    [whatsAppIsConnected]="whatsAppIsConnected"
-                    [solution_channel_for_child]="solution_channel_for_child" 
-                    [solution_for_child]="solution_for_child"
+                    [whatsAppIsInstalled]="whatsAppIsInstalled" [whatsAppIsConnected]="whatsAppIsConnected"
+                    [solution_channel_for_child]="solution_channel_for_child" [solution_for_child]="solution_for_child"
                     [userHasClickedDisplayWAWizard]="userHasClickedDisplayWAWizard">
                   </appdashboard-home-whatsapp-account>
                 </ng-container>
@@ -470,10 +469,8 @@ <h2></h2>
                 <!-- ----------------------- -->
                 <ng-container *ngIf="item.type === 'child5'">
                   <appdashboard-home-create-chatbot #childCreateChatbot *ngIf="displayCreateChatbot"
-                    [use_case_for_child]="use_case_for_child" 
-                    [solution_channel_for_child]="solution_channel_for_child"
-                    [waBotId]="waBotId" 
-                    [wadepartmentName]="wadepartmentName"
+                    [use_case_for_child]="use_case_for_child" [solution_channel_for_child]="solution_channel_for_child"
+                    [waBotId]="waBotId" [wadepartmentName]="wadepartmentName"
                     [chatbotConnectedWithWA]="chatbotConnectedWithWA"
                     (botHookedToDefaultDept)="botHookedToDefaultDept($event)"
                     (trackUserAction)="trackUserAction($event)">
@@ -483,25 +480,23 @@ <h2></h2>
                 <!-- ----------------------- -->
                 <!-- Child 6 Create Teammate -->
                 <!-- ----------------------- -->
-                <ng-container *ngIf="item.type === 'child6'" >
-                  <appdashboard-home-create-teammate 
-                    *ngIf="displayInviteTeammate">
+                <ng-container *ngIf="item.type === 'child6'">
+                  <appdashboard-home-create-teammate *ngIf="displayInviteTeammate">
                   </appdashboard-home-create-teammate>
                 </ng-container>
 
                 <!-- ----------------------- -->
                 <!-- Child 7 KB -->
                 <!-- ----------------------- -->
-                <ng-container *ngIf="item.type === 'child7'" >
-                  <appdashboard-home-kb *ngIf="displayKnowledgeBase" 
-                    (trackUserAction)="trackUserAction($event)">
+                <ng-container *ngIf="item.type === 'child7'">
+                  <appdashboard-home-kb *ngIf="displayKnowledgeBase" (trackUserAction)="trackUserAction($event)">
                   </appdashboard-home-kb>
                 </ng-container>
 
                 <!-- ----------------------- -->
                 <!-- Child 8 Customize Widget -->
                 <!-- ----------------------- -->
-                <ng-container *ngIf="item.type === 'child8'" >
+                <ng-container *ngIf="item.type === 'child8'">
                   <appdashboard-home-customize-widget *ngIf="displayCustomizeWidget"
                     (trackUserAction)="trackUserAction($event)">
                   </appdashboard-home-customize-widget>
@@ -511,35 +506,34 @@ <h2></h2>
             </span>
             <span *ngIf="USER_ROLE === 'agent'">
               <div class="home--blocks">
-                
-                  <!-- *ngIf="displayAnalyticsConvsGraph" -->
-                  <!-- style="min-width: 834px; display: block;" -->
-                  <appdashboard-home-convs-graph *ngIf="isVisibleANA" 
-                  
-                    [displayAnalyticsConvsGraph]="displayAnalyticsConvsGraph" 
-                    [projectId]="projectId"
-                    [USER_ROLE]="USER_ROLE">
-                  </appdashboard-home-convs-graph>
 
-                  <!-- *ngIf="displayAnalyticsIndicators" -->
-                  <appdashboard-home-analytics-indicator *ngIf="isVisibleANA" 
-                    [projectId]="projectId"
-                    [USER_ROLE]="USER_ROLE">
-                  </appdashboard-home-analytics-indicator>
+                <!-- *ngIf="displayAnalyticsConvsGraph" -->
+                <!-- style="min-width: 834px; display: block;" -->
+                <appdashboard-home-convs-graph *ngIf="isVisibleANA"
+                  [displayAnalyticsConvsGraph]="displayAnalyticsConvsGraph" [projectId]="projectId"
+                  [USER_ROLE]="USER_ROLE">
+                </appdashboard-home-convs-graph>
+
+                <!-- *ngIf="displayAnalyticsIndicators" -->
+                <appdashboard-home-analytics-indicator *ngIf="isVisibleANA" [projectId]="projectId"
+                  [USER_ROLE]="USER_ROLE">
+                </appdashboard-home-analytics-indicator>
+
+                <!-- *ngIf="displayInviteTeammate" -->
+                <appdashboard-home-create-teammate> </appdashboard-home-create-teammate>
 
-                  <!-- *ngIf="displayInviteTeammate" -->
-                  <appdashboard-home-create-teammate> </appdashboard-home-create-teammate>
+                <appdashboard-home-go-to-chat></appdashboard-home-go-to-chat>
 
-                  <appdashboard-home-go-to-chat></appdashboard-home-go-to-chat>
-                
 
               </div>
 
             </span>
           </ng-container>
         </div>
-        <div *ngIf="!showskeleton" class="news-feed-wpr" style="background-color: rgb(241,245,249);  padding-left: 15px;padding-right: 15px;">
-          <appdashboard-home-news-feed *ngIf="displayNewsFeed" [showskeleton]="showskeleton"> </appdashboard-home-news-feed>
+        <div *ngIf="!showskeleton" class="news-feed-wpr"
+          style="background-color: rgb(241,245,249);  padding-left: 15px;padding-right: 15px;">
+          <appdashboard-home-news-feed *ngIf="displayNewsFeed" [showskeleton]="showskeleton">
+          </appdashboard-home-news-feed>
         </div>
       </div>
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 774593dd067b..1f392f1cce7f 100755
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -59,7 +59,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   // tparams = brand;
   company_name: string;
   tparams: any;
-  public_Key: string;
+
   firebaseProjectId: any;
   LOCAL_STORAGE_CURRENT_USER: any;
 
@@ -88,7 +88,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   showSpinner = true;
 
   subscription: Subscription;
-  isVisiblePay: boolean;
+  
   installWidgetText: string;
 
   //** FOR THE NEW DASHBOARD **//
@@ -110,11 +110,14 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   chatbots: any // TO DISPLAY THE CHATBOT IN THE NEW HOME HEADER
   DISPLAY_TEAMMATES: boolean = false;
   DISPLAY_CHATBOTS: boolean = false;
-
+  
+  public_Key: string;
   isVisibleANA: boolean;
   isVisibleAPP: boolean;
   isVisibleOPH: boolean;
   isVisibleHomeBanner: boolean;
+  isVisiblePay: boolean;
+
   hidechangelogrocket: boolean;
   onlyOwnerCanManageTheAccountPlanMsg: string;
   learnMoreAboutDefaultRoles: string;
@@ -325,11 +328,15 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   getProjectById(projectId) {
     this.projectService.getProjectById(projectId).subscribe((project: any) => {
       this.logger.log('[HOME] - GET PROJECT BY ID - PROJECT: ', project);
+      if (project && project.attributes && project.attributes.dashlets) {
+        this.PROJECT_ATTRIBUTES = project.attributes;
+        this.getDashlet(this.PROJECT_ATTRIBUTES)
+      }
 
       if (project && project.attributes && project.attributes.userPreferences) {
         this.PROJECT_ATTRIBUTES = project.attributes;
         this.getOnbordingPreferences(this.PROJECT_ATTRIBUTES)
-        this.getDashlet(this.PROJECT_ATTRIBUTES)
+        
       } else {
         this.logger.log('[HOME] USECASE  PROJECT_ATTRIBUTES UNDEFINED', this.PROJECT_ATTRIBUTES)
         this.setDefaultPreferences()
@@ -343,11 +350,12 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
       // this.getApps();
       setTimeout(() => {
         this.showskeleton = false;
-      }, 1000);
+      }, 1200);
     });
   }
 
   getDashlet(project_attributes) {
+    this.logger.log('[HOME] - (onInit) - DASHLETS PREFERENCES project_attributes ', project_attributes);
     if (project_attributes && project_attributes.dashlets) {
       this.logger.log('[HOME] - (onInit) - DASHLETS PREFERENCES ', project_attributes.dashlets);
       const dashlets = project_attributes.dashlets;
@@ -2576,8 +2584,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
     this.logger.log('[HOME] AppConfigService getAppConfig CHAT_BASE_URL', this.CHAT_BASE_URL);
   }
 
-
-
   getOSCODE() {
     this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
     // this.logger.log('[HOME] AppConfigService getAppConfig public_Key', this.public_Key);
@@ -2652,18 +2658,20 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
       }
 
       if (key.includes("PPB")) {
-        // this.logger.log('PUBLIC-KEY (PROJECTS-LIST) - key', key);
+        // this.logger.log('PUBLIC-KEY (HOME) - key', key);
         let ppb = key.split(":");
-        // this.logger.log('PUBLIC-KEY (PROJECTS-LIST) - ppb key&value', ppb);
+        // this.logger.log('PUBLIC-KEY (HOME) - ppb key&value', ppb);
 
         if (ppb[1] === "F") {
           this.project_plan_badge = false;
-          // this.logger.log('PUBLIC-KEY (PROJECTS-LIST) - project plan badge is', this.project_plan_badge);
+          // this.logger.log('PUBLIC-KEY (HOME) - project plan badge is', this.project_plan_badge);
         } else {
           this.project_plan_badge = true;
-          // this.logger.log('PUBLIC-KEY (PROJECTS-LIST) - project plan badge is', this.project_plan_badge);
+          // this.logger.log('PUBLIC-KEY (HOME) - project plan badge is', this.project_plan_badge);
         }
       }
+
+     
     });
 
     if (!this.public_Key.includes("ANA")) {
@@ -2687,20 +2695,14 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
     }
 
     if (!this.public_Key.includes("PPB")) {
-      // this.logger.log('PUBLIC-KEY (PROJECTS-LIST) - key.includes("PPB")', this.public_Key.includes("PPB"));
+      // this.logger.log('PUBLIC-KEY (HOME) - key.includes("PPB")', this.public_Key.includes("PPB"));
       this.project_plan_badge = false;
     }
 
-    // this.logger.log('eoscode', this.eos)
-    // if (this.eos && this.eos === publicKey) {
-
-    //   this.isVisible = true;
-    //   this.logger.log('eoscode isVisible ', this.isVisible);
-    // } else {
-
-    //   this.isVisible = false;
-    //   this.logger.log('eoscode isVisible ', this.isVisible);
-    // }
+    if (!this.public_Key.includes("PAY")) {
+      // this.logger.log('PUBLIC-KEY (HOME) - key.includes("PPB")', this.public_Key.includes("PPB"));
+      this.isVisiblePay = false;
+    }
   }
 
   checkPromoURL() {
@@ -3691,81 +3693,79 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
   async switchAnalyticsConvsGraph(event) {
     this.logger.log('[HOME] SWITCH ANALYTICS OVERVIEW event ', event)
     this.displayAnalyticsConvsGraph = event
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchAnalyticsConvsGraph')
   }
 
   async switchAnalyticsIndicators(event) {
     this.logger.log('[HOME] SWITCH ANALYTICS OVERVIEW event ', event)
     this.displayAnalyticsIndicators = event
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchAnalyticsIndicators')
   }
 
   async switchConnectWhatsApp(event) {
     this.logger.log('[HOME] SWITCH CNNECT WA event ', event)
     this.displayConnectWhatsApp = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchConnectWhatsApp')
   }
 
   async switchCreateChatbot(event) {
     this.logger.log('[HOME] SWITCH CREATE CHATBOT event ', event)
     this.displayCreateChatbot = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchCreateChatbot')
   }
 
   async switchInviteTeammate(event) {
     this.logger.log('[HOME] SWITCH INVITE TEAMMATES event ', event)
     this.displayInviteTeammate = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchInviteTeammate')
   }
 
   async switchyKnowledgeBase(event) {
     this.logger.log('[HOME] SWITCH KNOWLEDGE BASE event ', event)
     this.displayKnowledgeBase = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchyKnowledgeBase')
   }
 
   async switchCustomizeWidget(event) {
     this.logger.log('[HOME] SWITCH CUSTOMIZE WIDGET event ', event)
     this.displayCustomizeWidget = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchCustomizeWidget')
   }
 
   async switchNewsFeed(event) {
     this.logger.log('[HOME] SWITCH NEWS FEED event ', event)
     this.displayNewsFeed = event;
-    await this.updatesDashletsPreferences()
+    await this.updatesDashletsPreferences('switchNewsFeed')
   }
 
 
 
-  async _updatesDashletsPreferences() {
-    // conast dashletArray =[ {'convsGraph': true, 'analyticsIndicators': true, 'connectWhatsApp': null, 'createChatbot': null, 'knowledgeBase': null, 'inviteTeammate': null,  'customizeWidget': null, 'newsFeed': true}]
-    this.logger.log('[HOME] - updatesDashletsPreferences - displayCustomizeWidget: ', this.displayCustomizeWidget);
-    this.projectService.updateDashletsPreferences(
-      this.displayAnalyticsConvsGraph,
-      this.displayAnalyticsIndicators,
-      this.displayConnectWhatsApp,
-      this.displayCreateChatbot,
-      this.displayKnowledgeBase,
-      this.displayInviteTeammate,
-      this.displayCustomizeWidget,
-      this.displayNewsFeed)
-      .subscribe((res: any) => {
-        this.logger.log('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES - RES ', res);
-
-      }, error => {
-        this.logger.error('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES - ERROR ', error)
-      }, () => {
-        this.logger.log('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES * COMPLETE *')
-        return
-      });
-
+  // async _updatesDashletsPreferences() {
+  //   // conast dashletArray =[ {'convsGraph': true, 'analyticsIndicators': true, 'connectWhatsApp': null, 'createChatbot': null, 'knowledgeBase': null, 'inviteTeammate': null,  'customizeWidget': null, 'newsFeed': true}]
+  //   this.logger.log('[HOME] - updatesDashletsPreferences - displayCustomizeWidget: ', this.displayCustomizeWidget);
+  //   this.projectService.updateDashletsPreferences(
+  //     this.displayAnalyticsConvsGraph,
+  //     this.displayAnalyticsIndicators,
+  //     this.displayConnectWhatsApp,
+  //     this.displayCreateChatbot,
+  //     this.displayKnowledgeBase,
+  //     this.displayInviteTeammate,
+  //     this.displayCustomizeWidget,
+  //     this.displayNewsFeed)
+  //     .subscribe((res: any) => {
+  //       this.logger.log('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES - RES ', res);
 
-  }
+  //     }, error => {
+  //       this.logger.error('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES - ERROR ', error)
+  //     }, () => {
+  //       this.logger.log('[HOME] - UPDATE PRJCT WITH DASHLET PREFERENCES * COMPLETE *')
+  //       return
+  //     });
+  // }
 
-  async updatesDashletsPreferences() {
+  async updatesDashletsPreferences(calledBy) {
     // const dashletArray =[ {'convsGraph': true, 'analyticsIndicators': true, 'connectWhatsApp': null, 'createChatbot': null, 'knowledgeBase': null, 'inviteTeammate': null,  'customizeWidget': null, 'newsFeed': true}]
-    this.logger.log('[HOME] - calling updatesDashletsPreferences - displayCustomizeWidget');
+    this.logger.log('[HOME] - calling updatesDashletsPreferences by ', calledBy);
     return await this.projectService.updateDashletsPreferences(
       this.displayAnalyticsConvsGraph,
       this.displayAnalyticsIndicators,
@@ -3783,9 +3783,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
       })
   }
 
-
-
-
   goToProjects() {
     this.logger.log('[HOME] HAS CLICCKED GO TO PROJECT ')
     this.router.navigate(['/projects']);
diff --git a/src/app/project-edit-add/project-edit-add.component.html b/src/app/project-edit-add/project-edit-add.component.html
index f3bab7d35da0..d2af87952868 100755
--- a/src/app/project-edit-add/project-edit-add.component.html
+++ b/src/app/project-edit-add/project-edit-add.component.html
@@ -98,7 +98,7 @@
 
               </li>
 
-              <li (click)="goToProjectSettings_BannedVisitors()" class="btn-with-border-effect"
+              <li *ngIf="isVisibleBannedVisitor" (click)="goToProjectSettings_BannedVisitors()" class="btn-with-border-effect"
                 [ngClass]="{'li-active': PROJECT_SETTINGS_BANNED_VISITORS_ROUTE, 'border-from-center': PROJECT_SETTINGS_BANNED_VISITORS_ROUTE === false }">
                 <a> {{'BannedVisitors' | translate }} </a>
               </li>
@@ -1359,7 +1359,7 @@ <h3 class="card-title onoffswitch_container_first_line">
                   <!-- END UNASSIGNED CONVERSATION -->
 
                   <!-- TRANSCRIPT BY EMAIL -->
-                  <div class="row" style="margin-top: 40px;">
+                  <div  *ngIf="isVisibleAutoSendTranscript" class="row" style="margin-top: 40px;">
                     <div class="col-md-6">
                       <h3 class="card_title__underlined">
                         <span class="card_title__underline">
@@ -1394,7 +1394,7 @@ <h3 class="card-title onoffswitch_container_first_line">
                   </div>
 
                   <!-- AUTO SEND TRANSCRIPT BY EMAIL BODY -->
-                  <div class="input-wrapper" style="max-width: 992px;">
+                  <div *ngIf="isVisibleAutoSendTranscript" class="input-wrapper" style="max-width: 992px;">
 
                     <div class="row">
                       <div class="col-xs-12 col-sm-10" style="margin-bottom: 12px;">
@@ -1428,8 +1428,8 @@ <h3 class="card-title onoffswitch_container_first_line">
                   </div>
                   <!-- TRANSCRIPT BY EMAIL ./END -->
 
-                  <!-- CUSTOMIZE EMAILS SENT TO AGENTS *ngIf="isVisibleCustomizeEmailTemplate" -->
-                  <div class="row customize-email-template" style="margin-top: 40px;">
+                  <!-- CUSTOMIZE EMAILS SENT TO AGENTS  -->
+                  <div *ngIf="isVisibleCustomizeEmailTemplate" class="row customize-email-template" style="margin-top: 40px;">
                     <div class="col-md-6">
                       <h3 class="card_title__underlined">
                         <span class="card_title__underline">
diff --git a/src/app/project-edit-add/project-edit-add.component.ts b/src/app/project-edit-add/project-edit-add.component.ts
index f3679c61ea50..81c6174fad39 100755
--- a/src/app/project-edit-add/project-edit-add.component.ts
+++ b/src/app/project-edit-add/project-edit-add.component.ts
@@ -130,7 +130,9 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
   isVisibleNotificationTab: boolean;
   isVisibleSecurityTab: boolean;
   isVisibleCustomizeEmailTemplate: boolean
-  isVisibleSMTPsettings: boolean
+  isVisibleSMTPsettings: boolean;
+  isVisibleBannedVisitor: boolean
+  isVisibleAutoSendTranscript: boolean
   max_agent_assigned_chat: number
   reassignment_delay: number
   automatic_idle_chats: number
@@ -622,7 +624,7 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
           // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleSecurityTab', this.isVisibleSecurityTab);
         }
       }
-
+      // Customize the notification email template
       if (key.includes("PET")) {
         // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key', key);
         let pet = key.split(":");
@@ -635,7 +637,7 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
           // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleCustomizeEmailTemplate', this.isVisibleCustomizeEmailTemplate);
         }
       }
-
+      // SMTP settings
       if (key.includes("MTS")) {
         // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key', key);
         let mts = key.split(":");
@@ -649,6 +651,32 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
         }
       }
 
+      if (key.includes("BAN")) {
+        // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key', key);
+        let mts = key.split(":");
+        //  console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - ips key&value', ips);
+        if (mts[1] === "F") {
+          this.isVisibleBannedVisitor = false;
+          // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleBannedVisitor', this.isVisibleBannedVisitor);
+        } else {
+          this.isVisibleBannedVisitor = true;
+          // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleBannedVisitor', this.isVisibleBannedVisitor);
+        }
+      }
+
+      // Auto sendd transcript by email 
+      if (key.includes("AST")) {
+        // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key', key);
+        let mts = key.split(":");
+        //  console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - ips key&value', ips);
+        if (mts[1] === "F") {
+          this.isVisibleAutoSendTranscript = false;
+          // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleAutoSendTranscript', this.isVisibleAutoSendTranscript);
+        } else {
+          this.isVisibleAutoSendTranscript = true;
+          // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - isVisibleAutoSendTranscript', this.isVisibleAutoSendTranscript);
+        }
+      }
     });
 
     if (!this.public_Key.includes("PAY")) {
@@ -686,6 +714,16 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
       this.isVisibleSMTPsettings = false;
     }
 
+    if (!this.public_Key.includes("BAN")) {
+      // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key.includes("BAN")', this.public_Key.includes("BAN"));
+      this.isVisibleBannedVisitor = false;
+    }
+
+    if (!this.public_Key.includes("AST")) {
+      // console.log('PUBLIC-KEY (PROJECT-EDIT-ADD) - key.includes("AST")', this.public_Key.includes("AST"));
+      this.isVisibleAutoSendTranscript = false;
+    }
+
   }
 
   getCurrentUrlAndSwitchView() {
diff --git a/src/app/user-edit-add/user-edit-add.component.html b/src/app/user-edit-add/user-edit-add.component.html
index 77cfc59d1c7e..a6dd3c935be6 100755
--- a/src/app/user-edit-add/user-edit-add.component.html
+++ b/src/app/user-edit-add/user-edit-add.component.html
@@ -19,9 +19,6 @@
   <div class="container-fluid">
 
     <div class="row">
-
-
-
       <div class="col-xs-12" class="alert-exceed-numb-of-seats-allowed"
         *ngIf="prjct_profile_type === 'payment' && subscription_is_active === false">
         <i class="material-icons" style="vertical-align: middle; color: #f44336;">error_outline</i>
@@ -46,7 +43,7 @@
       <!-- -------------------------------------------------- -->
       <!--  PROJECT PROFILE INFO  -->
       <!-- -------------------------------------------------- -->
-      <div class="row">
+      <div class="row" *ngIf="areActivePay">
         <div class="col-md-12">
           <div class="card card card--no-border" style="margin-top: 0px; margin-bottom: 0px;">
             <div class="card-content" *ngIf="(((prjct_profile_type === 'payment' && subscription_is_active === true) || 
diff --git a/src/app/user-edit-add/user-edit-add.component.ts b/src/app/user-edit-add/user-edit-add.component.ts
index 194859296a03..72edb4a020bc 100755
--- a/src/app/user-edit-add/user-edit-add.component.ts
+++ b/src/app/user-edit-add/user-edit-add.component.ts
@@ -94,7 +94,8 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
   successfullyUpdatedNoticationMsg: string;
 
   public_Key: string;
-  isVisibleAdvancedFeatureChatLimit: boolean
+  isVisibleAdvancedFeatureChatLimit: boolean;
+  areActivePay: boolean;
   isUNIS: boolean = false;
 
   onlyOwnerCanManageTheAccountPlanMsg: string;
@@ -172,7 +173,7 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
 
     this.getCurrentProject();
     this.getAllUsersOfCurrentProject();
-    this.getProjectPlan();
+
     this.getPendingInvitation();
     this.getBrowserLang();
     this.getProfileImageStorage();
@@ -244,8 +245,6 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
     let keys = this.public_Key.split("-");
     this.logger.log('[USER-EDIT-ADD] - keys', keys)
     keys.forEach(key => {
-
-
       if (key.includes("PSA")) {
         // this.logger.log('[USER-EDIT-ADD] PUBLIC-KEY - key', key);
         let psa = key.split(":");
@@ -256,6 +255,17 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
           this.isVisibleAdvancedFeatureChatLimit = true;
         }
       }
+
+      if (key.includes("PAY")) {
+        // this.logger.log('[USER-EDIT-ADD] PUBLIC-KEY - key', key);
+        let psa = key.split(":");
+        // this.logger.log('[USER-EDIT-ADD] PUBLIC-KEY - pay key&value', psa);
+        if (psa[1] === "F") {
+          this.areActivePay = false;
+        } else {
+          this.areActivePay = true;
+        }
+      }
     });
 
 
@@ -263,6 +273,12 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
       // this.logger.log('[USER-EDIT-ADD] PUBLIC-KEY - key.includes("PSA")', this.public_Key.includes("PSA"));
       this.isVisibleAdvancedFeatureChatLimit = false;
     }
+
+    if (!this.public_Key.includes("PAY")) {
+      this.areActivePay = false;
+    }
+
+    this.getProjectPlan();
   }
 
   getLoggedUser() {
@@ -410,17 +426,30 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
 
             if (projectProfileData.trial_expired === false) {
               this.prjct_profile_name = PLAN_NAME.B + " (trial)"
-              this.profile_name_for_segment =  PLAN_NAME.B + " (trial)"
-              this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
-              // this.seatsLimit = PLAN_SEATS.free
-              this.tParamsPlanAndSeats = { plan_name: this.prjct_profile_name, allowed_seats_num: this.seatsLimit }
-              this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
+              this.profile_name_for_segment = PLAN_NAME.B + " (trial)"
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
+                // this.seatsLimit = PLAN_SEATS.free
+                this.tParamsPlanAndSeats = { plan_name: this.prjct_profile_name, allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, ' areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              } else {
+                this.seatsLimit = 1000;
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              }
+
             } else {
-              this.prjct_profile_name = "Free";
+              this.prjct_profile_name = "Free plan";
               this.profile_name_for_segment = "Free";
-              this.seatsLimit = PLAN_SEATS.free
-              this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
-              this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS.free
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
+              } else {
+                this.seatsLimit = 1000;
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              }
             }
           } else if (projectProfileData.profile_type === 'payment') {
             if (this.subscription_is_active === true) {
@@ -428,13 +457,13 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
                 if (!this.appSumoProfile) {
                   this.prjct_profile_name = PLAN_NAME.A + " plan";
                   this.seatsLimit = PLAN_SEATS[PLAN_NAME.A]
-                  this.profile_name_for_segment =  PLAN_NAME.A + " plan";
+                  this.profile_name_for_segment = PLAN_NAME.A + " plan";
                   this.tParamsPlanAndSeats = { plan_name: PLAN_NAME.A, allowed_seats_num: this.seatsLimit }
                   this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - PLAN_NAME ', PLAN_NAME.A, ' SEATS LIMIT: ', this.seatsLimit)
                   this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - prjct_profile_name: ', this.prjct_profile_name)
                 } else {
                   this.prjct_profile_name = PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';
-                  this.profile_name_for_segment =  PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';;
+                  this.profile_name_for_segment = PLAN_NAME.A + " plan " + '(' + this.appSumoProfile + ')';;
                   this.seatsLimit = APPSUMO_PLAN_SEATS[projectProfileData.extra3];
                   this.tParamsPlanAndSeats = { plan_name: 'AppSumo ' + this.appSumoProfile, allowed_seats_num: this.seatsLimit }
                   this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - prjct_profile_name ', this.prjct_profile_name, ' SEATS LIMIT: ', this.seatsLimit)
@@ -450,7 +479,7 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
                   this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - prjct_profile_name: ', this.prjct_profile_name)
                 } else {
                   this.prjct_profile_name = PLAN_NAME.B + " plan " + '(' + this.appSumoProfile + ')';
-                  this.profile_name_for_segment =  this.prjct_profile_name
+                  this.profile_name_for_segment = this.prjct_profile_name
                   this.seatsLimit = APPSUMO_PLAN_SEATS[projectProfileData.extra3];
                   this.tParamsPlanAndSeats = { plan_name: 'AppSumo ' + this.appSumoProfile, allowed_seats_num: this.seatsLimit }
                   this.logger.log('[USER-EDIT-ADD] - GET PROJECT PLAN - prjct_profile_name ', this.prjct_profile_name, ' SEATS LIMIT: ', this.seatsLimit)
@@ -966,7 +995,7 @@ export class UserEditAddComponent implements OnInit, OnDestroy {
       if (!isDevMode()) {
         if (window['analytics']) {
           let userFullname = ''
-          if (this.CURRENT_USER.firstname && this.CURRENT_USER.lastname)  {
+          if (this.CURRENT_USER.firstname && this.CURRENT_USER.lastname) {
             userFullname = this.CURRENT_USER.firstname + ' ' + this.CURRENT_USER.lastname
           } else if (this.CURRENT_USER.firstname && !this.CURRENT_USER.lastname) {
             userFullname = this.CURRENT_USER.firstname
diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html
index 8582f7e04ed6..4046bd0b20d1 100755
--- a/src/app/users/users.component.html
+++ b/src/app/users/users.component.html
@@ -9,21 +9,9 @@
 
   <span *ngIf="IS_OPEN_SETTINGS_SIDEBAR">{{ 'Settings' | translate }} </span>
 </span>
-<!-- <span class="navbar-brand navbar-brand-title" style="text-transform: capitalize;">
-  {{ 'Teammates' | translate }}
-</span> -->
 
 
 
-<!-- <ul class="bottom-nav">
-  <li class="btn-with-border-effect li-active">
-    <a style="text-transform: capitalize;"> {{ "Teammates" | translate }} </a>
-  </li>
-  <li *ngIf="isVisible" class="btn-with-border-effect border-from-center" (click)="goToGroups()">
-    <a>{{ "Groups" | translate }} </a>
-  </li>
-</ul> -->
-
 <div class="main-content" style="padding-top:0px; padding-left: 5px;padding-right: 5px;">
   <div class="container-fluid" style="padding-left: 5px;padding-right: 5px;">
 
@@ -39,7 +27,7 @@
           <li class="btn-with-border-effect li-active">
             <a style="text-transform: capitalize;"> {{ "Teammates" | translate }} </a>
           </li>
-          <li *ngIf="isVisible" class="btn-with-border-effect border-from-center" (click)="goToGroups()">
+          <li *ngIf="isVisibleGroups" class="btn-with-border-effect border-from-center" (click)="goToGroups()">
             <a>{{ "Groups" | translate }} </a>
           </li>
         </ul>
@@ -75,7 +63,7 @@
         <!-- -------------------------------------------------- -->
         <!--  PROJECT PROFILE INFO  -->
         <!-- -------------------------------------------------- -->
-        <div class="row">
+        <div class="row" *ngIf="areActivePay">
           <div class="col-md-12">
             <div class="card card card--no-border" style="margin-top: 0px; margin-bottom: 0px;">
               <div class="card-content" *ngIf="(((prjct_profile_type === 'payment' && subscription_is_active === true) ||
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
index c71104697dda..b78745a5ad1a 100755
--- a/src/app/users/users.component.ts
+++ b/src/app/users/users.component.ts
@@ -24,10 +24,7 @@ export class UsersComponent implements OnInit, OnDestroy {
   PLAN_SEATS = PLAN_SEATS;
   APP_SUMO_PLAN_NAME = APP_SUMO_PLAN_NAME;
   APPSUMO_PLAN_SEATS = APPSUMO_PLAN_SEATS;
-  seatsLimit: any;
-  trial_expired: any;
-  tParamsFreePlanSeatsNum: any;
-  tParamsPlanAndSeats: any;
+ 
 
   public_Key: string
   showSpinner = true
@@ -43,7 +40,7 @@ export class UsersComponent implements OnInit, OnDestroy {
   display = 'none'
   displayCancelInvitationModal = 'none'
   project: Project
-  id_project: string
+  
   USER_ROLE: string
   CURRENT_USER_ID: string
   CURRENT_USER: any
@@ -55,14 +52,21 @@ export class UsersComponent implements OnInit, OnDestroy {
 
   deleteProjectUserSuccessNoticationMsg: string
   deleteProjectUserErrorNoticationMsg: string
+
+  id_project: string
   projectPlanAgentsNo: number
   prjct_profile_name: string
   browserLang: string
   prjct_profile_type: any;
   subscription_is_active: any
   subscription_end_date: any
+  seatsLimit: any;
+  trial_expired: any;
+  tParamsFreePlanSeatsNum: any;
+  tParamsPlanAndSeats: any;
   projectUsersLength: number
 
+
   HAS_FINISHED_GET_PROJECT_USERS = false
   HAS_FINISHED_GET_PENDING_USERS = false
   pendingInvitationEmail: string
@@ -76,7 +80,8 @@ export class UsersComponent implements OnInit, OnDestroy {
   canceledInviteSuccessMsg: string
   canceledInviteErrorMsg: string
   subscription: Subscription
-  isVisible: boolean
+  isVisibleGroups: boolean;
+  areActivePay: boolean;
   storageBucket: string
 
   baseUrl: string
@@ -122,7 +127,7 @@ export class UsersComponent implements OnInit, OnDestroy {
     this.getLoggedUser()
     this.hasChangedAvailabilityStatusInSidebar()
     this.getPendingInvitation()
-    this.getProjectPlan()
+
     this.getOSCODE()
     this.getChatUrl()
     this.listenSidebarIsOpened();
@@ -214,14 +219,38 @@ export class UsersComponent implements OnInit, OnDestroy {
         // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro key&value', gro);
 
         if (gro[1] === 'F') {
-          this.isVisible = false
-          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro isVisible', this.isVisible);
+          this.isVisibleGroups = false
+          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro isVisibleGroups', this.isVisibleGroups);
+        } else {
+          this.isVisibleGroups = true
+          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro isVisibleGroups', this.isVisibleGroups);
+        }
+      }
+
+      if (key.includes('PAY')) {
+        // this.logger.log('[USERS] - PUBLIC-KEY (Users) - key', key);
+        let gro = key.split(':')
+        // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro key&value', gro);
+
+        if (gro[1] === 'F') {
+          this.areActivePay = false
+          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - areActivePay', this.areActivePay);
         } else {
-          this.isVisible = true
-          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - gro isVisible', this.isVisible);
+          this.areActivePay = true
+          // this.logger.log('[USERS] - PUBLIC-KEY (Users) - areActivePay', this.areActivePay);
         }
       }
     })
+
+    if (!this.public_Key.includes("GRO")) {
+      this.isVisibleGroups = false;
+    }
+
+    if (!this.public_Key.includes("PAY")) {
+      this.areActivePay = false;
+    }
+
+    this.getProjectPlan()
   }
 
   translateCanceledInviteSuccessMsg() {
@@ -397,15 +426,27 @@ export class UsersComponent implements OnInit, OnDestroy {
           if (projectProfileData.profile_type === 'free') {
             if (projectProfileData.trial_expired === false) {
               this.prjct_profile_name = PLAN_NAME.B + " plan (trial)"
-              this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
-              // this.seatsLimit = PLAN_SEATS.free
-              this.tParamsPlanAndSeats = { plan_name: this.prjct_profile_name, allowed_seats_num: this.seatsLimit }
-              this.logger.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS[PLAN_NAME.B]
+                // this.seatsLimit = PLAN_SEATS.free
+                this.tParamsPlanAndSeats = { plan_name: this.prjct_profile_name, allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              } else {
+                this.seatsLimit = 1000;
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              }
             } else {
               this.prjct_profile_name = "Free plan";
-              this.seatsLimit = PLAN_SEATS.free
-              this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
-              // console.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', 'FREE TRIAL', ' SEATS LIMIT: ', this.seatsLimit)
+              if (this.areActivePay) {
+                this.seatsLimit = PLAN_SEATS.free
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              } else {
+                this.seatsLimit = 1000
+                this.tParamsPlanAndSeats = { plan_name: 'Free', allowed_seats_num: this.seatsLimit }
+                this.logger.log('[USERS] - GET PROJECT PLAN - PLAN_NAME ', this.prjct_profile_name, 'areActivePay', this.areActivePay, ' SEATS LIMIT: ', this.seatsLimit)
+              }
             }
           } else if (projectProfileData.profile_type === 'payment') {
             if (this.subscription_is_active === true) {
@@ -522,10 +563,10 @@ export class UsersComponent implements OnInit, OnDestroy {
 
   getMoreOperatorsSeats() {
     if (this.USER_ROLE === 'owner') {
-      if (!this.appSumoProfile){
+      if (!this.appSumoProfile) {
         this.notify._displayContactUsModal(true, 'upgrade_plan')
       } else {
-        this.router.navigate(['project/' + this.prjct_id  + '/project-settings/payments']);
+        this.router.navigate(['project/' + this.prjct_id + '/project-settings/payments']);
       }
     } else {
       this.presentModalOnlyOwnerCanManageTheAccountPlan()
@@ -807,9 +848,9 @@ export class UsersComponent implements OnInit, OnDestroy {
             } catch (err) {
               this.logger.error('Account Deleted page error', err);
             }
-           
+
             let userFullname = ''
-            if (this.CURRENT_USER.firstname && this.CURRENT_USER.lastname)  {
+            if (this.CURRENT_USER.firstname && this.CURRENT_USER.lastname) {
               userFullname = this.CURRENT_USER.firstname + ' ' + this.CURRENT_USER.lastname
             } else if (this.CURRENT_USER.firstname && !this.CURRENT_USER.lastname) {
               userFullname = this.CURRENT_USER.firstname
@@ -876,8 +917,6 @@ export class UsersComponent implements OnInit, OnDestroy {
   }
 
 
-
-
   // New changeAvailabilityStatus(selecedstatusID: number, projectUser_id: string, ngselectid: number, $event: any) {
   changeAvailabilityStatus(selectedStatusValue: any, projectUser_id: string) {
 
@@ -927,8 +966,7 @@ export class UsersComponent implements OnInit, OnDestroy {
 
 
         this.getUploadEgine()
-      },
-      )
+      },)
   }
 
   // IF THE AVAILABILITY STATUS IS CHANGED BY THE SIDEBAR AVAILABILITY / UNAVAILABILITY BUTTON
diff --git a/src/app/widget_components/widget-set-up/widget-set-up.component.html b/src/app/widget_components/widget-set-up/widget-set-up.component.html
index c7671db6851b..27e9f35c19a0 100755
--- a/src/app/widget_components/widget-set-up/widget-set-up.component.html
+++ b/src/app/widget_components/widget-set-up/widget-set-up.component.html
@@ -1042,8 +1042,8 @@ <h4 class="widget-section-header__title-underlined">
 												<div class="on-page-change-widget-option">
 													<ng-select id="desktop_widget_status" [clearable]="false"
 														[(ngModel)]="desktopWidgetStatus"
-														[items]="widget_status_on_page_change | selectOptionsTranslate" bindLabel="name"
-														bindValue="id" appendTo="body"
+														[items]="widget_status_on_page_change | selectOptionsTranslate"
+														bindLabel="name" bindValue="id" appendTo="body"
 														(change)="onSelectDesktopWidgetStatus()"
 														[disabled]="!desktop_widget_is_visible">
 													</ng-select>
@@ -1283,387 +1283,398 @@ <h4 class="widget-section-header__title-underlined">
 								<!-- ---------------------------------------------------------------------------- -->
 								<!-- @ Unbranding SECTION -->
 								<!-- ---------------------------------------------------------------------------- -->
-								<button type="button" class="widget-section-accordion widget-section-header">
-
-									<div class="widget-section-title">
-										<div class="widget-setting-icon-wrap">
-											<svg xmlns="http://www.w3.org/2000/svg" class="ionicon"
-												viewBox="0 0 512 512">
-												<title>Sparkles</title>
-												<path
-													d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"
-													fill="none" stroke="currentColor" stroke-linecap="round"
-													stroke-linejoin="round" stroke-width="32" />
-											</svg>
+								<!-- <ng-container *ngIf="payIsVisible"> -->
+									<button [ngClass]="{'hide-unbranding': !payIsVisible}" id="unbranding-btn" type="button" class="widget-section-accordion widget-section-header">
+
+										<div class="widget-section-title">
+											<div class="widget-setting-icon-wrap">
+												<svg xmlns="http://www.w3.org/2000/svg" class="ionicon"
+													viewBox="0 0 512 512">
+													<title>Sparkles</title>
+													<path
+														d="M259.92 262.91L216.4 149.77a9 9 0 00-16.8 0l-43.52 113.14a9 9 0 01-5.17 5.17L37.77 311.6a9 9 0 000 16.8l113.14 43.52a9 9 0 015.17 5.17l43.52 113.14a9 9 0 0016.8 0l43.52-113.14a9 9 0 015.17-5.17l113.14-43.52a9 9 0 000-16.8l-113.14-43.52a9 9 0 01-5.17-5.17zM108 68L88 16 68 68 16 88l52 20 20 52 20-52 52-20-52-20zM426.67 117.33L400 48l-26.67 69.33L304 144l69.33 26.67L400 240l26.67-69.33L496 144l-69.33-26.67z"
+														fill="none" stroke="currentColor" stroke-linecap="round"
+														stroke-linejoin="round" stroke-width="32" />
+												</svg>
+											</div>
+											<h4 class="widget-section-header__title-underlined">
+												Unbranding
+												<span class="from-b-plan-badge" *ngIf="featureIsAvailable === false">
+													{{'AvailableFromThePlan' | translate: t_params }}
+												</span>
+											</h4>
 										</div>
-										<h4 class="widget-section-header__title-underlined">
-											Unbranding
-											<span class="from-b-plan-badge" *ngIf="featureIsAvailable === false">
-												{{'AvailableFromThePlan' | translate: t_params }}
-											</span>
-										</h4>
-									</div>
-									<div class="widget-section-arrow">
-										<i class="material-icons widget-section-arrow-icon">
-											keyboard_arrow_down
-										</i>
-									</div>
-								</button>
-								<div class="widget-section-container"
-									[ngClass]="{'feature-not-available' : featureIsAvailable === false}"
-									style="height: auto; transition-duration: 0.613s;">
-									<div class="section-offset">
-										<!-- ---------------------------------------------	 -->
-										<!-- Upgrade plan to get Unbranding features -->
-										<!-- ---------------------------------------------	 -->
-										<div class="form-group"
-											style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 0px;">
+										<div class="widget-section-arrow">
+											<i class="material-icons widget-section-arrow-icon">
+												keyboard_arrow_down
+											</i>
+										</div>
+									</button>
+									<div class="widget-section-container"
+										[ngClass]="{'feature-not-available' : featureIsAvailable === false}"
+										style="height: auto; transition-duration: 0.613s;">
+										<div class="section-offset">
+											<!-- ---------------------------------------------	 -->
+											<!-- Upgrade plan to get Unbranding features -->
+											<!-- ---------------------------------------------	 -->
+											<div class="form-group"
+												style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 0px;">
 
-											<div class="col-xs-12">
-												<button class="btn btn-get-feature-no-boxshadow pull-right"
-													style="margin-bottom: 0px;" *ngIf="(profile_name === PLAN_NAME.A) || 
+												<div class="col-xs-12">
+													<button class="btn btn-get-feature-no-boxshadow pull-right"
+														style="margin-bottom: 0px;" *ngIf="(profile_name === PLAN_NAME.A) || 
 													(profile_name === PLAN_NAME.B && subscription_is_active === false) || 
 													(profile_name === PLAN_NAME.C && subscription_is_active === false) ||
 													(prjct_profile_type === 'free' && prjct_trial_expired === true)" (click)="goToPricing()"
-													matTooltipClass="custom-mat-tooltip-in-widget-setup"
-													matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}"
-													#tooltip="matTooltip" matTooltipPosition='below'
-													matTooltipHideDelay="100">
-													<span class="material-icons-outlined get-feature-upgrade-plan-icon">
-														upgrade
-													</span>
-													<span>
-														{{ 'Pricing.UpgradePlan' | translate }}
-													</span>
-												</button>
+														matTooltipClass="custom-mat-tooltip-in-widget-setup"
+														matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}"
+														#tooltip="matTooltip" matTooltipPosition='below'
+														matTooltipHideDelay="100">
+														<span
+															class="material-icons-outlined get-feature-upgrade-plan-icon">
+															upgrade
+														</span>
+														<span>
+															{{ 'Pricing.UpgradePlan' | translate }}
+														</span>
+													</button>
+												</div>
 											</div>
-										</div>
-										<!-- ------------------------------- -->
-										<!-- Widget  Footer Branding -->
-										<!-- -------------------------------  -->
-										<div class="form-group"
-											style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 0px;">
-											<label class="col-xs-12 control-label  widget-settings-control-head-label">
-												{{ "WidgetFooterBranding" | translate}}
-												<span style="cursor: pointer;"
-													matTooltipClass="custom-mat-tooltip-in-widget-setup"
-													matTooltip=" {{'ToCustomizeTheWidgetFooterWithYourBrand' | translate}}"
-													#tooltip="matTooltip" matTooltipPosition='below'
-													matTooltipHideDelay="100">
-													<i class="material-icons" style="font-size: 18px;
+											<!-- ------------------------------- -->
+											<!-- Widget  Footer Branding -->
+											<!-- -------------------------------  -->
+											<div class="form-group"
+												style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 0px;">
+												<label
+													class="col-xs-12 control-label  widget-settings-control-head-label">
+													{{ "WidgetFooterBranding" | translate}}
+													<span style="cursor: pointer;"
+														matTooltipClass="custom-mat-tooltip-in-widget-setup"
+														matTooltip=" {{'ToCustomizeTheWidgetFooterWithYourBrand' | translate}}"
+														#tooltip="matTooltip" matTooltipPosition='below'
+														matTooltipHideDelay="100">
+														<i class="material-icons" style="font-size: 18px;
 														color: #566787;
 														cursor: pointer;
 														vertical-align: middle;">
-														help_outline
-													</i>
-												</span>
-											</label>
+															help_outline
+														</i>
+													</span>
+												</label>
 
 
-											<div class="col-sm-12">
-												<textarea (focus)="onFocusFooterBranding()" [(ngModel)]="footerBrand"
-													(ngModelChange)="onChangeFooterBrand($event)" rows="3"
-													class="widget-setup-texarea" [disabled]="(profile_name === PLAN_NAME.A) || 
+												<div class="col-sm-12">
+													<textarea (focus)="onFocusFooterBranding()"
+														[(ngModel)]="footerBrand"
+														(ngModelChange)="onChangeFooterBrand($event)" rows="3"
+														class="widget-setup-texarea" [disabled]="(profile_name === PLAN_NAME.A) || 
 													(profile_name === PLAN_NAME.B && subscription_is_active === false) || 
 													(profile_name === PLAN_NAME.C && subscription_is_active === false) ||
 													(prjct_profile_type === 'free' && prjct_trial_expired === true)">	</textarea>
-												<!-- <div *ngIf="footerBrand?.length <= 0"
+													<!-- <div *ngIf="footerBrand?.length <= 0"
 													style="font-size: 11px; color: #f44336;">
 													{{ 'RequiredField' | translate}}
 												</div> -->
+												</div>
 											</div>
-										</div>
 
-										<!-- ---------------------------------------- -->
-										<!-- Custom launcher -->
-										<!-- ---------------------------------------- -->
-										<div class="form-group"
-											style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 12px!important;"
-											[ngClass]="{'custom-launcher-feature-not-available' : prjct_profile_type === 'payment' && subscription_is_active === false || prjct_profile_type === 'free' && prjct_trial_expired === true}">
-											<label class="col-xs-12 control-label widget-settings-control-head-label"
-												style="white-space: nowrap;">
-
-												{{'CustomLauncherButton' | translate }}
-												<span matTooltipClass="custom-mat-tooltip-in-widget-setup"
-													matTooltip=" {{'CustomizeTheWidgetLaunchButtonWithYourLogo' | translate}}"
-													#tooltip="matTooltip" matTooltipPosition='below'
-													matTooltipHideDelay="100">
-													<i class="material-icons" style="font-size: 18px;
+											<!-- ---------------------------------------- -->
+											<!-- Custom launcher -->
+											<!-- ---------------------------------------- -->
+											<div class="form-group"
+												style="max-width: 640px; margin-left: -15px; margin-right: -15px; margin-top: 12px!important;"
+												[ngClass]="{'custom-launcher-feature-not-available' : prjct_profile_type === 'payment' && subscription_is_active === false || prjct_profile_type === 'free' && prjct_trial_expired === true}">
+												<label
+													class="col-xs-12 control-label widget-settings-control-head-label"
+													style="white-space: nowrap;">
+
+													{{'CustomLauncherButton' | translate }}
+													<span matTooltipClass="custom-mat-tooltip-in-widget-setup"
+														matTooltip=" {{'CustomizeTheWidgetLaunchButtonWithYourLogo' | translate}}"
+														#tooltip="matTooltip" matTooltipPosition='below'
+														matTooltipHideDelay="100">
+														<i class="material-icons" style="font-size: 18px;
 														color: #566787;
 														cursor: pointer;
 														vertical-align: middle;">
-														help_outline
-													</i>
-												</span>
-											</label>
-
-											<div class="col-sm-12">
-												<div class="wrapper-custom-launcher" style="margin-top: 3px;">
-													<!-- ------------------------------------------- -->
-													<!-- CUSTOMIZE LAUNCER BUTTON VIA URL  *ngIf="hasOwnLauncherBtn" -->
-													<!-- ------------------------------------------- -->
-													<div class="row">
-														<div class="col-xs-12 col-sm-2">
-															<div *ngIf="hasOwnLauncherBtn === false || featureIsAvailable === false"
-																id="custom-launcher-button-placeholder">
+															help_outline
+														</i>
+													</span>
+												</label>
 
-																<svg version="1.1" id="Livello_1"
-																	xmlns="http://www.w3.org/2000/svg"
-																	xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-																	y="0px" viewBox="0 0 60 60"
-																	style="enable-background:new 0 0 60 60;"
-																	xml:space="preserve">
-																	<style type="text/css">
-																		.launcher-button-placeholder-st0 {
-																			fill: #143448;
-																		}
-
-																		.launcher-button-placeholder-st1 {
-																			fill: none;
-																			stroke: #143448;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																		}
-
-																		.launcher-button-placeholder-st2 {
-																			fill: none;
-																			stroke: #143448;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																			stroke-dasharray: 4, 4;
-																		}
-
-																		.launcher-button-placeholder-st3 {
-																			fill: #506A7B;
-																		}
-																	</style>
-																	<path class="launcher-button-placeholder-st0"
-																		d="M55,30c0,13.8-11.2,25-25,25S5,43.8,5,30S16.2,5,30,5S55,16.2,55,30" />
-																	<g>
+												<div class="col-sm-12">
+													<div class="wrapper-custom-launcher" style="margin-top: 3px;">
+														<!-- ------------------------------------------- -->
+														<!-- CUSTOMIZE LAUNCER BUTTON VIA URL  *ngIf="hasOwnLauncherBtn" -->
+														<!-- ------------------------------------------- -->
+														<div class="row">
+															<div class="col-xs-12 col-sm-2">
+																<div *ngIf="hasOwnLauncherBtn === false || featureIsAvailable === false"
+																	id="custom-launcher-button-placeholder">
+
+																	<svg version="1.1" id="Livello_1"
+																		xmlns="http://www.w3.org/2000/svg"
+																		xmlns:xlink="http://www.w3.org/1999/xlink"
+																		x="0px" y="0px" viewBox="0 0 60 60"
+																		style="enable-background:new 0 0 60 60;"
+																		xml:space="preserve">
+																		<style type="text/css">
+																			.launcher-button-placeholder-st0 {
+																				fill: #143448;
+																			}
+
+																			.launcher-button-placeholder-st1 {
+																				fill: none;
+																				stroke: #143448;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																			}
+
+																			.launcher-button-placeholder-st2 {
+																				fill: none;
+																				stroke: #143448;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																				stroke-dasharray: 4, 4;
+																			}
+
+																			.launcher-button-placeholder-st3 {
+																				fill: #506A7B;
+																			}
+																		</style>
+																		<path class="launcher-button-placeholder-st0"
+																			d="M55,30c0,13.8-11.2,25-25,25S5,43.8,5,30S16.2,5,30,5S55,16.2,55,30" />
 																		<g>
-																			<polyline
-																				class="launcher-button-placeholder-st1"
-																				points="58,56 58,58 56,58 		" />
-																			<line
-																				class="launcher-button-placeholder-st2"
-																				x1="52" y1="58" x2="6" y2="58" />
-																			<polyline
-																				class="launcher-button-placeholder-st1"
-																				points="4,58 2,58 2,56 		" />
-																			<line
-																				class="launcher-button-placeholder-st2"
-																				x1="2" y1="52" x2="2" y2="6" />
-																			<polyline
-																				class="launcher-button-placeholder-st1"
-																				points="2,4 2,2 4,2 		" />
-																			<line
-																				class="launcher-button-placeholder-st2"
-																				x1="8" y1="2" x2="54" y2="2" />
-																			<polyline points="56,2 58,2 58,4 		" />
-																			<line
-																				class="launcher-button-placeholder-st2"
-																				x1="58" y1="8" x2="58" y2="54" />
+																			<g>
+																				<polyline
+																					class="launcher-button-placeholder-st1"
+																					points="58,56 58,58 56,58 		" />
+																				<line
+																					class="launcher-button-placeholder-st2"
+																					x1="52" y1="58" x2="6" y2="58" />
+																				<polyline
+																					class="launcher-button-placeholder-st1"
+																					points="4,58 2,58 2,56 		" />
+																				<line
+																					class="launcher-button-placeholder-st2"
+																					x1="2" y1="52" x2="2" y2="6" />
+																				<polyline
+																					class="launcher-button-placeholder-st1"
+																					points="2,4 2,2 4,2 		" />
+																				<line
+																					class="launcher-button-placeholder-st2"
+																					x1="8" y1="2" x2="54" y2="2" />
+																				<polyline points="56,2 58,2 58,4 		" />
+																				<line
+																					class="launcher-button-placeholder-st2"
+																					x1="58" y1="8" x2="58" y2="54" />
+																			</g>
 																		</g>
-																	</g>
-																	<g>
-																		<path class="launcher-button-placeholder-st3" d="M41.9,28.6H31.6c-0.9,0-1.6-0.7-1.6-1.5v-9.6c0-0.8-0.7-1.5-1.6-1.5H18.1c-0.9,0-1.6,0.7-1.6,1.5v11.2v11.2
+																		<g>
+																			<path
+																				class="launcher-button-placeholder-st3"
+																				d="M41.9,28.6H31.6c-0.9,0-1.6-0.7-1.6-1.5v-9.6c0-0.8-0.7-1.5-1.6-1.5H18.1c-0.9,0-1.6,0.7-1.6,1.5v11.2v11.2
 																			c0,0.8,0.7,1.5,1.6,1.5h-0.7h1.9c0.4,0,0.7,0.1,1,0.4l1.2,1.1l1.1,1c0.4,0.3,0.9,0.3,1.3,0l1.1-1l1.2-1.1c0.3-0.2,0.6-0.4,1-0.4
 																			h14.7c0.9,0,1.6-0.7,1.6-1.5v-9.6C43.5,29.3,42.7,28.6,41.9,28.6" />
-																		<path class="launcher-button-placeholder-st3" d="M42.5,26.6h-9.3c-0.5,0-1-0.4-1-0.9v-8.8c0-0.5,0.4-0.9,1-0.9h9.3c0.5,0,1,0.4,1,0.9v8.8
+																			<path
+																				class="launcher-button-placeholder-st3"
+																				d="M42.5,26.6h-9.3c-0.5,0-1-0.4-1-0.9v-8.8c0-0.5,0.4-0.9,1-0.9h9.3c0.5,0,1,0.4,1,0.9v8.8
 																			C43.5,26.1,43,26.6,42.5,26.6" />
-																	</g>
-																</svg>
-															</div>
-															<!-- ---------------------------------------------- -->
-															<!-- Custom launcher button IMG of the end-user  -->
-															<!-- ----------------------------------------------  -->
-															<ng-container *ngIf="featureIsAvailable === true">
-																<div *ngIf="hasOwnLauncherBtn === true"
-																	id="custom-launcher-button-in-widget-setup">
-																	<img alt="custom-launcher-logo"
-																		[src]="customLauncherURL"
-																		style="height: 60px; width: 60">
+																		</g>
+																	</svg>
 																</div>
-															</ng-container>
-														</div>
+																<!-- ---------------------------------------------- -->
+																<!-- Custom launcher button IMG of the end-user  -->
+																<!-- ----------------------------------------------  -->
+																<ng-container *ngIf="featureIsAvailable === true">
+																	<div *ngIf="hasOwnLauncherBtn === true"
+																		id="custom-launcher-button-in-widget-setup">
+																		<img alt="custom-launcher-logo"
+																			[src]="customLauncherURL"
+																			style="height: 60px; width: 60">
+																	</div>
+																</ng-container>
+															</div>
 
-														<div class="col-xs-12 col-sm-10">
-															<div class="row">
-																<div class="col-xs-12">
-																	<label
-																		class="control-label widget-settings-control-label launcher-button-label">
-																		{{'LauncherButtonURL' | translate}}
-																	</label>
-																</div>
-																<div class="col-xs-12">
-																	<!-- ------------------------------------------------------  -->
-																	<!-- Input to enter the URL of the custom launcher button  -->
-																	<!-- ------------------------------------------------------  -->
-																	<input class="custom-input"
-																		id="change-launcher-logo"
-																		(focus)="onFocuCustomLauncherURLInput()"
-																		(ngModelChange)="launcherLogoChange($event)"
-																		[(ngModel)]="customLauncherURL"
-																		style="font-weight: 400;max-width: 100% !important;"
-																		[ngClass]="{'image-not-exist-input-border' : CUSTOM_LAUNCHER_LOGO_EXIST === false}"
-																		placeholder="{{ 'EnterTheURLOfTheLauncherButtonImage' | translate }}"
-																		[disabled]="featureIsAvailable === false">
-
-																	<span *ngIf="IMAGE_EXIST === false"
-																		style="color:#f44336; display: block;font-size: 12px;">
-																		{{ "LogoImageNotFound" | translate}}
-																	</span>
-																</div>
+															<div class="col-xs-12 col-sm-10">
+																<div class="row">
+																	<div class="col-xs-12">
+																		<label
+																			class="control-label widget-settings-control-label launcher-button-label">
+																			{{'LauncherButtonURL' | translate}}
+																		</label>
+																	</div>
+																	<div class="col-xs-12">
+																		<!-- ------------------------------------------------------  -->
+																		<!-- Input to enter the URL of the custom launcher button  -->
+																		<!-- ------------------------------------------------------  -->
+																		<input class="custom-input"
+																			id="change-launcher-logo"
+																			(focus)="onFocuCustomLauncherURLInput()"
+																			(ngModelChange)="launcherLogoChange($event)"
+																			[(ngModel)]="customLauncherURL"
+																			style="font-weight: 400;max-width: 100% !important;"
+																			[ngClass]="{'image-not-exist-input-border' : CUSTOM_LAUNCHER_LOGO_EXIST === false}"
+																			placeholder="{{ 'EnterTheURLOfTheLauncherButtonImage' | translate }}"
+																			[disabled]="featureIsAvailable === false">
+
+																		<span *ngIf="IMAGE_EXIST === false"
+																			style="color:#f44336; display: block;font-size: 12px;">
+																			{{ "LogoImageNotFound" | translate}}
+																		</span>
+																	</div>
 
+																</div>
 															</div>
 														</div>
-													</div>
-													<!-- ------------------------------------------- -->
-													<!-- CUSTOMIZE LAUNCER BUTTON VIA UPLOAD LOGO -->
-													<!-- ------------------------------------------- -->
-													<div class="row" style="display: none;">
-														<div class="col-xs-2">
-															<div *ngIf="hasOwnLauncherLogo === false || featureIsAvailable === false"
-																id="custom-launcher-logo-placeholder">
-
-																<svg version="1.1" id="Livello_1"
-																	xmlns="http://www.w3.org/2000/svg"
-																	xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-																	y="0px" viewBox="0 0 60 60"
-																	style="enable-background:new 0 0 60 60;"
-																	xml:space="preserve">
-																	<style type="text/css">
-																		.lb-st0 {
-																			fill: none;
-																			stroke: #FDFEFF;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																		}
-
-																		.lb-st1 {
-																			fill: none;
-																			stroke: #FFFFFF;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																		}
-
-																		.lb-st2 {
-																			fill: none;
-																			stroke: #FCFCFC;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																		}
-
-																		.lb-st3 {
-																			fill: #143448;
-																		}
-
-																		.lb-st4 {
-																			fill: #506A7B;
-																		}
-
-																		.lb-st5 {
-																			fill: none;
-																			stroke: #FFFFFF;
-																			stroke-width: 2;
-																			stroke-miterlimit: 10;
-																			stroke-dasharray: 4, 4;
-																		}
-																	</style>
-																	<polyline class="lb-st0"
-																		points="31,29 31,31 29,31 " />
-																	<polyline class="lb-st1"
-																		points="31,31 29,31 29,29 " />
-																	<polyline class="lb-st2"
-																		points="29,31 29,29 31,29 " />
-																	<polyline class="lb-st0"
-																		points="29,29 31,29 31,31 " />
-																	<g>
-																		<path class="lb-st3"
-																			d="M55,30c0,13.8-11.2,25-25,25S5,43.8,5,30S16.2,5,30,5S55,16.2,55,30" />
+														<!-- ------------------------------------------- -->
+														<!-- CUSTOMIZE LAUNCER BUTTON VIA UPLOAD LOGO -->
+														<!-- ------------------------------------------- -->
+														<div class="row" style="display: none;">
+															<div class="col-xs-2">
+																<div *ngIf="hasOwnLauncherLogo === false || featureIsAvailable === false"
+																	id="custom-launcher-logo-placeholder">
+
+																	<svg version="1.1" id="Livello_1"
+																		xmlns="http://www.w3.org/2000/svg"
+																		xmlns:xlink="http://www.w3.org/1999/xlink"
+																		x="0px" y="0px" viewBox="0 0 60 60"
+																		style="enable-background:new 0 0 60 60;"
+																		xml:space="preserve">
+																		<style type="text/css">
+																			.lb-st0 {
+																				fill: none;
+																				stroke: #FDFEFF;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																			}
+
+																			.lb-st1 {
+																				fill: none;
+																				stroke: #FFFFFF;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																			}
+
+																			.lb-st2 {
+																				fill: none;
+																				stroke: #FCFCFC;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																			}
+
+																			.lb-st3 {
+																				fill: #143448;
+																			}
+
+																			.lb-st4 {
+																				fill: #506A7B;
+																			}
+
+																			.lb-st5 {
+																				fill: none;
+																				stroke: #FFFFFF;
+																				stroke-width: 2;
+																				stroke-miterlimit: 10;
+																				stroke-dasharray: 4, 4;
+																			}
+																		</style>
+																		<polyline class="lb-st0"
+																			points="31,29 31,31 29,31 " />
+																		<polyline class="lb-st1"
+																			points="31,31 29,31 29,29 " />
+																		<polyline class="lb-st2"
+																			points="29,31 29,29 31,29 " />
+																		<polyline class="lb-st0"
+																			points="29,29 31,29 31,31 " />
 																		<g>
-																			<path class="lb-st4" d="M38.8,29h-7.6c-0.7,0-1.2-0.5-1.2-1.1v-7.1c0-0.6-0.5-1.1-1.2-1.1h-7.6c-0.7,0-1.2,0.5-1.2,1.1v8.3v8.3
+																			<path class="lb-st3"
+																				d="M55,30c0,13.8-11.2,25-25,25S5,43.8,5,30S16.2,5,30,5S55,16.2,55,30" />
+																			<g>
+																				<path class="lb-st4" d="M38.8,29h-7.6c-0.7,0-1.2-0.5-1.2-1.1v-7.1c0-0.6-0.5-1.1-1.2-1.1h-7.6c-0.7,0-1.2,0.5-1.2,1.1v8.3v8.3
 																				c0,0.6,0.5,1.1,1.2,1.1h-0.5h1.4c0.3,0,0.5,0.1,0.7,0.3l0.9,0.8l0.8,0.7c0.3,0.2,0.7,0.2,1,0l0.8-0.7l0.9-0.8
 																				c0.2-0.1,0.4-0.3,0.7-0.3h10.9c0.7,0,1.2-0.5,1.2-1.1v-7.1C40,29.5,39.4,29,38.8,29" />
-																			<path class="lb-st4" d="M39.3,27.5h-6.9c-0.4,0-0.7-0.3-0.7-0.7v-6.5c0-0.4,0.3-0.7,0.7-0.7h6.9c0.4,0,0.7,0.3,0.7,0.7v6.5
+																				<path class="lb-st4" d="M39.3,27.5h-6.9c-0.4,0-0.7-0.3-0.7-0.7v-6.5c0-0.4,0.3-0.7,0.7-0.7h6.9c0.4,0,0.7,0.3,0.7,0.7v6.5
 																				C40,27.1,39.6,27.5,39.3,27.5" />
+																			</g>
 																		</g>
-																	</g>
-																	<rect x="15" y="15" class="lb-st5" width="30"
-																		height="30" />
-																</svg>
+																		<rect x="15" y="15" class="lb-st5" width="30"
+																			height="30" />
+																	</svg>
 
-															</div>
-															<!-- ---------------------------------------------- -->
-															<!-- Custom launcher button IMG of the end-user  -->
-															<!-- ----------------------------------------------  -->
-															<ng-container *ngIf="featureIsAvailable === true">
-																<div *ngIf="hasOwnLauncherLogo === true"
-																	id="custom-launcher-logo-in-widget-setup">
-																	<img alt="custom-launcher-logo"
-																		[src]="getLauncherLogoUrl()"
-																		style="height: 60px; width: 60px; object-fit: cover;">
 																</div>
-															</ng-container>
-														</div>
+																<!-- ---------------------------------------------- -->
+																<!-- Custom launcher button IMG of the end-user  -->
+																<!-- ----------------------------------------------  -->
+																<ng-container *ngIf="featureIsAvailable === true">
+																	<div *ngIf="hasOwnLauncherLogo === true"
+																		id="custom-launcher-logo-in-widget-setup">
+																		<img alt="custom-launcher-logo"
+																			[src]="getLauncherLogoUrl()"
+																			style="height: 60px; width: 60px; object-fit: cover;">
+																	</div>
+																</ng-container>
+															</div>
 
-														<div class="col-xs-10">
-															<div class="row">
-																<div class="col-xs-12">
-																	<input #fileInputLauncherBtnlogo class="inputfile"
-																		name="upload-launcher-button-logo"
-																		id="upload-launcher-button-logo" type="file"
-																		(change)="uploadLauncherButtonLogo($event)"
-																		accept=".jpg, .JPEG, .png, .svg"
-																		[disabled]="hasOwnLauncherBtn" />
-																	<!-- [matTooltipDisabled]="hasOwnLauncherBtn" -->
-																	<label class="btn btn-white upload-launcher-btn"
-																		for="upload-launcher-button-logo"
-																		matTooltipClass="custom-mat-tooltip"
-																		matTooltip="Edit App" #tooltip="matTooltip"
-																		matTooltipPosition='above'
-																		matTooltipHideDelay="100"
-																		[matTooltipDisabled]="!hasOwnLauncherBtn">
-																		<span class="material-icons">
-																			file_upload
-																		</span>
-																		{{'UploadYourLogo' | translate}}
-																	</label>
-
-																	<button
-																		class="btn btn-white delete-custom-launcher-logo"
-																		(click)="deleteCustomLauncherLogo()">
-																		<span class="material-icons"
-																			style="font-size: 24px;">
-																			delete_forever
-																		</span>
-																	</button>
+															<div class="col-xs-10">
+																<div class="row">
+																	<div class="col-xs-12">
+																		<input #fileInputLauncherBtnlogo
+																			class="inputfile"
+																			name="upload-launcher-button-logo"
+																			id="upload-launcher-button-logo" type="file"
+																			(change)="uploadLauncherButtonLogo($event)"
+																			accept=".jpg, .JPEG, .png, .svg"
+																			[disabled]="hasOwnLauncherBtn" />
+																		<!-- [matTooltipDisabled]="hasOwnLauncherBtn" -->
+																		<label class="btn btn-white upload-launcher-btn"
+																			for="upload-launcher-button-logo"
+																			matTooltipClass="custom-mat-tooltip"
+																			matTooltip="Edit App" #tooltip="matTooltip"
+																			matTooltipPosition='above'
+																			matTooltipHideDelay="100"
+																			[matTooltipDisabled]="!hasOwnLauncherBtn">
+																			<span class="material-icons">
+																				file_upload
+																			</span>
+																			{{'UploadYourLogo' | translate}}
+																		</label>
+
+																		<button
+																			class="btn btn-white delete-custom-launcher-logo"
+																			(click)="deleteCustomLauncherLogo()">
+																			<span class="material-icons"
+																				style="font-size: 24px;">
+																				delete_forever
+																			</span>
+																		</button>
+																	</div>
 																</div>
 															</div>
 														</div>
 													</div>
 												</div>
 											</div>
-										</div>
 
-										<!-- ------------------------------------- -->
-										<!-- Save -->
-										<!-- ------------------------------------- -->
-										<div class="form-group"
-											style="max-width: 640px; margin-left: -15px; 	margin-right: -15px;">
+											<!-- ------------------------------------- -->
+											<!-- Save -->
+											<!-- ------------------------------------- -->
+											<div class="form-group"
+												style="max-width: 640px; margin-left: -15px; 	margin-right: -15px;">
 
-											<div class="col-sm-12">
+												<div class="col-sm-12">
 
-												<button class="btn btn-success-no-boxshadow  footerbrand-save-btn"
-													style="margin-top: 15px; margin-bottom: 15px;font-size: 12px; letter-spacing: 1px;"
-													(click)="saveFooterBrandAndLauncherBtn()"
-													[disabled]="prjct_profile_type === 'payment' && subscription_is_active === false || prjct_profile_type === 'free' && prjct_trial_expired === true">
-													{{ 'UpdateWidget' | translate }}
-												</button>
+													<button class="btn btn-success-no-boxshadow  footerbrand-save-btn"
+														style="margin-top: 15px; margin-bottom: 15px;font-size: 12px; letter-spacing: 1px;"
+														(click)="saveFooterBrandAndLauncherBtn()"
+														[disabled]="prjct_profile_type === 'payment' && subscription_is_active === false || prjct_profile_type === 'free' && prjct_trial_expired === true">
+														{{ 'UpdateWidget' | translate }}
+													</button>
+												</div>
 											</div>
 										</div>
 									</div>
-								</div>
+								<!-- </ng-container> -->
 								<!-- / end Unbranding section -->
 
 
@@ -2079,8 +2090,10 @@ <h4 class="widget-section-header__title-underlined">
 															</span>
 															<span class="widget_design__Tooltiptext"
 																style="margin-left: -108px;min-width: 212px;height:fit-content">
-																{{'AverageReplyTimeIsCalculatedOverLastFourHours' 	| 	translate}}.
-																{{ 'IfYouHavenNotHadConversationsInTheLastFourHours' | 	translate}}
+																{{'AverageReplyTimeIsCalculatedOverLastFourHours' |
+																translate}}.
+																{{ 'IfYouHavenNotHadConversationsInTheLastFourHours' |
+																translate}}
 
 																<span style="font-style: italic;">
 																	{{waitingTimeNotFoundMsg}}
@@ -2130,7 +2143,8 @@ <h4 class="widget-section-header__title-underlined">
 													<ul class="custom-logo-note"
 														style="margin-bottom:0px;list-style-type: none;padding-left: 0px;max-width: 300px;">
 														<li>
-															{{ 'YourContactsSeeThisMessageIfARTIsNotAvailable' | translate 	}}
+															{{ 'YourContactsSeeThisMessageIfARTIsNotAvailable' |
+															translate }}
 														</li>
 													</ul>
 												</div>
@@ -2662,7 +2676,7 @@ <h4 class="widget-section-header__title-underlined">
 																						[checked]="field.mandatory">
 																					<span
 																						style="position: relative;top: 3px;">
-																						{{'Mandatory' |	translate}}
+																						{{'Mandatory' | translate}}
 																					</span>
 																				</label>
 																			</div>
diff --git a/src/app/widget_components/widget-set-up/widget-set-up.component.scss b/src/app/widget_components/widget-set-up/widget-set-up.component.scss
index e0af7fe5aa53..e68e2941d6f0 100755
--- a/src/app/widget_components/widget-set-up/widget-set-up.component.scss
+++ b/src/app/widget_components/widget-set-up/widget-set-up.component.scss
@@ -3033,6 +3033,10 @@ pre {
   padding-bottom: 8px !important;
 }
 
+.hide-unbranding {
+display: none;
+}
+
 // .delete-custom-launcher-logo:hover {
 //   background: #8d021f;
 // }
diff --git a/src/app/widget_components/widget-set-up/widget-set-up.component.ts b/src/app/widget_components/widget-set-up/widget-set-up.component.ts
index 4750cad7d644..9fc868dbaedb 100755
--- a/src/app/widget_components/widget-set-up/widget-set-up.component.ts
+++ b/src/app/widget_components/widget-set-up/widget-set-up.component.ts
@@ -1130,6 +1130,7 @@ export class WidgetSetUp extends WidgetSetUpBaseComponent implements OnInit, Aft
     var acc = document.getElementsByClassName("widget-section-accordion");
     // this.logger.log('[WIDGET-SET-UP] ACCORDION', acc);
     var i: number;
+    // #widget-all-settings-form > button:nth-child(7)
     for (i = 0; i < acc.length; i++) {
       this.logger.log('[WIDGET-SET-UP] ACCORDION i', i, 'acc[i]', acc[i]);
       // Open the first accordion https://codepen.io/fpavision/details/xxxONGv
@@ -1147,6 +1148,8 @@ export class WidgetSetUp extends WidgetSetUpBaseComponent implements OnInit, Aft
 
 
       var arrow_icon_div = firstAccordion.children[1];
+
+      
       // this.logger.log('[WIDGET-SET-UP] ACCORDION ARROW ICON WRAP DIV', arrow_icon_div);
 
       var arrow_icon = arrow_icon_div.children[0]
diff --git a/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.html b/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.html
index 8c4d689569c9..55513a66cc41 100755
--- a/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.html
+++ b/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.html
@@ -146,7 +146,7 @@
           <!-- ---------------------------------------------------------------- -->
           <!-- Filters - right section -->
           <!-- ---------------------------------------------------------------- -->
-          <div class="filters-on-right">
+          <div *ngIf="payIsVisible" class="filters-on-right">
             <button class="btn pull-right export-to-csv-btn btn-gray-no-boxshadow"
               style="max-height: 38px; margin-top: 20px;" (click)="exportRequestsToCSV()">
               <span class="material-icons" style="vertical-align: middle; margin-bottom: 0px; margin-top: 0px;">
@@ -360,13 +360,13 @@
   <div class="row" *ngIf="IS_HERE_FOR_HISTORY">
     <div class="col-md-12">
       <div
-        *ngIf="prjct_profile_type === 'payment' && subscription_is_active === false ||  prjct_profile_type === 'free' && trial_expired === true">
+        *ngIf="prjct_profile_type === 'payment' && subscription_is_active === false ||  prjct_profile_type === 'free' && trial_expired === true || !payIsVisible">
         <!-- card--no-border -->
         <div class="card " style="margin-top: 6px; margin-bottom: 0px;">
           <div class="card-content">
 
             <i class="material-icons" style="vertical-align: middle; color: #3ea9f5;">info</i>
-            <span class="msg-alert">
+            <span class="msg-alert" >
               <!-- History is only available for the past 14 days. Renew your subscription for unlimited chat history -->
               {{ 'HistoryPage.HistoryIsOnlyAvailableForThePast14Days' | translate }}.
               <span *ngIf="payIsVisible">