diff --git a/CHANGELOG.md b/CHANGELOG.md
index d72bd40e3afe..586d1a386f25 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,23 @@
 # tiledesk-dashboard
 
-### 2.7.33
-- Adds, on the History page, the ability to filter by conversation duration
+### 2.7.34-rc4
+- Refactors table in Monitor page 
+- Improves handling of alert windows display
 
-### 2.7.32
+### 2.7.34-rc3
+- AI settings and KB preview bug fixing
+
+### 2.7.34-rc2
+- Minor improvements
+
+### 2.7.34-rc1
+- Adds the ability to select the indexing type for Knowledge Base URL contents
+- Adds to AI models used by knowledge bases the ability to add an advanced context and to visualize the contents sources
+
+### 2.7.33-rc1
+- Adds, on the History page, the ability to filter by conversation duration 
+
+### 2.7.32-rc1
 - Moves the menu item "Apps" from the sidebar to the setting sidebar
 
 ### 2.7.31
@@ -48,9 +62,15 @@
 - Adds the ability to select the launch block when a conversation is manually assigned to a chatbot
 - Improves the method to get the number of conversations in the monitor page
 
+### 2.7.19-rc1
+- Adds the ability to select the launch block when a conversation is manually assigned to a chatbot
+
 ### 2.7.18
 - Minor improvements and bug fixing
 
+### 2.7.18-rc1
+- Improves the method to get the number of conversations in the monitor page
+
 ### 2.7.17
 - Removes the ability to customize the quotas email template
 - Implements the icons for the SMS channel
@@ -99,6 +119,9 @@
 - Deploys in production
 - Adds the knowledge base walkthrough on the knowledge base page
 
+### 2.7.7-rc1
+- Adds the knowledge base walkthrough on the knowledge base page
+
 ### 2.7.6
 - Deploys in production
 - Adds a warning banner to the home page that displays when the user has used up one or more of his monthly resources
@@ -110,10 +133,21 @@
 ### 2.7.4
 - Added Time Slots in Operating Hours page
 
+### 2.7.4-rc1
+- Fix saving operation hours bug
+
 ### 2.7.3
 - Adds the ability, during onboarding, to create a chatbot that automatically answers questions based on the contents of the Knowledge Base
 - Improves the knowledge base page
 
+### 2.7.3-rc2
+- Adds the ability, during onboarding, to create a chatbot that automatically answers questions based on the contents of the Knowledge Base
+- Improves the knowledge base page 
+- Improves time slots UI
+
+### 2.7.3-rc1
+- Kb onboarding
+
 ### 2.7.2
 - Deploys in production
 - Adds GPT-4o mini language model
@@ -127,24 +161,61 @@
 - Adds the ability to edit the "Quota checkpoint notification" email template
 - Adds Twilio SMS channel integration  
 
+### 2.6.45-rc2
+- Improves time slots UI
+- Added translations for time slots
+
+### 2.6.45-rc1
+- Added time slots in Operating Hours
+
 ### 2.6.44
 - Deploys in production
 - Adds the option "Teammates can only see their own conversations" in the Project Settings > Advanced tab
 - Improvements and bug fixing
 
+### 2.6.44-rc4
+- Improvements and bug fixing
+
+### 2.6.44-rc3
+- Adds the option "Teammates can only see their own conversations" in the Project Settings > Advanced tab
+
+### 2.6.44-rc2
+- Fix vxml voice integration visibility
+
+### 2.6.44-rc1
+- Added vxml voice integration
+- Added twilio sms integration
+
 ### 2.6.43
 - Deploys in production
 - Improves the quota usage widget
 - Minor improvements
 
+### 2.6.43-rc2
+- Improves Knowledge Bases page
+
+### 2.6.43-rc1
+- Improves quotes widget
+- Added voice-vxml and sms-twilio channel in analytics
+
 ### 2.6.42
 - Deploys in production
 - Displays all the indexed chunks of a content on the "Manage your Knowledge Bases" page
 
+### 2.6.42-rc1
+- Displays all the indexed chunks of a content on the "Manage your Knowledge Bases" page
+
 ### 2.6.41
 - Deploys in production
 - Displays information about the Voice channel
 
+### 2.6.41-rc2
+- Adds the Voice Channel integration 
+
+### 2.6.41-rc1
+- Deploys in production
+- Displays information about the Voice channel
+
 ### 2.6.40
 - Deploys in production
 - Displays a dialog box that allows to update the plan when the knowledge bases limit is reached
diff --git a/package-lock.json b/package-lock.json
index 7a65df162768..0f8e19262e19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-dashboard",
-  "version": "2.7.33",
+  "version": "2.7.34-rc4",
   "lockfileVersion": 1,
   "requires": true,
   "packages": {
@@ -16347,7 +16347,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -16646,7 +16645,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -16854,7 +16852,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "deprecated": "Glob versions prior to v9 are no longer supported",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
diff --git a/package.json b/package.json
index 19057981eb23..65e13ef0e36c 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tiledesk/tiledesk-dashboard",
-  "version": "2.7.33",
+  "version": "2.7.34-rc4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --aot",
diff --git a/src/app/app-store/app-store.component.html b/src/app/app-store/app-store.component.html
index cc70fcffd820..379b5e15a443 100644
--- a/src/app/app-store/app-store.component.html
+++ b/src/app/app-store/app-store.component.html
@@ -123,16 +123,20 @@ <h4 class="card-create-app-text">
 
                   <ng-container
                     *ngIf="projectProfileData?.extra3 && projectProfileData?.extra3 !== 'tiledesk_tier3' && projectProfileData?.extra3 !== 'tiledesk_tier4'">
-                    <div class="available-from-b-plan-badge b-plan-badge-color"
+                    <div class="available-from-b-plan-badge"
                       *ngIf="(app?.title === 'Zapier') || (app?.title === 'WhatsApp Business') || (app?.title === 'Facebook Messenger') || (app?.title === 'Help Center')">
-                      {{ 'AvailableFromThePlan' | translate: tParamsAvailableFromAppSumoTier3 }}
+                      <div class="b--plan-badge-color">
+                        {{ 'AvailableFromThePlan' | translate: tParamsAvailableFromAppSumoTier3 }}
+                      </div>
                     </div>
                   </ng-container>
 
                   <ng-container *ngIf="dispayBadgeAvaibleFromInAppStore ">
-                    <div class="available-from-b-plan-badge b-plan-badge-color"
+                    <div class="available-from-b-plan-badge"
                       *ngIf="((app?.title === 'Zapier') || (app?.title === 'WhatsApp Business') || (app?.title === 'Facebook Messenger') || (app?.title === 'Help Center') || (app?.title === 'Send transcript by email'))">
-                      {{ 'AvailableFromThePlans' | translate: tParamsAvailableFromTier2 }}
+                      <div class="b--plan-badge-color">
+                        {{ 'AvailableFromThePlans' | translate: tParamsAvailableFromTier2 }}
+                      </div>
                     </div>
                   </ng-container>
 
diff --git a/src/app/app-store/app-store.component.scss b/src/app/app-store/app-store.component.scss
index ee54c6e6b904..107b3c15e7af 100644
--- a/src/app/app-store/app-store.component.scss
+++ b/src/app/app-store/app-store.component.scss
@@ -9,9 +9,10 @@
 }
 
 .card-app-store {
-    box-shadow: unset;
-    border: 1px solid #e5effe;
+    box-shadow: 0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a !important ;
+    // border: 1px solid #e5effe;
     margin-top: 15px !important;
+    border-radius: 12px !important;
     // transition: border 0s,box-shadow 0.4s ease-out,transform 0.4s ease-out,opacity 0.4s ease-out;
     // transition-delay: 0.1s;
     // transform: translateZ(0);
@@ -85,6 +86,7 @@
 .app-installed-wpr {
     background-color: #7aeb8d;
     height: 41px;
+    border-bottom-right-radius: 12px;
 }
 
 .app-not-installed-wpr {
@@ -210,6 +212,23 @@
     text-decoration: underline;
 }
 
+.available-from-b-plan-badge {
+    position: relative;
+   
+}
+
+.b--plan-badge-color {
+    color: #00a1c2;
+    background: rgba(0, 161, 194, .3);
+    width: fit-content;
+    padding: 0px 3px;
+    border-radius: 4px;
+    font-weight: 400;
+    font-size: 12px;
+    position: absolute;
+    top: -23px;
+}
+
 // .app-alert>div>.link-to-integrations:hover { 
 //     font-weight: 600;
 //     text-decoration: underline;
diff --git a/src/app/app-store/app-store.component.ts b/src/app/app-store/app-store.component.ts
index ecaa42bd023e..bf0562b62d26 100644
--- a/src/app/app-store/app-store.component.ts
+++ b/src/app/app-store/app-store.component.ts
@@ -53,6 +53,7 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
   USER_ROLE: string;
   public_Key: string;
   isVisiblePAY: boolean;
+  overridePay: boolean;
   // areVisiblePaidApps: boolean = false;
   agentCannotManageAdvancedOptions: string;
   learnMoreAboutDefaultRoles: string;
@@ -218,6 +219,16 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
         }
       }
 
+      if (key.includes("OVP")) {
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.overridePay = false;
+        } else {
+          this.overridePay = true;
+        }
+      }
+
       // if (key.includes("DPA")) {
 
       //   let paidApps = key.split(":");
@@ -238,9 +249,9 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
     if (!this.public_Key.includes("PAY")) {
       this.isVisiblePAY = false;
     }
-    // if (!this.public_Key.includes("DPA")) {
-    //   this.areVisiblePaidApps = false;
-    // }
+    if (!this.public_Key.includes("OVP")) {
+      this.overridePay = false;
+    }
   }
 
   getCurrentProject() {
@@ -355,8 +366,9 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
         (this.profile_name === 'free' && this.trial_expired === true))) {
 
       if (!this.appSumoProfile) {
-        
-        // this.presentModalFeautureAvailableFromTier2Plan(this.featureAvailableFromBPlan)
+
+
+
         this.presentModalFeautureAvailableFromTier2Plan(this.featureAvailableFromEPlan)
         return false
       } else {
@@ -780,96 +792,58 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
   // Modals
   // -----------------------------
   presentModalFeautureAvailableFromTier2Plan(planName) {
-    this.logger.log('presentModalFeautureAvailableFromTier2Plan', planName)
-    const el = document.createElement('div')
-    el.innerHTML = planName //this.featureAvailableFromBPlan
-    // swal({
-    //   // title: this.onlyOwnerCanManageTheAccountPlanMsg,
-    //   content: el,
-    //   icon: "info",
-    //   // buttons: true,
-    //   buttons: {
-    //     cancel: this.cancel,
-    //     catch: {
-    //       text: this.upgradePlan,
-    //       value: "catch",
-    //     },
-    //   },
-    //   dangerMode: false,
-    // }).then((value) => {
-    //   if (value === 'catch') {
-    //     this.logger.log('presentModalFeautureAvailableFromTier2Plan value', value)
-    //     // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
-    //     // this.logger.log('[APP-STORE] subscription_is_active', this.subscription_is_active)
-    //     // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
-    //     // this.logger.log('[APP-STORE] trial_expired', this.trial_expired)
-    //     this.logger.log('[APP-STORE] isVisiblePAY', this.isVisiblePAY)
-    //     if (this.isVisiblePAY) {
-    //       // this.logger.log('[APP-STORE] HERE 1')
-    //       if (this.USER_ROLE === 'owner') {
-    //         // this.logger.log('[APP-STORE] HERE 2')
-    //         if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-    //           // this.logger.log('[APP-STORE] HERE 3')
-    //           this.notify._displayContactUsModal(true, 'upgrade_plan');
-    //         } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
-    //           this.notify._displayContactUsModal(true, 'upgrade_plan');
-    //         } else if (this.prjct_profile_type === 'free' && this.trial_expired === true) {
-    //           // this.logger.log('[APP-STORE] HERE 4')
-    //           this.router.navigate(['project/' + this.projectId + '/pricing']);
-    //         }
-    //       } else {
-    //         // this.logger.log('[APP-STORE] HERE 5')
-
-    //         this.presentModalOnlyOwnerCanManageTheAccountPlan();
-    //       }
-    //     } else {
-    //       // this.logger.log('[APP-STORE] HERE 6')
-    //       this.notify._displayContactUsModal(true, 'upgrade_plan');
-    //     }
-    //   }
-    // });
-
-    Swal.fire({
-      // title: this.onlyOwnerCanManageTheAccountPlanMsg,
-      html: el,
-      icon: "info",
-      showCloseButton: true,
-      showCancelButton: false,
-      confirmButtonText: this.upgradePlan,
-      confirmButtonColor: "var(--blue-light)",
-      focusConfirm: false,
-    }).then((result) => {
-      if (result.isConfirmed) {
-        this.logger.log('presentModalFeautureAvailableFromTier2Plan result', result)
-        // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
-        // this.logger.log('[APP-STORE] subscription_is_active', this.subscription_is_active)
-        // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
-        // this.logger.log('[APP-STORE] trial_expired', this.trial_expired)
-        this.logger.log('[APP-STORE] isVisiblePAY', this.isVisiblePAY)
-        if (this.isVisiblePAY) {
-          // this.logger.log('[APP-STORE] HERE 1')
-          if (this.USER_ROLE === 'owner') {
-            // this.logger.log('[APP-STORE] HERE 2')
-            if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-              // this.logger.log('[APP-STORE] HERE 3')
-              this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
+    // if (!this.overridePay) {
+      if (this.isVisiblePAY) {
+        this.logger.log('presentModalFeautureAvailableFromTier2Plan', planName)
+        const el = document.createElement('div')
+        el.innerHTML = planName //this.featureAvailableFromBPlan
+
+
+        Swal.fire({
+          // title: this.onlyOwnerCanManageTheAccountPlanMsg,
+          html: el,
+          icon: "info",
+          showCloseButton: true,
+          showCancelButton: false,
+          confirmButtonText: this.upgradePlan,
+          confirmButtonColor: "var(--blue-light)",
+          focusConfirm: false,
+        }).then((result) => {
+          if (result.isConfirmed) {
+            this.logger.log('presentModalFeautureAvailableFromTier2Plan result', result)
+            // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
+            // this.logger.log('[APP-STORE] subscription_is_active', this.subscription_is_active)
+            // this.logger.log('[APP-STORE] prjct_profile_type', this.prjct_profile_type)
+            // this.logger.log('[APP-STORE] trial_expired', this.trial_expired)
+            this.logger.log('[APP-STORE] isVisiblePAY', this.isVisiblePAY)
+            if (this.isVisiblePAY) {
+              // this.logger.log('[APP-STORE] HERE 1')
+              if (this.USER_ROLE === 'owner') {
+                // this.logger.log('[APP-STORE] HERE 2')
+                if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+                  // this.logger.log('[APP-STORE] HERE 3')
+                  this.notify._displayContactUsModal(true, 'upgrade_plan');
+                } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
+                  this.notify._displayContactUsModal(true, 'upgrade_plan');
+                } else if (this.prjct_profile_type === 'free' && this.trial_expired === true) {
+                  // this.logger.log('[APP-STORE] HERE 4')
+                  this.router.navigate(['project/' + this.projectId + '/pricing']);
+                }
+              } else {
+                // this.logger.log('[APP-STORE] HERE 5')
+
+                this.presentModalOnlyOwnerCanManageTheAccountPlan();
+              }
+            } else {
+              // this.logger.log('[APP-STORE] HERE 6')
               this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'free' && this.trial_expired === true) {
-              // this.logger.log('[APP-STORE] HERE 4')
-              this.router.navigate(['project/' + this.projectId + '/pricing']);
             }
-          } else {
-            // this.logger.log('[APP-STORE] HERE 5')
-
-            this.presentModalOnlyOwnerCanManageTheAccountPlan();
           }
-        } else {
-          // this.logger.log('[APP-STORE] HERE 6')
-          this.notify._displayContactUsModal(true, 'upgrade_plan');
-        }
+        });
+      } else {
+        this.notify._displayContactUsModal(true, 'upgrade_plan');
       }
-    });
+   
   }
 
   presentModalAppSumoFeautureAvailableFromBPlan() {
@@ -922,7 +896,7 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
         this.featureAvailableFromBPlan = translation;
       });
 
-    this.translate.get('AvailableFromThePlans', { plan_name_1: PLAN_NAME.E , plan_name_2: PLAN_NAME.EE})
+    this.translate.get('AvailableFromThePlans', { plan_name_1: PLAN_NAME.E, plan_name_2: PLAN_NAME.EE })
       .subscribe((translation: any) => {
         this.featureAvailableFromEPlan = translation;
       });
@@ -996,19 +970,19 @@ export class AppStoreComponent extends PricingBaseComponent implements OnInit, O
   }
 
   goToWhatsapp() {
-    this.router.navigate(['project/' + this.projectId + '/integrations' ],{ queryParams: { 'name': 'whatsapp' } })
+    this.router.navigate(['project/' + this.projectId + '/integrations'], { queryParams: { 'name': 'whatsapp' } })
   }
 
   goToMessenger() {
-    this.router.navigate(['project/' + this.projectId + '/integrations' ],{ queryParams: { 'name': 'messenger' } })
+    this.router.navigate(['project/' + this.projectId + '/integrations'], { queryParams: { 'name': 'messenger' } })
   }
 
   goToTelegram() {
-    this.router.navigate(['project/' + this.projectId + '/integrations' ],{ queryParams: { 'name': 'telegram' } })
+    this.router.navigate(['project/' + this.projectId + '/integrations'], { queryParams: { 'name': 'telegram' } })
   }
 
   goToIntegrations() {
-    this.router.navigate(['project/' + this.projectId + '/integrations' ])
+    this.router.navigate(['project/' + this.projectId + '/integrations'])
   }
 
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c4069b8e5f80..8ba1f69a0d8b 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -397,6 +397,9 @@ import { UserModalComponent } from './users/user-modal/user-modal.component';
 import { MessagesStatsModalComponent } from './components/modals/messages-stats-modal/messages-stats-modal.component';
 import { WsChatbotService } from './services/websocket/ws-chatbot.service';
 import { AnalyticsService } from './services/analytics.service';
+import { N8nIntegrationComponent } from './integrations/list/n8n-integration/n8n-integration.component';
+
+
 import { KnowledgeBasesAlertComponent } from './knowledge-bases/knowledge-bases-alert/knowledge-bases-alert.component';
 import { LogRequestsInterceptor } from './services/interceptor/log-requests.interceptor';
 import { CnpSelectTemplatesOrKbComponent } from './create-new-project/cnp-select-templates-or-kb/cnp-select-templates-or-kb.component';
diff --git a/src/app/auth/autologin/autologin.component.ts b/src/app/auth/autologin/autologin.component.ts
index df34a2fc764b..ae2a9d072403 100755
--- a/src/app/auth/autologin/autologin.component.ts
+++ b/src/app/auth/autologin/autologin.component.ts
@@ -168,11 +168,11 @@ export class AutologinComponent implements OnInit {
       this.logger.log('[AUTOLOGIN] SSO - ssoLogin routeSegments ', routeSegments);
 
       const projectIDGetFromRoute = routeSegments[2]
-      
+
       this.logger.log('[AUTOLOGIN] SSO - ssoLogin projectIDGetFromRoute ', projectIDGetFromRoute);
-    
+
       this.getProject(projectIDGetFromRoute)
-    
+
 
       this.router.navigate([route]);
 
@@ -205,6 +205,7 @@ export class AutologinComponent implements OnInit {
       }
      
 
+
     }, () => {
       this.logger.log('[AUTOLOGIN] SSO - ssoLogin getCurrentAuthenticatedUser * COMPLETE *');
 
@@ -222,7 +223,7 @@ export class AutologinComponent implements OnInit {
     });
   }
 
- 
+
 
 
   getProject(projectIDGetFromRouteIsNumber) {
@@ -240,7 +241,7 @@ export class AutologinComponent implements OnInit {
     })
   }
 
- 
+
 
 
 
diff --git a/src/app/bots/bots-list/bots-list.component.html b/src/app/bots/bots-list/bots-list.component.html
index fb80760fcc54..42e93461f375 100755
--- a/src/app/bots/bots-list/bots-list.component.html
+++ b/src/app/bots/bots-list/bots-list.component.html
@@ -57,7 +57,7 @@
         <!-- -------------------------------------------------------------------- -->
         <!-- Alert displayed when the number of chatbot exceed the chatbot limit -->
         <!-- -------------------------------------------------------------------- -->
-        <!-- chatBotLimit {{ chatBotLimit }} - chatBotCount {{chatBotCount}} -  isVisiblePAY {{ isVisiblePAY }} -->
+    
         <ng-container *ngIf="chatBotLimit || chatBotLimit === 0 " > 
           <appdashboard-chatbot-alert *ngIf="chatBotCount > chatBotLimit && isVisiblePAY"></appdashboard-chatbot-alert>
         </ng-container>
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index b0e44568251a..207768105dc7 100755
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -80,26 +80,11 @@
 
                   <div class="quote-container">
 
-                    <div class="quota-wpr">
-
-                      <div class="quota-header-section">
-                        <p class="quote-title">Conversations</p>
-                        <div class="quote-count">{{requests_count | number:'1.0-0'}} / {{requests_limit |
-                          number:'1.0-0'}}</div>
-                      </div>
-
-                      <div class="convs-count-container">
-                        <div class="convs-count-wpr">
-                          <div class="convs-count-label">Opened </div>
-                          <div class="convs-count-value" (click)="goToHistoryOpenedConvs()"> {{openedConversations}}
-                          </div>
-                        </div>
-                        <div class="convs-count-wpr">
-                          <div class="convs-count-label">Closed </div>
-                          <div class="convs-count-value" (click)="goToHistoryClosedConvs()"> {{closedConversations}}
-                          </div>
-                        </div>
-                      </div>
+                    <div>
+                      <p class="quote-title">{{'Requests' | translate}}</p>
+                      <div class="quote-count">{{requests_count}} / {{requests_limit}}</div> 
+                      <p class="quote-title">Conversations</p>
+                      <div class="quote-count">{{requests_count | number:'1.0-0'}} / {{requests_limit | number:'1.0-0'}}</div>
                     </div>
 
 
@@ -332,7 +317,7 @@ <h2 class="quota-title">{{'Email' | translate}}</h2>
         <!-- ------------------------------------------------  -->
         <!--  UPGRADE (PROFILE TYPE = FREE) -->
         <!-- ------------------------------------------------  -->
-        <ng-container *ngIf="isVisible">
+        <ng-container *ngIf="isVisiblePay">
           <li id="trial-days-indicator" *ngIf="project && prjct_profile_type === 'free'">
 
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding:0px;">
@@ -393,7 +378,7 @@ <h2 class="quota-title">{{'Email' | translate}}</h2>
         <!--  ------------------------------------------------ -->
         <!--    UPGRADE BTN (PROFILE TYPE = FREE)  -->
         <!--  ------------------------------------------------ -->
-        <ng-container *ngIf="isVisible">
+        <ng-container *ngIf="isVisiblePay">
           <li id="upgrade-plan-link" *ngIf="project && prjct_profile_type === 'free'">
             <a class="upgrade-btn-trial-expired" (click)="goToPricingPlanFree()"> {{ "Pricing.UpgradePlan" | translate }} </a>
           </li>
@@ -403,7 +388,8 @@ <h2 class="quota-title">{{'Email' | translate}}</h2>
         <!--  ------------------------------------------------ -->
         <!--   PLAN NAME (PROFILE TYPE = PAYMENTS)  && HOME_ROUTE_IS_ACTIVE === false -->
         <!--  ------------------------------------------------ -->
-        <ng-container *ngIf="isVisible">
+        <!-- *ngIf="isVisiblePay" -->
+        <ng-container >
           <li
             [ngClass]="{'hide-expired-subscription-indicator': prjct_profile_type === 'payment' && subscription_is_active === true}"
             id="expired-subscription-indicator" *ngIf="project && prjct_profile_type === 'payment'">
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index 50829cfd5d26..d32e9695774f 100755
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -135,7 +135,7 @@ export class NavbarComponent extends PricingBaseComponent implements OnInit, Aft
   subscription_is_active: boolean;
   HOME_ROUTE_IS_ACTIVE: boolean;
   projects: any;
-  isVisible: boolean;
+  // isVisible: boolean;
 
   storageBucket: string;
   baseUrl: string;
@@ -355,7 +355,6 @@ export class NavbarComponent extends PricingBaseComponent implements OnInit, Aft
   getProjectQuotes() {
     this.quotesService.getProjectQuotes(this.projectId).then((response) => {
       this.logger.log("[NAVBAR] getProjectQuotes response: ", response);
-      this.logger.log("getProjectQuotes: ", response);
       this.project_limits = response;
     }).catch((err) => {
       this.logger.error("[NAVBAR] getProjectQuotes error: ", err);
@@ -689,20 +688,7 @@ export class NavbarComponent extends PricingBaseComponent implements OnInit, Aft
     // this.logger.log('PUBLIC-KEY (Navbar) - public_Key keys', keys)
 
     keys.forEach(key => {
-      // this.logger.log('NavbarComponent public_Key key', key)
-      if (key.includes("PAY")) {
-        // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
-        let pay = key.split(":");
-        // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
-        if (pay[1] === "F") {
-          this.isVisible = false;
-          // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-        } else {
-          this.isVisible = true;
-          // this.logger.log('PUBLIC-KEY (Navbar) - pay isVisible', this.isVisible);
-        }
-      }
-
+     
       if (key.includes("MTT")) {
         // this.logger.log('PUBLIC-KEY (Navbar) - key', key);
         let mt = key.split(":");
@@ -1142,14 +1128,18 @@ export class NavbarComponent extends PricingBaseComponent implements OnInit, Aft
 
 
   openModalSubsExpired() {
-    if (this.USER_ROLE === 'owner') {
-      if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-        this.notifyService.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
-      } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-        this.notifyService.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+    if (this.isVisiblePay) {
+      if (this.USER_ROLE === 'owner') {
+        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+          this.notifyService.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          this.notifyService.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+        }
+      } else {
+        this.presentModalOnlyOwnerCanManageTheAccountPlan();
       }
     } else {
-      this.presentModalOnlyOwnerCanManageTheAccountPlan();
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
   }
 
@@ -1168,7 +1158,7 @@ export class NavbarComponent extends PricingBaseComponent implements OnInit, Aft
 
   goToPricing() {
     this.logger.log('[WSREQUEST-STATIC] - goToPricing projectId ', this.projectId);
-    if (this.isVisible) {
+    if (this.isVisiblePay) {
       if (this.USER_ROLE === 'owner') {
         // && this.subscription_is_active === false
         if (this.prjct_profile_type === 'payment') {
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index ef83dcf8f63c..88f317c2e772 100755
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -242,9 +242,9 @@
       <!-- ANALYTICS -->
       <!-- ----------------------------- -->
       <ng-container *ngIf="isVisibleANA">
-        <li id="analytics" *ngIf="project && USER_ROLE !== 'agent'" 
+        <li id="analytics"  *ngIf="project && USER_ROLE !== 'agent'" 
           routerLinkActive="active"
-          [ngClass]="{'active' : ANALYTICS_DEMO_ROUTE_IS_ACTIVE === true}" 
+          [ngClass]="{'active' : ANALYTICS_DEMO_ROUTE_IS_ACTIVE === true, 'sb-bottom-items': !isVisibleCNT}" 
           (click)="stopScroll()"
           matTooltipClass="sb-mat-tooltip" 
           matTooltip="{{ 'Analytics.AnalyticsTITLE' | translate }}"
@@ -263,7 +263,7 @@
       <ng-container *ngIf="isVisibleACT">
         <li id="activities" *ngIf="project && USER_ROLE !== 'agent'" 
           routerLinkActive="active"
-          [ngClass]="{'active' : ACTIVITIES_DEMO_ROUTE_IS_ACTIVE === true}" 
+          [ngClass]="{'active' : ACTIVITIES_DEMO_ROUTE_IS_ACTIVE === true, 'sb-bottom-items': !isVisibleCNT || !isVisibleANA }" 
           (click)="stopScroll()"
           matTooltipClass="sb-mat-tooltip" 
           matTooltip="{{ 'Activities' | translate }}" 
@@ -288,6 +288,7 @@
         #tooltip="matTooltip"
         matTooltipPosition='right' 
         matTooltipHideDelay="100" 
+        [ngClass]="{'sb-bottom-items': !isVisibleCNT || !isVisibleANA || !isVisibleACT}"
         style="height: 50px !important;">
         <a class="customAncor" routerLink="project/{{ project._id }}/history">
           <i class="material-icons sidebar-icons">history</i>
@@ -373,170 +374,6 @@
         </ng-template>
       </mat-menu>
 
-
-
-
-
-
-
-      <!-- ------------------------------------------------------- -->
-      <!-- Canned responses -->
-      <!-- ------------------------------------------------------- -->
-      <ng-container *ngIf="isVisibleCAR">
-        <li *ngIf="SHOW_SETTINGS_SUBMENU && USER_ROLE !== 'agent'" routerLinkActive="active" (click)="stopScroll()">
-          <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/cannedresponses">
-            <i class="material-icons sidebar-icons" style="font-size:24px !important">
-              bolt
-            </i>
-            <p class="onBlackBckgrnd">
-              <!-- <span class="sidebar-mini">
-                {{'CannedResponses.CR' | translate}}
-              </span> -->
-              {{'CannedResponses.CannedResponses' | translate}}
-            </p>
-          </a>
-        </li>
-      </ng-container>
-
-
-      <!-- -------------------------------------------------------------  -->
-      <!-- Tags (menu item name 'Labels' then renamend tags 26gen21)  -->
-      <!-- ------------------------------------------------------------- -->
-      <ng-container *ngIf="isVisibleLBS">
-        <li *ngIf="SHOW_SETTINGS_SUBMENU && USER_ROLE !== 'agent'" routerLinkActive="active" (click)="stopScroll()">
-          <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/labels">
-            <p class="onBlackBckgrnd">
-              <i class="fa fa-tag sidebar-icons" style="font-size: 18px !important;"></i>
-              {{'Tags.Tags' | translate}}
-            </p>
-          </a>
-        </li>
-      </ng-container>
-
-      <!-- ------------------------------------------------------- -->
-      <!-- New: MERGE ROUTING / DEPT - Routing & depts -->
-      <!-- ------------------------------------------------------- -->
-      <li *ngIf="SHOW_SETTINGS_SUBMENU" class="" routerLinkActive="active" (click)="stopScroll()">
-        <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>
-
-          </p>
-        </a>
-      </li>
-
-
-      <!-- ------------------------------------------------------- -->
-      <!-- TRIGGER -->
-      <!-- ------------------------------------------------------- -->
-      <ng-container *ngIf="isVisibleTRI">
-        <li *ngIf="SHOW_SETTINGS_SUBMENU" class="" routerLinkActive="active" (click)="stopScroll()">
-          <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/trigger">
-
-            <i class="material-icons sidebar-icons" style="
-            font-size:23px; position:relative; left:1px">
-              generating_tokens
-            </i>
-            <span class="_badge" style="font-size: 9px;"
-              [ngClass]="{'change-badge-bckgrnd' : TRIGGER_ROUTE_IS_ACTIVE === true}">BETA</span>
-            <p class="onBlackBckgrnd">
-              {{ 'Trigger.Trigger' | translate }}
-            </p>
-          </a>
-        </li>
-      </ng-container>
-
-      <!-- ------------------------------------------------------- -->
-      <!-- Teammates & Groups -->
-      <!-- ------------------------------------------------------- -->
-      <li *ngIf="SHOW_SETTINGS_SUBMENU" class="" routerLinkActive="active" (click)="stopScroll()">
-        <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/users">
-          <i class="material-icons sidebar-icons">
-            groups
-          </i>
-          <p class="onBlackBckgrnd">
-            <span *ngIf="isVisibleGRO">
-              <!-- <span class="sidebar-mini">{{'UsersAndGroupsInitials' | translate}} </span> -->
-              {{ 'UsersAndGroups' | translate }}
-            </span>
-            <span *ngIf="!isVisibleGRO">
-              <!-- <span class="sidebar-mini">{{'TeammateInitial' | translate }} </span>  -->
-              <span style="text-transform: capitalize;"> {{ 'Teammates' | translate }} </span>
-            </span>
-          </p>
-        </a>
-      </li>
-
-
-      <!-- ------------------------------------------------------- -->
-      <!-- Chatbot -->
-      <!-- ------------------------------------------------------- -->
-      <!-- FAQ (alias FAQKB) HAS BEEN RENAMED IN BOT (BOT - see above - IS CURRENTLY COMMENTED) -->
-      <li *ngIf="SHOW_SETTINGS_SUBMENU" class="" routerLinkActive="active" (click)="stopScroll()">
-        <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/bots">
-          <i class="material-icons sidebar-icons">
-            smart_toy
-          </i>
-          <p class="onBlackBckgrnd">
-            Bots
-          </p>
-        </a>
-      </li>
-
-
-      <!-- -------------------------------------------------------- -->
-      <!--  Widget  -->
-      <!-- -------------------------------------------------------- -->
-      <li style="display: block;" *ngIf="SHOW_SETTINGS_SUBMENU" class="" routerLinkActive="active"
-        (click)="stopScroll()">
-        <a class="customAncor" *ngIf="project" routerLink="project/{{ project._id }}/widget-set-up">
-          <i class="material-icons sidebar-icons">
-            chat_bubble
-          </i>
-
-          <p class="onBlackBckgrnd">
-            Widget
-          </p>
-        </a>
-      </li>
-
-      <!-- -------------------------------------------------------- -->
-      <!--  Operatinf Hours  -->
-      <!-- -------------------------------------------------------- -->
-      <ng-container *ngIf="isVisibleOPH">
-        <li *ngIf="SHOW_SETTINGS_SUBMENU" routerLinkActive="active" (click)="stopScroll()">
-          <a *ngIf="project" class="customAncor" routerLink="project/{{ project._id }}/hours">
-            <i class="material-icons sidebar-icons">
-              watch_later
-            </i>
-            <p class="onBlackBckgrnd">
-              {{ 'Hours' | translate }}
-            </p>
-          </a>
-        </li>
-      </ng-container>
-
-
-      <!-- -------------------------------------------------------- -->
-      <!--  Project Settings  -->
-      <!-- -------------------------------------------------------- -->
-      <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>
   </div>
 </div>
diff --git a/src/app/components/widget-installations/magento-installation/magento-installation.component.html b/src/app/components/widget-installations/magento-installation/magento-installation.component.html
index 4c2be73b713d..85e4481ed3c1 100644
--- a/src/app/components/widget-installations/magento-installation/magento-installation.component.html
+++ b/src/app/components/widget-installations/magento-installation/magento-installation.component.html
@@ -1,76 +1,75 @@
 <div class="master card-widget-installation card--no-border">
     <div class="card-content">
+  
+      <div class="install-widget-instructions">
+        <div class="install-widget-steps">
+          <span class="install-widget-step-number-wrapper">
+            <span class="install-widget-step-number">
+              1
+            </span>
+          </span>
+          <span class="install-widget-step-text">
+            {{'WidgetInstallations.GenericStep1' | translate }}
+          </span>
+          <br>
+  
+          <appdashboard-code-installation></appdashboard-code-installation>
+  
+          <span class="install-widget-step-number-wrapper">
+            <span class="install-widget-step-number">
+              2
+            </span>
+          </span>
+          <span class="install-widget-step-text">
+            {{'WidgetInstallations.MagentoStep2' | translate }}
+          </span>
+          <br>
+  
+          <span class="install-widget-step-number-wrapper">
+            <span class="install-widget-step-number">
+              3
+            </span>
+          </span>
+          <span class="install-widget-step-text">
+            {{'WidgetInstallations.MagentoStep3' | translate }}
+          </span>
+          <br>
+  
+          <span class="install-widget-step-number-wrapper">
+            <span class="install-widget-step-number">
+              4
+            </span>
+          </span>
+          <span class="install-widget-step-text">
+            {{'WidgetInstallations.MagentoStep4' | translate }}
+          </span>
+          <br>
+  
+          <span class="install-widget-step-number-wrapper">
+            <span class="install-widget-step-number">
+              5
+            </span>
+          </span>
+          <span class="install-widget-step-text">
+            {{'WidgetInstallations.MagentoStep5' | translate }}
+          </span>
+        </div>
 
-        <div class="install-widget-instructions">
-            <div class="install-widget-steps">
-                <span class="install-widget-step-number-wrapper">
-                    <span class="install-widget-step-number">
-                        1
-                    </span>
-                </span>
-                <span class="install-widget-step-text">
-                    {{'WidgetInstallations.GenericStep1' | translate }}
-                </span>
-                <br>
-
-                <appdashboard-code-installation></appdashboard-code-installation>
-
-                <span class="install-widget-step-number-wrapper">
-                    <span class="install-widget-step-number">
-                        2
-                    </span>
-                </span>
-                <span class="install-widget-step-text">
-                    {{'WidgetInstallations.MagentoStep2' | translate }}
-                </span>
-                <br>
-
-                <span class="install-widget-step-number-wrapper">
-                    <span class="install-widget-step-number">
-                        3
-                    </span>
-                </span>
-                <span class="install-widget-step-text">
-                    {{'WidgetInstallations.MagentoStep3' | translate }}
-                </span>
-                <br>
-
-                <span class="install-widget-step-number-wrapper">
-                    <span class="install-widget-step-number">
-                        4
-                    </span>
-                </span>
-                <span class="install-widget-step-text">
-                    {{'WidgetInstallations.MagentoStep4' | translate }}
-                </span>
-                <br>
-
-                <span class="install-widget-step-number-wrapper">
-                    <span class="install-widget-step-number">
-                        5
-                    </span>
-                </span>
-                <span class="install-widget-step-text">
-                    {{'WidgetInstallations.MagentoStep5' | translate }}
-                </span>
-            </div>
-
-            <div *ngIf="hideHelpLink" class="code-help">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-                    <g fill="none" fill-rule="evenodd">
-                        <path d="M1 1h18v18H1z"></path>
-                        <path stroke="#3ea9f5" stroke-width="2"
-                            d="M10 1.5c4.692 0 8.5 3.808 8.5 8.5s-3.808 8.5-8.5 8.5A8.503 8.503 0 0 1 1.5 10c0-4.692 3.808-8.5 8.5-8.5z">
-                        </path>
-                        <path fill="#3ea9f5" fill-rule="nonzero"
-                            d="M10.75 13.75h-1.5v-4.5h1.5zM10.75 7.75h-1.5v-1.5h1.5z"></path>
-                    </g>
-                </svg>
-                <a href="{{URL_install_tiledesk_on_magento}}" target="_blank"> {{'SeeDetailsHere' | translate}}</a>
-            </div>
-
-
-
-        </div> <!-- /. install-with-code -->
+        <div *ngIf="hideHelpLink" class="code-help">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+              <g fill="none" fill-rule="evenodd">
+                <path d="M1 1h18v18H1z"></path>
+                <path stroke="#3ea9f5" stroke-width="2"
+                  d="M10 1.5c4.692 0 8.5 3.808 8.5 8.5s-3.808 8.5-8.5 8.5A8.503 8.503 0 0 1 1.5 10c0-4.692 3.808-8.5 8.5-8.5z">
+                </path>
+                <path fill="#3ea9f5" fill-rule="nonzero" d="M10.75 13.75h-1.5v-4.5h1.5zM10.75 7.75h-1.5v-1.5h1.5z"></path>
+              </g>
+            </svg>
+            <a href="{{URL_install_tiledesk_on_magento}}" target="_blank"> {{'SeeDetailsHere' | translate}}</a>
+          </div>
+ 
+  
+  
+      </div> <!-- /. install-with-code -->
     </div> <!-- /. card content -->
 </div> <!-- /. card -->
\ No newline at end of file
diff --git a/src/app/components/widget-installations/prestashop-installation/prestashop-installation.component.html b/src/app/components/widget-installations/prestashop-installation/prestashop-installation.component.html
index 3825b6df3ad6..a6c850a51b14 100644
--- a/src/app/components/widget-installations/prestashop-installation/prestashop-installation.component.html
+++ b/src/app/components/widget-installations/prestashop-installation/prestashop-installation.component.html
@@ -1,107 +1,116 @@
-
 <div class="master card-widget-installation card--no-border">
   <div class="card-content">
 
     <div class="install-widget-instructions">
-    <div class="install-widget-steps">
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          1
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-        {{'WidgetInstallations.GenericStep1' | translate }}
-      </span>
-      <br>
+      <div class="install-widget-steps">
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            1
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.GenericStep1' | translate }}
+        </span>
+        <br>
 
-      <appdashboard-code-installation></appdashboard-code-installation>
+        <appdashboard-code-installation></appdashboard-code-installation>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          2
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'WidgetInstallations.PrestashopStep2' | translate }}
-      </span>
-      <br>
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            2
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep2' | translate }}
+        </span>
+        <br>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          3
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'WidgetInstallations.PrestashopStep3' | translate }}
-      <a href="https://mypresta.eu/en/art/prestashop-16/disable-html-purifier.html" target="_blank">{{'LearnMore' | translate }}</a>
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            3
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep3' | translate }}
+          <a href="https://mypresta.eu/en/art/prestashop-16/disable-html-purifier.html" target="_blank">{{'LearnMore' |
+            translate }}</a>
 
-      </span>
-      <br>
+        </span>
+        <br>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          4
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'WidgetInstallations.PrestashopStep4' | translate }}
-      </span>
-      <br>
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            4
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep4' | translate }}
+        </span>
+        <br>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          5
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'WidgetInstallations.PrestashopStep5' | translate }}
-      <a href="https://mypresta.eu/modules/front-office-features/html-box.html" target="_blank"> {{'FromHere' | translate }}.</a>
-      </span>
-      <br>
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            5
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep5' | translate }}
+          <a href="https://mypresta.eu/modules/front-office-features/html-box.html" target="_blank"> {{'FromHere' |
+            translate }}.</a>
+        </span>
+        <br>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          6
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-        {{'WidgetInstallations.PrestashopStep6' | translate }}
-      </span>
-      <br>
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            6
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep6' | translate }}
+        </span>
+        <br>
+
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            7
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'WidgetInstallations.PrestashopStep7' | translate }}
+        </span>
+        <br>
+
+
+      </div>
+
+      <!-- https://stackoverflow.com/questions/34820524/how-to-align-multi-line-text-after-icon -->
+      <div class="install-widget-steps">
+        <span class="install-widget-step-number-wrapper">
+          <span class="install-widget-step-number">
+            8
+          </span>
+        </span>
+        <span class="install-widget-step-text">
+          {{'OnceYouHaveCompletedYourChanges' | translate}}.
+          {{'YourWidgetShouldAppearInTheBottomRightCorner' | translate}}.
+        </span>
+        <br>
+      </div>
 
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          7
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'WidgetInstallations.PrestashopStep7' | translate }}
-      </span>
-      <br>
+      <div *ngIf="hideHelpLink" class="code-help">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+          <g fill="none" fill-rule="evenodd">
+            <path d="M1 1h18v18H1z"></path>
+            <path stroke="#3ea9f5" stroke-width="2"
+              d="M10 1.5c4.692 0 8.5 3.808 8.5 8.5s-3.808 8.5-8.5 8.5A8.503 8.503 0 0 1 1.5 10c0-4.692 3.808-8.5 8.5-8.5z">
+            </path>
+            <path fill="#3ea9f5" fill-rule="nonzero" d="M10.75 13.75h-1.5v-4.5h1.5zM10.75 7.75h-1.5v-1.5h1.5z"></path>
+          </g>
+        </svg>
+        <a href="{{URL_install_tiledesk_on_prestashop}}" target="_blank"> {{'SeeDetailsHere' | translate}}</a>
+      </div>
 
-      
-    </div>
-  
-    <!-- https://stackoverflow.com/questions/34820524/how-to-align-multi-line-text-after-icon -->
-    <div class="install-widget-steps">
-      <span class="install-widget-step-number-wrapper">
-        <span class="install-widget-step-number">
-          8
-        </span>
-      </span>
-      <span class="install-widget-step-text">
-      {{'OnceYouHaveCompletedYourChanges' | translate}}.
-      {{'YourWidgetShouldAppearInTheBottomRightCorner' | translate}}.
-      </span>
-      <br>
-    </div>
 
-    <div *ngIf="hideHelpLink" class="code-help">
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" fill-rule="evenodd"><path d="M1 1h18v18H1z"></path><path stroke="#3ea9f5" stroke-width="2" d="M10 1.5c4.692 0 8.5 3.808 8.5 8.5s-3.808 8.5-8.5 8.5A8.503 8.503 0 0 1 1.5 10c0-4.692 3.808-8.5 8.5-8.5z"></path><path fill="#3ea9f5" fill-rule="nonzero" d="M10.75 13.75h-1.5v-4.5h1.5zM10.75 7.75h-1.5v-1.5h1.5z"></path></g></svg>
-      <a href="{{URL_install_tiledesk_on_prestashop}}" target="_blank"> {{'SeeDetailsHere' | translate}}</a>
-    </div>
-  
-  
     </div> <!-- /. install-with-code -->
   </div> <!-- /. card content -->
-  </div> <!-- /. card -->
+</div> <!-- /. card -->
\ No newline at end of file
diff --git a/src/app/contacts/contacts.component.ts b/src/app/contacts/contacts.component.ts
index eeb77fbdf5a0..65325d3fbdb1 100755
--- a/src/app/contacts/contacts.component.ts
+++ b/src/app/contacts/contacts.component.ts
@@ -111,6 +111,7 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
   CHAT_BASE_URL: string;
   id_request: string;
   payIsVisible: boolean;
+  overridePay: boolean;
   public_Key: any;
   isChromeVerGreaterThan100: boolean;
   onlyOwnerCanManageTheAccountPlanMsg: string;
@@ -187,18 +188,32 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
           this.logger.log('[CONTACTS-COMP] - pay isVisible', this.payIsVisible);
         }
       }
+
+      if (key.includes("OVP")) {
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.overridePay = false;
+        } else {
+          this.overridePay = true;
+        }
+      }
     });
 
     if (!this.public_Key.includes("PAY")) {
       this.payIsVisible = false;
       this.logger.log('[CONTACTS-COMP] - pay isVisible', this.payIsVisible);
     }
+
+    if (!this.public_Key.includes("OVP")) {
+      this.overridePay = false;
+    }
   }
 
 
   getTranslation() {
 
-    this.translate.get('AvailableFromThePlans', { plan_name_1: PLAN_NAME.E, plan_name_2: PLAN_NAME.EE})
+    this.translate.get('AvailableFromThePlans', { plan_name_1: PLAN_NAME.E, plan_name_2: PLAN_NAME.EE })
       .subscribe((translation: any) => {
         this.featureAvailableFromEPlan = translation;
       });
@@ -636,11 +651,11 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
       const allContacts = res['leads'];
       this.logger.log('[CONTACTS-COMP] - GET ALL LEADS - LEADS  ', allContacts);
       allContacts.forEach(contact => {
-        // console.log('[CONTACTS-COMP] - CONTACTS LIST > contact', contact);
+        this.logger.log('[CONTACTS-COMP] - CONTACTS LIST > contact', contact);
         if (contact && contact.tags.length > 0) {
           // console.log('[CONTACTS-COMP] - CONTACTS LIST > contact > tags ', contact.tags);
           contact.tags.forEach((tag: string) => {
-            // console.log('[CONTACTS-COMP] - CONTACTS LIST > contact > tags >  tag', tag);
+            this.logger.log('[CONTACTS-COMP] - CONTACTS LIST > contact > tags >  tag', tag);
             let index = this.tagsArray.findIndex(x => x.name == tag)
             // console.log('[CONTACTS-COMP] - CONTACTS LIST > contact > tags >  tag index', index);
             if (index === -1) {
@@ -1062,32 +1077,67 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
+  checkPlanAndPresentModalContactUs() {
+    if ((this.profile_name === PLAN_NAME.A) ||
+    (this.profile_name === PLAN_NAME.B && this.subscription_is_active === false) ||
+    (this.profile_name === PLAN_NAME.C && this.subscription_is_active === false) ||
+    (this.profile_name === 'free' && this.trial_expired === true)) {
+
+    this.notify._displayContactUsModal(true, 'upgrade_plan');
+    return false
+
+  } else if ((this.profile_name === PLAN_NAME.D) ||
+    (this.profile_name === PLAN_NAME.E && this.subscription_is_active === false) ||
+    (this.profile_name === PLAN_NAME.EE && this.subscription_is_active === false) ||
+    (this.profile_name === PLAN_NAME.F && this.subscription_is_active === false) ||
+    (this.profile_name === 'Sandbox' && this.trial_expired === true)) {
+    this.notify._displayContactUsModal(true, 'upgrade_plan');
+    return false
+  }
+  }
+
 
   exportContactsToCsv() {
-    if (this.payIsVisible) {
-      const isAvailable = this.checkPlanAndPresentModal()
-      this.logger.log('[CONTACTS-COMP] isAvaibleFromPlan ', isAvailable)
+    if (!this.overridePay) {
+      if (this.payIsVisible) {
+        const isAvailable = this.checkPlanAndPresentModal()
+        this.logger.log('[CONTACTS-COMP] isAvaibleFromPlan ', isAvailable)
+        if (isAvailable === false) {
+          return
+        }
+
+        this.dwnldCSV()
+
+        // console.log('[CONTACTS-COMP] - EXPORT DATA IS  AVAILABLE ')
+      } else {
+        this.notify._displayContactUsModal(true, 'upgrade_plan');
+      }
+    } else {
+
+      const isAvailable = this.checkPlanAndPresentModalContactUs()
+      this.logger.log('[WS-REQUESTS-MSGS] feature is available ', isAvailable, 'overridePay ', this.overridePay)
       if (isAvailable === false) {
         return
       }
-
-      this.contactsService.exportLeadToCsv(this.queryString, 0, this.hasClickedTrashed).subscribe((leads_object: any) => {
-        this.logger.log('[CONTACTS-COMP] - EXPORT CONTACT TO CSV RESPONSE ', leads_object);
-        if (leads_object) {
-          this.logger.log('[CONTACTS-COMP] - EXPORT CONTACTS TO CSV RESPONSE', leads_object);
-          this.downloadFile(leads_object);
-        }
-      }, (error) => {
-        this.logger.error('[CONTACTS-COMP]- EXPORT CONTACT TO CSV - ERROR  ', error);
-      }, () => {
-        this.logger.log('[CONTACTS-COMP] - EXPORT CONTACT TO CSV * COMPLETE *');
-      });
-      // console.log('[CONTACTS-COMP] - EXPORT DATA IS  AVAILABLE ')
-    } else {
-      this.notify._displayContactUsModal(true, 'upgrade_plan');
+      this.dwnldCSV()
     }
   }
 
+
+  dwnldCSV() {
+    this.contactsService.exportLeadToCsv(this.queryString, 0, this.hasClickedTrashed).subscribe((leads_object: any) => {
+      this.logger.log('[CONTACTS-COMP] - EXPORT CONTACT TO CSV RESPONSE ', leads_object);
+      if (leads_object) {
+        this.logger.log('[CONTACTS-COMP] - EXPORT CONTACTS TO CSV RESPONSE', leads_object);
+        this.downloadFile(leads_object);
+      }
+    }, (error) => {
+      this.logger.error('[CONTACTS-COMP]- EXPORT CONTACT TO CSV - ERROR  ', error);
+    }, () => {
+      this.logger.log('[CONTACTS-COMP] - EXPORT CONTACT TO CSV * COMPLETE *');
+    });
+  }
+
   // Export CSV
   presentModalFeautureAvailableFromTier2Plan(planName: string) {
     // const el = document.createElement('div')
@@ -1099,7 +1149,7 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
       icon: "info",
       showCloseButton: false,
       showCancelButton: true,
-      confirmButtonText: this.upgradePlan ,
+      confirmButtonText: this.upgradePlan,
       cancelButtonText: this.cancel,
       confirmButtonColor: "var(--blue-light)",
       focusConfirm: true,
@@ -1129,7 +1179,7 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
               this.notify._displayContactUsModal(true, 'upgrade_plan');
             } else if (this.profile_name === 'free') {  // 
               this.router.navigate(['project/' + this.projectId + '/pricing']);
-              
+
             }
 
           } else {
@@ -1151,7 +1201,7 @@ export class ContactsComponent implements OnInit, OnDestroy, AfterViewInit {
       icon: "info",
       showCloseButton: false,
       showCancelButton: true,
-      confirmButtonText: this.upgradePlan ,
+      confirmButtonText: this.upgradePlan,
       cancelButtonText: this.cancel,
       confirmButtonColor: "var(--blue-light)",
       focusConfirm: true,
diff --git a/src/app/core/notify.service.ts b/src/app/core/notify.service.ts
index 8d9a0c030b5f..ba265459d7e5 100755
--- a/src/app/core/notify.service.ts
+++ b/src/app/core/notify.service.ts
@@ -913,15 +913,19 @@ export class NotifyService {
     } else {
       el.innerHTML = onlyOwnerCanAdvencedProjectSettings + '. '
     }
-    swal({
+    Swal.fire({
       // title: this.onlyOwnerCanManageTheAccountPlanMsg,
-      content: el,
+      html: el,
       icon: "info",
-      // buttons: true,
-      button: {
-        text: "OK",
-      },
-      dangerMode: false,
+      showCancelButton: false,
+      confirmButtonText: this.translate.instant('Ok') ,
+      confirmButtonColor: "var(--blue-light)",
+      focusConfirm: false,
+   
+      // button: {
+      //   text: "OK",
+      // },
+      // dangerMode: false,
     })
   }
 
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 c5891a50e28b..adde16f2ecd2 100755
--- a/src/app/department-edit-add/department-edit-add.component.ts
+++ b/src/app/department-edit-add/department-edit-add.component.ts
@@ -124,9 +124,10 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
   cancel: string;
   upgradePlan: string;
   isVisiblePAY: boolean;
+  overridePay: boolean;
   public_Key: string;
   projectId: string;
-  
+
   isVisibleGroups: boolean;
   loadingBot: boolean;
   // prjct_id: string
@@ -160,7 +161,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     public appConfigService: AppConfigService,
     private logger: LoggerService,
     public prjctPlanService: ProjectPlanService
-  ) { 
+  ) {
     super(prjctPlanService, notify);
   }
 
@@ -213,29 +214,29 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
       //     }
       //   });
 
-        return  Swal.fire({
-          title: this.areYouSureMsg,
-          text: this.areTouSureYouWantToNavigateAwayFromThisPageWithoutSaving,
-          icon: "warning",
-          showCloseButton: false,
-          showCancelButton: true,
-          confirmButtonText: this.translate.instant('YesImSure') ,
-          confirmButtonColor: "var(--blue-light)",
-          focusConfirm: false,
-          reverseButtons: true
-        }).then((result) => {
-            if (result.isConfirmed) {
-              this.logger.log('[DEPT-EDIT-ADD] showExitFromComponentConfirmation willRemain pressed OK')
-  
-              return true;
-  
-            } else {
-              this.logger.log('[DEPT-EDIT-ADD] showExitFromComponentConfirmation willRemain else')
-  
-              return false;
-  
-            }
-          });
+      return Swal.fire({
+        title: this.areYouSureMsg,
+        text: this.areTouSureYouWantToNavigateAwayFromThisPageWithoutSaving,
+        icon: "warning",
+        showCloseButton: false,
+        showCancelButton: true,
+        confirmButtonText: this.translate.instant('YesImSure'),
+        confirmButtonColor: "var(--blue-light)",
+        focusConfirm: false,
+        reverseButtons: true
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.logger.log('[DEPT-EDIT-ADD] showExitFromComponentConfirmation willRemain pressed OK')
+
+          return true;
+
+        } else {
+          this.logger.log('[DEPT-EDIT-ADD] showExitFromComponentConfirmation willRemain else')
+
+          return false;
+
+        }
+      });
     }
   }
 
@@ -271,7 +272,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     this.auth.checkRoleForCurrentProject();
     this.getProfileImageStorage();
     this.listenSidebarIsOpened();
-   
+
 
     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)
@@ -390,6 +391,17 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
         }
       }
 
+
+      if (key.includes("OVP")) {
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.overridePay = false;
+        } else {
+          this.overridePay = true;
+        }
+      }
+
     })
 
     if (!this.public_Key.includes("GRO")) {
@@ -399,12 +411,16 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     if (!this.public_Key.includes("PAY")) {
       this.isVisiblePAY = false;
     }
+
+    if (!this.public_Key.includes("OVP")) {
+      this.overridePay = false;
+    }
     // if (this.isVisibleGroups === true) {
     //   this.getProjectPlan()
     // }
   }
 
- 
+
 
   getUserRole() {
     this.usersService.project_user_role_bs
@@ -451,7 +467,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
       (this.profile_name === PLAN_NAME.C && this.subscription_is_active === false) ||
       (this.profile_name === 'free' && this.trial_expired === true)) {
       if (!this.appSumoProfile) {
-       
+
         // this.presentModalFeautureAvailableFromTier2Plan(this.featureAvailableFromBPlan)
         this.presentModalFeautureAvailableFromTier2Plan(this.featureAvailableFromEPlan)
         return false
@@ -473,55 +489,59 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
   }
 
   presentModalFeautureAvailableFromTier2Plan(planName) {
-    this.logger.log('[DEPT-EDIT-ADD] presentModalFeautureAvailableFromTier2Plan projectId',this.projectId)
+    this.logger.log('[DEPT-EDIT-ADD] presentModalFeautureAvailableFromTier2Plan projectId', this.projectId)
     
-    // const el = document.createElement('div')
-    // el.innerHTML = planName //this.featureAvailableFromBPlan
-    Swal.fire({
-      // content: el,
-      title: this.upgradePlan,
-      text: planName,
-      icon: "info",
-      showCloseButton: false,
-      showCancelButton: true,
-      confirmButtonText: this.upgradePlan ,
-      cancelButtonText: this.cancel,
-      confirmButtonColor: "var(--blue-light)",
-      focusConfirm: true,
-      reverseButtons: true,
-      // buttons: {
-      //   cancel: this.cancel,
-      //   catch: {
-      //     text: this.upgradePlan,
-      //     value: "catch",
-      //   },
-      // },
-      // dangerMode: false,
-    }).then((result) => {
-      if (result.isConfirmed) {
-        if (this.isVisiblePAY) {
-          this.logger.log('[DEPT-EDIT-ADD] HERE 1')
-          if (this.USER_ROLE === 'owner') {
-            this.logger.log('[DEPT-EDIT-ADD] HERE 2')
-            if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-              this.logger.log('[DEPT-EDIT-ADD] HERE 3')
-              this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
+      if (this.isVisiblePAY) {
+        Swal.fire({
+          // content: el,
+          title: this.upgradePlan,
+          text: planName,
+          icon: "info",
+          showCloseButton: false,
+          showCancelButton: true,
+          confirmButtonText: this.upgradePlan,
+          cancelButtonText: this.cancel,
+          confirmButtonColor: "var(--blue-light)",
+          focusConfirm: true,
+          reverseButtons: true,
+          // buttons: {
+          //   cancel: this.cancel,
+          //   catch: {
+          //     text: this.upgradePlan,
+          //     value: "catch",
+          //   },
+          // },
+          // dangerMode: false,
+        }).then((result) => {
+          if (result.isConfirmed) {
+            if (this.isVisiblePAY) {
+              this.logger.log('[DEPT-EDIT-ADD] HERE 1')
+              if (this.USER_ROLE === 'owner') {
+                this.logger.log('[DEPT-EDIT-ADD] HERE 2')
+                if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+                  this.logger.log('[DEPT-EDIT-ADD] HERE 3')
+                  this.notify._displayContactUsModal(true, 'upgrade_plan');
+                } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
+                  this.notify._displayContactUsModal(true, 'upgrade_plan');
+                } else if (this.prjct_profile_type === 'free' && this.trial_expired === true) {
+                  this.logger.log('[DEPT-EDIT-ADD] HERE 4')
+                  this.router.navigate(['project/' + this.projectId + '/pricing']);
+                }
+              } else {
+                this.logger.log('[DEPT-EDIT-ADD] HERE 5')
+                this.presentModalAgentCannotManageAvancedSettings();
+              }
+             
+            } else {
+              this.logger.log('[DEPT-EDIT-ADD] HERE 6')
               this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'free' && this.trial_expired === true) {
-              this.logger.log('[DEPT-EDIT-ADD] HERE 4')
-              this.router.navigate(['project/' + this.projectId + '/pricing']);
             }
-          } else {
-            this.logger.log('[DEPT-EDIT-ADD] HERE 5')
-            this.presentModalAgentCannotManageAvancedSettings();
           }
-        } else {
-          this.logger.log('[DEPT-EDIT-ADD] HERE 6')
-          this.notify._displayContactUsModal(true, 'upgrade_plan');
-        }
+        });
+      } else {
+        this.notify._displayContactUsModal(true, 'upgrade_plan');
       }
-    });
+    
   }
 
   presentModalAppSumoFeautureAvailableFromBPlan() {
@@ -534,12 +554,12 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
       text: 'Available from ' + this.appSumoProfilefeatureAvailableFromBPlan,
       showCloseButton: false,
       showCancelButton: true,
-      confirmButtonText: this.upgradePlan ,
+      confirmButtonText: this.upgradePlan,
       cancelButtonText: this.cancel,
       confirmButtonColor: "var(--blue-light)",
       focusConfirm: true,
       reverseButtons: true,
-      
+
       // buttons: {
       //   cancel: this.cancel,
       //   catch: {
@@ -715,7 +735,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
       });
 
 
-      this.translate.get('AvailableFromThePlan', { plan_name: PLAN_NAME.B })
+    this.translate.get('AvailableFromThePlan', { plan_name: PLAN_NAME.B })
       .subscribe((translation: any) => {
         this.featureAvailableFromBPlan = translation;
       });
@@ -828,12 +848,12 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     // this.logger.log('[DEPT-EDIT-ADD] BOT ID SELECTED 2 $event: ', event);
     this.logger.log('[DEPT-EDIT-ADD] BOT ID SELECTED 2 selectedId: ', this.selectedId);
     this.logger.log('[DEPT-EDIT-ADD] BOT ID SELECTED 2 selectedBotId: ', this.selectedBotId);
-  
- 
+
+
 
     if (this.selectedBotId !== null) {
       this.NOT_HAS_EDITED = false;
-      this.logger.log('[DEPT-EDIT-ADD] NOT_HAS_EDITED ' , this.NOT_HAS_EDITED)
+      this.logger.log('[DEPT-EDIT-ADD] NOT_HAS_EDITED ', this.NOT_HAS_EDITED)
     }
 
 
@@ -852,7 +872,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     }
   }
 
-  
+
 
   /**
    * ======================= GETS ALL GROUPS WITH THE CURRENT PROJECT-ID =======================
@@ -965,14 +985,14 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     }
   }
 
-  _setSelectedGroup(){
+  _setSelectedGroup() {
     this.logger.log('[DEPT-EDIT-ADD] - GROUP ID SELECTED: ', this.selectedGroupId);
     this.SELECT_GROUP_CREATED_FROM_CREATE_GROUP_SIDEBAR = false;
 
     this.NOT_HAS_EDITED = false
     this.getGroupsByProjectId()
 
-   
+
     // this.logger.log('[DEPT-EDIT-ADD] - GROUP_ID_NOT_EXIST: ', this.GROUP_ID_NOT_EXIST);
 
 
@@ -999,14 +1019,14 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-      this.project = project
-      this.projectId = project._id
-      // this.logger.log('[DEPT-EDIT-ADD] project ID from AUTH service subscription  ', this.project._id)
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+        this.project = project
+        this.projectId = project._id
+        // this.logger.log('[DEPT-EDIT-ADD] project ID from AUTH service subscription  ', this.project._id)
+      });
   }
 
 
@@ -1020,7 +1040,7 @@ export class DepartmentEditAddComponent extends PricingBaseComponent implements
     this.loadingBot = true
     this.faqKbService.getFaqKbByProjectId().subscribe((faqkb: any) => {
       this.logger.log('[DEPT-EDIT-ADD] - GET BOTS (TO SHOW IN SELECTION FIELD) ', faqkb);
-     
+
       faqkb.sort(function compare(a, b) {
         if (a['name'].toLowerCase() < b['name'].toLowerCase()) {
           return -1;
diff --git a/src/app/departments/departments.component.html b/src/app/departments/departments.component.html
index 4da2710fb892..e916e12c5dcf 100755
--- a/src/app/departments/departments.component.html
+++ b/src/app/departments/departments.component.html
@@ -345,15 +345,17 @@ <h4>{{ 'Description' | translate }}</h4>
                       <h3 class="card_title__underlined">
                         <span class="card_title__underline">
                           {{ "Departments" | translate }}
-                          <span *ngIf="profile_name === PLAN_NAME.A || profile_name === PLAN_NAME.D || profile_name === PLAN_NAME.B && !subscription_is_active || profile_name === PLAN_NAME.E && !subscription_is_active  || profile_name === PLAN_NAME.EE && !subscription_is_active || profile_name === PLAN_NAME.C && !subscription_is_active || profile_name === PLAN_NAME.F && !subscription_is_active || profile_name === 'free' && trial_expired === true || profile_name === 'Sandbox' && trial_expired === true"
-                            class="from-b-plan-badge"> 
-                              <span *ngIf="!isAppSumo"> 
-                                {{'AvailableFromThePlans' | translate: tParamsAvailableFromTier2 }}
-                              </span>
-                              <span *ngIf="isAppSumo">  
-                                {{'AvailableFromThePlan' | translate: tParamsAvailableFromAppSumoTier3 }}
-                              </span>
-                           </span>
+                          <ng-container *ngIf="payIsVisible">
+                            <span *ngIf="profile_name === PLAN_NAME.A || profile_name === PLAN_NAME.D || profile_name === PLAN_NAME.B && !subscription_is_active || profile_name === PLAN_NAME.E && !subscription_is_active  || profile_name === PLAN_NAME.EE && !subscription_is_active || profile_name === PLAN_NAME.C && !subscription_is_active || profile_name === PLAN_NAME.F && !subscription_is_active || profile_name === 'free' && trial_expired === true || profile_name === 'Sandbox' && trial_expired === true"
+                              class="from-b-plan-badge"> 
+                                <span *ngIf="!isAppSumo"> 
+                                  {{'AvailableFromThePlans' | translate: tParamsAvailableFromTier2 }}
+                                </span>
+                                <span *ngIf="isAppSumo">  
+                                  {{'AvailableFromThePlan' | translate: tParamsAvailableFromAppSumoTier3 }}
+                                </span>
+                            </span>
+                          </ng-container>
                         </span>
                       </h3>
                     </div>
diff --git a/src/app/departments/departments.component.ts b/src/app/departments/departments.component.ts
index 756e0dce4c7b..fd5f7ad23ff7 100755
--- a/src/app/departments/departments.component.ts
+++ b/src/app/departments/departments.component.ts
@@ -57,6 +57,7 @@ export class DepartmentsComponent extends PricingBaseComponent implements OnInit
   COUNT_OF_VISIBLE_DEPT: number;
 
   isVisibleDEP: boolean;
+  payIsVisible: boolean;
   public_Key: string;
 
   prjct_profile_type: string;
@@ -137,12 +138,28 @@ export class DepartmentsComponent extends PricingBaseComponent implements OnInit
         }
       }
 
+      if (key.includes("PAY")) {
+        this.logger.log('[WIDGET-SET-UP] PUBLIC-KEY - key', key);
+        let pay = key.split(":");
+        // this.logger.log('PUBLIC-KEY (Navbar) - pay key&value', pay);
+        if (pay[1] === "F") {
+          this.payIsVisible = false;
+  
+        } else {
+          this.payIsVisible = true;
+       
+        }
+      }
+
     });
 
     if (!this.public_Key.includes("DEP")) {
       // this.logger.log('[DEPTS] PUBLIC-KEY - key.includes("DEP")', this.public_Key.includes("DEP"));
       this.isVisibleDEP = false;
     }
+    if (!this.public_Key.includes("PAY")) {
+      this.payIsVisible = false;
+    }
   }
 
   getBrowserLanguage() {
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 6a41c510aedf..2fdce1bb0185 100755
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -71,10 +71,8 @@
                       {{ prjct_name }}
                     </span>
                     <span class="material-icons home-edit-project-name-icon" (click)="goToProjectSettingsGeneral()"
-                      matTooltipClass="custom-mat-tooltip" 
-                      matTooltip="{{'EditProjectName' | translate }}"
-                      #tooltip="matTooltip" matTooltipPosition='below' 
-                      matTooltipHideDelay="100">
+                      matTooltipClass="custom-mat-tooltip" matTooltip="{{'EditProjectName' | translate }}"
+                      #tooltip="matTooltip" matTooltipPosition='below' matTooltipHideDelay="100">
                       mode_edit
                     </span>
                   </div>
@@ -203,12 +201,13 @@
                   <!-- --------------------- -->
                   <!-- From here -->
                   <!-- --------------------- -->
-                  <!-- <button mat-menu-item (click)="$event.stopPropagation()">
+                  <!-- 
+                   <button mat-menu-item (click)="$event.stopPropagation()">
                     <mat-checkbox class="home-settings-checkbox" [checked]="displayConnectWhatsApp"
                       (change)="switchConnectWhatsApp($event.checked)"></mat-checkbox>
                     <span>Connect WhatsApp </span>
-                  </button>
-                  <button mat-menu-item (click)="$event.stopPropagation()">
+                    </button>
+                   <button mat-menu-item (click)="$event.stopPropagation()">
                     <mat-checkbox class="home-settings-checkbox" [checked]="displayCreateChatbot"
                       (change)="switchCreateChatbot($event.checked)"></mat-checkbox>
                     <span>Create Chatbot</span>
@@ -250,7 +249,7 @@
         <!-- <div class="test">  -->
         <div *ngIf="!displayQuotaSkeleton" class="home-quota-banner"
           [ngClass]="{'home-quota-banner-alert': conversationsRunnedOut || emailsRunnedOut || tokensRunnedOut}">
-       
+
           <!-- <div class="home-quota-banner-title-wpr">
 
             <div class="home-quota-banner-title-no-alert" [ngClass]="{'home-quota-banner-title-alert': conversationsRunnedOut || emailsRunnedOut || tokensRunnedOut}">
@@ -266,13 +265,10 @@
               [ngClass]="{'home-quote-container-conversations-runned-out': conversationsRunnedOut}">
 
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title link" (click)="goToHistoryAllConvs()"
-                      matTooltipClass="custom-mat-tooltip" 
-                      matTooltip="Current usage"
-                      #tooltip="matTooltip" matTooltipPosition='above' 
-                      matTooltipHideDelay="100">
-                       Conversations
-                      </p>
+                <p class="quote-title link" (click)="goToHistoryAllConvs()" matTooltipClass="custom-mat-tooltip"
+                  matTooltip="Current usage" #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
+                  Conversations
+                </p>
                 <div class="quote-count">{{requests_count | number:'1.0-0'}} / {{requests_limit | number:'1.0-0'}}</div>
                 <div class="quota-runned-out-msg" *ngIf="conversationsRunnedOut">
                   You run out of converations
@@ -296,11 +292,8 @@
             <!-- -------------------------- -->
             <div class="home-quote-container" [ngClass]="{'home-quote-container-tokens-runned-out': tokensRunnedOut}">
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title"
-                  matTooltipClass="custom-mat-tooltip" 
-                  matTooltip="Current usage"
-                  #tooltip="matTooltip" matTooltipPosition='above' 
-                  matTooltipHideDelay="100">
+                <p class="quote-title" matTooltipClass="custom-mat-tooltip" matTooltip="Current usage"
+                  #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
                   AI Tokens
                 </p>
                 <div class="quote-count">{{tokens_count | number:'1.0-0'}} / {{tokens_limit | number:'1.0-0'}}</div>
@@ -329,11 +322,8 @@
             <div class="home-quote-container" [ngClass]="{'home-quote-container-email-runned-out': emailsRunnedOut}">
 
               <div class="home-quote-title-count-wpr">
-                <p class="quote-title"
-                  matTooltipClass="custom-mat-tooltip" 
-                  matTooltip="Current usage"
-                  #tooltip="matTooltip" matTooltipPosition='above' 
-                  matTooltipHideDelay="100">
+                <p class="quote-title" matTooltipClass="custom-mat-tooltip" matTooltip="Current usage"
+                  #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
                   Email
                 </p>
                 <div class="quote-count">{{email_count | number:'1.0-0'}} / {{email_limit | number:'1.0-0'}}</div>
@@ -363,14 +353,22 @@
                   d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" />
               </svg>
             </div>
-            ATTENTION: You have used up one or more of your monthly resources. To increase your monthly resources
-            quotas,
-            <span class="sales-mail-to" (click)="contacUsViaEmail()"> contact our sales team </span>
-            <!-- Conversations usage detail: total <span class="hqb-footer-link"
-              (click)="goToHistoryAllConvs()">{{requests_count | number:'1.0-0'}}</span><span
-              *ngIf="requests_count > 0">, open <span class="hqb-footer-link"
-                (click)="goToHistoryOpenedConvs()">{{openedConversations}}</span>, closed <span class="hqb-footer-link"
-                (click)="goToHistoryClosedConvs()"> {{closedConversations}}</span> </span> -->
+            <!-- prjct_profile_type > {{prjct_profile_type}} subscription_is_active {{subscription_is_active}} -->
+            <span *ngIf="prjct_profile_type === 'payment' && subscription_is_active === false">
+
+              <span *ngIf="profile_name !== PLAN_NAME?.C && profile_name !== PLAN_NAME?.F">
+                {{ 'Pricing.SubscriptionPaymentProblem' | translate }}. <span class="sales-mail-to" (click)="contacUsViaEmailToUpdadePaymentInformation()">{{'Pricing.PleaseContactUs' | translate }}</span> {{'Pricing.ToUpdateYourPaymentInformation' | translate}}
+              </span>
+              <span *ngIf="profile_name === PLAN_NAME?.C || profile_name === PLAN_NAME?.F">
+                {{ 'Pricing.ThePlanHasExpired' | translate }}. <span class="sales-mail-to" (click)="contacUsViaEmailToUpdadePaymentInformation()">{{'Pricing.PleaseContactUs' | translate }}</span> {{'Pricing.ToUpdateYourPaymentInformation' | translate}}
+              </span>
+            </span>
+            <span
+              *ngIf="prjct_profile_type === 'payment' && subscription_is_active === true || prjct_profile_type === 'free'">
+              ATTENTION: You have used up one or more of your monthly resources. To increase your monthly resources
+              quotas,
+              <span class="sales-mail-to" (click)="contacUsViaEmail()"> contact our sales team </span>
+            </span>
           </div>
         </div>
         <!--  *ngIf="displayQuotaSkeleton" -->
@@ -639,8 +637,8 @@ <h2></h2>
                 <!-- ----------------------- -->
                 <!-- Child 1 Convs Graph -->
                 <!-- ----------------------- -->
-                <ng-container *ngIf="item.type === 'child1'" >
-                  <appdashboard-home-convs-graph *ngIf="displayAnalyticsConvsGraph" 
+                <ng-container *ngIf="item.type === 'child1'">
+                  <appdashboard-home-convs-graph *ngIf="displayAnalyticsConvsGraph"
                     [displayAnalyticsConvsGraph]="displayAnalyticsConvsGraph" [projectId]="projectId"
                     [USER_ROLE]="USER_ROLE" (trackUserAction)="trackUserAction($event)">
                   </appdashboard-home-convs-graph>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 0780e6228a6d..13f2e5fa1fe6 100755
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -559,7 +559,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
       setTimeout(() => {
         this.displayQuotaSkeleton = false
       }, 1000);
-     
+
     })
   }
 
@@ -567,6 +567,10 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
     window.open(`mailto:${this.salesEmail}?subject=Resource increase request for project ${this.projectName} (${this.projectId}) &body=Dear Sales team, some of my monthly resource quota reached his limit for this month, I need some help!`);
   }
 
+  contacUsViaEmailToUpdadePaymentInformation() {
+    window.open(`mailto:${this.salesEmail}?subject=Update payment information for project ${this.projectName} (${this.projectId})`);
+  }
+
   getProjectById(projectId) {
     this.projectService.getProjectById(projectId).subscribe((project: any) => {
       this.logger.log('[HOME] - GET PROJECT BY ID - PROJECT: ', project);
@@ -2300,56 +2304,60 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
 
 
   presentModalFeautureAvailableFromTier2Plan(planName) {
-    // const el = document.createElement('div')
-    // el.innerHTML = planName //this.featureAvailableFromBPlan
-    Swal.fire({
-      // content: el,
-      title: this.upgradePlan,
-      text: planName,
-      icon: "info",
-      showCloseButton: false,
-      showCancelButton: true,
-      confirmButtonText: this.upgradePlan,
-      cancelButtonText: this.cancel,
-      confirmButtonColor: "var(--blue-light)",
-      focusConfirm: true,
-      reverseButtons: true,
-
-      // buttons: {
-      //   cancel: this.cancel,
-      //   catch: {
-      //     text: this.upgradePlan,
-      //     value: "catch",
-      //   },
-      // },
-      // dangerMode: false,
-    }).then((result) => {
-      if (result.isConfirmed) {
+    if (this.isVisiblePay) {
+      // const el = document.createElement('div')
+      // el.innerHTML = planName //this.featureAvailableFromBPlan
+      Swal.fire({
+        // content: el,
+        title: this.upgradePlan,
+        text: planName,
+        icon: "info",
+        showCloseButton: false,
+        showCancelButton: true,
+        confirmButtonText: this.upgradePlan,
+        cancelButtonText: this.cancel,
+        confirmButtonColor: "var(--blue-light)",
+        focusConfirm: true,
+        reverseButtons: true,
+
+        // buttons: {
+        //   cancel: this.cancel,
+        //   catch: {
+        //     text: this.upgradePlan,
+        //     value: "catch",
+        //   },
+        // },
+        // dangerMode: false,
+      }).then((result) => {
+        if (result.isConfirmed) {
+
+          if (this.isVisiblePay) {
+            // this.logger.log('[APP-STORE] HERE 1')
+            if (this.USER_ROLE === 'owner') {
+              // this.logger.log('[APP-STORE] HERE 2')
+              if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+                // this.logger.log('[APP-STORE] HERE 3')
+                this.notify._displayContactUsModal(true, 'upgrade_plan');
+              } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
+                this.notify._displayContactUsModal(true, 'upgrade_plan');
+              } else if (this.prjct_profile_type === 'free' && this.prjct_trial_expired === true) {
+                // this.logger.log('[APP-STORE] HERE 4')
+                this.router.navigate(['project/' + this.projectId + '/pricing']);
+              }
+            } else {
+              // this.logger.log('[APP-STORE] HERE 5')
 
-        if (this.isVisiblePay) {
-          // this.logger.log('[APP-STORE] HERE 1')
-          if (this.USER_ROLE === 'owner') {
-            // this.logger.log('[APP-STORE] HERE 2')
-            if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-              // this.logger.log('[APP-STORE] HERE 3')
-              this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true && (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D)) {
-              this.notify._displayContactUsModal(true, 'upgrade_plan');
-            } else if (this.prjct_profile_type === 'free' && this.prjct_trial_expired === true) {
-              // this.logger.log('[APP-STORE] HERE 4')
-              this.router.navigate(['project/' + this.projectId + '/pricing']);
+              this.presentModalOnlyOwnerCanManageTheAccountPlan();
             }
           } else {
-            // this.logger.log('[APP-STORE] HERE 5')
-
-            this.presentModalOnlyOwnerCanManageTheAccountPlan();
+            // this.logger.log('[APP-STORE] HERE 6')
+            this.notify._displayContactUsModal(true, 'upgrade_plan');
           }
-        } else {
-          // this.logger.log('[APP-STORE] HERE 6')
-          this.notify._displayContactUsModal(true, 'upgrade_plan');
         }
-      }
-    });
+      });
+    } else {
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+    }
   }
 
   // No more used - replaced by presentModalFeautureAvailableFromTier2Plan
diff --git a/src/app/hours/old_hours.component.html b/src/app/hours/old_hours.component.html
deleted file mode 100755
index 7b484b77d2c9..000000000000
--- a/src/app/hours/old_hours.component.html
+++ /dev/null
@@ -1,591 +0,0 @@
-<!-- <div class="navbar-brand" style="z-index: -1;margin-top:10px; padding-left:30px">
-    <i class="material-icons" style="vertical-align: middle !important; cursor: pointer;" (click)="goBack()">keyboard_arrow_left</i>
-    {{ "Hours" | translate }}
-</div> -->
-<!-- <p style="z-index: 1050;position: relative;margin-top:6px; padding-left:30px" class="navbar-brand">
-  {{ 'Settings' | translate }}
-</p> -->
-
-<span class="navbar-brand navbar-brand-sidebar-settings"
-  [ngStyle]="{'margin-top':isChromeVerGreaterThan100 === true ? '-64px' : '6px' }"
-  [ngClass]="{'is_opened':IS_OPEN_SETTINGS_SIDEBAR, 'is_closed':!IS_OPEN_SETTINGS_SIDEBAR }">
-
-  <i class="material-icons">settings</i>
-
-  <span *ngIf="IS_OPEN_SETTINGS_SIDEBAR">{{ 'Settings' | translate }} </span>
-</span>
-<!-- <span class="navbar-brand navbar-brand-title">
-  {{ "Hours" | translate }}
-</span> -->
-
-
-
-<div class="main-content" style="padding-top:0px; padding-left: 5px;padding-right: 5px;">
- 
-  <div class="page-title--sidebar-settings"
-    [ngClass]="{'page-title--sidebar-settings_opened':IS_OPEN_SETTINGS_SIDEBAR, 'page-title--sidebar-settings_closed':!IS_OPEN_SETTINGS_SIDEBAR }">
-    {{ 'Hours' | translate }}
-  </div>
-  
-  <div class="container-fluid" style="padding-left: 5px;padding-right: 5px;">
-    <div class="content-wpr" style="display: flex;">
-
-      <appdashboard-settings-sidebar> </appdashboard-settings-sidebar>
-
-      <div class="teplate-content" style="flex: 1 1 auto; margin-left: 20px;">
-
-        <div class="row">
-          <div class="col-md-12">
-
-            <div class="card card card--no-border" style="padding-bottom: 25px;margin-top: 5px;">
-
-              <loading-spinner *ngIf="showSpinner"></loading-spinner>
-
-              <div class="card-content" *ngIf="!showSpinner" style="padding-top: 10px;">
-
-                <div class="selector-bar">
-
-                  <div class="slot-add-selector">
-                    <div class="slot-name">General</div>
-                  
-                    <!-- ----------- MAT-MENU ----------- -->
-                    <button mat-icon-button [matMenuTriggerFor]="slotList" aria-label="namespaceList">
-                      <mat-icon>unfold_more</mat-icon>
-                    </button>
-                  
-                    <mat-menu #slotList="matMenu">
-                      <!-- Add slot option -->
-                      <button style="padding: 0 10px" class="mat-menu-custom-btn" mat-menu-item (click)="presentModalNewSlot()">
-                        <mat-icon>add</mat-icon>
-                        <span>New Slot</span>
-                      </button>
-
-                      <!-- General Operating Hours option -->
-                      <button style="padding: 0 10px" class="mat-menu-custom-btn" mat-menu-item (click)="onSelectGeneralOperatingHours()">
-                        <!-- // to be translated -->
-                        <span>General</span>
-                      </button>
-                    
-                      <!-- (click)="onSelectNamespace(namespace)" -->
-                      <!-- <button [ngClass]="{'active--namespace': namespace.name === selectedNamespace.name}" mat-menu-item
-                        *ngFor="let slot of timeSlotsArray">
-                        <span>{{slot}}</span>
-                      </button> -->
-
-                      <!-- Slot list options -->
-                      <button mat-menu-item *ngFor="let slot of timeSlotsArray" (click)="onSelectSlot(slot)">
-                        <span>{{slot.name}}</span>
-                      </button>
-
-                    </mat-menu>
-                  </div>
-                  <!-- <mat-form-field>
-                    <mat-label>Choose an option</mat-label>
-                    <mat-select>
-                      <mat-option value="option1">Option 1</mat-option>
-                      <mat-option value="option2">Option 2</mat-option>
-                      <mat-option value="option3">Option 3</mat-option>
-                    </mat-select>
-                  </mat-form-field> -->
-
-                  <button class="btn btn-primary" style="float:right" (click)="updateProject()">
-                    {{ "Save" | translate }}
-                  </button>
-                </div>
-
-                <!-- <div class="row">
-                  <div class="col-md-12">
-                    <button class="btn btn-primary" style="float:right" (click)="updateProject()">
-                      {{ "Save" | translate }}
-                    </button>
-
-                  </div>
-                </div> -->
-
-                <div class="row">
-                  <div class="col-md-12">
-
-                    <div class="oaerror info" style="margin-bottom: 16px;">
-                      <!-- color: #566787; font-weight:500; font-size: 14px; -->
-                      <p
-                        style=" font-size: 16px; font-family: 'Poppins','Roboto', 'Arial', sans-serif; color: #394f5a;">
-                        {{ "HoursPage.ActivateTimetables" | translate }}
-                      </p>
-
-
-                      <!-- <label class="container" for="hoursActive"
-                    style="margin-left: 0px; margin-bottom: 6px; color:#7695a5; font-weight:300">
-                    {{ "HoursPage.OpeningHoursActivated" | translate }}
-                    <input type="checkbox" id="hoursActive" (change)="onChange($event)"
-                      [checked]="isActiveOperatingHours" />
-                    <span class="checkmark" style="margin-top: 2px;"></span>
-                  </label> -->
-
-                      <div class="checkbox">
-                        <label class="title-attribute">
-                          <input type="checkbox" class="form-check-input" id="exampleCheck1" (change)="onChange($event)"
-                            [checked]="isActiveOperatingHours">
-                          <span style="font-size: 14px; color: #7695a5;">
-                            {{ "HoursPage.OpeningHoursActivated" | translate }}
-                          </span>
-                        </label>
-                      </div>
-
-                      <!--
-                  <div class="onoffswitch">
-                    <input (change)="onChange($event)" 
-                    [checked]="isActiveOperatingHours" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
-                    <label class="onoffswitch-label" for="myonoffswitch">
-                      <span class="onoffswitch-inner"></span>
-                      <span class="onoffswitch-switch"></span>
-                    </label>
-                  </div>
-
-                  <div class="info-div"> 
-                  <i class="material-icons" style="color: #5e9ded; vertical-align: middle;"> info </i> 
-                    <span style="color:#7695a5"> {{ "HoursPage.OpeningHoursActivated" | translate }} </span> 
-                  </div>
-                -->
-
-
-                    </div>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-md-12">
-
-                    <div class="oaerror info" [ngClass]="{'oaerror_info_disabled' : !isActiveOperatingHours}">
-                      <div class="row">
-
-                        <div class="col-sm-12">
-                          <p style=" font-size: 16px; font-family: 'Poppins', sans-serif !important; color: #394f5a;"
-                            [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                            Time zone
-                          </p>
-                        </div>
-
-                        <!-- /* THE PROJECT TIME ZONE IS SETTED TO */ -->
-                        <div class="col-sm-6 custom_col">
-                          <p style="color: #7695a5; font-size: 14px; margin-bottom: 8px"
-                            [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                            <!-- The project timezone is setted to: -->
-                            {{ "HoursPage.TheProject" | translate }} time zone {{ "HoursPage.IsSettedTo" | translate }}
-                          </p>
-                          <!-- // TOOLTIP -->
-                          <!-- <span class="tooltipx">time zone <span class="tooltiptext">{{ "HoursPage.CurrentTimezone" | translate }} (UTC {{ timezoneUTCOffsetForTooltip}}) {{timezoneNameForTooltip}}</span> </span>  -->
-
-                          <!-- // note: with ngModel is set the previously selected value on the select option dropdown -->
-                          <ng-select #selectElem class="custom" [(ngModel)]="current_prjct_timezone_name"
-                            (change)="setSelectedTimeZone()" style="margin-bottom: 6px;"
-                            [disabled]="!isActiveOperatingHours">
-                            <ng-option *ngFor="let tz of timezone_NamesAndUTC_list" [value]="tz.value"
-                              style="height: 16px !important" [disabled]="!isActiveOperatingHours">
-                              {{ tz.tz }}
-                            </ng-option>
-                          </ng-select>
-                        </div>
-
-                        <!-- /* YOU ARE CURRENTLY AT */ -->
-                        <div class="col-sm-6">
-                          <p style="color: #7695a5; font-size: 14px; margin-bottom: 6px"
-                            [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                            {{ "HoursPage.YouAreCurrentlyAt" | translate }} <span style="font-weight:400;"> (UTC
-                              {{ timezoneUTCOffsetForTooltip}}) {{timezoneNameForTooltip}} </span>
-                          </p>
-                          <button class="btn btn-primary"
-                            [disabled]="timeZoneSelectedIsUnlikeCurrentTimezone === false || !isActiveOperatingHours"
-                            (click)="setProjectToYourTimezone()"
-                            style="padding-top: 9px; padding-bottom: 9px; padding-right: 15px; padding-left: 15px; margin-top: 2px;">
-                            <span class="tooltipx">{{ "HoursPage.SetProjectToYourTimeZone" | translate }}
-                              <span *ngIf="timeZoneSelectedIsUnlikeCurrentTimezone === false" class="tooltiptext">
-                                {{ "HoursPage.TheProjectIsAlreadySettedOnYourTZ" | translate }}
-                              </span>
-                            </span>
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="col-md-12">
-                    <div class="card" [ngClass]="{'card_disabled' : !isActiveOperatingHours}">
-
-                      <div class="card-content table-responsive">
-                        <table class="table table-hover oh-table">
-                          <thead>
-                            <tr>
-                              <th>
-                                <span style="color: #394f5a; font-family:'Poppins','Roboto', 'Arial', sans-serif"
-                                  [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                                  <!-- <strong> -->
-                                  {{ "HoursPage.Day" | translate }}
-                                  <!-- </strong> -->
-                                </span>
-                              </th>
-
-                              <th colspan="2">
-                                <span style="color: #394f5a; font-family:'Poppins','Roboto', 'Arial', sans-serif"
-                                  [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                                  <strong>
-                                    {{ "HoursPage.Status" | translate }}
-                                  </strong>
-                                </span>
-                              </th>
-
-                              <!-- // FOR DEBUG -->
-                              <!-- <th>
-                            <span style="color: #566787">
-                              <strong>
-                                Hours
-                              </strong>
-                            </span>
-                          </th> -->
-
-                              <th style="padding-left: 25px;">
-                                <!--  color: #566787  -->
-                                <span style="color: #394f5a; font-family: 'Poppins','Roboto', 'Arial', sans-serif"
-                                  [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                                  <strong>
-                                    {{ "HoursPage.Morning" | translate }}
-                                  </strong>
-                                </span>
-                              </th>
-
-                              <th></th>
-
-                              <th style="padding-left: 25px;">
-                                <span style="color: #394f5a; font-family: 'Poppins','Roboto', 'Arial', sans-serif"
-                                  [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                                  <strong>
-                                    {{ "HoursPage.Afternoon" | translate }}
-                                  </strong>
-                                </span>
-                              </th>
-
-                            <tr>
-                          </thead>
-
-                          <tbody>
-                            <tr *ngFor="let d of days">
-
-                              <td>
-                                <span style="color: #7695a5; font-weight: 300"
-                                  [ngClass]="{'day_label_disabled' : !isActiveOperatingHours}">
-                                  {{ d.weekday | translate}}
-                                </span>
-                              </td>
-
-                              <td style="white-space: nowrap; width: 1%; padding-bottom: 6px;">
-                                <label class="switch" style="margin-bottom: 0px;">
-                                  <input type="checkbox"
-                                    (change)="onChangeOpenedClosedStatus($event, d?._id, d?.weekday)"
-                                    [checked]="d?.isOpen == true" [disabled]="!isActiveOperatingHours">
-                                  <!-- [ngClass]="{'open_close_switch_disabled' : !isActiveOperatingHours}" -->
-                                  <span class="slider round"
-                                    [ngClass]="{'open_close_switch_disabled' : !isActiveOperatingHours}"></span>
-                                </label>
-                              </td>
-
-                              <td>
-                                <span *ngIf="d.isOpen" class="opened_label"
-                                  [ngClass]="{'opened_closed_label_disabled' : !isActiveOperatingHours}">
-                                  <!-- APERTO -->
-                                  {{ "HoursPage.Opened" | translate }}
-                                </span>
-                                <span *ngIf="!d.isOpen" class="closed_label"
-                                  [ngClass]="{'opened_closed_label_disabled' : !isActiveOperatingHours}">
-                                  <!-- CHIUSO -->
-                                  {{ "HoursPage.Closed" | translate }}
-                                </span>
-                              </td>
-
-                              <!-- // FOR DEBUG -->
-                              <!-- <td>
-                            <tr *ngFor="let oh of d.operatingHours">
-                              <td> {{ oh.start }} </td>
-                              <td> {{ oh.end }}  </td>
-                            </tr>
-                          </td> -->
-
-                              <!-- ----------------------------------------------- -->
-                              <!-- AM HOUR -->
-                              <!-- ----------------------------------------------- -->
-                              <td style="padding-top: 6px; padding-bottom: 6px;">
-
-          
-                              <!-- ----------------------------------------------- -->
-                              <!-- AM START HOUR -->
-                              <!-- ----------------------------------------------- -->
-                                <!-- AM START HOUR - ONLY THE LABEL-BTN 'FROM' -->
-                                <button [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="button"
-                                  rel="tooltip" title="edit hour" class="btn btn-primary btn-simple btn-xs"
-                                  (click)='openAmStart(d?._id)' style="padding-right: 4px; color: #7695a5">
-                                  <span class="edithours_btnlabel">
-                                    {{ "HoursPage.From" | translate }}
-                                  </span>
-                                
-                                </button>
-
-                                <!-- AM START HOUR - THE INPUT/VISUALIZATION FIELD -->
-                                <input [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  (input)="onChangeAmStartFromArrow($event.target.value, d?._id)"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="time"
-                                  value="{{ d.operatingHoursAmStart }}">
-
-                                <!-- AM START HOUR - ONLY THE ICON-BTN FOR 'FROM' -->
-                                <!-- <button [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="button"
-                                  rel="tooltip" title="edit hour"
-                                  class="btn btn-primary btn-simple btn-xs custom_schedule_btn"
-                                  (click)='openAmStart(d?._id)' style="padding-right: 7px; padding-left: 1px;">
-                                  <i class="material-icons">schedule</i>
-                                </button> -->
-
-                                <br class="newline">
-
-                                <!-- =================================== AM END HOUR ========================================== -->
-                                <!-- AM END HOUR - ONLY THE LABEL-BTN 'TO' -->
-                                <button [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="button"
-                                  rel="tooltip" title="edit hour" class="btn btn-primary btn-simple btn-xs"
-                                  (click)='openAmEnd(d?._id)' style="padding-right: 4px; color: #7695a5">
-                                  <span class="edithours_btnlabelTo" [ngClass]="{'it_custom' : browser_lang == 'it'}">
-                                    {{ "HoursPage.To" | translate }}
-                                  </span>
-                                </button>
-
-                                <!-- AM END HOUR - THE INPUT/VISUALIZATION FIELD -->
-                                <input [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  (input)="onChangeAmEndFromArrow($event.target.value, d?._id)"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="time"
-                                  value="{{ d.operatingHoursAmEnd }}">
-
-                                <!-- AM END HOUR - ONLY THE ICON-BTN FOR 'TO' -->
-                                <!-- <button [disabled]="d.isOpen != true || !isActiveOperatingHours"
-                                  [ngClass]="{'disabled' : d.isOpen != true || !isActiveOperatingHours}" type="button"
-                                  rel="tooltip" title="edit hour" class="btn btn-primary btn-simple btn-xs"
-                                  (click)='openAmEnd(d?._id)' style="padding-right: 7px; padding-left: 1px;">
-                                  <i class="material-icons">schedule</i>
-                                </button> -->
-
-                              </td>
-
-                              <!-- =================================== BTNS: CLOSE / OPEN THE TIMES OF THE SECOND INTERVAL =================================== -->
-                              <td style="white-space: nowrap; width: 1%;">
-                                <!-- placeholder button - is dispalyed when the day is closed and when operating hours are not active -->
-                                <button *ngIf="d?.isOpen === false || !isActiveOperatingHours" type="button"
-                                  rel="tooltip" title="remove second interval"
-                                  class="btn btn-default btn-simple btn-xs  btn-circle close_pm disabled"
-                                  style="padding-left: 1px;padding-top: 1px; padding-right: 4px">
-                                  <i class="material-icons"
-                                    style="font-size: 12px; font-weight: 600; padding-bottom: 3px">
-                                    clear
-                                  </i>
-                                </button>
-
-                                <button *ngIf="d?.isOpenPm === true && d?.isOpen === true && isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="remove second interval"
-                                  class="btn btn-danger btn-simple btn-xs  btn-circle close_pm"
-                                  (click)="close_Pm(d?._id)"
-                                  style="padding-left: 1px;padding-top: 1px; padding-right: 4px">
-                                  <i class="material-icons"
-                                    style="font-size: 12px; font-weight: 600; padding-bottom: 3px">
-                                    clear
-                                  </i>
-                                </button>
-
-                                <button *ngIf="d?.isOpenPm === false && d?.isOpen === true && isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="add second interval"
-                                  class="btn btn-success btn-simple btn-xs  btn-circle open_pm"
-                                  (click)="open_Pm(d?._id)"
-                                  style="padding-left: 1px;padding-top: 1px; padding-right: 4px">
-                                  <i class="material-icons"
-                                    style="font-size: 12px; font-weight: 600; padding-bottom: 2px; position: relative; top: -2px;">
-                                    add
-                                  </i>
-                                </button>
-                              </td>
-
-                              <!-- ===================================================================================================
-                          ========================================== PM HOUR ================================================
-                          =================================================================================================== -->
-                              <td style="padding-top: 6px; padding-bottom: 6px;">
-
-                                <!-- =================================== PM START HOUR ========================================== -->
-                                <!-- PM START HOUR - ONLY THE LABEL-BTN 'FROM' -->
-                                <button [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="edit hour"
-                                  class="btn btn-primary btn-simple btn-xs"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  (click)='openPmStart(d?._id)' style="padding-right: 4px;color: #566787">
-                                  <span class="edithours_btnlabel">
-                                    {{ "HoursPage.From" | translate }}
-                                  </span>
-                                </button>
-
-                                <!-- PM START HOUR - THE INPUT/VISUALIZATION FIELD -->
-                                <input [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  (input)="onChangePmStartFromArrow($event.target.value, d?._id)"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  type="time" value="{{ d.operatingHoursPmStart }}">
-
-                                <!-- PM START HOUR - ONLY THE ICON-BTN FOR 'FROM' -->
-                                <!-- <button [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="edit hour"
-                                  class="btn btn-primary btn-simple btn-xs"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  (click)='openPmStart(d?._id)' style="padding-right: 7px; padding-left: 1px;">
-                                  <i class="material-icons">schedule</i>
-                                </button> -->
-
-                                <br class="newline">
-
-                                <!-- =================================== PM END HOUR ========================================== -->
-                                <!-- PM END HOUR - ONLY THE LABEL-BTN 'TO' -->
-                                <button [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="edit hour"
-                                  class="btn btn-primary btn-simple btn-xs"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  (click)='openPmEnd(d?._id)' style="padding-right: 4px; color: #566787">
-                                  <span class="edithours_btnlabelTo" [ngClass]="{'it_custom' : browser_lang == 'it'}">
-                                    {{ "HoursPage.To" | translate }}
-                                  </span>
-                                </button>
-
-                                <!-- PM END HOUR - THE INPUT/VISUALIZATION FIELD -->
-                                <input [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  (input)="onChangePmEndFromArrow($event.target.value, d?._id)"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  type="time" value="{{ d.operatingHoursPmEnd }}">
-
-                                <!-- PM END HOUR - ONLY THE ICON-BTN FOR 'TO' -->
-                                <!-- <button [disabled]="d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours"
-                                  type="button" rel="tooltip" title="edit hour"
-                                  class="btn btn-primary btn-simple btn-xs"
-                                  [ngClass]="{'disabled' : d.isOpen != true || d.isOpenPm == false || !isActiveOperatingHours}"
-                                  (click)='openPmEnd(d?._id)' style="padding-right: 7px;padding-left: 1px;">
-                                  <i class="material-icons">schedule</i>
-                                </button> -->
-
-                              </td>
-
-                            </tr>
-                          </tbody>
-                        </table>
-                      </div>
-
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="col-md-12">
-                    <button class="btn btn-primary" (click)="updateProject()">
-                      <!-- {{ "HoursPage.UpdateHours" | translate }} -->
-                      {{ "Save" | translate }}
-                    </button>
-
-                    <!-- // TEST THE OPERATORS  -->
-                    <!-- <button class="btn btn-success" (click)="testAvailableProjectUserConsideringProjectOperatingHours()">
-                  TEST AVAILABLE
-                </button> -->
-                  </div>
-                </div>
-
-                <!-- // TO TEST OPERATING HOURS BY INIECTING THE JSON IN THE INPUT FIELD -->
-                <!-- <label  class="col-sm-2" style="height: 36px; padding-top: 7px; padding-left: 16px; padding-right: 16px; text-align: right;">
-              + {{ "Hours" | translate }}
-            </label>
-            <div class="col-sm-10">
-              <input [(ngModel)]="operatingHours" class="" type="text" placeholder='{{ "Hours" | translate }}'>
-            </div> -->
-
-              </div>
-              <!-- // BUTTON TO TEST OPERATING HOURS BY INIECTING THE JSON IN THE INPUT FIELD -->
-              <!-- <div style="padding-left:25px" class="col-sm-10 col-sm-offset-2">
-            <button class="btn btn-success" (click)="updateProjectOperatingHours()">
-              {{ "HoursPage.UpdateHours" | translate }}
-            </button>   
-          </div> -->
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- ============ INFO MODAL: UPDATING OPERATING HOURS IN PROGRESS ============ -->
-<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': displayModalUpdatingOperatingHours}"
-  style="background-color: rgba(90,90,90,0.5);">
-  <div class="modal-dialog modal-sm" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="closeModalOperatingHours()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-
-        <h4 class="modal-title">
-          {{ "HoursPage.UpdateHours" | translate }}
-          <!-- <code>{{id_toDelete}}</code> -->
-        </h4>
-      </div>
-
-      <div class="modal-body" style="padding-top:15px; padding-bottom:15px">
-        <span *ngIf="SHOW_CIRCULAR_SPINNER">
-          <div class="loader" style="top:25%;">
-            <svg class="circular" viewBox="25 25 50 50">
-              <circle class="path" cx="50" cy="50" r="15" fill="none" stroke-width="2" stroke-miterlimit="10" />
-            </svg>
-
-          </div>
-          <p style="margin-top: 60px; text-align: center; color: #566787; font-weight: 500">
-            {{ "HoursPage.Processing" | translate }}
-          </p>
-        </span>
-
-        <!-- IF THERE IS NO ERROR -->
-        <span *ngIf="!SHOW_CIRCULAR_SPINNER && !UPDATE_HOURS_ERROR ">
-          <div style="text-align: center">
-            <i class="material-icons" style="color:#70b665">done</i>
-            <p style="color:#70b665; font-weight: 500">
-              {{ "HoursPage.Completed" | translate }}
-            </p>
-          </div>
-          <p style="margin-top:10px; text-align: center; color: #566787; font-weight: 500">
-            {{ "HoursPage.OperatingHoursSuccessfullyUpdated" | translate }}
-          </p>
-        </span>
-
-        <!-- IF THERE IS AN ERROR -->
-        <span *ngIf="!SHOW_CIRCULAR_SPINNER && UPDATE_HOURS_ERROR">
-          <div style="text-align: center ">
-            <i class="material-icons" style="color:#ff5252">report_problem</i>
-            <p style="color:#ff5252; font-weight: 500">
-              <!-- {{ "HoursPage.Error" | translate }} -->
-              {{ "Error" | translate }}
-            </p>
-          </div>
-          <p style="margin-top:10px; text-align: center; color: #566787; font-weight: 500">
-            <span *ngIf="!TIMEZONE_NAME_IS_NULL">{{ "HoursPage.AnErrorHasOccurred" | translate }}</span> <span
-              *ngIf="TIMEZONE_NAME_IS_NULL">{{ "HoursPage.ErrorSelectTheProjectTimezone" | translate }}</span>
-          </p>
-        </span>
-      </div>
-
-      <div class="modal-footer" style="text-align: center;">
-        <button class="btn btn-primary" [disabled]="SHOW_CIRCULAR_SPINNER" (click)="closeModalOperatingHoursHandler()"
-          style="padding:12px 16px;">
-          {{ "HoursPage.Continue" | translate }}
-        </button>
-      </div>
-
-    </div>
-    <!-- /.modal-content -->
-  </div>
-  <!-- /.modal-dialog -->
-</div>
\ No newline at end of file
diff --git a/src/app/hours/old_hours.component.ts b/src/app/hours/old_hours.component.ts
deleted file mode 100755
index 460e9d52ee29..000000000000
--- a/src/app/hours/old_hours.component.ts
+++ /dev/null
@@ -1,876 +0,0 @@
-import { Component, OnInit, ViewEncapsulation, OnDestroy, ViewChild } from '@angular/core';
-import { AuthService } from '../core/auth.service';
-
-import { ProjectService } from '../services/project.service';
-import { UsersService } from '../services/users.service';
-
-// import { AmazingTimePickerService } from 'amazing-time-picker';
-import { TranslateService } from '@ngx-translate/core';
-
-// import * as moment from 'moment';
-import * as moment from 'moment-timezone'
-import { NotifyService } from '../core/notify.service';
-
-import { Router } from '@angular/router';
-import { Project } from '../models/project-model';
-import { AppConfigService } from '../services/app-config.service';
-import { LoggerService } from '../services/logger/logger.service';
-import { FormControl } from "@angular/forms";
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { NewSlotModalComponent } from './modals/new-slot-modal/new-slot-modal.component';
-import { v4 as uuidv4 } from 'uuid';
-
-@Component({
-  selector: 'appdashboard-hours',
-  templateUrl: './old_hours.component.html',
-  styleUrls: ['./hours.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-
-
-export class HoursComponent implements OnInit, OnDestroy {
-
-  // time picker
-  formControlItem: FormControl = new FormControl("");
-  required: boolean = !1;
-  @ViewChild("timepicker") timepicker: any;
-
-
-
-  activeOperatingHours: boolean;
-  operatingHours: any;
-
-  public days = [
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '0',
-      weekday: 'Sunday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '1',
-      weekday: 'Monday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '2',
-      weekday: 'Tuesday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '3',
-      weekday: 'Wednesday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '4',
-      weekday: 'Thursday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '5',
-      weekday: 'Friday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    },
-    // tslint:disable-next-line:max-line-length
-    {
-      _id: '6',
-      weekday: 'Saturday',
-      isOpen: false,
-      isOpenPm: true,
-      operatingHours: '',
-      operatingHoursAmStart: '',
-      operatingHoursAmEnd: '',
-      operatingHoursPmStart: '',
-      operatingHoursPmEnd: ''
-    }
-  ];
-
-  // daysList: any;
-  IS_OPEN = false;
-
-  projectid: string;
-  projectname: string;
-  project_operatingHours: any;
-  project_timeSlots: any;
-  public selectedTime: any;
-  projectOffsetfromUtcZero: any;
-  offsetDirectionFromUtcZero: any;
-  isActiveOperatingHours: boolean;
-  browser_lang: string;
-  IS_CLOSED_IN_PM: boolean;
-  timezone_name: string;
-  current_prjct_timezone_name: string;
-  current_prjct_UTC: any;
-  timezone_NamesAndUTC_list: any;
-  timezoneNameForTooltip: any;
-  timezoneUTCOffsetForTooltip: any;
-  displayModalUpdatingOperatingHours = 'none'
-  SHOW_CIRCULAR_SPINNER = false;
-  UPDATE_HOURS_ERROR = false;
-  TIMEZONE_NAME_IS_NULL = false;
-  timeZoneSelectedIsUnlikeCurrentTimezone: boolean;
-
-  showSpinner = true;
-  public_Key: string;
-  IS_OPEN_SETTINGS_SIDEBAR: boolean;
-  // hasSaved: boolean
-  isChromeVerGreaterThan100: boolean;
-  USER_ROLE: string;
-
-  timeSlotsArray: Array<any> = [];
-
-  constructor(
-    private auth: AuthService,
-    private projectService: ProjectService,
-    private usersService: UsersService,
-    // private atp: AmazingTimePickerService,
-    private translate: TranslateService,
-    public notify: NotifyService,
-    private router: Router,
-    public appConfigService: AppConfigService,
-    private logger: LoggerService,
-    public dialog: MatDialog,
-  ) { }
-
-  ngOnInit() {
-    this.logger.log('[HOURS] - on init DAYS ', this.days);
-
-    // getCurrentProject > getProjectById > BUILD THE OBJECT DAYS
-    this.getCurrentProject();
-    this.getOSCODE();
-    // this.daysList = this.days
-    this.auth.checkRoleForCurrentProject();
-
-    // this.projectOffsetfromUtcZero = this.getPrjctOffsetHoursfromTzOffset();
-    // this.logger.log('[HOURS] - PRJCT OFFSET FROM UTC 0::: ', this.projectOffsetfromUtcZero);
-
-    this.browser_lang = this.translate.getBrowserLang();
-    this.logger.log('[HOURS] - BROWSER LANGUAGE ', this.browser_lang);
-
-
-    this.current_prjct_UTC = moment.tz(this.current_prjct_timezone_name).format('Z');
-    this.logger.log('[HOURS] - CURRENT PROJECT TIMEZONE-UTC ', this.current_prjct_UTC);
-
-    // current TIMEZONE NAME - USED IN THE BOX 'You are currently at:' and
-    // to set to the current timezone the timezone selected in the option input
-    this.timezoneNameForTooltip = moment.tz.guess();
-    this.logger.log('[HOURS] - TIMEZONE NAME FOR TOOLTIP  ', this.timezoneNameForTooltip);
-
-    // current TIMEZONE OFFSET - USED IN THE BOX 'You are currently at:'
-    this.timezoneUTCOffsetForTooltip = moment.tz(this.timezoneNameForTooltip).format('Z')
-    this.logger.log('[HOURS] - TIMEZONE OFFSET FOR TOOLTIP  ', this.timezoneUTCOffsetForTooltip);
-
-
-    /* ====== DEBUG ====== */
-    // const timezone_offset = moment.tz(timezone_name).utcOffset()
-    // const timezone_offset = moment.tz(moment.utc(), 'America/New_York').utcOffset()
-    // const timezone_offset = moment.tz(moment.utc(), 'EST5EDT').utcOffset()
-    // const timezone_offset = moment.tz(moment.utc(), 'Europe/Rome').utcOffset()
-    // this.logger.log('»» »» HOURS COMP - TIMEZONE OOOFFSET ', timezone_offset);
-
-    const timezone_names = moment.tz.names();
-    // this.logger.log('»» »» HOURS COMP - TIMEZONE NAMES ', timezone_names);
-
-    this.timezone_NamesAndUTC_list = []
-    timezone_names.forEach(timezone_name => {
-      const tzNameAndUTC = '(UTC ' + moment.tz(timezone_name).format('Z') + ') ' + timezone_name
-      // this.logger.log('(UTC ', moment.tz(timezone_name).format('Z'), ') ', timezone_name);
-      this.timezone_NamesAndUTC_list.push({ tz: tzNameAndUTC, value: timezone_name })
-
-    });
-    this.logger.log('[HOURS] - TIMEZONE NAME & OFFSET ARRAY ', this.timezone_NamesAndUTC_list);
-    this.listenSidebarIsOpened();
-    this.getBrowserVersion();
-    this.getUserRole()
-  }
-
-  getUserRole() {
-    this.usersService.project_user_role_bs
-      .subscribe((userRole) => {
-        this.logger.log('[HOURS] - $UBSCRIPTION TO USER ROLE »»» ', userRole)
-        this.USER_ROLE = userRole;
-      })
-  }
-
-  getBrowserVersion() {
-    this.auth.isChromeVerGreaterThan100.subscribe((isChromeVerGreaterThan100: boolean) => { 
-     this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-    //  this.logger.log("[WS-REQUESTS-LIST] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
-  } 
-
-  listenSidebarIsOpened() {
-    this.auth.settingSidebarIsOpned.subscribe((isopened) => {
-      this.logger.log('[HOURS] SETTINGS-SIDEBAR isopened (FROM SUBSCRIPTION) ', isopened)
-      this.IS_OPEN_SETTINGS_SIDEBAR = isopened
-    });
-  }
-
-
-  getOSCODE() {
-    this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
-    // this.logger.log('[HOURS] AppConfigService getAppConfig public_Key', this.public_Key);
-    let keys = this.public_Key.split("-");
-    // this.logger.log('[HOURS] PUBLIC-KEY keys', keys)
-    keys.forEach(key => {
-      // this.logger.log('HOURS COMP public_Key key', key)
-      if (key.includes("OPH")) {
-        // this.logger.log('[HOURS] PUBLIC-KEY - key', key);
-        let oph = key.split(":");
-        // this.logger.log('[HOURS] PUBLIC-KEY - oph key&value', oph);
-        if (oph[1] === "F") {
-          this.router.navigate([`project/${this.projectid}/unauthorized`]);
-        }
-      }
-    });
-
-
-    if (!this.public_Key.includes("OPH")) {
-      // this.logger.log('PUBLIC-KEY (Home) - key.includes("OPH")', this.public_Key.includes("OPH"));
-      this.router.navigate([`project/${this.projectid}/unauthorized`]);
-    }
-  }
-
-  ngOnDestroy() {
-    // this.logger.log('[HOURS] - NG-ON-DESTROY ')
-
-  }
-
-  setProjectToYourTimezone() {
-    this.logger.log('[HOURS] - SET TIMEZONE TO YOUR TIMEZONE ', this.timezoneNameForTooltip);
-    this.current_prjct_timezone_name = this.timezoneNameForTooltip
-
-    if (this.current_prjct_timezone_name !== this.timezoneNameForTooltip) {
-      this.timeZoneSelectedIsUnlikeCurrentTimezone = true;
-      this.logger.log('[HOURS] - TIMEZONE SELECTED id != OF CURRENT TIMEZONE ? ', this.timeZoneSelectedIsUnlikeCurrentTimezone);
-    } else {
-      this.timeZoneSelectedIsUnlikeCurrentTimezone = false;
-    }
-  }
-
-  setSelectedTimeZone(): void {
-    this.logger.log('[HOURS] - TIMEZONE SELECTED ', this.current_prjct_timezone_name);
-
-    if (this.current_prjct_timezone_name !== this.timezoneNameForTooltip) {
-      this.timeZoneSelectedIsUnlikeCurrentTimezone = true;
-      this.logger.log('[HOURS] - TIMEZONE SELECTED id != OF CURRENT TIMEZONE ? ', this.timeZoneSelectedIsUnlikeCurrentTimezone);
-    } else {
-      this.timeZoneSelectedIsUnlikeCurrentTimezone = false;
-    }
-  }
-
-  // !! NO MORE USED
-  getPrjctOffsetHoursfromTzOffset() {
-    // The getTimezoneOffset() method returns the time difference between UTC time and local time, in minutes
-    // e.g.: -120
-    const offset = new Date().getTimezoneOffset();
-    this.logger.log('[HOURS] - GET CURRENT DATE', new Date());
-
-
-    this.logger.log('[HOURS] - GET TIMEZONE OFFSET ', offset);
-
-    const a = moment.tz('2013-11-18 11:55', 'Asia/Taipei');
-    const testdate = a.format();
-    this.logger.log('[HOURS] - TEST DATE  ', testdate);
-    const _testdate = new Date(testdate);
-    this.logger.log('[HOURS] - NEW TEST DATE ', _testdate);
-    this.logger.log('[HOURS] - OFFSET OF TEST DATE  ', _testdate.getTimezoneOffset())
-
-    // moment.tz.zone('America/Los_Angeles').utcOffset(1403465838805);
-    // NEW  FOR DEBUG ==============================================
-    //  -3 | -2 | -1 | UTC | +1 | +2 | +3 |
-    if (offset < 0) {
-      // EXAMPLE -2 hours after UTC
-      this.logger.log(offset / 60 + ' hours after UTC');
-    } else {
-      document.write(offset / 60 + ' hours before UTC')
-    }
-
-    const offsetStr = offset.toString();
-    this.logger.log('[HOURS] - GET TIMEZONE OFFSET (AS STRING) ', offsetStr);
-
-    const offsetOperator = offsetStr.substring(0, 1);
-    this.logger.log('[HOURS] - TIMEZONE OFFSET OPERATOR ', offsetOperator);
-    // the purpose is to transform the timezone from -120 into the form +2
-    // that is, transform the difference in minutes between the local time of the client and the utc in the form UTC +/- (hours)
-    if (offsetOperator === '-') {
-      this.offsetDirectionFromUtcZero = '+';
-      this.logger.log('[HOURS] - TIMEZONE OFFSET DIRECTION from UTC 0: ', this.offsetDirectionFromUtcZero);
-    } else if (offsetOperator === '+') {
-      this.offsetDirectionFromUtcZero = '-';
-      this.logger.log('[HOURS] - TIMEZONE OFFSET DIRECTION from UTC 0: ', this.offsetDirectionFromUtcZero);
-    }
-    const offsetMinutesAsString = offsetStr.substr(1);
-    const offsetMinutes = parseInt(offsetMinutesAsString, 0);
-    this.logger.log('[HOURS] - TIMEZONE OFFSET MINUTES: ', offsetMinutes);
-    const offsetHours = offsetMinutes / 60;
-    this.logger.log('[HOURS] - TIMEZONE OFFSET HOURS: ', offsetHours);
-
-    return this.offsetDirectionFromUtcZero + offsetHours;
-  }
-
-  getCurrentProject() {
-    this.auth.project_bs.subscribe(project => {
-      if (project) {
-        this.projectid = project._id;
-        this.projectname = project.name;
-        this.logger.log('[HOURS] - PROJECT (from AUTH SERV subscription) ', project);
-        this.logger.log('[HOURS] - PROJECT: PROJECT ID ', this.projectid);
-        this.logger.log('[HOURS] - PROJECT: PROJECT NAME ', this.projectname);
-
-        if (this.projectid) {
-          this.getProjectById();
-        }
-      }
-    });
-  }
-
-  /* --------------------------------------------------------------------------------------------------
-   * GET THE PROJECT BY ID AND WITH THE DATA OF OPERATING HOURS (PRESENT OR LESS)
-   * BUILD THE OBJECT DAYS
-   * --------------------------------------------------------------------------------------------------*/
-  getProjectById() {
-    this.projectService.getProjectById(this.projectid).subscribe(
-      (project: any) => {
-        this.logger.log('[HOURS] - on init PROJECT (DETAILS) BY ID - PROJECT OBJECT: ', project);
-
-        if (project) {
-          this.logger.log('[HOURS] - on init PROJECT OPERATING HOURS (first to assign): ', project.operatingHours);
-
-          /*  CHECK IF THE PROPERTY activeOperatingHours IS DEFINED */
-          // (e.g. THE VALUE OF activeOperatingHours WILL BE 'undefined' FOR A PROJECT CREATED BEFORE
-          // THE IMPLEMENTATION IN CHAT21-NODEJS-API > ROUTES > PROJECT OF THE PROPERTY activeOperatingHours = false)
-          if (project.activeOperatingHours !== undefined) {
-            // used for the checkbox "Activate operating hours"
-            this.isActiveOperatingHours = project.activeOperatingHours;
-            this.logger.log('[HOURS] - on init PROJECT OPERATING HOURS IS ACTIVE: ', this.isActiveOperatingHours);
-          } else {
-            this.logger.log('[HOURS] - on init PROJECT OPERATING HOURS IS ACTIVE: ', this.isActiveOperatingHours);
-            // this.isActiveOperatingHours = false
-          }
-
-          /*  CHECK IF THE OBJECT activeOperatingHours IS DEFINED */
-          // (e.g. FOR NEW PROJECT THE OBJECT activeOperatingHours WILL BE ALWAYS 'undefined'
-          // NOTE: if activeOperatingHours is 'undefined' the value of the timezone name selected is setted equal to
-          // the current tiemzone get with moment (see the else block)
-          if (project.operatingHours !== undefined) {
-            this.project_operatingHours = JSON.parse(project.operatingHours);
-            this.logger.log('[HOURS]- on init PROJECT OPERATING HOURS: ', this.project_operatingHours);
-            this.logger.log('[HOURS] - on init PROJECT TIMEZONE NAME: ', this.project_operatingHours['tzname']);
-
-            this.current_prjct_timezone_name = this.project_operatingHours['tzname'];
-
-            // GET THE TIMEZONE NAME FROM THE OBJECT OPERATING HOURS PF THE PROJECT
-            // IF IT IS != BY THE CURRENT TIMEZONE SET TO TRUE timeZoneSelectedIsUnlikeCurrentTimezone
-            // USED TO DISABLED / ENABLED THE BTN 'SET PROJWCT TIMEZONE TO CURRENT TIMEZONE'
-
-            if (this.current_prjct_timezone_name !== this.timezoneNameForTooltip) {
-              this.timeZoneSelectedIsUnlikeCurrentTimezone = true
-              // tslint:disable-next-line:max-line-length
-              this.logger.log('[HOURS] - on init TIMEZONE SELECTED id != OF CURRENT TIMEZONE? ', this.timeZoneSelectedIsUnlikeCurrentTimezone);
-
-            } else {
-              this.timeZoneSelectedIsUnlikeCurrentTimezone = false
-            }
-
-
-
-            // SE NEL OGGETTO OPERATING HOURS DEL PROGETTO E PRESENTE LA KEY CHE INDICA IL GIORNO AGGIUNGO OPERATING
-            // HOURS ALL OBJECT DAY (CREO COSì L'OGGETTO DAYS CHE USO NEL TEMPLATE)
-            let i: number;
-            for (i = 0; i < 7; i++) {
-              // this.logger.log('CICLO I =  ', i)
-              if (this.project_operatingHours.hasOwnProperty(i)) {
-                this.logger.log('[HOURS]', this.days[i].weekday, ' IS SETTED');
-                this.logger.log('[HOURS] operating hours start ', this.project_operatingHours[i]);
-
-                this.days[i].operatingHours = this.project_operatingHours[i];
-
-                this.days[i].isOpen = true;
-
-                this.days[i].operatingHoursAmStart = this.project_operatingHours[i][0].start;
-                this.days[i].operatingHoursAmEnd = this.project_operatingHours[i][0].end;
-
-                if (this.project_operatingHours[i][1]) {
-                  this.days[i].operatingHoursPmStart = this.project_operatingHours[i][1].start;
-                  this.days[i].operatingHoursPmEnd = this.project_operatingHours[i][1].end;
-                }
-
-                // this.project_operatingHours[i].forEach(hours => {
-                //   this.logger.log('hours start  ', hours.start, 'hours end  ', hours.end)
-                //   this.days[i].operatingHoursAmStart = hours.start
-                //   this.days[i].operatingHoursAmEnd =  hours.end
-                // });
-
-                // this.days.forEach(day => {
-                //   const num = i
-                //   this.logger.log('operating hours ', this.project_operatingHours[i] )
-
-                //   if (day._id === this.project_operatingHours[i]) {
-                //     this.logger.log('day id ', day._id, ' i:  ', i)
-                //     day.isOpen = true;
-                //     day.operatingHours = this.project_operatingHours[i]
-                //     // this.logger.log('DAY IS OPEN ', day.isOpen)
-                this.logger.log('[HOURS] - DAYS ON INIT ', this.days);
-                if (this.days[i].operatingHoursPmStart === '') {
-                  this.days[i].isOpenPm = false;
-                }
-                //   }
-                // });
-              } else {
-                this.logger.log('[HOURS] ', this.days[i].weekday, ' IS ! NOT SETTED ');
-              }
-            }
-          } else {
-            this.logger.log('[HOURS] - OPERATING HOURS ARE UNDEFINED', project.operatingHours);
-
-            // IF THE OPERATING HOURS OBJECT IS UNDEFINED TAKES THE NAME OF THE TIMEZONE FROM THE MOMENT LIBRARY
-            // note: current_prjct_timezone_name is the timezone name displayed as selected in the timezone deropdownlist
-            this.current_prjct_timezone_name = moment.tz.guess();
-            this.logger.log('[HOURS] - CURRENT PROJECT TIMEZONE-NAME DETECTED ', this.current_prjct_timezone_name);
-
-            this.timeZoneSelectedIsUnlikeCurrentTimezone = false
-          }
-
-          if (project.timeSlots) {
-            console.log("project.timeSlots: ", project.timeSlots)
-            this.project_timeSlots = project.timeSlots;
-            this.timeSlotsArray = Object.keys(project.timeSlots).map(key => ({
-              id: key,
-              ...project.timeSlots[key]
-            }));
-            console.log("this.timeSlotsArray: ", this.timeSlotsArray)
-          } else {
-            this.project_timeSlots = {};
-            console.log("this.timeSlotsArray: ", this.timeSlotsArray)
-          }
-
-        }
-      }, error => {
-        this.showSpinner = false;
-        this.logger.error('[HOURS] - GET PROJECT BY ID - ERROR ', error);
-      }, () => {
-        this.showSpinner = false;
-        this.logger.log('[HOURS] - GET PROJECT BY ID - COMPLETE ');
-      }
-    );
-  }
-
-  onChange($event) {
-    this.activeOperatingHours = $event.target.checked;
-    // used in the template to change the checkbox label text
-    this.isActiveOperatingHours = this.activeOperatingHours;
-    this.logger.log('[HOURS] - onChange OPERATING HOURS ARE ACTIVE ', this.activeOperatingHours);
-  }
-
-  // !!! TEST METHOD - UPDATE PROJECT OPERATING HOURS - USED (FOR TEST) TO 'INIECT' THE JSON 'OPERATING HOURS' FROM THE INPUT FIELD
-  // (see in the template)
-  updateProjectOperatingHours() {
-    this.logger.log('[HOURS] - ON UPDATE OPERATING HOURS - OPERATING HOURS ARE ACTIVE ', this.activeOperatingHours);
-    this.logger.log('[HOURS] - ON UPDATE OPERATING HOURS - OPERATING HOURS ', this.operatingHours);
-
-    this.projectService
-      .updateProjectOperatingHours(this.activeOperatingHours, this.operatingHours)
-      .subscribe(project => {
-        this.logger.log('[HOURS]  »»»»»» UPDATED PROJECT ', project);
-      });
-  }
-
-  testAvailableProjectUserConsideringProjectOperatingHours() {
-    const offset = new Date().getTimezoneOffset();
-    this.logger.log('[HOURS] - OFFEST ', offset);
-
-    const time = new Date('2001-01-01T06:00:00+08:00');
-    this.logger.log('[HOURS] - TIME ', time);
-    this.logger.log('[HOURS] - TIME ', time.toUTCString());
-
-    this.usersService
-      .getAvailableProjectUsersConsideringOperatingHours()
-      .subscribe(available_project => {
-        this.logger.log('[HOURS] »»»»»»» NEW - GET AVAILABLE PROJECT USERS (CONSIDERING OPERATING HOURS)', available_project);
-      }, (error) => {
-        this.logger.error('[HOURS] »»»»»»» NEW - GET AVAILABLE PROJECT USERS (CONSIDERING OPERATING HOURS) - ERROR ', error);
-        // this.showSpinner = false;
-      }, () => {
-        this.logger.log('[HOURS] »»»»»»» NEW - GET AVAILABLE PROJECT USERS (CONSIDERING OPERATING HOURS) * COMPLETE');
-      });
-
-  }
-
-
-  onChangeOpenedClosedStatus($event, weekdayid: string, weekdayname: string) {
-    // this.logger.log('XXXX ', $event.target.checked)
-    // tslint:disable-next-line:max-line-length
-    this.logger.log('[HOURS] - CLICKED CHANGE STATUS OPENED/CLOSED for the WEEKDAY ID ', weekdayid, ' - ', weekdayname, 'IS OPEN ', $event.target.checked);
-
-    this.days.forEach(day => {
-      if (weekdayid === day._id && $event.target.checked === true) {
-        day.isOpen = true;
-        this.logger.log('[HOURS] - DAY IS OPEN ', day.isOpen);
-        this.logger.log('[HOURS] - DAYS ', this.days);
-        day.operatingHoursAmStart = '09:00';
-        day.operatingHoursAmEnd = '13:00';
-        day.operatingHoursPmStart = '14:00';
-        day.operatingHoursPmEnd = '18:00';
-        this.logger.log('[HOURS] - AM START ', day.operatingHoursAmStart, 'AM END ', day.operatingHoursAmEnd);
-        this.logger.log('[HOURS] - PM START ', day.operatingHoursPmStart, 'PM END ', day.operatingHoursPmEnd);
-
-        // SET to TRUE isOpenPm
-        day.isOpenPm = true;
-      } else if (weekdayid === day._id && $event.target.checked === false) {
-        day.isOpen = false;
-        this.logger.log('[HOURS] - DAYS ', this.days);
-        day.operatingHoursAmStart = '';
-        day.operatingHoursAmEnd = '';
-        day.operatingHoursPmStart = '';
-        day.operatingHoursPmEnd = '';
-      }
-    });
-    // this.days = $event.target.checked;
-  }
-
-  // open(dayid) {
-  //   this.logger.log('DAY ID ', dayid)
-  //   const amazingTimePicker = this.atp.open({
-  //     // time: this.selectedTime,
-  //     time: this.days[dayid].operatingHoursAmStart,
-  //     theme: 'dark',
-  //     arrowStyle: {
-  //       background: 'red',
-  //       color: 'white'
-  //     }
-  //   });
-  //   onChangeOpenedClosedStatus.afterClose().subscribe(time => {
-  //     this.days[dayid].operatingHoursAmStart = time;
-  //     this.logger.log('SELECTED TIME  ', this.days[dayid].operatingHoursAmStart)
-  //     this.logger.log('DAYS  ', this.days)
-  //   });
-  // }
-
-  updateProject() {
-    // this.hasSaved = true;
-
-    this.displayModalUpdatingOperatingHours = 'block'
-    this.SHOW_CIRCULAR_SPINNER = true;
-
-    this.logger.log('[HOURS] - WHEN UPDATE PROJECT - DAYS ', this.days);
-
-    const operatingHoursUpdated = {};
-
-    let j;
-    for (j = 0; j < 7; j++) {
-      if (this.days[j].isOpen === true) {
-        // tslint:disable-next-line:max-line-length
-        operatingHoursUpdated[j] = [
-          { start: this.days[j].operatingHoursAmStart, end: this.days[j].operatingHoursAmEnd },
-          { start: this.days[j].operatingHoursPmStart, end: this.days[j].operatingHoursPmEnd }
-        ];
-      }
-    }
-
-    /* !!!! NO MORE USED */
-    // e.g.: operatingHoursUpdated = '"tz": "+2"'
-    // operatingHoursUpdated['tz'] = this.projectOffsetfromUtcZero;
-    // this.logger.log('»»» PROJECT OFFSET FROM UTC : ', this.projectOffsetfromUtcZero);
-
-    if (this.current_prjct_timezone_name !== null) {
-      // e.g.: Europe/Rome
-      operatingHoursUpdated['tzname'] = this.current_prjct_timezone_name;
-
-
-      this.logger.log('[HOURS] - OPERATING HOURS UPDATED: ', operatingHoursUpdated);
-      this.logger.log('[HOURS] - THIS TIMEZONE NAME: ', this.current_prjct_timezone_name);
-
-      const operatingHoursUpdatedStr = JSON.stringify(operatingHoursUpdated);
-      this.projectService
-        .updateProjectOperatingHours(this.activeOperatingHours, operatingHoursUpdatedStr)
-        .subscribe((project: any)=> {
-          this.logger.log('[HOURS] - UPDATED PROJECT ', project);
-          this.logger.log('[HOURS] - UPDATED PROJECT this.activeOperatingHours', this.activeOperatingHours);
-          project['role'] = this.USER_ROLE;
-          // const _project: Project = {
-          //   _id: project['_id'],
-          //   name: project['name'],
-          //   profile_name: project['profile'].name,
-          //   trial_expired: project['trialExpired'],
-          //   trial_days_left: project['trialDaysLeft'],
-          //   operatingHours: project['activeOperatingHours']
-          // }
-
-          this.logger.log('[HOURS] - UPDATED PROJECT _project set in storage', project);
-          localStorage.setItem(project['_id'], JSON.stringify(project));
-          // const _ project = project
-          this.auth.projectSelected(project, 'hours')
-
-
-        }, (error) => {
-            this.logger.error('[HOURS] - UPDATE PROJECT - ERROR ', error);
-            this.SHOW_CIRCULAR_SPINNER = false;
-            this.UPDATE_HOURS_ERROR = true;
-            this.notify.showWidgetStyleUpdateNotification('An error has occurred updating operating hours', 4, 'report_problem')
-          },() => {
-            this.logger.log('[HOURS] - UPDATE PROJECT * COMPLETE *');
-
-            setTimeout(() => {
-              this.SHOW_CIRCULAR_SPINNER = false
-            }, 300);
-
-            this.UPDATE_HOURS_ERROR = false;
-            this.notify.showWidgetStyleUpdateNotification('operating hours has been successfully updated', 2, 'done');
-          });
-
-    } else {
-      // the timezone name is null
-      setTimeout(() => {
-        this.SHOW_CIRCULAR_SPINNER = false
-        this.UPDATE_HOURS_ERROR = true;
-        this.TIMEZONE_NAME_IS_NULL = true;
-      }, 300);
-
-
-    }
-  }
-
-  closeModalOperatingHours() {
-    this.displayModalUpdatingOperatingHours = 'none'
-  }
-
-  closeModalOperatingHoursHandler() {
-    this.displayModalUpdatingOperatingHours = 'none'
-  }
-
-  onChangeAmStartFromArrow(time, weekdayid) {
-    this.logger.log('[HOURS] - ON CHANGE AM START FROM  UP/DOWN ARROW - DAY ID', weekdayid, ' - TIME: ', time);
-    this.days[weekdayid].operatingHoursAmStart = time;
-  }
-
-  onChangeAmEndFromArrow(time, weekdayid) {
-    this.logger.log('[HOURS] - ON CHANGE AM END FROM  UP/DOWN ARROW - DAY ID', weekdayid, ' - TIME: ', time);
-    this.days[weekdayid].operatingHoursAmEnd = time;
-  }
-
-  onChangePmStartFromArrow(time, weekdayid) {
-    this.logger.log('[HOURS] - ON CHANGE PM START FROM  UP/DOWN ARROW - DAY ID:', weekdayid, ' - TIME: ', time);
-    this.days[weekdayid].operatingHoursPmStart = time;
-
-    // IF THE PM START TIME IS EMPTY SET TO EMPTY ALSO THE PM END TIME
-    if (this.days[weekdayid].operatingHoursPmStart === '') {
-      this.days[weekdayid].operatingHoursPmEnd = '';
-
-      // used to set the 'disabled class' to the buttons and input when the pm start time and pm end time are empty
-      this.days[weekdayid].isOpenPm = false;
-    } else {
-      this.days[weekdayid].isOpenPm = true;
-    }
-  }
-
-  onChangePmEndFromArrow(time, weekdayid) {
-    this.logger.log('[HOURS] - ON CHANGE PM END FROM  UP/DOWN ARROW - DAY ID: ', weekdayid, ' - TIME: ', time);
-    this.days[weekdayid].operatingHoursPmEnd = time;
-  }
-
-  close_Pm(dayid) {
-    this.logger.log('[HOURS] - CLOSE PM FOR THE DAY ID  ', dayid);
-    this.days[dayid].operatingHoursPmStart = '';
-    this.days[dayid].operatingHoursPmEnd = '';
-    this.days[dayid].isOpenPm = false;
-  }
-
-  open_Pm(dayid) {
-    this.logger.log('[HOURS] - OPEN PM FOR THE DAY ID  ', dayid);
-    this.days[dayid].isOpenPm = true;
-    this.days[dayid].operatingHoursPmStart = '14:00';
-    this.days[dayid].operatingHoursPmEnd = '18:00';
-  }
-
-  openAmStart(dayid) {
-    // this.logger.log('[HOURS] - openAmStart DAY ID ', dayid);
-    // const amazingTimePicker = this.atp.open({
-    //   // time: this.selectedTime,
-    //   time: this.days[dayid].operatingHoursAmStart,
-    //   theme: 'dark',
-    //   arrowStyle: {
-    //     background: 'red',
-    //     color: 'white'
-    //   }
-    // });
-    // amazingTimePicker.afterClose().subscribe(time => {
-    //   this.days[dayid].operatingHoursAmStart = time;
-    //   this.logger.log('[HOURS] - openAmStart SELECTED TIME  ', this.days[dayid].operatingHoursAmStart);
-    //   this.logger.log('[HOURS] - openAmStart DAYS  ', this.days);
-    // });
-  }
-
-  openAmEnd(dayid) {
-    // this.logger.log('[HOURS] openAmEnd DAY ID ', dayid);
-    // const amazingTimePicker = this.atp.open({
-    //   // time: this.selectedTime,
-    //   time: this.days[dayid].operatingHoursAmEnd,
-    //   theme: 'dark',
-    //   arrowStyle: {
-    //     background: 'red',
-    //     color: 'white'
-    //   }
-    // });
-    // amazingTimePicker.afterClose().subscribe(time => {
-    //   this.days[dayid].operatingHoursAmEnd = time;
-    //   this.logger.log('[HOURS] - openAmEnd SELECTED TIME  ', this.days[dayid].operatingHoursAmEnd);
-    //   this.logger.log('[HOURS] - openAmEnd DAYS  ', this.days);
-    // });
-  }
-
-  openPmStart(dayid) {
-    this.logger.log('[HOURS] - openPmStart DAY ID ', dayid);
-    // const amazingTimePicker = this.atp.open({
-    //   // time: this.selectedTime,
-    //   time: this.days[dayid].operatingHoursPmStart,
-    //   theme: 'dark',
-    //   arrowStyle: {
-    //     background: 'red',
-    //     color: 'white'
-    //   }
-    // });
-    // amazingTimePicker.afterClose().subscribe(time => {
-    //   this.days[dayid].operatingHoursPmStart = time;
-    //   this.logger.log('[HOURS] - openPmStart SELECTED TIME  ', this.days[dayid].operatingHoursPmStart);
-    //   this.logger.log('[HOURS] - openPmStart DAYS  ', this.days);
-
-    //   // IF THE PM START TIME IS not EMPTY SET to TRUE isOpenPm
-    //   if (this.days[dayid].operatingHoursPmStart !== '') {
-    //     this.days[dayid].isOpenPm = true;
-    //   }
-    // });
-  }
-
-  openPmEnd(dayid) {
-    this.logger.log('[HOURS] - openPmEnd DAY ID ', dayid);
-    // const amazingTimePicker = this.atp.open({
-    //   // time: this.selectedTime,
-    //   time: this.days[dayid].operatingHoursPmEnd,
-    //   theme: 'dark',
-    //   arrowStyle: {
-    //     background: 'red',
-    //     color: 'white'
-    //   }
-    // });
-    // amazingTimePicker.afterClose().subscribe(time => {
-    //   this.days[dayid].operatingHoursPmEnd = time;
-    //   this.logger.log('[HOURS] - openPmEnd SELECTED TIME  ', this.days[dayid].operatingHoursPmEnd);
-    //   this.logger.log('[HOURS] - openPmEnd DAYS  ', this.days);
-
-    //   // IF THE PM END TIME IS not EMPTY SET to TRUE isOpenPm
-    //   if (this.days[dayid].operatingHoursPmEnd !== '') {
-    //     this.days[dayid].isOpenPm = true;
-    //   }
-    // });
-  }
-
-
-  // SLOTS SECTION - START
-  onSelectGeneralOperatingHours() {
-    console.log("onSelectGeneralOperatingHours clicked")
-    this.getProjectById();
-  }
-  
-  onSelectSlot(slot) {
-    console.log("onSelectSlot slot: ", slot)
-    this.isActiveOperatingHours = slot.active;
-  }
-
-  presentModalNewSlot() {
-    const dialogRef = this.dialog.open(NewSlotModalComponent, {
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: true,
-      width: '600px',
-
-    });
-    dialogRef.afterClosed().subscribe(body => {
-      this.logger.log('[Modal Add content] Dialog body: ', body);
-      if (body) {
-        console.log("body after close: ", body)
-        this.addSlot(body.slotName);
-        //this.onAddKb(body)
-      }
-    });
-
-  }
-
-  addSlot(slot_name) {
-    let new_slot = {
-      name: slot_name,
-      active: false,
-      hours: null
-    }
-
-    let uuid = uuidv4();
-    console.log("uuid: ", uuid)
-    let short_uuid = uuid.substring(uuid.lastIndexOf('-') + 1)
-    console.log("short_uuid: ", short_uuid)
-
-    console.log("new_slot: ", new_slot);
-    this.project_timeSlots[short_uuid] = new_slot;
-    console.log("project timeSlots: ", this.project_timeSlots);
-    this.saveSlot();
-  }
-
-  saveSlot() {
-    let data = {
-      timeSlots: this.project_timeSlots
-    }
-    console.log("data: ", data);
-    this.projectService.updateProject(this.projectid, data).subscribe((updatedProject) => {
-      console.log("updatedProject: ", updatedProject);
-    }, (error) => {
-      console.log("error updating project: ", error);
-    })
-  }
-
-  // SLOTS SECTION - END
-  
-
-
-
-
-}
diff --git a/src/app/integrations/integrations.component.html b/src/app/integrations/integrations.component.html
index d4e0f94ce11e..31b409bf941e 100644
--- a/src/app/integrations/integrations.component.html
+++ b/src/app/integrations/integrations.component.html
@@ -98,6 +98,12 @@
                                     (onDeleteIntegration)=integrationDeletedEvent($event)>
                                 </make-integration>
 
+                                <n8n-integration *ngIf="integrationSelectedName === INT_KEYS.N8N"
+                                    [integration]="selectedIntegration"
+                                    (onUpdateIntegration)=integrationUpdateEvent($event)
+                                    (onDeleteIntegration)=integrationDeletedEvent($event)>
+                                </n8n-integration>
+
                                 <openai-integration *ngIf="integrationSelectedName === INT_KEYS.OPENAI"
                                     [integration]="selectedIntegration"
                                     (onUpdateIntegration)=integrationUpdateEvent($event)
diff --git a/src/app/integrations/integrations.component.ts b/src/app/integrations/integrations.component.ts
index 800ab81b47ab..03e11c6b3ba8 100644
--- a/src/app/integrations/integrations.component.ts
+++ b/src/app/integrations/integrations.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AuthService } from 'app/core/auth.service';
 import { IntegrationService } from 'app/services/integration.service';
-import { APPS_TITLE, BrevoIntegration, CATEGORIES_LIST, CustomerioIntegration, HubspotIntegration, INTEGRATIONS_CATEGORIES, INTEGRATIONS_KEYS, INTEGRATION_LIST_ARRAY, MakeIntegration, OpenaiIntegration, QaplaIntegration } from './utils';
+import { APPS_TITLE, BrevoIntegration, CATEGORIES_LIST, CustomerioIntegration, HubspotIntegration, INTEGRATIONS_CATEGORIES, INTEGRATIONS_KEYS, INTEGRATION_LIST_ARRAY, MakeIntegration, N8nIntegration, OpenaiIntegration, QaplaIntegration } from './utils';
 import { LoggerService } from 'app/services/logger/logger.service';
 import { NotifyService } from 'app/core/notify.service';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -516,6 +516,9 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
     if (key === INTEGRATIONS_KEYS.BREVO) {
       return new BrevoIntegration();
     }
+    if (key === INTEGRATIONS_KEYS.N8N) {
+      return new N8nIntegration();
+    }
   }
 
 
@@ -790,7 +793,6 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
         if (index != -1) { this.INTEGRATIONS.splice(index, 1) };
       }
 
-
       let index = this.INTEGRATIONS.findIndex(i => i.category === INTEGRATIONS_CATEGORIES.CHANNEL);
       if (index === -1) {
         let idx = this.CATEGORIES.findIndex(c => c.type === INTEGRATIONS_CATEGORIES.CHANNEL);
diff --git a/src/app/integrations/integrations.module.ts b/src/app/integrations/integrations.module.ts
index 499bcc5cb204..d93c66dd336d 100644
--- a/src/app/integrations/integrations.module.ts
+++ b/src/app/integrations/integrations.module.ts
@@ -16,6 +16,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { RouterModule, Routes } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { ExtIntegrationComponent } from './list/ext-integration/ext-integration.component';
+import { N8nIntegrationComponent } from './list/n8n-integration/n8n-integration.component';
 
 const routes: Routes = [
   { path: "", component: IntegrationsComponent},
@@ -32,7 +33,8 @@ const routes: Routes = [
     MakeIntegrationComponent,
     OpenaiIntegrationComponent,
     QaplaIntegrationComponent,
-    ExtIntegrationComponent
+    ExtIntegrationComponent,
+    N8nIntegrationComponent
   ],
   imports: [
     RouterModule.forChild(routes),
diff --git a/src/app/integrations/list/brevo-integration/brevo-integration.component.html b/src/app/integrations/list/brevo-integration/brevo-integration.component.html
index 6778e0ac7bd5..39cd96c47384 100644
--- a/src/app/integrations/list/brevo-integration/brevo-integration.component.html
+++ b/src/app/integrations/list/brevo-integration/brevo-integration.component.html
@@ -1,7 +1,10 @@
 <div class="header">
-    <p><a href="https://www.qapla.it/en/book-a-demo/" target="_blank">{{ 'Integration.Signup' | translate }}</a> {{ 'Integration.Brevo.Signup' | translate  }}</p>
 
-    <!-- <div *ngIf="isVerified === true" class="status">
+    <div class="signup">
+        <a href="https://onboarding.brevo.com/account/register" target="_blank">{{ 'Integration.Signup' | translate }}</a><p [innerHTML]="'Integration.FreeAccount' | translate: translateparams"></p>
+    </div>
+
+    <div *ngIf="isVerified === true" class="status">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
             <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1"
                 cy="65.1" r="62.1" />
@@ -21,7 +24,8 @@
                 stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2" />
         </svg>
         <p class="error">Failed!</p>
-    </div> -->
+    </div>
+
 </div>
 
 <div class="content">
@@ -30,7 +34,7 @@
         <label>Api Key</label>
 
         <div class="password-input">
-            <input id="api-key-input" type="password" placeholder="Your api key"
+            <input id="api-key-input" type="password" placeholder="{{ 'Integration.YourApikey' | translate }}"
                 [(ngModel)]="integration.value.apikey">
             <div class="show-hide-button">
                 <span *ngIf="keyVisibile === false" class="material-icons-outlined"
@@ -44,10 +48,9 @@
 
 
     <div class="footer">
-        <button class="custom-primary-button" (click)="saveIntegration()">Save</button>
-        <button *ngIf="integration._id" class="custom-danger-button" (click)="deleteIntegration()">Delete</button>
-        <button *ngIf="!integration._id" class="custom-danger-button" (click)="resetValues()">Clear</button>
-        <!-- <button class="custom-danger-button" (click)="deleteIntegration()" [disabled]="integration == null">Delete</button> -->
+        <button class="custom-primary-button" (click)="saveIntegration()">{{ 'Integration.Save' | translate }}</button>
+        <button *ngIf="integration._id" class="custom-danger-button" (click)="deleteIntegration()">{{ 'Integration.Delete' | translate }}</button>
+        <button *ngIf="!integration._id" class="custom-danger-button" (click)="resetValues()">{{ 'Integration.Clear' | translate }}</button>
     </div>
 
 </div>
\ No newline at end of file
diff --git a/src/app/integrations/list/brevo-integration/brevo-integration.component.scss b/src/app/integrations/list/brevo-integration/brevo-integration.component.scss
index 95cc9884eb3e..4059ef5e5973 100644
--- a/src/app/integrations/list/brevo-integration/brevo-integration.component.scss
+++ b/src/app/integrations/list/brevo-integration/brevo-integration.component.scss
@@ -10,7 +10,15 @@ p {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  
+  .signup {
+    display: flex;
 
+    p {
+      margin: 0 0 0 5px;
+    }
+  }
+  
   .status {
     display: flex;
     align-items: center;
diff --git a/src/app/integrations/list/brevo-integration/brevo-integration.component.ts b/src/app/integrations/list/brevo-integration/brevo-integration.component.ts
index ebd2641986f9..4c860ab53ff1 100644
--- a/src/app/integrations/list/brevo-integration/brevo-integration.component.ts
+++ b/src/app/integrations/list/brevo-integration/brevo-integration.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 import { IntegrationService } from 'app/services/integration.service';
 import { LoggerService } from 'app/services/logger/logger.service';
 
@@ -17,16 +16,18 @@ export class BrevoIntegrationComponent implements OnInit {
   keyVisibile: boolean = false;
   isVerified: boolean;
 
+  translateparams: any;
+
   constructor(
     private integrationService: IntegrationService,
     private logger: LoggerService,
-    private translate: TranslateService
   ) { }
 
   ngOnInit(): void {
     this.logger.debug("[INT-Brevo] integration ", this.integration)
+    this.translateparams = { intname: "Brevo" }
     if (this.integration.value.apikey) {
-      this.checkKey(this.integration.value.apikey);
+      this.checkKey();
     }
   }
 
@@ -41,13 +42,13 @@ export class BrevoIntegrationComponent implements OnInit {
   }
 
   saveIntegration() {
-    // this.checkKey(this.integration.value.apikey).then((status) => {
-    //   let data = {
-    //     integration: this.integration,
-    //     isVerified: status
-    //   }
-    //   this.onUpdateIntegration.emit(data);
-    // })
+    this.checkKey().then((status) => {
+      let data = {
+        integration: this.integration,
+        isVerified: status
+      }
+      this.onUpdateIntegration.emit(data);
+    })
   }
 
   deleteIntegration() {
@@ -55,7 +56,19 @@ export class BrevoIntegrationComponent implements OnInit {
     this.onDeleteIntegration.emit(this.integration);
   }
 
-  checkKey(key: string) {
+  checkKey() {
+    return new Promise((resolve) => {
+      let url = "https://api.brevo.com/v3/contacts?limit=2";
+      let apikey = 'Basic ' + this.integration.value.apikey;
+      this.integrationService.checkIntegrationKeyValidity(url, null, apikey).subscribe((resp: any) => {
+        this.isVerified = true;
+        resolve(true);
+      }, (error) => {
+        this.logger.error("[INT-Customer.io] Key verification failed: ", error);
+        this.isVerified = false;
+        resolve(false);
+      })
+    })
   }
 
   resetValues() {
diff --git a/src/app/integrations/list/n8n-integration/n8n-integration.component.html b/src/app/integrations/list/n8n-integration/n8n-integration.component.html
new file mode 100644
index 000000000000..4bf00ea120e7
--- /dev/null
+++ b/src/app/integrations/list/n8n-integration/n8n-integration.component.html
@@ -0,0 +1,42 @@
+
+<div class="header">
+
+    <!-- <p><a href="https://www.make.com/en/register" target="_blank">Sign up </a> for a free <b>Make</b> account!</p> -->
+    <div class="signup">
+        <a href="https://app.n8n.cloud/register" target="_blank">{{ 'Integration.Signup' | translate }}</a>
+        
+        <p [innerHTML]="'Integration.FreeAccount' | translate: translateparams"></p>
+    </div>
+
+    
+   <!-- // check the verify service function -->
+    <!-- <div *ngIf="isVerified === true" class="status">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+            <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1"
+                cy="65.1" r="62.1" />
+            <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round"
+                stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 " />
+        </svg>
+        <p class="success">Verified!</p>
+    </div>
+
+    <div *ngIf="isVerified === false" class="status">
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+            <circle class="path circle" fill="none" stroke="#D06079" stroke-width="6" stroke-miterlimit="10" cx="65.1"
+                cy="65.1" r="62.1" />
+            <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round"
+                stroke-miterlimit="10" x1="34.4" y1="37.9" x2="95.8" y2="92.3" />
+            <line class="path line" fill="none" stroke="#D06079" stroke-width="6" stroke-linecap="round"
+                stroke-miterlimit="10" x1="95.8" y1="38" x2="34.4" y2="92.2" />
+        </svg>
+        <p class="error">Failed!</p>
+    </div>
+     -->
+</div>
+
+<div class="content">
+
+    <p [innerHTML]="'Integration.GoodNews' | translate"></p>
+    <p [innerHTML]="'Integration.NoNeedApikey' | translate: translateparams" ></p>
+    
+</div>
diff --git a/src/app/integrations/list/n8n-integration/n8n-integration.component.scss b/src/app/integrations/list/n8n-integration/n8n-integration.component.scss
new file mode 100644
index 000000000000..ed107d983bb3
--- /dev/null
+++ b/src/app/integrations/list/n8n-integration/n8n-integration.component.scss
@@ -0,0 +1,32 @@
+p {
+    margin-bottom: 0px;
+}
+
+.header {
+    border-bottom: solid 1px #e0e0e0;
+    padding: 12px 12px;
+    font-weight: 400;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+
+    .signup {
+        display: flex;
+
+        p {
+            margin: 0 0 0 5px;
+        }
+    }
+
+    .status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.content {
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/src/app/integrations/list/n8n-integration/n8n-integration.component.spec.ts b/src/app/integrations/list/n8n-integration/n8n-integration.component.spec.ts
new file mode 100644
index 000000000000..6ec47ef234c7
--- /dev/null
+++ b/src/app/integrations/list/n8n-integration/n8n-integration.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { N8nIntegrationComponent } from './n8n-integration.component';
+
+describe('N8nIntegrationComponent', () => {
+  let component: N8nIntegrationComponent;
+  let fixture: ComponentFixture<N8nIntegrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ N8nIntegrationComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(N8nIntegrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/integrations/list/n8n-integration/n8n-integration.component.ts b/src/app/integrations/list/n8n-integration/n8n-integration.component.ts
new file mode 100644
index 000000000000..f845c10d93c8
--- /dev/null
+++ b/src/app/integrations/list/n8n-integration/n8n-integration.component.ts
@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { LoggerService } from 'app/services/logger/logger.service';
+
+@Component({
+  selector: 'n8n-integration',
+  templateUrl: './n8n-integration.component.html',
+  styleUrls: ['./n8n-integration.component.scss']
+})
+export class N8nIntegrationComponent implements OnInit {
+
+  @Input() integration: any;
+  @Output() onUpdateIntegration = new EventEmitter;
+  @Output() onDeleteIntegration = new EventEmitter;
+
+  translateparams: any;
+
+  constructor(
+    private logger: LoggerService
+  ) { }
+
+  ngOnInit(): void {
+    this.logger.log("[INT-n8n] integration (oninit)",  this.integration);
+    this.translateparams = { intname: 'n8n' };
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.logger.log("[INT-Make] integration (onchanges) changes", changes);
+    this.logger.log("[INT-Make] integration (onchanges) integration", this.integration);
+  }
+
+}
diff --git a/src/app/integrations/utils.ts b/src/app/integrations/utils.ts
index e11f1a20e65e..ecc091c4b701 100644
--- a/src/app/integrations/utils.ts
+++ b/src/app/integrations/utils.ts
@@ -11,6 +11,7 @@ export enum INTEGRATIONS_KEYS {
     MESSENGER = 'messenger',
     MAILCHIMP = 'mailchimp',
     MAKE = 'make',
+    N8N = 'n8n',
     PIPEDRIVE = 'pipedrive',
     SALESFORCE = 'salesforce',
     TWILIO_SMS = "sms",
@@ -67,8 +68,8 @@ export const CATEGORIES_LIST = [
 
 
 export const INTEGRATIONS_LIST: { [key: string]: { name: string, category: INTEGRATIONS_CATEGORIES, key: INTEGRATIONS_KEYS, src_icon: string, src_logo: string, pro?: boolean, plan: 'Sandbox' | 'Basic' | 'Premium' | 'Custom' } } = {
-    //BREVO:              { name: "Brevo",            category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.BREVO,           src_icon: "assets/img/int/brevo.png",                   src_logo: "assets/img/int/brevo-logo.png",              pro: true,  plan: 'Premium' },
-    CUSTOMERIO:         { name: "Customer.io",      category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.CUSTOMERIO,      src_icon: "assets/img/int/customer-io-logo-color.svg",  src_logo: "assets/img/int/customerio-logo_new.svg",         pro: true,  plan: 'Premium' },
+    BREVO:              { name: "Brevo",            category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.BREVO,           src_icon: "assets/img/int/brevo.png",                   src_logo: "assets/img/int/brevo-logo.png",              pro: true,  plan: 'Premium' },
+    CUSTOMERIO:         { name: "Customer.io",      category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.CUSTOMERIO,      src_icon: "assets/img/int/customer-io-logo-color.svg",  src_logo: "assets/img/int/customerio-logo_new.svg",     pro: true,  plan: 'Premium' },
     HUBSPOT:            { name: "HubSpot",          category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.HUBSPOT,         src_icon: "assets/img/int/hubspot.png",                 src_logo: "assets/img/int/hubspot-logo.svg",            pro: true,  plan: 'Premium' },
     OPENAI:             { name: "OpenAI",           category: INTEGRATIONS_CATEGORIES.AI,               key: INTEGRATIONS_KEYS.OPENAI,          src_icon: "assets/cds/images/actions/openai-icon.svg",  src_logo: "assets/img/int/openai-logo.svg",             pro: true,  plan: 'Custom' },
     QAPLA:              { name: "Qapla'",           category: INTEGRATIONS_CATEGORIES.ECOMMERCE,        key: INTEGRATIONS_KEYS.QAPLA,           src_icon: "assets/cds/images/actions/qapla.jpg",        src_logo: "assets/img/int/qapla-logo.png",              pro: true,  plan: 'Premium' },
@@ -77,6 +78,7 @@ export const INTEGRATIONS_LIST: { [key: string]: { name: string, category: INTEG
     //KLAVIYO:            { name: "Klaviyo",          category: INTEGRATIONS_CATEGORIES.AUTOMATION,       key: INTEGRATIONS_KEYS.KLAVIYO,         src_icon: "assets/img/int/klaviyo-icon.png",            src_logo: "assets/img/int/klaviyo-logo.png",            pro: true,  plan: 'Premium' },
     //MAILCHIMP:          { name: "Mailchimp",        category: INTEGRATIONS_CATEGORIES.EMAIL,            key: INTEGRATIONS_KEYS.MAILCHIMP,       src_icon: "assets/img/int/mailchimp-icon.png",          src_logo: "assets/img/int/mailchimp-logo.png",          pro: true,  plan: 'Premium' },
     MAKE:               { name: "Make",             category: INTEGRATIONS_CATEGORIES.INT_PLAT,         key: INTEGRATIONS_KEYS.MAKE,            src_icon: "assets/img/int/make-icon.png",               src_logo: "assets/img/int/make-logo.svg",               pro: true,  plan: 'Basic'},
+    N8N:                { name: "N8N",              category: INTEGRATIONS_CATEGORIES.INT_PLAT,         key: INTEGRATIONS_KEYS.N8N,             src_icon: "assets/img/int/n8n-icon.svg",                src_logo: "assets/img/int/n8n-logo.png",                pro: true,  plan: 'Basic'},
     //PIPEDRIVE:          { name: "Pipedrive",        category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.PIPEDRIVE,       src_icon: "assets/img/int/pipedrive-icon.png",          src_logo: "assets/img/int/pipedrive-logo.png",          pro: true,  plan: 'Premium' },
     //SALESFORCE:         { name: "Salesforce",       category: INTEGRATIONS_CATEGORIES.CRM,              key: INTEGRATIONS_KEYS.SALESFORCE,      src_icon: "assets/img/int/salesforce-icon.png",         src_logo: "assets/img/int/salesforce-logo.png",         pro: true,  plan: 'Premium' },
     //ZAPIER:             { name: "Zapier",           category: INTEGRATIONS_CATEGORIES.INT_PLAT,         key: INTEGRATIONS_KEYS.ZAPIER,          src_icon: "assets/img/int/zapier-icon.png",             src_logo: "assets/img/int/zapier-logo.svg",             pro: true,  plan: 'Basic' },
@@ -187,3 +189,11 @@ export class MakeIntegration extends Integration {
         this.value = {}
     }
 }
+
+export class N8nIntegration extends Integration {
+    constructor() {
+        super();
+        this.name = INTEGRATIONS_KEYS.N8N;
+        this.value = {};
+    }
+}
diff --git a/src/app/knowledge-bases/knowledge-bases.component.scss b/src/app/knowledge-bases/knowledge-bases.component.scss
index 39bb6962b524..9e9d8b5ea663 100644
--- a/src/app/knowledge-bases/knowledge-bases.component.scss
+++ b/src/app/knowledge-bases/knowledge-bases.component.scss
@@ -34,7 +34,7 @@
     }
 }
 
-.header-first-column{
+.header-first-column {
     display: flex;
     flex-direction: column;
 }
@@ -547,7 +547,7 @@ table {
     padding-top: 8px !important;
     padding-bottom: 8px !important;
     color: #fff !important;
-  }
+}
 
 .show-hide-button {
     cursor: pointer;
@@ -801,33 +801,33 @@ table {
     .cbPopover-cbname {
         font-weight: 600;
     }
-  }
+}
 
 
-  .overlay-backdrop {
-   background:  #191d2285;
-  }
+.overlay-backdrop {
+    background: #191d2285;
+}
 
   .kb-container-wpr {
     width: 100%;
   }
 
-  .widget-set-up-col {
+.widget-set-up-col {
     // background-color: rgb(241, 241, 241);
     margin-top: -15px;
     padding: 20px 20px 10px 36px;
     // margin-bottom: 24px;
     // margin-left: 32px;
-  }
-  
-  .widget-set-up-text {
+}
+
+.widget-set-up-text {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 6px;
     line-height: 32px;
-  }
-  
-  .widget-set-up-link-to-docs-wpr {
+}
+
+.widget-set-up-link-to-docs-wpr {
     font-size: 14px;
     font-weight: 400;
     margin-bottom: 6px;
@@ -835,17 +835,17 @@ table {
     background-color: rgb(241, 241, 241);
     padding: 15px;
     width: 100%;
-  }
-  
-  .widget-set-up-link-to-docs {
+}
+
+.widget-set-up-link-to-docs {
     margin-left: 8px;
     vertical-align: middle;
     color: #0f62ff;
     font-size: 14px;
     font-weight: 400;
     cursor: pointer;
-  }
-  
-  .widget-set-up-link-to-docs:hover {
+}
+
+.widget-set-up-link-to-docs:hover {
     text-decoration: underline;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/knowledge-bases/knowledge-bases.component.ts b/src/app/knowledge-bases/knowledge-bases.component.ts
index 70e7bd3b929c..16a7c2819990 100644
--- a/src/app/knowledge-bases/knowledge-bases.component.ts
+++ b/src/app/knowledge-bases/knowledge-bases.component.ts
@@ -1437,7 +1437,7 @@ export class KnowledgeBasesComponent extends PricingBaseComponent implements OnI
       width: '600px',
     });
     dialogRef.afterClosed().subscribe(body => {
-      this.logger.log('[Modal Add URLS AFTER CLOSED] Dialog body: ', body);
+      console.log('[Modal Add URLS AFTER CLOSED] Dialog body: ', body);
       if (body) {
         this.onAddMultiKb(body)
       }
@@ -1454,7 +1454,7 @@ export class KnowledgeBasesComponent extends PricingBaseComponent implements OnI
 
     });
     dialogRef.afterClosed().subscribe(body => {
-      this.logger.log('[Modal IMPORT SITEMAP AFTER CLOSED]  body: ', body);
+      console.log('[Modal IMPORT SITEMAP AFTER CLOSED]  body: ', body);
       if (body) {
         this.onAddMultiKb(body)
       }
@@ -1989,33 +1989,38 @@ export class KnowledgeBasesComponent extends PricingBaseComponent implements OnI
           }
         })
       } else if (this.payIsVisible === false && this.kbLimit != Number(0)) {
-        // this.logger.log('here 2 this.kbLimit ', this.kbLimit)
+        this.logger.log('here 1 this.kbLimit ', this.kbLimit , 'error ', error)
         Swal.fire({
           title: this.warningTitle,
           text: error,
           icon: "warning",
           // className: "custom-swal",
           showCloseButton: false,
-          showCancelButton: false,
-          confirmButtonText: this.cancel,
+          showCancelButton: true,
+          confirmButtonText: this.contactUs,
+          cancelButtonText: this.cancel,
           confirmButtonColor: "var(--blue-light)",
           focusConfirm: false,
           reverseButtons: true,
           // buttons: [null, this.cancel],
           // dangerMode: false
+        }).then((result) => {
+          if (result) {
+            window.open(`mailto:${this.salesEmail}?subject=Upgrade plan`);
+          }
         })
       } else if (this.payIsVisible === false && this.kbLimit == Number(0)) {
-        // this.logger.log('here 1')
+        console.log('here 2 this.kbLimit ', this.kbLimit,  'error ', error)
         Swal.fire({
           title: this.warningTitle,
           text: error + '. ' + this.contactUsToUpgrade,
           icon: "warning",
           // className: "custom-swal",
-          buttons: [this.cancel, this.contactUs],
+          // buttons: [this.cancel, this.contactUs],
           showCloseButton: false,
           showCancelButton: true,
           confirmButtonText: this.contactUs,
-          ccnacelButtonText: this.contactUs,
+          cancelButtonText: this.cancel,
           confirmButtonColor: "var(--blue-light)",
           focusConfirm: false,
           reverseButtons: true,
diff --git a/src/app/knowledge-bases/modals/knowledge-base-table/knowledge-base-table.component.html b/src/app/knowledge-bases/modals/knowledge-base-table/knowledge-base-table.component.html
index 396f2f45f131..1c1c1996fea4 100644
--- a/src/app/knowledge-bases/modals/knowledge-base-table/knowledge-base-table.component.html
+++ b/src/app/knowledge-bases/modals/knowledge-base-table/knowledge-base-table.component.html
@@ -276,7 +276,7 @@
                     </td>
 
                     <td style="min-width:150px; width:150px; font-size: small;" (click)="onOpenBaseModalDetail(kb)">
-                        {{ kb.createdAt | amTimeAgo }}
+                        {{ kb.updatedAt | amTimeAgo }}
                     </td>
 
                     <!-- <td class="" style="max-width: 100%; display: grid;" (click)="onOpenBaseModalDetail(kb)">
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 4fd8cffcaa9b..e056c18868f6 100755
--- a/src/app/project-edit-add/project-edit-add.component.html
+++ b/src/app/project-edit-add/project-edit-add.component.html
@@ -970,12 +970,12 @@ <h3 class="card_title__underlined"  [ngStyle]="{'margin-top':isVisibleVisitorAut
                       </div>
 
                       <div class="upgrade-for-webhook" *ngIf="DISPLAY_ADVANCED_TAB === false">
-                        <div class="from--a-plan-badge">
+                        <div *ngIf="isVisiblePaymentTab"  class="from--a-plan-badge">
                           {{'AvailableFromThePlan' | translate: t_params }}
                         </div>
                         <div class="upgrade-btn-wpr">
-                          <button class="btn btn-get-feature-no-boxshadow pull-left"
-                              style="margin-bottom: 0px;margin-top: 0px!important; margin-left: 15px;"
+                          <button class="btn btn-get-feature-no-boxshadow custom-margin pull-left"
+                              [ngStyle]="{'margin-left':isVisiblePaymentTab === true ? '15px' : '0px'}"
                               (click)="goToPricing()" 
                               matTooltipClass="custom-mat-tooltip-in-widget-setup"
                               matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}" 
@@ -1159,12 +1159,13 @@ <h3 class="card-title onoffswitch_container_first_line">
                       <div class="col-xs-12 col-sm-10" style="margin-bottom: 12px;">
 
                         <div class="upgrade-for-webhook" style="margin-left: 0px;" *ngIf="DISPLAY_ADVANCED_TAB === false">
-                          <div class="from--a-plan-badge" >
+                          <div *ngIf="isVisiblePaymentTab" class="from--a-plan-badge" >
                             {{'AvailableFromThePlan' | translate: t_params }}
                           </div>
                           <div class="upgrade-btn-wpr">
                             <button class="btn btn-get-feature-no-boxshadow pull-left"
-                              style="margin-bottom: 0px;margin-top: 0px!important; margin-left: 15px;" (click)="goToPricing()"
+                              [ngStyle]="{'margin-left':isVisiblePaymentTab === true ? '15px' : '0px'}" 
+                              (click)="goToPricing()"
                               matTooltipClass="custom-mat-tooltip-in-widget-setup"
                               matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}" #tooltip="matTooltip"
                               matTooltipPosition='below' 
@@ -1210,12 +1211,12 @@ <h3 class="card_title__underlined">
 
                     <div class="col-xs-12">
                       <div class="upgrade-for-webhook" style="margin-left: 0px;" *ngIf="!isTier3Plans">
-                        <div class="c-plan-only-badge">
+                        <div *ngIf="isVisiblePaymentTab" class="c-plan-only-badge">
                           {{'OnlyWithPlan' | translate : tParamsFeatureAvailableWith}}
                         </div>
                         <div class="upgrade-btn-wpr">
-                          <button class="btn btn-get-feature-no-boxshadow pull-left"
-                              style="margin-bottom: 0px;margin-top: 0px!important; margin-left: 15px;"
+                          <button class="btn btn-get-feature-no-boxshadow custom-margin pull-left"
+                              [ngStyle]="{'margin-left':isVisiblePaymentTab === true ? '15px' : '0px'}"
                               (click)="goToPricing()" 
                               matTooltipClass="custom-mat-tooltip-in-widget-setup"
                               matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}" 
@@ -1255,18 +1256,19 @@ <h3 class="card_title__underlined">
                     <div class="col-xs-12">
                       <button (click)="goToManageEmailSettings()" class="btn btn-primary"
                         style="margin-top:5px; padding:6px 15px ">
-                        {{ "ProjectEditPage.ManageSMTPSettings" | translate }}
+                       {{ "ProjectEditPage.ManageSMTPSettings" | translate }}
                       </button>
                     </div>
 
                     <div class="col-xs-12">
                       <div class="upgrade-for-webhook" style="margin-left: 0px;" *ngIf="!isTier3Plans">
-                        <div class="c-plan-only-badge">
+                        <div *ngIf="isVisiblePaymentTab" class="c-plan-only-badge">
                           {{'OnlyWithPlan' | translate : tParamsFeatureAvailableWith}}
                         </div>
+                        
                         <div class="upgrade-btn-wpr">
-                          <button class="btn btn-get-feature-no-boxshadow pull-left"
-                              style="margin-bottom: 0px;margin-top: 0px!important; margin-left: 15px;"
+                          <button class="btn btn-get-feature-no-boxshadow custom-margin pull-left"
+                              [ngStyle]="{'margin-left':isVisiblePaymentTab === true ? '15px' : '0px'}"
                               (click)="goToPricing()" 
                               matTooltipClass="custom-mat-tooltip-in-widget-setup"
                               matTooltip=" {{'UpgradePlanToGetTheFeature' | translate}}" 
diff --git a/src/app/project-edit-add/project-edit-add.component.scss b/src/app/project-edit-add/project-edit-add.component.scss
index 3e674ffc9abc..0d1f56d73dcc 100755
--- a/src/app/project-edit-add/project-edit-add.component.scss
+++ b/src/app/project-edit-add/project-edit-add.component.scss
@@ -940,6 +940,11 @@ $f21blue: #039be5;
   padding: 6px 15px !important;
 }
 
+.btn-get-feature-no-boxshadow.custom-margin {
+  margin-bottom: 0px;
+  margin-top: 0px !important;
+}
+
 .btn-get-feature-no-boxshadow:hover {
   background-color: #eff2f6;
   border: 1px solid #acb8cb;
@@ -1496,6 +1501,8 @@ $f21blue: #039be5;
   margin-left: -15px;
 }
 
-.link-to-automatic-assignment-doc>div>svg { 
-  width: 25px;height:auto; vertical-align: middle;
+.link-to-automatic-assignment-doc>div>svg {
+  width: 25px;
+  height: auto;
+  vertical-align: middle;
 }
\ No newline at end of file
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 3817d1703e4c..2f5f057368a9 100755
--- a/src/app/project-edit-add/project-edit-add.component.ts
+++ b/src/app/project-edit-add/project-edit-add.component.ts
@@ -872,99 +872,112 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
   }
 
   goToProjectSettings_Security() {
-    if (this.USER_ROLE === 'owner') {
-      if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-        // this.logger.log('goToProjectSettings_Security HERE 1 ')
-        if (this.subscription_is_active === true) {
-          // this.logger.log('goToProjectSettings_Security HERE 2 ')
-          this.router.navigate(['project/' + this.id_project + '/project-settings/security'])
-        } else if (this.subscription_is_active === false) {
-          // this.logger.log('goToProjectSettings_Security HERE 3 ')
-          if (this.profile_name === PLAN_NAME.C) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
-          } else if (this.profile_name === PLAN_NAME.F) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+    if (this.isVisiblePaymentTab) {
+      if (this.USER_ROLE === 'owner') {
+        if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          // this.logger.log('goToProjectSettings_Security HERE 1 ')
+          if (this.subscription_is_active === true) {
+            // this.logger.log('goToProjectSettings_Security HERE 2 ')
+            this.router.navigate(['project/' + this.id_project + '/project-settings/security'])
+          } else if (this.subscription_is_active === false) {
+            // this.logger.log('goToProjectSettings_Security HERE 3 ')
+            if (this.profile_name === PLAN_NAME.C) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
+            } else if (this.profile_name === PLAN_NAME.F) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            }
           }
+        } else if (
+          this.profile_name === PLAN_NAME.A ||
+          this.profile_name === PLAN_NAME.B ||
+          this.profile_name === PLAN_NAME.D ||
+          this.profile_name === PLAN_NAME.E ||
+          this.profile_name === PLAN_NAME.EE ||
+          this.prjct_profile_type === 'free'
+        ) {
+          // this.logger.log('goToProjectSettings_Security HERE 4 ')
+          this.presentModalFeautureAvailableOnlyWithPlanC()
         }
-      } else if (
-        this.profile_name === PLAN_NAME.A ||
-        this.profile_name === PLAN_NAME.B ||
-        this.profile_name === PLAN_NAME.D ||
-        this.profile_name === PLAN_NAME.E ||
-        this.profile_name === PLAN_NAME.EE ||
-        this.prjct_profile_type === 'free'
-      ) {
-        // this.logger.log('goToProjectSettings_Security HERE 4 ')
-        this.presentModalFeautureAvailableOnlyWithPlanC()
+      } else {
+        // this.logger.log('goToProjectSettings_Security HERE 5 ')
+        this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
       }
     } else {
-      // this.logger.log('goToProjectSettings_Security HERE 5 ')
-      this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
   }
 
 
   goToProjectSettings_BannedVisitors() {
-    if (this.USER_ROLE === 'owner') {
-      if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-        // this.logger.log('displayModalBanVisitor HERE 1 ')
-        if (this.subscription_is_active === true) {
-          // this.logger.log('displayModalBanVisitor HERE 2 ')
-          this.router.navigate(['project/' + this.id_project + '/project-settings/banned'])
-        } else if (this.subscription_is_active === false) {
-          // this.logger.log('displayModalBanVisitor HERE 3 ')
-          if (this.profile_name === PLAN_NAME.C) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
-          } else if (this.profile_name === PLAN_NAME.F) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+    if (this.isVisiblePaymentTab) {
+      if (this.USER_ROLE === 'owner') {
+        if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          // this.logger.log('displayModalBanVisitor HERE 1 ')
+          if (this.subscription_is_active === true) {
+            // this.logger.log('displayModalBanVisitor HERE 2 ')
+            this.router.navigate(['project/' + this.id_project + '/project-settings/banned'])
+          } else if (this.subscription_is_active === false) {
+            // this.logger.log('displayModalBanVisitor HERE 3 ')
+            if (this.profile_name === PLAN_NAME.C) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
+            } else if (this.profile_name === PLAN_NAME.F) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            }
           }
+        } else if (
+          this.profile_name === PLAN_NAME.A ||
+          this.profile_name === PLAN_NAME.B ||
+          this.profile_name === PLAN_NAME.D ||
+          this.profile_name === PLAN_NAME.E ||
+          this.profile_name === PLAN_NAME.EE ||
+          this.prjct_profile_type === 'free'
+        ) {
+          // this.logger.log('displayModalBanVisitor HERE 4 ')
+          this.presentModalFeautureAvailableOnlyWithPlanC()
         }
-      } else if (
-        this.profile_name === PLAN_NAME.A ||
-        this.profile_name === PLAN_NAME.B ||
-        this.profile_name === PLAN_NAME.D ||
-        this.profile_name === PLAN_NAME.E ||
-        this.profile_name === PLAN_NAME.EE ||
-        this.prjct_profile_type === 'free'
-      ) {
-        // this.logger.log('displayModalBanVisitor HERE 4 ')
-        this.presentModalFeautureAvailableOnlyWithPlanC()
+      } else {
+        // this.logger.log('displayModalBanVisitor HERE 5 ')
+        this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
       }
     } else {
-      // this.logger.log('displayModalBanVisitor HERE 5 ')
-      this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
+
   }
 
   goToProjectSettings_Advanced() {
-    if (this.USER_ROLE === 'owner') {
-      if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-        // this.logger.log('displayModalBanVisitor HERE 1 ')
-        if (this.subscription_is_active === true) {
-          // this.logger.log('displayModalBanVisitor HERE 2 ')
-          this.router.navigate(['project/' + this.id_project + '/project-settings/advanced'])
-        } else if (this.subscription_is_active === false) {
-          // this.logger.log('displayModalBanVisitor HERE 3 ')
-          if (this.profile_name === PLAN_NAME.C) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
-          } else if (this.profile_name === PLAN_NAME.F) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+    if (this.isVisiblePaymentTab) {
+      if (this.USER_ROLE === 'owner') {
+        if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          // this.logger.log('displayModalBanVisitor HERE 1 ')
+          if (this.subscription_is_active === true) {
+            // this.logger.log('displayModalBanVisitor HERE 2 ')
+            this.router.navigate(['project/' + this.id_project + '/project-settings/advanced'])
+          } else if (this.subscription_is_active === false) {
+            // this.logger.log('displayModalBanVisitor HERE 3 ')
+            if (this.profile_name === PLAN_NAME.C) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
+            } else if (this.profile_name === PLAN_NAME.F) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            }
           }
+        } else if (
+          this.profile_name === PLAN_NAME.A ||
+          this.profile_name === PLAN_NAME.B ||
+          this.profile_name === PLAN_NAME.D ||
+          this.profile_name === PLAN_NAME.E ||
+          this.profile_name === PLAN_NAME.EE ||
+          this.prjct_profile_type === 'free'
+        ) {
+          // this.logger.log('displayModalBanVisitor HERE 4 ')
+          this.presentModalFeautureAvailableOnlyWithPlanC()
         }
-      } else if (
-        this.profile_name === PLAN_NAME.A ||
-        this.profile_name === PLAN_NAME.B ||
-        this.profile_name === PLAN_NAME.D ||
-        this.profile_name === PLAN_NAME.E ||
-        this.profile_name === PLAN_NAME.EE ||
-        this.prjct_profile_type === 'free'
-      ) {
-        // this.logger.log('displayModalBanVisitor HERE 4 ')
-        this.presentModalFeautureAvailableOnlyWithPlanC()
+      } else {
+        // this.logger.log('displayModalBanVisitor HERE 5 ')
+        this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
       }
     } else {
-      // this.logger.log('displayModalBanVisitor HERE 5 ')
-      this.presentModalOnlyOwnerCanManageAdvancedProjectSettings()
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
   }
 
@@ -984,7 +997,14 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
           if (this.profile_name === PLAN_NAME.C) {
             this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
           } else if (this.profile_name === PLAN_NAME.F) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            // -----------------------------
+            // For withe labelling
+            // -----------------------------
+            if (this.isVisiblePaymentTab) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            } else {
+              this.notify._displayContactUsModal(true, 'upgrade_plan');
+            }
           }
         }
       } else if (
@@ -1013,11 +1033,23 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
           // this.logger.log('goToManageEmailSettings HERE 2 ')
           this.router.navigate(['project/' + this.id_project + '/smtp-settings'])
         } else if (this.subscription_is_active === false) {
-          // this.logger.log('goToManageEmailSettings HERE 3 ')
+          this.logger.log('goToManageEmailSettings HERE 3 isVisiblePaymentTab ', this.isVisiblePaymentTab, 'profile_name ', this.profile_name)
           if (this.profile_name === PLAN_NAME.C) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
+            this.logger.log('goToManageEmailSettings HERE 4  PLAN_NAME', this.profile_name)
+            // -----------------------------
+            // For withe labelling
+            // -----------------------------
+            if (this.isVisiblePaymentTab) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.C + ' plan', this.subscription_end_date);
+            } else {
+              this.notify._displayContactUsModal(true, 'upgrade_plan');
+            }
           } else if (this.profile_name === PLAN_NAME.F) {
-            this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            if (this.isVisiblePaymentTab) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, PLAN_NAME.F + ' plan', this.subscription_end_date);
+            } else {
+              this.notify._displayContactUsModal(true, 'upgrade_plan');
+            }
           }
         }
       } else if (
@@ -1230,6 +1262,7 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
   getProjectPlan() {
     this.subscription = this.prjctPlanService.projectPlan$.subscribe((projectProfileData: any) => {
       //  this.logger.log('[PRJCT-EDIT-ADD] - getProjectPlan project Profile Data', projectProfileData)
+      this.logger.log('[PRJCT-EDIT-ADD] - getProjectPlan project Profile Data', projectProfileData)
       if (projectProfileData) {
         this.prjct_name = projectProfileData.name;
         this.logger.log('[PRJCT-EDIT-ADD] - getProjectPlan prjct_name', this.prjct_name);
@@ -3171,57 +3204,61 @@ export class ProjectEditAddComponent implements OnInit, OnDestroy {
   presentModalFeautureAvailableOnlyWithPaidPlans() {
     // const el = document.createElement('div')
     // el.innerHTML = this.featureAvailableOnlyWithPaidPlans
-    Swal.fire({
-
-      // content: el,
-      title: this.upgradePlan,
-      text: this.featureAvailableOnlyWithPaidPlans,
-      icon: "info",
-      showCloseButton: false,
-      showCancelButton: true,
-      confirmButtonText: this.upgradePlan,
-      cancelButtonText: this.cancel,
-      confirmButtonColor: "var(--blue-light)",
-      focusConfirm: true,
-      reverseButtons: true,
+    if (this.isVisiblePaymentTab) {
+      Swal.fire({
 
-      // buttons: {
-      //   cancel: this.cancel,
-      //   catch: {
-      //     text: this.upgradePlan,
-      //     value: "catch",
-      //   },
-      // },
-      // dangerMode: false,
-    }).then((result) => {
-      if (result.isConfirmed) {
-        // this.logger.log('presentModalFeautureAvailableOnlyWithPaidPlans value', value)
-        // this.router.navigate(['project/' + this.projectId + '/pricing']);
-        if (this.isVisiblePaymentTab) {
+        // content: el,
+        title: this.upgradePlan,
+        text: this.featureAvailableOnlyWithPaidPlans,
+        icon: "info",
+        showCloseButton: false,
+        showCancelButton: true,
+        confirmButtonText: this.upgradePlan,
+        cancelButtonText: this.cancel,
+        confirmButtonColor: "var(--blue-light)",
+        focusConfirm: true,
+        reverseButtons: true,
+
+        // buttons: {
+        //   cancel: this.cancel,
+        //   catch: {
+        //     text: this.upgradePlan,
+        //     value: "catch",
+        //   },
+        // },
+        // dangerMode: false,
+      }).then((result) => {
+        if (result.isConfirmed) {
+          // this.logger.log('presentModalFeautureAvailableOnlyWithPaidPlans value', value)
+          // this.router.navigate(['project/' + this.projectId + '/pricing']);
+          if (this.isVisiblePaymentTab) {
+
+            if (this.USER_ROLE === 'owner') {
+              if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+                if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+                  this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+                } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+                  this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+                }
 
-          if (this.USER_ROLE === 'owner') {
-            if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-              if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-                this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date);
-              } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-                this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
-              }
+                this.logger.log('[PRJCT-EDIT-ADD] profile_name ', this.profile_name)
+              } else if (this.profile_name === 'free' && this.prjct_trial_expired === true || this.profile_name === 'Sandbox' && this.prjct_trial_expired === true) {  //
 
-              this.logger.log('[PRJCT-EDIT-ADD] profile_name ', this.profile_name)
-            } else if (this.profile_name === 'free' && this.prjct_trial_expired === true || this.profile_name === 'Sandbox' && this.prjct_trial_expired === true) {  //
+                this.router.navigate(['project/' + this.projectId + '/pricing']);
 
-              this.router.navigate(['project/' + this.projectId + '/pricing']);
+              }
 
+            } else {
+              this.presentModalOnlyOwnerCanManageTheAccountPlan();
             }
-
           } else {
-            this.presentModalOnlyOwnerCanManageTheAccountPlan();
+            this.notify._displayContactUsModal(true, 'upgrade_plan');
           }
-        } else {
-          this.notify._displayContactUsModal(true, 'upgrade_plan');
         }
-      }
-    });
+      });
+    } else {
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+    }
   }
 
   getTestSiteUrl() {
diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts
index 3cd0af417ad6..af6b3e35a4f2 100755
--- a/src/app/projects/projects.component.ts
+++ b/src/app/projects/projects.component.ts
@@ -156,6 +156,7 @@ export class ProjectsComponent implements OnInit, AfterContentInit, OnDestroy {
     this.unsubscribe$.next();
     this.unsubscribe$.complete();
   }
+
   getRouteParams() {
     this.route.queryParams.subscribe((params) => {
       this.logger.log('[PROJECTS] - GET ROUTE-PARAMS & APPID - params: ', params)
diff --git a/src/app/services/integration.service.ts b/src/app/services/integration.service.ts
index 87080368a78f..35a1b5b494be 100644
--- a/src/app/services/integration.service.ts
+++ b/src/app/services/integration.service.ts
@@ -118,7 +118,7 @@ export class IntegrationService {
     return this.http.delete(url, httpOptions);
   }
 
-  checkIntegrationKeyValidity(url: string, key?: string) {
+  checkIntegrationKeyValidity(url: string, key?: string, api_key?: string) {
     
     let headers = new HttpHeaders({
       'Content-Type': 'application/json',
@@ -128,6 +128,10 @@ export class IntegrationService {
       headers = headers.append('Authorization', key)
     }
 
+    if (api_key) {
+      headers = headers.append('api-key', api_key)
+    }
+
     const httpOptions = {
       headers: headers
     }
@@ -135,4 +139,5 @@ export class IntegrationService {
     return this.http.get(url, httpOptions);
   }
 
+
 }
diff --git a/src/app/services/quotes.service.ts b/src/app/services/quotes.service.ts
index 2dac6d5b5f5d..62a68d8dc51d 100644
--- a/src/app/services/quotes.service.ts
+++ b/src/app/services/quotes.service.ts
@@ -103,7 +103,7 @@ export class QuotesService {
     })
   }
 
-    // --------------------------------------------------
+  // --------------------------------------------------
   // @ Get request count
   // --------------------------------------------------
   public getQuotasCount(project_id) {
@@ -120,10 +120,11 @@ export class QuotesService {
   }
 
   async getQuoteLimits(project) {
+    this.logger.log('calling  getQuoteLimits ', project)
     let limits;
 
     if (project.profile.type === 'payment') {
-
+      this.logger.log('calling 1 ')
       if (project.isActiveSubscription === false) {
         limits = PLANS_LIST.Sandbox;
         return limits;
@@ -144,31 +145,31 @@ export class QuotesService {
       }
 
       limits = PLANS_LIST[plan];
+      // console.log('[Q-S] limits ', limits) 
+      // console.log('[Q-S] PLANS_LIST[plan] ', PLANS_LIST[plan]) 
 
-      if (project.profile.quotes) {
-        let profile_quotes = project?.profile?.quotes;
-        const merged_quotes = Object.assign({}, limits, profile_quotes);
-        return merged_quotes;
-      } else {
-          return limits;
-      }
     } else {
-
       if (project.trialExpired === true) {
         limits = PLANS_LIST.Sandbox;
-        return limits;
+        this.logger.log('calling 2 limits ', limits)
+        
       } else {
         limits = PLANS_LIST.FREE_TRIAL;
+        this.logger.log('calling 3 ')
         // return limits;
-        if (project.profile.quotes) {
-          let profile_quotes = project?.profile?.quotes;
-          const merged_quotes = Object.assign({}, limits, profile_quotes);
-          return merged_quotes;
-        } else {
-            return limits;
-        }
       }
     }
+    this.logger.log('project 2', project)
+    if (project.profile.quotes) {
+      this.logger.log('calling 3 ')
+      let profile_quotes = project?.profile?.quotes;
+      const merged_quotes = Object.assign({}, limits, profile_quotes);
+      this.logger.log('merged_quotes ', merged_quotes)
+      return merged_quotes;
+    } else {
+      this.logger.log('merged_quotes ', limits)
+        return limits;
+    }
   }
 
   hasOpenedNavbarQuotasMenu() {
diff --git a/src/app/services/websocket/ws-requests.service.ts b/src/app/services/websocket/ws-requests.service.ts
index 9fd15f335553..8f72a58bf8eb 100755
--- a/src/app/services/websocket/ws-requests.service.ts
+++ b/src/app/services/websocket/ws-requests.service.ts
@@ -187,7 +187,6 @@ export class WsRequestsService implements OnDestroy {
         //   this.webSocketJs.unsubscribe('/' + this.project_id + '/requests/' + this.subscribed_request_id); // WHEN CHANGING THE PROJECT I UNSUBSCRIBE FROM THE "REQUEST BY ID" TO WHICH IT IS POSSIBLY SUBSCRIBED
         //   this.webSocketJs.unsubscribe('/' + this.project_id + '/requests/' + this.subscribed_request_id + '/messages'); // AS ABOVE BUT FOR MESSAGES
         // }
-
         //  unsuscribe requester presence al cambio progetto
         if (this.subscribed_requester_id) {
           this.webSocketJs.unsubscribe('/' + this.project_id + '/project_users/users/' + this.subscribed_requester_id);
@@ -214,6 +213,7 @@ export class WsRequestsService implements OnDestroy {
           function (data, notification) {
 
             if (data) {
+              // console.log("[WS-REQUESTS-SERV] DSHB - Create - DATA ", data);
               // ------------------------------------------------
               // @ Agents - pass in data agents get from snapshot
               // ------------------------------------------------
@@ -485,7 +485,7 @@ export class WsRequestsService implements OnDestroy {
    * @param id_request 
    */
   subscribeTo_wsRequestById(id_request) {
-    // console.log("[WS-REQUESTS-SERV] - SUBSCR TO WS REQUEST-BY-ID (REF) id_request ", id_request);
+    this.logger.log("[WS-REQUESTS-SERV] - SUBSCR TO WS REQUEST-BY-ID (REF) id_request ", id_request);
 
     this.unsubscribePreviousRequestId()
 
@@ -1208,6 +1208,9 @@ export class WsRequestsService implements OnDestroy {
 
     // const url = this.SERVER_BASE_PATH + 'modules/tilebot/ext/parameters/requests/' + id_request;
     const url = this.SERVER_BASE_PATH + this.project_id + '/requests/' + id_request + '/chatbot/parameters';
+    // https://tiledesk-server-pre.herokuapp.com/62c3f10152dc7400352bab0d/requests/support-group-62c3f10152dc7400352bab0d-e81d9c55-wab-109639215462567-393484506627/chatbot/parameters
+    
+
     // console.log('[WS-REQUESTS-SERV] - GET CONVERSATION WITH BOT URL ', url);
 
     // 'Authorization': this.TOKEN,
diff --git a/src/app/static-pages/activities-static/activities-static.component.html b/src/app/static-pages/activities-static/activities-static.component.html
index 2ac9bda8239d..213a064d8c24 100755
--- a/src/app/static-pages/activities-static/activities-static.component.html
+++ b/src/app/static-pages/activities-static/activities-static.component.html
@@ -15,7 +15,7 @@
 
       <div class="col-md-6">
         <div class="left-div-padding">
-          <div class="row">
+          <div class="row" *ngIf="payIsVisible">
             <div class="col-sm-12">
               <h2 class="demopage-title">
                 <!-- {{ "AvailableWithThePlan" | translate:  tparams}} -->
diff --git a/src/app/static-pages/activities-static/activities-static.component.ts b/src/app/static-pages/activities-static/activities-static.component.ts
index e011b585e779..9a616d002ae2 100755
--- a/src/app/static-pages/activities-static/activities-static.component.ts
+++ b/src/app/static-pages/activities-static/activities-static.component.ts
@@ -50,7 +50,7 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
   //   dateFormat: 'dd/mm/yyyy',
   // };
   profile_name: string;
-  isChromeVerGreaterThan100:boolean;
+  isChromeVerGreaterThan100: boolean;
   constructor(
     public translate: TranslateService,
     public auth: AuthService,
@@ -88,14 +88,14 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => { 
-     this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-    //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
-   }
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
+  }
 
   getOSCODE() {
     this.public_Key = this.appConfigService.getConfig().t2y12PruGU9wUtEGzBJfolMIgK;
@@ -131,28 +131,28 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[ACTIVITIES-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[ACTIVITIES-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    ).subscribe((project) => {
-      this.logger.log('[ACTIVITIES-STATIC] - project ', project)
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[ACTIVITIES-STATIC] - project id ', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      ).subscribe((project) => {
+        this.logger.log('[ACTIVITIES-STATIC] - project ', project)
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[ACTIVITIES-STATIC] - project id ', this.projectId)
+        }
+      });
   }
 
 
@@ -161,21 +161,24 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
   }
 
   presentModalsOnInit() {
-
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
 
         if (this.USER_ROLE === 'owner') {
           if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-  
+
             this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
-  
+
           } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-  
+
             this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
           }
         }
-      
-    }
+      }
+    } 
+    // else {
+    //   this.notify._displayContactUsModal(true, 'upgrade_plan');
+    // }
   }
 
 
@@ -187,8 +190,8 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
           if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
             this.notify._displayContactUsModal(true, 'upgrade_plan');
           } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true) {
-           
-            
+
+
             this.notify._displayContactUsModal(true, 'upgrade_plan');
           } else if (this.prjct_profile_type === 'free') {
             this.router.navigate(['project/' + this.projectId + '/pricing']);
@@ -203,12 +206,12 @@ export class ActivitiesStaticComponent extends PricingBaseComponent implements O
       // this.notify.presentContactUsModalToUpgradePlan(true);
       this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
-    
+
     // else if (this.projectProfileData && this.projectProfileData.extra3) {
     //   if (this.projectProfileData.extra3 === 'tiledesk_tier1' || this.projectProfileData.extra3 === 'tiledesk_tier2') {
     //     this.router.navigate(['project/' + this.projectId + '/project-settings/payments']);
     //   } else if (this.projectProfileData.extra3 === 'tiledesk_tier3' || this.projectProfileData.extra3 === 'tiledesk_tier4') {
-        
+
     //   }
     // }
   }
diff --git a/src/app/static-pages/analytics-static/analytics-static.component.html b/src/app/static-pages/analytics-static/analytics-static.component.html
index 0553e6881c35..b9457b53326f 100755
--- a/src/app/static-pages/analytics-static/analytics-static.component.html
+++ b/src/app/static-pages/analytics-static/analytics-static.component.html
@@ -15,7 +15,7 @@
                 <div class="col-md-5 left-side-in-col-container"> 
                     
                   <div class="left-div-padding">
-                    <div class="row"> 
+                    <div class="row" *ngIf="payIsVisible"> 
                       <div class="col-sm-12"> 
                         <h2 class="demopage-title" >
                           <span *ngIf="!isAppSumo" >
diff --git a/src/app/static-pages/analytics-static/analytics-static.component.ts b/src/app/static-pages/analytics-static/analytics-static.component.ts
index 5364e30fc261..87fb402a983d 100755
--- a/src/app/static-pages/analytics-static/analytics-static.component.ts
+++ b/src/app/static-pages/analytics-static/analytics-static.component.ts
@@ -84,7 +84,7 @@ export class AnalyticsStaticComponent extends PricingBaseComponent implements On
   ) {
     super(prjctPlanService, notify);
     // super(translate);
-   
+
   }
 
   ngOnInit() {
@@ -107,13 +107,13 @@ export class AnalyticsStaticComponent extends PricingBaseComponent implements On
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   getOSCODE() {
@@ -154,50 +154,55 @@ export class AnalyticsStaticComponent extends PricingBaseComponent implements On
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[ANALYTICS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[ANALYTICS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
- 
+
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[ANALYTICS-STATIC] - project id', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[ANALYTICS-STATIC] - project id', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.A && this.profile_name !== PLAN_NAME.D) {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.A && this.profile_name !== PLAN_NAME.D) {
 
-          if (this.profile_name === PLAN_NAME.B || this.profile_name === PLAN_NAME.E || this.profile_name === PLAN_NAME.EE) {
+            if (this.profile_name === PLAN_NAME.B || this.profile_name === PLAN_NAME.E || this.profile_name === PLAN_NAME.EE) {
 
-            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+              this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+            } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
-          }
-        } else if (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D) {
+              this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            }
+          } else if (this.profile_name === PLAN_NAME.A || this.profile_name === PLAN_NAME.D) {
 
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+          }
         }
       }
-    }
+    } 
+    // else {
+    //   this.notify._displayContactUsModal(true, 'upgrade_plan');
+    // }
   }
 
 
@@ -208,10 +213,10 @@ export class AnalyticsStaticComponent extends PricingBaseComponent implements On
         if (this.USER_ROLE === 'owner') {
           if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
             this.notify._displayContactUsModal(true, 'upgrade_plan');
-            
+
           } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true) {
 
-            
+
             this.notify._displayContactUsModal(true, 'upgrade_plan');
           } else if (this.prjct_profile_type === 'free') {
             this.router.navigate(['project/' + this.projectId + '/pricing']);
diff --git a/src/app/static-pages/automation-static/automation-static.component.html b/src/app/static-pages/automation-static/automation-static.component.html
index 95cc344cf943..ba540f9cca40 100644
--- a/src/app/static-pages/automation-static/automation-static.component.html
+++ b/src/app/static-pages/automation-static/automation-static.component.html
@@ -44,7 +44,7 @@
           <div class="col-md-5 left-side-in-col-container">
 
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
 
diff --git a/src/app/static-pages/automation-static/automation-static.component.ts b/src/app/static-pages/automation-static/automation-static.component.ts
index 32b1d349671b..0906632cdea2 100644
--- a/src/app/static-pages/automation-static/automation-static.component.ts
+++ b/src/app/static-pages/automation-static/automation-static.component.ts
@@ -167,16 +167,17 @@ export class AutomationStaticComponent extends PricingBaseComponent implements O
   }
 
   presentModalsOnInit() {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
@@ -195,7 +196,7 @@ export class AutomationStaticComponent extends PricingBaseComponent implements O
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else if (this.prjct_profile_type === 'free') {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-          
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
diff --git a/src/app/static-pages/canned-responses-static/canned-responses-static.component.html b/src/app/static-pages/canned-responses-static/canned-responses-static.component.html
index 7d63068843b9..1065e10c30d8 100644
--- a/src/app/static-pages/canned-responses-static/canned-responses-static.component.html
+++ b/src/app/static-pages/canned-responses-static/canned-responses-static.component.html
@@ -31,7 +31,7 @@
           <div class="col-md-5 left-side-in-col-container">
 
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
 
diff --git a/src/app/static-pages/canned-responses-static/canned-responses-static.component.ts b/src/app/static-pages/canned-responses-static/canned-responses-static.component.ts
index 1a59fbe8ac88..5e38165add8f 100644
--- a/src/app/static-pages/canned-responses-static/canned-responses-static.component.ts
+++ b/src/app/static-pages/canned-responses-static/canned-responses-static.component.ts
@@ -1,4 +1,4 @@
-import { Component,OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../../core/auth.service';
 import { Subscription } from 'rxjs';
@@ -63,7 +63,7 @@ export class CannedResponsesStaticComponent extends PricingBaseComponent impleme
     private logger: LoggerService,
     public appConfigService: AppConfigService,
     public location: Location
-  ) { 
+  ) {
     super(prjctPlanService, notify);
   }
 
@@ -86,13 +86,13 @@ export class CannedResponsesStaticComponent extends PricingBaseComponent impleme
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   listenSidebarIsOpened() {
@@ -134,13 +134,13 @@ export class CannedResponsesStaticComponent extends PricingBaseComponent impleme
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[CANNED-RES-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[CANNED-RES-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
 
@@ -160,16 +160,17 @@ export class CannedResponsesStaticComponent extends PricingBaseComponent impleme
   }
 
   presentModalsOnInit() {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
@@ -184,7 +185,7 @@ export class CannedResponsesStaticComponent extends PricingBaseComponent impleme
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-      
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
diff --git a/src/app/static-pages/contacts-static/contacts-static.component.html b/src/app/static-pages/contacts-static/contacts-static.component.html
index a627b8b053aa..36cc57e1021c 100644
--- a/src/app/static-pages/contacts-static/contacts-static.component.html
+++ b/src/app/static-pages/contacts-static/contacts-static.component.html
@@ -15,7 +15,7 @@
       <div class="col-md-5 left-side-in-col-container">
 
         <div class="left-div-padding">
-          <div class="row">
+          <div class="row" *ngIf="payIsVisible">
             <div class="col-sm-12">
               <h2 class="demopage-title">
                 
diff --git a/src/app/static-pages/contacts-static/contacts-static.component.ts b/src/app/static-pages/contacts-static/contacts-static.component.ts
index 1a0ec3310499..7ab714a8433a 100644
--- a/src/app/static-pages/contacts-static/contacts-static.component.ts
+++ b/src/app/static-pages/contacts-static/contacts-static.component.ts
@@ -20,7 +20,7 @@ import { Location } from '@angular/common';
   styleUrls: ['./contacts-static.component.scss']
 })
 
-export class ContactsStaticComponent extends  PricingBaseComponent implements OnInit, OnDestroy {
+export class ContactsStaticComponent extends PricingBaseComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<any> = new Subject<any>();
   tparams: any;
   imageObject = [
@@ -50,7 +50,7 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
   profile_name: string;
   isChromeVerGreaterThan100: boolean;
   PLAN_NAME = PLAN_NAME;
-  public_Key:any;
+  public_Key: any;
   payIsVisible: boolean;
 
   constructor(
@@ -63,7 +63,7 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
     private logger: LoggerService,
     public appConfigService: AppConfigService,
     public location: Location
-  ) { 
+  ) {
     super(prjctPlanService, notify);
   }
 
@@ -87,13 +87,13 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   getOSCODE() {
@@ -128,13 +128,13 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[CNTCTS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[CNTCTS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
   getBrowserLang() {
@@ -143,34 +143,35 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-      // this.logger.log('[DEPTS-STATIC] - project ', project)
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[CNTCTS-STATIC] - project Id ', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+        // this.logger.log('[DEPTS-STATIC] - project ', project)
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[CNTCTS-STATIC] - project Id ', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
+    // console.log('presentModalsOnInit prjct_profile_type ',this.prjct_profile_type,  'subscription_is_active ', this.subscription_is_active)
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
-
   }
 
 
@@ -182,7 +183,7 @@ export class ContactsStaticComponent extends  PricingBaseComponent implements On
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-         
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
diff --git a/src/app/static-pages/departments-static/departments-static.component.html b/src/app/static-pages/departments-static/departments-static.component.html
index b2caf59f234b..1956939fafef 100755
--- a/src/app/static-pages/departments-static/departments-static.component.html
+++ b/src/app/static-pages/departments-static/departments-static.component.html
@@ -34,7 +34,7 @@
         <div class="row col-container">
           <div class="col-md-5 left-side-in-col-container">
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
                     <!-- {{'AvailableFromThePlan'| translate: tparams }} -->
diff --git a/src/app/static-pages/departments-static/departments-static.component.ts b/src/app/static-pages/departments-static/departments-static.component.ts
index afb6d11c9c81..e5399bc76513 100755
--- a/src/app/static-pages/departments-static/departments-static.component.ts
+++ b/src/app/static-pages/departments-static/departments-static.component.ts
@@ -23,7 +23,7 @@ const swal = require('sweetalert');
   styleUrls: ['./departments-static.component.scss']
 })
 
-export class DepartmentsStaticComponent  extends PricingBaseComponent implements OnInit, OnDestroy {
+export class DepartmentsStaticComponent extends PricingBaseComponent implements OnInit, OnDestroy {
   private unsubscribe$: Subject<any> = new Subject<any>();
   PLAN_NAME = PLAN_NAME
   APP_SUMO_PLAN_NAME = APP_SUMO_PLAN_NAME;
@@ -96,13 +96,13 @@ export class DepartmentsStaticComponent  extends PricingBaseComponent implements
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   listenSidebarIsOpened() {
@@ -146,13 +146,13 @@ export class DepartmentsStaticComponent  extends PricingBaseComponent implements
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[DEPTS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[DEPTS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
   getBrowserLang() {
@@ -161,34 +161,37 @@ export class DepartmentsStaticComponent  extends PricingBaseComponent implements
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-      // this.logger.log('[DEPTS-STATIC] - project ', project)
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[DEPTS-STATIC] - project Id ', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+        // this.logger.log('[DEPTS-STATIC] - project ', project)
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[DEPTS-STATIC] - project Id ', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
+    // console.log('presentModalsOnInit prjct_profile_type ',this.prjct_profile_type,  'subscription_is_active ', this.subscription_is_active)
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
 
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-          this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C && this.profile_name === PLAN_NAME.C) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+          }
         }
       }
     }
+
   }
 
 
@@ -200,7 +203,7 @@ export class DepartmentsStaticComponent  extends PricingBaseComponent implements
           // && this.subscription_is_active === false
           if (this.prjct_profile_type === 'payment') {
             this.notify._displayContactUsModal(true, 'upgrade_plan');
-          } else  if (this.prjct_profile_type === 'free') {
+          } else if (this.prjct_profile_type === 'free') {
             this.router.navigate(['project/' + this.projectId + '/pricing']);
           }
         } else {
@@ -247,7 +250,7 @@ export class DepartmentsStaticComponent  extends PricingBaseComponent implements
       });
   }
 
- 
- 
+
+
 
 }
diff --git a/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.html b/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.html
index f17585b85c14..f634271d7739 100644
--- a/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.html
+++ b/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.html
@@ -27,7 +27,7 @@
           <div class="col-md-5 left-side-in-col-container">
 
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
                     <!-- {{ "FeatureAvailableOnlyWithPaidPlans" | translate }} -->
diff --git a/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.ts b/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.ts
index 18f7b5529426..3a8c83dfff43 100644
--- a/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.ts
+++ b/src/app/static-pages/email-ticketing-static/email-ticketing-static.component.ts
@@ -39,7 +39,7 @@ export class EmailTicketingStaticComponent extends PricingBaseComponent implemen
   isChromeVerGreaterThan100: boolean;
   public_Key: any;
   payIsVisible: boolean;
- 
+
 
   constructor(
     private router: Router,
@@ -54,7 +54,7 @@ export class EmailTicketingStaticComponent extends PricingBaseComponent implemen
   ) {
     // super(translate); 
     super(prjctPlanService, notify);
-   }
+  }
 
   ngOnInit(): void {
     this.getOSCODE();
@@ -75,13 +75,13 @@ export class EmailTicketingStaticComponent extends PricingBaseComponent implemen
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   listenSidebarIsOpened() {
@@ -127,41 +127,43 @@ export class EmailTicketingStaticComponent extends PricingBaseComponent implemen
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[EMAIL-TKTNG-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[EMAIL-TKTNG-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[EMAIL-TKTNG-STATIC] - project id', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[EMAIL-TKTNG-STATIC] - project id', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
 
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
@@ -176,12 +178,12 @@ export class EmailTicketingStaticComponent extends PricingBaseComponent implemen
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true) {
 
-       
+
           this.notify._displayContactUsModal(true, 'upgrade_plan');
 
         } else if (this.prjct_profile_type === 'free') {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-          
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
diff --git a/src/app/static-pages/groups-static/groups-static.component.html b/src/app/static-pages/groups-static/groups-static.component.html
index 4bfcf254f069..7bc6295c3415 100755
--- a/src/app/static-pages/groups-static/groups-static.component.html
+++ b/src/app/static-pages/groups-static/groups-static.component.html
@@ -31,7 +31,7 @@
           <div class="col-md-5 left-side-in-col-container">
 
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
                     <!-- {{'AvailableFromThePlan'| translate: tparams }} -->
diff --git a/src/app/static-pages/groups-static/groups-static.component.ts b/src/app/static-pages/groups-static/groups-static.component.ts
index 8ef3021fca4c..1358ef5ec9f5 100755
--- a/src/app/static-pages/groups-static/groups-static.component.ts
+++ b/src/app/static-pages/groups-static/groups-static.component.ts
@@ -92,13 +92,13 @@ export class GroupsStaticComponent extends PricingBaseComponent implements OnIni
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   listenSidebarIsOpened() {
@@ -140,13 +140,13 @@ export class GroupsStaticComponent extends PricingBaseComponent implements OnIni
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[GROUPS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[GROUPS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
   getBrowserLang() {
@@ -155,26 +155,28 @@ export class GroupsStaticComponent extends PricingBaseComponent implements OnIni
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-      // this.logger.log('[GROUPS-STATIC] - project ', project)
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[GROUPS-STATIC] - project Id  ', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+        // this.logger.log('[GROUPS-STATIC] - project ', project)
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[GROUPS-STATIC] - project Id  ', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
 
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C  && this.profile_name !== PLAN_NAME.F) {
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
@@ -190,9 +192,9 @@ export class GroupsStaticComponent extends PricingBaseComponent implements OnIni
             this.notify._displayContactUsModal(true, 'upgrade_plan');
           } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true) {
 
-           
+
             this.notify._displayContactUsModal(true, 'upgrade_plan');
-          }  else if (this.prjct_profile_type === 'free') {
+          } else if (this.prjct_profile_type === 'free') {
             this.router.navigate(['project/' + this.projectId + '/pricing']);
           }
         } else {
diff --git a/src/app/static-pages/hours-static/hours-static.component.html b/src/app/static-pages/hours-static/hours-static.component.html
index 527a748f4224..9981e8c78673 100755
--- a/src/app/static-pages/hours-static/hours-static.component.html
+++ b/src/app/static-pages/hours-static/hours-static.component.html
@@ -32,7 +32,7 @@
         <div class="row col-container">
           <div class="col-md-5 left-side-in-col-container">
             <div class="left-div-padding">
-              <div class="row">
+              <div class="row" *ngIf="payIsVisible">
                 <div class="col-sm-12">
                   <h2 class="demopage-title">
                     <!-- {{ "AvailableFromThePlan" | translate: tparams }} -->
diff --git a/src/app/static-pages/hours-static/hours-static.component.ts b/src/app/static-pages/hours-static/hours-static.component.ts
index 0444b1212132..daa2d96f978f 100755
--- a/src/app/static-pages/hours-static/hours-static.component.ts
+++ b/src/app/static-pages/hours-static/hours-static.component.ts
@@ -39,7 +39,7 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
   public IS_OPEN_SETTINGS_SIDEBAR: boolean;
   isChromeVerGreaterThan100: boolean;
   // tparams: any;
-  public_Key:any
+  public_Key: any
   payIsVisible: boolean;
   constructor(
     private router: Router,
@@ -51,11 +51,11 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
     private logger: LoggerService,
     public appConfigService: AppConfigService,
     public location: Location
-  ) { 
+  ) {
     // super(translate); 
     // this.tparams = {plan_name: PLAN_NAME.A}
     super(prjctPlanService, notify);
-  
+
   }
 
   ngOnInit() {
@@ -79,16 +79,16 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => { 
-     this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-    //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
-   }
-
-   listenSidebarIsOpened() {
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
+  }
+
+  listenSidebarIsOpened() {
     this.auth.settingSidebarIsOpned.subscribe((isopened) => {
       this.logger.log('[HOURS-STATIC]] SETTINGS-SIDEBAR isopened (FROM SUBSCRIPTION) ', isopened)
       this.IS_OPEN_SETTINGS_SIDEBAR = isopened
@@ -128,13 +128,13 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[HOURS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[HOURS-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
   goBack() {
@@ -166,20 +166,20 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
 
 
   presentModalsOnInit() {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
-
-          this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.profile_name, this.subscription_end_date);
+          }
         }
       }
     }
-
   }
 
 
@@ -191,11 +191,11 @@ export class HoursStaticComponent extends PricingBaseComponent implements OnInit
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else if (this.prjct_profile_type === 'payment' && this.subscription_is_active === true) {
 
-       
+
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else if (this.prjct_profile_type === 'free') {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-          
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
diff --git a/src/app/static-pages/wsrequests-static/wsrequests-static.component.html b/src/app/static-pages/wsrequests-static/wsrequests-static.component.html
index 21e08d3dcb88..fccbc3444d77 100644
--- a/src/app/static-pages/wsrequests-static/wsrequests-static.component.html
+++ b/src/app/static-pages/wsrequests-static/wsrequests-static.component.html
@@ -15,7 +15,7 @@
             <div class="col-md-5 left-side-in-col-container">
 
                 <div class="left-div-padding">
-                    <div class="row">
+                    <div class="row" *ngIf="payIsVisible">
                         <div class="col-sm-12">
                             <h2 class="demopage-title">
                                 
diff --git a/src/app/static-pages/wsrequests-static/wsrequests-static.component.ts b/src/app/static-pages/wsrequests-static/wsrequests-static.component.ts
index fb6d8bb14fb2..4e37ddc472a0 100644
--- a/src/app/static-pages/wsrequests-static/wsrequests-static.component.ts
+++ b/src/app/static-pages/wsrequests-static/wsrequests-static.component.ts
@@ -67,7 +67,7 @@ export class WsrequestsStaticComponent extends PricingBaseComponent implements O
     private logger: LoggerService,
     public appConfigService: AppConfigService,
     public location: Location
-  ) { 
+  ) {
     super(prjctPlanService, notify);
   }
 
@@ -91,13 +91,13 @@ export class WsrequestsStaticComponent extends PricingBaseComponent implements O
 
   getBrowserVersion() {
     this.auth.isChromeVerGreaterThan100
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((isChromeVerGreaterThan100: boolean) => {
-      this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
-      //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
-    })
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((isChromeVerGreaterThan100: boolean) => {
+        this.isChromeVerGreaterThan100 = isChromeVerGreaterThan100;
+        //  console.log("[BOT-CREATE] isChromeVerGreaterThan100 ",this.isChromeVerGreaterThan100);
+      })
   }
 
   getOSCODE() {
@@ -136,41 +136,43 @@ export class WsrequestsStaticComponent extends PricingBaseComponent implements O
 
   getProjectUserRole() {
     this.usersService.project_user_role_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((user_role) => {
-      this.USER_ROLE = user_role;
-      this.logger.log('[WSREQUEST-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((user_role) => {
+        this.USER_ROLE = user_role;
+        this.logger.log('[WSREQUEST-STATIC] - PROJECT USER ROLE: ', this.USER_ROLE);
+      });
   }
 
 
   getCurrentProject() {
     this.auth.project_bs
-    .pipe(
-      takeUntil(this.unsubscribe$)
-    )
-    .subscribe((project) => {
-
-      if (project) {
-        this.projectId = project._id
-        this.logger.log('[WSREQUEST-STATIC] - project id', this.projectId)
-      }
-    });
+      .pipe(
+        takeUntil(this.unsubscribe$)
+      )
+      .subscribe((project) => {
+
+        if (project) {
+          this.projectId = project._id
+          this.logger.log('[WSREQUEST-STATIC] - project id', this.projectId)
+        }
+      });
   }
 
   presentModalsOnInit() {
-    if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
-      if (this.USER_ROLE === 'owner') {
+    if (this.payIsVisible) {
+      if (this.prjct_profile_type === 'payment' && this.subscription_is_active === false) {
+        if (this.USER_ROLE === 'owner') {
 
-        if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
+          if (this.profile_name !== PLAN_NAME.C && this.profile_name !== PLAN_NAME.F) {
 
-          this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
+            this.notify.displaySubscripionHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date)
 
-        } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
+          } else if (this.profile_name === PLAN_NAME.C || this.profile_name === PLAN_NAME.F) {
 
-          this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+            this.notify.displayEnterprisePlanHasExpiredModal(true, this.prjct_profile_name, this.subscription_end_date);
+          }
         }
       }
     }
@@ -185,7 +187,7 @@ export class WsrequestsStaticComponent extends PricingBaseComponent implements O
           this.notify._displayContactUsModal(true, 'upgrade_plan');
         } else {
           this.router.navigate(['project/' + this.projectId + '/pricing']);
-          
+
         }
       } else {
         this.presentModalOnlyOwnerCanManageTheAccountPlan();
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 50b49690f639..33d1313a569c 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
@@ -1298,14 +1298,16 @@ <h4 class="widget-section-header__title-underlined">
 										</div>
 										<h4 class="widget-section-header__title-underlined">
 											Unbranding
-											<span class="from-b-plan-badge" *ngIf="featureIsAvailable === false">
-												<span *ngIf="!isAppSumo">  
-													{{'AvailableFromThePlans' | translate: t_params }}
-												</span>
-												<span *ngIf="isAppSumo">  
-													{{'AvailableFromThePlan' | translate: t_params }}
+											<ng-container *ngIf="payIsVisible">
+												<span  class="from-b-plan-badge" *ngIf="featureIsAvailable === false">
+													<span *ngIf="!isAppSumo">  
+														{{'AvailableFromThePlans' | translate: t_params }}
+													</span>
+													<span *ngIf="isAppSumo">  
+														{{'AvailableFromThePlan' | translate: t_params }}
+													</span>
 												</span>
-											</span>
+											</ng-container>
 										</h4>
 									</div>
 									<div class="widget-section-arrow">
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 683da755008b..33a696cf492f 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
@@ -1037,6 +1037,8 @@ export class WidgetSetUp extends WidgetSetUpBaseComponent implements OnInit, Aft
         }
       }
 
+    } else {
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
   }
 
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 ccd5a59c592c..c2d7b09b8f56 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
@@ -144,9 +144,9 @@
 
 
           <!-- ---------------------------------------------------------------- -->
-          <!-- Filters - right section -->
+          <!-- Filters - right section [ngStyle]="{'opacity':payIsVisible === true ? '1' : '0' }" -->
           <!-- ---------------------------------------------------------------- -->
-          <div class="filters-on-right" [ngStyle]="{'opacity':payIsVisible === true ? '1' : '0' }">
+          <div 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;">
@@ -516,19 +516,19 @@
 
 
   <!-- ---------------------------------------------------------------- -->
-  <!-- History info 'Upgrade Your Plan for unlimited chat history' -->
+  <!-- History info 'Upgrade Your Plan for unlimited chat history' - !!!! No longer used due to server changes-->
   <!------------------------------------------------------------------ -->
-  <div class="row" *ngIf="IS_HERE_FOR_HISTORY">
+  <!-- <div class="row" *ngIf="IS_HERE_FOR_HISTORY">
     <div class="col-md-12" *ngIf="payIsVisible">
       <div
         *ngIf="prjct_profile_type === 'payment' && subscription_is_active === false ||  prjct_profile_type === 'free' && trial_expired === true">
-        <!-- 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">
-              <!-- History is only available for the past 14 days. Renew your subscription for unlimited chat history -->
+        
               {{ 'HistoryPage.HistoryIsOnlyAvailableForThePast14Days' | translate }}.
               <span *ngIf="payIsVisible">
                 <span class="upgrade-plan-for-unlimited-history" style="color: #039be5; cursor:pointer"
@@ -543,7 +543,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 
 
 
@@ -643,12 +643,12 @@
 
     <!-- || conversation_type  === 'chat21'  && conversation_type !== 'all'-->
     <div id="conversation-type" *ngIf="
-          conversationTypeValue === CHANNELS_NAME.CHAT21 ||
-          conversationTypeValue === CHANNELS_NAME.FORM ||
-          conversationTypeValue === CHANNELS_NAME.MESSANGER ||
-          conversationTypeValue === CHANNELS_NAME.TELEGRAM || 
-          conversationTypeValue === CHANNELS_NAME.WHATSAPP || 
-          conversationTypeValue === CHANNELS_NAME.EMAIL ||
+          conversationTypeValue  === CHANNELS_NAME.CHAT21 ||
+          conversationTypeValue  === CHANNELS_NAME.FORM ||
+          conversationTypeValue  === CHANNELS_NAME.MESSANGER ||
+          conversationTypeValue  === CHANNELS_NAME.TELEGRAM || 
+          conversationTypeValue  === CHANNELS_NAME.WHATSAPP || 
+          conversationTypeValue  === CHANNELS_NAME.EMAIL ||
           conversationTypeValue === CHANNELS_NAME.VOICE_VXML || 
           conversationTypeValue === CHANNELS_NAME.SMS_TWILIO" class="applied-filter">
       <span *ngIf="conversationTypeValue === CHANNELS_NAME.CHAT21 ">
@@ -1537,6 +1537,7 @@
                         </span>
                       </span>
 
+                    
                       <!-- ---------------------------------------- -->
                       <!-- Channel - SMS -->
                       <!-- ---------------------------------------- -->
@@ -1550,6 +1551,7 @@
                           <i></i>
                         </span>
                       </span>
+                      
                       <!-- ---------------------------------------- -->
                       <!-- Channel - WhatsApp -->
                       <!-- ---------------------------------------- -->
diff --git a/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.ts b/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.ts
index 34d3af97688b..912ae262ec16 100755
--- a/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.ts
+++ b/src/app/ws_requests/history-and-nort-convs/history-and-nort-convs.component.ts
@@ -246,8 +246,8 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
     { id: '100', name: 'Unserved' },
     { id: '200', name: 'Served' }
   ];
-  
-    // { id: '50', name: 'Temporary' }
+
+  // { id: '50', name: 'Temporary' }
 
   conversationType = [
     { id: 'all', name: 'All' },
@@ -258,7 +258,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
   CHANNELS_NAME = CHANNELS_NAME;
 
-  request_duration_operator_array  = [
+  request_duration_operator_array = [
     { id: '0', name: '>=' },
     { id: '1', name: '<=' }
   ]
@@ -269,10 +269,10 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
   duration_in_table: any
 
 
-  caller_phone:string;
-  called_phone :string;
+  caller_phone: string;
+  called_phone: string;
   call_id: string;
- 
+
   start_date_is_null = true
 
 
@@ -286,6 +286,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
   FIREBASE_AUTH: boolean;
   profile_name: string;
   payIsVisible: boolean;
+  overridePay: boolean;
   public_Key: any;
   current_selected_prjct: any;
   isChromeVerGreaterThan100: boolean;
@@ -354,9 +355,9 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
     const brand = brandService.getBrand();
     this.botLogo = brand['BASE_LOGO_NO_TEXT']
     this.duration_operator_temp = this.request_duration_operator_array[0]['id']
-    this.duration_op =  'gt' 
+    this.duration_op = 'gt'
 
-    this.logger.log('[HISTORY & NORT-CONVS] duration_op (on init)',   this.duration_op)
+    this.logger.log('[HISTORY & NORT-CONVS] duration_op (on init)', this.duration_op)
 
   }
 
@@ -564,7 +565,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
                   this.operator = '='
                   this.requests_status_selected_from_advanced_option = '200'
                   this.requests_status = '200'
-                } 
+                }
                 // else if (requetStatusValue === '1000') {
                 //   this.operator = '='
                 //   this.requests_status_selected_from_advanced_option = '1000'
@@ -572,7 +573,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
                 // }
               } else {
                 this.logger.log('[HISTORY & NORT-CONVS] queryParams requetStatusValue 2 requetStatusValue >', requetStatusValue)
-                  if(requetStatusValue !== '1000') { 
+                if (requetStatusValue !== '1000') {
 
                   this.operator = '='
                   this.requests_status_selected_from_advanced_option = requetStatusValue
@@ -725,12 +726,26 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
           this.logger.log('[HISTORY & NORT-CONVS] - pay isVisible', this.payIsVisible);
         }
       }
+
+      if (key.includes("OVP")) {
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.overridePay = false;
+        } else {
+          this.overridePay = true;
+        }
+      }
     });
 
     if (!this.public_Key.includes("PAY")) {
       this.payIsVisible = false;
       this.logger.log('[HISTORY & NORT-CONVS] - pay isVisible', this.payIsVisible);
     }
+
+    if (!this.public_Key.includes("OVP")) {
+      this.overridePay = false;
+    }
   }
 
   getFirebaseAuth() {
@@ -1294,7 +1309,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
   // GET REQUEST COPY - START
   getRequests() {
-    this.logger.log('getRequests queryString' , this.queryString) 
+    this.logger.log('getRequests queryString', this.queryString)
     // this.logger.log('getRequests _preflight' , this._preflight) 
     // this.logger.log('getRequests requests_statuses ' , this.requests_statuses) 
     this.showSpinner = true;
@@ -1315,7 +1330,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
           this.logger.log('[HISTORY & NORT-CONVS] - TOTAL PAGES No ROUND TO UP ', this.totalPagesNo_roundToUp);
 
           this.requestList = requests['requests'];
-          // this.logger.log('requestList ', this.requestList)
+          this.logger.log('requestList ', this.requestList)
           for (const request of this.requestList) {
 
             if (request) {
@@ -1349,7 +1364,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
               const date = moment.localeData().longDateFormat(request.createdAt);
               request.fulldate = date;
 
-              if(request['duration']) {
+              if (request['duration']) {
 
                 // this.logger.log('[HISTORY & NORT-CONVS] duration ', request['duration']) 
                 this.duration_in_table = this.millisToMinutesAndSecondsNoFixedPoint(request['duration'])
@@ -1915,13 +1930,13 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
 
   onChangeDurationOperator() {
-    
+
     if (this.duration_operator_temp === '0') {
       this.duration_op = "gt";
-      this.logger.log('[HISTORY & NORT-CONVS] - onChangeDurationOperator duration_op', this.duration_op );
-    } else if (this.duration_operator_temp === '1'){
+      this.logger.log('[HISTORY & NORT-CONVS] - onChangeDurationOperator duration_op', this.duration_op);
+    } else if (this.duration_operator_temp === '1') {
       this.duration_op = "lt";
-      this.logger.log('[HISTORY & NORT-CONVS] - onChangeDurationOperator duration_op', this.duration_op );
+      this.logger.log('[HISTORY & NORT-CONVS] - onChangeDurationOperator duration_op', this.duration_op);
     }
   }
 
@@ -2080,11 +2095,11 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
   }
 
   search() {
-    this.logger.log('HERE IN SEARCH duration operator ',  this.duration_op) 
-    this.logger.log('HERE IN SEARCH duration ',  this.duration) 
-    this.logger.log('HERE IN SEARCH duration called_phone ',  this.called_phone) 
-    this.logger.log('HERE IN SEARCH duration caller_phone ',  this.caller_phone) 
-    this.logger.log('HERE IN SEARCH duration call_id ',  this.call_id) 
+    this.logger.log('HERE IN SEARCH duration operator ', this.duration_op)
+    this.logger.log('HERE IN SEARCH duration ', this.duration)
+    this.logger.log('HERE IN SEARCH duration called_phone ', this.called_phone)
+    this.logger.log('HERE IN SEARCH duration caller_phone ', this.caller_phone)
+    this.logger.log('HERE IN SEARCH duration call_id ', this.call_id)
     // this.logger.log('HERE IN SEARCH calledBy ', calledBy)
     this.logger.log('HERE IN SEARCH this.preflight', this.preflight)
     this.logger.log('HERE IN SEARCH this.fullText', this.fullText)
@@ -2102,7 +2117,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
     // this.logger.log('search has_searched ' + this.has_searched)
     this.pageNo = 0
 
-   
+
 
 
     if (this.fullText) {
@@ -2258,14 +2273,14 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
       this.duration = ""
     }
 
-    if (!this.called_phone) { 
+    if (!this.called_phone) {
       this.called_phone = ""
     }
 
-    if (!this.caller_phone) { 
+    if (!this.caller_phone) {
       this.caller_phone = ""
     }
-    if (!this.call_id) { 
+    if (!this.call_id) {
       this.call_id = ""
     }
 
@@ -2280,18 +2295,18 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
       + 'requester_email=' + this.emailValue + '&'
       + 'tags=' + this.selecteTagNameValue + '&'
       + 'channel=' + this.conversationTypeValue + '&'
-      + 'rstatus=' + this.requests_status + '&' 
+      + 'rstatus=' + this.requests_status + '&'
       + 'duration_op=' + this.duration_op + '&'
       + 'duration=' + this.duration + '&'
       + 'called=' + this.called_phone + '&'
       + 'caller=' + this.caller_phone + '&'
-      + 'call_id=' + this.call_id 
+      + 'call_id=' + this.call_id
 
-      // + 'called_phone=' + this.called_phone + '&'
-      // + 'caller_phone=' + this.caller_phone
+    // + 'called_phone=' + this.called_phone + '&'
+    // + 'caller_phone=' + this.caller_phone
     // + '&'
     // + 'preflight=' + this.preflightValue
-    
+
 
     this.logger.log('[HISTORY & NORT-CONVS] - QUERY STRING ', this.queryString);
 
@@ -2409,6 +2424,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
     // }
     
+    
 
     if (this.requester_email) {
       this.emailValue = this.requester_email;
@@ -2416,23 +2432,23 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
       this.emailValue = ''
     }
 
-    if (this.call_id)  {
+    if (this.call_id) {
       this.call_id = ''
     }
 
-    if (this.called_phone)  {
+    if (this.called_phone) {
       this.called_phone = ''
     }
 
-    if (this.caller_phone)  {
+    if (this.caller_phone) {
       this.caller_phone = ''
     }
 
-    if (this.called_phone)  {
+    if (this.called_phone) {
       this.called_phone = ''
     }
 
-    if (this.duration_op)  {
+    if (this.duration_op) {
       this.duration_op = 'gt'
     }
 
@@ -2476,24 +2492,24 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
       // + 'caller='  + '&'
       // + 'call_id='
 
-      'full_text='+ '&' 
-      + 'dept_id=' + '&' 
+      'full_text=' + '&'
+      + 'dept_id=' + '&'
       + 'start_date=' + '&'
-      + 'end_date=' + '&' 
-      +  'participant=' + '&' 
-      + 'requester_email='  + '&' 
-      + 'tags=' + '&' 
-      + 'channel=' + '&' 
-      + 'rstatus=' + '&' 
-      + 'duration_op='  + '&'
-      + 'duration='  + '&'
-      + 'called='  + '&'
-      + 'caller='  + '&'
+      + 'end_date=' + '&'
+      + 'participant=' + '&'
+      + 'requester_email=' + '&'
+      + 'tags=' + '&'
+      + 'channel=' + '&'
+      + 'rstatus=' + '&'
+      + 'duration_op=' + '&'
+      + 'duration=' + '&'
+      + 'called=' + '&'
+      + 'caller=' + '&'
       + 'call_id='
 
 
-      // this.logger.log('clearFullText queryString ' , this.queryString ) 
-      this.pageNo = 0
+    // this.logger.log('clearFullText queryString ' , this.queryString ) 
+    this.pageNo = 0
     this.getRequests();
 
   }
@@ -2570,21 +2586,21 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
     this.conversationTypeValue = 'all'
     this.conversation_type = 'all'
     // tslint:disable-next-line:max-line-length
-    this.queryString = 
-    'full_text=' + '&'
-     + 'dept_id=' + '&'
+    this.queryString =
+      'full_text=' + '&'
+      + 'dept_id=' + '&'
       + 'start_date=' + '&'
-      + 'end_date=' + '&' 
-      + 'participant=' + '&' 
-      + 'requester_email=' + '&' 
-      + 'tags=' + '&' 
+      + 'end_date=' + '&'
+      + 'participant=' + '&'
+      + 'requester_email=' + '&'
+      + 'tags=' + '&'
       + 'channel=';
-      + 'rstatus=' + '&' 
-      + 'duration_op='  + '&'
-      + 'duration='  + '&'
-      + 'called='  + '&'
-      + 'caller='  + '&'
-      + 'call_id='  
+    + 'rstatus=' + '&'
+      + 'duration_op=' + '&'
+      + 'duration=' + '&'
+      + 'called=' + '&'
+      + 'caller=' + '&'
+      + 'call_id='
     this.pageNo = 0;
     this.logger.log('[HISTORY & NORT-CONVS] - CLEAR SEARCH fullTextValue ', this.fullTextValue)
     // this.logger.log('[HISTORY & NORT-CONVS] - CLEAR SEARCH fullTextValue ', this.queryString)
@@ -2623,8 +2639,26 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
     }
   }
 
-  checkPlanAndPresentModal() {
+  checkPlanAndPresentModalContactUs() {
+    if ((this.profile_name === PLAN_NAME.A) ||
+      (this.profile_name === PLAN_NAME.B && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.C && this.subscription_is_active === false) ||
+      (this.profile_name === 'free' && this.trial_expired === true)) {
+
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+      return false
+
+    } else if ((this.profile_name === PLAN_NAME.D) ||
+      (this.profile_name === PLAN_NAME.E && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.EE && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.F && this.subscription_is_active === false) ||
+      (this.profile_name === 'Sandbox' && this.trial_expired === true)) {
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+      return false
+    }
+  }
 
+  checkPlanAndPresentModal() {
     if ((this.profile_name === PLAN_NAME.A) ||
       (this.profile_name === PLAN_NAME.B && this.subscription_is_active === false) ||
       (this.profile_name === PLAN_NAME.C && this.subscription_is_active === false) ||
@@ -2704,35 +2738,46 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
   // Export CSV
   exportRequestsToCSV() {
-    if (this.payIsVisible) {
-      const isAvailable = this.checkPlanAndPresentModal()
-      this.logger.log('[HISTORY & NORT-CONVS] isAvaibleFromPlan ', isAvailable)
-      if (isAvailable === false) {
-        return
-      }
-      this.wsRequestsService.downloadHistoryRequestsAsCsv(this.requests_status, this.queryString, this._preflight, 0).subscribe((requests: any) => {
-        if (requests) {
-          this.logger.log('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV - RES ', requests);
-
-          // const reqNoLineBreaks = requests.replace(/(\r\n\t|\n|\r\t)/gm, ' ');
-          // this.logger.log('!!! DOWNLOAD REQUESTS AS CSV - REQUESTS NO NEW LINE ', reqNoLineBreaks);
-          this.downloadFile(requests)
+    if (!this.overridePay) {
+      if (this.payIsVisible) {
+        const isAvailable = this.checkPlanAndPresentModal()
+        this.logger.log('[HISTORY & NORT-CONVS] isAvaibleFromPlan ', isAvailable)
+        if (isAvailable === false) {
+          return
         }
-      }, error => {
-        this.logger.error('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV - ERROR: ', error);
-      }, () => {
-        this.logger.log('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV * COMPLETE *')
-      });
-      // this.logger.log('[HISTORY & NORT-CONVS] - EXPORT DATA IS AVAILABLE '
+        this.dwnldCSV()
 
+
+      } else {
+        this.notify._displayContactUsModal(true, 'upgrade_plan');
+      }
     } else {
-      this.notify._displayContactUsModal(true, 'upgrade_plan');
+
+      const isAvailable = this.checkPlanAndPresentModalContactUs()
+      this.logger.log('[WS-REQUESTS-MSGS] feature is available ', isAvailable, 'overridePay ', this.overridePay)
+      if (isAvailable === false) {
+        return
+      }
+      this.dwnldCSV()
     }
   }
 
+  dwnldCSV() {
+    this.wsRequestsService.downloadHistoryRequestsAsCsv(this.requests_status, this.queryString, this._preflight, 0).subscribe((requests: any) => {
+      if (requests) {
+        this.logger.log('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV - RES ', requests);
 
-
-
+        // const reqNoLineBreaks = requests.replace(/(\r\n\t|\n|\r\t)/gm, ' ');
+        // this.logger.log('!!! DOWNLOAD REQUESTS AS CSV - REQUESTS NO NEW LINE ', reqNoLineBreaks);
+        this.downloadFile(requests)
+      }
+    }, error => {
+      this.logger.error('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV - ERROR: ', error);
+    }, () => {
+      this.logger.log('[HISTORY & NORT-CONVS] - DOWNLOAD REQUESTS AS CSV * COMPLETE *')
+    });
+    // this.logger.log('[HISTORY & NORT-CONVS] - EXPORT DATA IS AVAILABLE '
+  }
 
   presentModalAppSumoFeautureAvailableFromBPlan() {
     // const el = document.createElement('div')
@@ -2861,10 +2906,10 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
 
       this.current_selected_prjct = projects.find(prj => prj.id_project.id === projectId);
       this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - current_selected_prjct ', this.current_selected_prjct);
-      if (this.current_selected_prjct.id_project.profile)  {
+      if (this.current_selected_prjct.id_project.profile) {
         const projectProfile = this.current_selected_prjct.id_project.profile
         this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - current_selected_prjct > projectProfile ', projectProfile);
-        if(projectProfile && projectProfile.customization && projectProfile.customization.voice &&  projectProfile.customization.voice === true )  {
+        if (projectProfile && projectProfile.customization && projectProfile.customization.voice && projectProfile.customization.voice === true) {
           this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - current_selected_prjct > projectProfile.customization.voice ', projectProfile.customization.voice);
           // if (projectProfile.customization.voice) {
 
@@ -2874,7 +2919,7 @@ export class HistoryAndNortConvsComponent extends WsSharedComponent implements O
         } else {
           this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - current_selected_prjct > projectProfile.customization ', projectProfile.customization);
           this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - conversationType ', this.conversationType);
-          let index = this.conversationType.findIndex(x => x['id'] === CHANNELS_NAME.VOICE_VXML);   
+          let index = this.conversationType.findIndex(x => x['id'] === CHANNELS_NAME.VOICE_VXML);
           this.logger.log('[HISTORY & NORT-CONVS] - GET PROJECTS - current_selected_prjct > CHANNELS_NAME.VOICE_VXML ++++ 1 index', index);
           this.conversationType.splice(index, 1);
         }
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-list.component.html b/src/app/ws_requests/ws-requests-list/ws-requests-list.component.html
index 95ccb970e735..82996a09526b 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-list.component.html
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-list.component.html
@@ -313,7 +313,7 @@
                           <!-- + countRequestsServedByBotRr -->
                           {{countRequestsServedByHumanRr }}
                         </div>
-                        <div class="item-label" style="">
+                        <div class="item-label">
                                 <!-- {{'Served' | translate}} -->
                                 {{'AssignedToHumans' | translate}}
                                 
@@ -330,7 +330,7 @@
                           <!-- + countRequestsServedByBotRr -->
                           {{countRequestsServedByBotRr }}
                         </div>
-                        <div class="item-label" style="">
+                        <div class="item-label">
                           {{'AssignedToBots' | translate}}
                         </div>
                        
@@ -344,7 +344,7 @@
                           <!-- {{ wsRequestsUnserved?.length }} -->
                           {{ countRequestsUnservedRr }}
                         </div>
-                        <div class="item-label" style="">{{'Unserved' | translate}}</div>
+                        <div class="item-label">{{'Unserved' | translate}}</div>
 
                       </div>
                     </div>
@@ -755,9 +755,7 @@ <h4 *ngIf="maximum_chats" style="font-weight: 400;"> {{'ProjectEditPage.MaximumC
               [ngClass]="{'conv-option-icon-active': CHAT_REASSIGNMENT_IS_ENABLED}">
               shuffle_on
               <span class="top">
-                <h4 style="white-space: normal;
-              line-height: 14px;
-              font-weight: 400;">
+                <h4 style="white-space: normal;line-height: 14px;font-weight: 400;">
                   {{ "ProjectEditPage.ItReassignChatIf" | translate }}.
                   {{'ProjectEditPage.TheChatWillBeBetweenTheUnassigned' | translate }}</h4>
                 <h4 *ngIf="reassignment_timeout" style="font-weight: 400;"> Timeout (in sec): {{reassignment_timeout}}
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-list.component.ts b/src/app/ws_requests/ws-requests-list/ws-requests-list.component.ts
index 5605d30852ed..e9c58f06096d 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-list.component.ts
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-list.component.ts
@@ -1057,13 +1057,18 @@ export class WsRequestsListComponent extends WsSharedComponent implements OnInit
 
   // NOT USED 
   presentModalFeatureAvailableWithProPlanUserRoleAdmin() {
-    swal({
+    Swal.fire({
+      title: this.translate.instant('Warning'),
       text: this.featureIsAvailableWithTheProPlan,
       icon: "info",
-      button: {
-        text: "OK",
-      },
-      dangerMode: false,
+      showCancelButton: false,
+      confirmButtonText: this.translate.instant('Ok') ,
+      confirmButtonColor: "var(--blue-light)",
+      focusConfirm: false,
+      // button: {
+      //   text: "OK",
+      // },
+      // dangerMode: false,
     })
   }
 
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.html b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.html
index 5fb8ea1523cb..2ff9c3c26faf 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.html
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.html
@@ -7,7 +7,10 @@
         <!-- + countRequestsServedByBotRr -->
         <h4 class="title customh4" style="margin-bottom:2px;">
           <!-- + countRequestsServedByBotRr -->
-          {{ 'VisitorsPage.ServedRequests' | translate }} <span *ngIf="(countRequestsServedByHumanRr  + countRequestsUnservedRr) >= 100"> - </span> <span *ngIf="(countRequestsServedByHumanRr  + countRequestsUnservedRr) >= 100" class="span-link-style" (click)="goToServedNTR()"> {{'MoreInQueque' | translate}} </span>
+          {{ 'VisitorsPage.ServedRequests' | translate }} <span
+            *ngIf="(countRequestsServedByHumanRr  + countRequestsUnservedRr) >= 100"> - </span> <span
+            *ngIf="(countRequestsServedByHumanRr  + countRequestsUnservedRr) >= 100" class="span-link-style"
+            (click)="goToServedNTR()"> {{'MoreInQueque' | translate}} </span>
         </h4>
       </div>
 
@@ -51,13 +54,9 @@ <h4 class="title customh4" style="margin-bottom:2px;">
           <!-- Requests Icons th (in this th put the button to archive -->
           <!-- ---------------------------------------------------------- -->
           <th style="padding-top: 6px;padding-bottom: 6px !important;">
-            <button *ngIf="requests_selected.length > 0" 
-              class="custom-input-group---btn tool_tip" 
-              type="button"
-              (click)="archiveSelected()" 
-              matTooltipClass="mat-white-tooltip"
-              matTooltip="{{'VisitorsPage.Resolve' | translate}}" #tooltip="matTooltip" 
-              matTooltipPosition='above'
+            <button *ngIf="requests_selected.length > 0" class="custom-input-group---btn tool_tip" type="button"
+              (click)="archiveSelected()" matTooltipClass="mat-white-tooltip"
+              matTooltip="{{'VisitorsPage.Resolve' | translate}}" #tooltip="matTooltip" matTooltipPosition='above'
               matTooltipHideDelay="100">
 
               <span class="material-icons archive-icon" style="vertical-align:middle; cursor: pointer; color:grey;">
@@ -94,10 +93,19 @@ <h4 class="title customh4" style="margin-bottom:2px;">
           <!-- ----------------------------------------------- -->
           <!-- REQUESTER -->
           <!-- ----------------------------------------------- -->
-          <th>
+          <!-- <th>
             <span class="column-th-span">
               {{ 'VisitorsPage.Requester' | translate }}
             </span>
+          </th> -->
+
+          <!-- ----------------------------------------------- -->
+          <!-- REQUESTER  -->
+          <!-- ----------------------------------------------- -->
+          <th>
+            <span class="column-th-span">
+              {{ 'VisitorsPage.Requester' | translate }} 
+            </span>
           </th>
 
 
@@ -167,8 +175,9 @@ <h4 class="title customh4" style="margin-bottom:2px;">
         <!-- ------------------------------ -->
         <!-- CONVS SERVED FOR -->
         <!-- ------------------------------ -->
-        
-        <tr *ngFor="let request of wsRequestsServed; trackBy: trackByFn" [ngClass]="{'active-row': request?.request_id === storedRequestId }">
+
+        <tr *ngFor="let request of wsRequestsServed; trackBy: trackByFn"
+          [ngClass]="{'active-row': request?.request_id === storedRequestId }">
 
           <!-- ------------------------------------------------------------------------------------------------------ -->
           <!-- Checkbox -->
@@ -252,19 +261,20 @@ <h4 class="title customh4" style="margin-bottom:2px;">
           <!-- ------------------------------------------------------------------------------------------------------ -->
           <!--  -->
           <td class="td-first-text " [ngClass]="{'padding_5' : request?.tags?.length > 0}"
-            (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer; " (contextmenu)="onContextMenu($event, request)">
-              <span *ngIf="request?.ticket_id " class="ticket-id-badge" style="float: left;"
-                matTooltipClass="mat-white-tooltip" matTooltip="{{ 'TicketId' | translate }}" #tooltip="matTooltip"
-                matTooltipPosition='right' matTooltipHideDelay="100">
-                #{{request?.ticket_id }}
-              </span>
-              <!-- *ngIf="request?.channel?.name !== 'email'" -->
-              <p class="column-td request-first-text"
-                style="max-width: 215px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
-                [tooltip]="HtmlContent" contentType="template" (mouseover)='overfirstTextGetRequestMsg(request)'>
-                {{ request?.first_text }}
-              </p>
-           
+            (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer; "
+            (contextmenu)="onContextMenu($event, request)">
+            <span *ngIf="request?.ticket_id " class="ticket-id-badge" style="float: left;"
+              matTooltipClass="mat-white-tooltip" matTooltip="{{ 'TicketId' | translate }}" #tooltip="matTooltip"
+              matTooltipPosition='right' matTooltipHideDelay="100">
+              #{{request?.ticket_id }}
+            </span>
+            <!-- *ngIf="request?.channel?.name !== 'email'" -->
+            <p class="column-td request-first-text"
+              style="max-width: 215px;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"
+              [tooltip]="HtmlContent" contentType="template" (mouseover)='overfirstTextGetRequestMsg(request)'>
+              {{ request?.first_text }}
+            </p>
+
 
 
             <ng-template #HtmlContent>
@@ -483,7 +493,8 @@ <h4 class="title customh4" style="margin-bottom:2px;">
               <!-- ---------------------------------------- -->
               <!-- Channel WRAPPER  -->
               <!-- ---------------------------------------- -->
-              <div *ngIf="request?.channel?.name !== CHANNELS_NAME.CHAT21" class="channel_wpr" style="flex: 1; text-align: right;"
+              <div *ngIf="request?.channel?.name !== CHANNELS_NAME.CHAT21" class="channel_wpr"
+                style="flex: 1; text-align: right;"
                 [ngClass]="{'channel-wpr-padding-left' : request?.priority !== 'medium'}">
 
                 <!-- ---------------------------------------- -->
@@ -505,8 +516,7 @@ <h4 class="title customh4" style="margin-bottom:2px;">
                 <!-- Channel - Voice  -->
                 <!-- ---------------------------------------- -->
                 <span *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML" class="tool_tip">
-                  <img style="width: 24px;height: 24px;" src="assets/img/channel_icons/voice.svg"
-                    class="img-fluid">
+                  <img style="width: 24px;height: 24px;" src="assets/img/channel_icons/voice.svg" class="img-fluid">
                   <span class="bottom tool-tip-bottom--custom">
                     <span style="font-weight: 400;">
                       {{'MessageChannel' | translate}}:
@@ -516,7 +526,21 @@ <h4 class="title customh4" style="margin-bottom:2px;">
                   </span>
                 </span>
 
-                 <!-- ---------------------------------------- -->
+                <!-- ---------------------------------------- -->
+                <!-- Channel - SMS  -->
+                <!-- ---------------------------------------- -->
+                <span *ngIf="request?.channel?.name === CHANNELS_NAME.SMS_TWILIO" class="tool_tip">
+                  <img style="width: 24px;height: 24px;" src="assets/img/channel_icons/sms.svg" class="img-fluid">
+                  <span class="bottom tool-tip-bottom--custom">
+                    <span style="font-weight: 400;">
+                      {{'MessageChannel' | translate}}:
+                    </span>
+                    <span style="font-weight: 400;">SMS </span>
+                    <i></i>
+                  </span>
+                </span>
+
+                <!-- ---------------------------------------- -->
                 <!-- Channel - SMS  -->
                 <!-- ---------------------------------------- -->
                 <span  *ngIf="request?.channel?.name === CHANNELS_NAME.SMS_TWILIO" class="tool_tip">
@@ -602,29 +626,27 @@ <h4 class="title customh4" style="margin-bottom:2px;">
           </td>
 
           <!-- ----------------------------------------------------------- -->
-          <!--  REQUESTER  -->
+          <!--  REQUESTER // deprecated -->
           <!-- ----------------------------------------------------------- -->
-          <td (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;"
+          <!-- <td style="display: none;" (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;"
             rel="tooltip" title="{{ request?.lead?.lead_id }}">
-            <!-- <p style="font-size:0.9em">{{ request.sender_fullname }}</p> -->
-
-            <!-- REQUESTER VERIFIED ICON (SERVED REQUEST SECTION) -->
-            <!-- [ngStyle]="{'background-color': request?.requester_fullname_fillColour }" -->
             <span class="requester-avatar-wrapper">
               <span class="requester-avatar"
                 [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + request?.requester_fullname_fillColour + ')'}"
-                [ngClass]="{'requester_fullname-undefined' : !request?.lead?.fullname, 'requester_avatar_not_has_email': !request?.lead?.email, 'requester-avatar-has-phone-as-email': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && (request?.lead?.fullname !==  request?.lead?.phone)  }">
-                <span *ngIf="request?.lead?.fullname !== request?.lead?.phone" style="color: #ffffff"> {{ request?.requester_fullname_initial }} </span>
-                <span *ngIf="request?.lead?.fullname === request?.lead?.phone" class="material-icons-outlined" style="color: #ffffff; font-size:18px; position: relative; top: 1px;"> call </span>
-                <!-- <span class="requester-presence"
-                  [ngStyle]="{ 'background-color':(request?.requester?.presence?.status === 'online')?'#24d066':'#db4437' }">
-                </span> -->
+                [ngClass]="{'requester_fullname-undefined' : !request?.lead?.fullname, 'requester_avatar_not_has_email': !request?.lead?.email, 
+                'requester-avatar-has-phone-as-email': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && (request?.lead?.fullname ===  request?.lead?.phone),
+                'requester-avatar-not-has-phone': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone}">
+                <span *ngIf="request?.lead?.fullname !== request?.lead?.phone" style="color: #ffffff"> {{
+                  request?.requester_fullname_initial }} </span>
+                <span *ngIf="request?.lead?.fullname === request?.lead?.phone" class="material-icons-outlined"
+                  style="color: #ffffff; font-size:18px; position: relative; top: 1px;"> call </span>
               </span>
-              <!-- [ngClass]="{'verified-icon-requester-undefined': !request?.lead?.fullname , 'verified-icon-requester-internal-ticket': request?.subject}" -->
               <span *ngIf="request?.requester_is_verified === true" class="tooltipx">
-                <svg class="requester-verified-icon" [ngClass]="{'requester-verified-icon-voice-channel': request?.channel?.name === CHANNELS_NAME.VOICE_VXML, 
-                                                                'requester-has-phone-as-fullname': request?.lead?.fullname === request?.lead?.phone, 
-                                                                'requester-fullname-is-not-phone': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && (request?.lead?.fullname !== request?.lead?.phone)  }" version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                <svg class="requester-verified-icon"
+                  [ngClass]="{'requester-verified-icon-voice-channel': request?.channel?.name === CHANNELS_NAME.VOICE_VXML, 
+                            'requester-has-phone-as-fullname': request?.lead?.fullname === request?.lead?.phone, 
+                            'requester-fullname-is-not-phone': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && (request?.lead?.fullname !== request?.lead?.phone)}"
+                  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 26.6 26.6" width="17"
                   height="17" xml:space="preserve">
                   <style type="text/css">
@@ -651,12 +673,13 @@ <h4 class="title customh4" style="margin-bottom:2px;">
 
               </span>
             </span>
-            <!-- [ngClass]="{'requester-verified' : request?.requester_is_verified === true}" -->
+          
             <span class="column-td" style="white-space: nowrap;">
 
               <span class="lead_data">
 
-                <span class="contact-fullname" [ngClass]="{'requester_not_has_email' : !request?.lead?.email, 'requester-email-is-a-phone': CHANNELS_NAME.VOICE_VXML && (request?.lead?.phone !== request?.lead?.fullname) }">
+                <span class="contact-fullname"
+                  [ngClass]="{'requester_not_has_email' : !request?.lead?.email || request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone }">
                   {{ request?.lead?.fullname}}
                 </span>
 
@@ -665,52 +688,132 @@ <h4 class="title customh4" style="margin-bottom:2px;">
                   N/A
                 </span>
 
-                <!-- [ngClass]="{'requester-verified-email' : request?.requester_is_verified === true}" -->
                 <span class="requester-email">
-                  <span *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML">
-                    {{ request?.lead?.email }}
+                  
+                  <span *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML" class="requester-has-email">
+                    <span *ngIf="request?.lead?.email">
+                      {{ request?.lead?.email }}
+                    </span>
+                    <span class="requester-not-has-email" *ngIf="!request?.lead?.email">
+                      N/A
+                    </span>
                   </span>
-                  <span *ngIf="(request?.channel?.name === CHANNELS_NAME.VOICE_VXML) && (request?.lead?.phone !== request?.lead?.fullname)"
-                    matTooltipClass="convs-custom-mat-tooltip"
-                    matTooltip="{{ 'RequesterPhoneNumber' | translate }}" 
-                    #tooltip="matTooltip"
-                    matTooltipPosition='above' 
-                    matTooltipHideDelay="100">
-                     {{request?.lead?.phone}}
+                  <span *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML">
+                    <span *ngIf="request?.lead?.phone !== request?.lead?.fullname"
+                      matTooltipClass="convs-custom-mat-tooltip" matTooltip="{{ 'RequesterPhoneNumber' | translate }}"
+                      #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
+                      {{request?.lead?.phone}}
+                    </span>
+                    <span *ngIf="!request?.lead?.phone">
+                      N/A
+                    </span>
                   </span>
                 </span>
-                
-               
-              
-
-              <!-- <span class="requester-email-undefined"
-                *ngIf="!request?.lead?.email && request?.channel?.name === CHANNELS_NAME.VOICE_VXML"
-                [ngClass]="{'requester-verified-email' : request?.requester_is_verified === true}">
-                
-                <span *ngIf="request?.lead?.fullname !== request?.lead?.phone">
-                 
-                  <span class="requester-phone"
-                    matTooltipClass="convs-custom-mat-tooltip"
-                    matTooltip="{{ 'RequesterPhoneNumber' | translate }}" 
-                    #tooltip="matTooltip"
-                    matTooltipPosition='above' 
-                    matTooltipHideDelay="100"> 
-                        {{request?.lead?.phone}}
-                  </span> 
-                </span>
-              </span> -->
-
-                <!-- <span class="requester-email" *ngIf="!request?.lead?.email"
-                  [ngClass]="{'requester-verified-email' : request?.requester_is_verified === true}">
-                  
-                </span> -->
-
               </span>
             </span>
 
+          </td> -->
+
+          <!-- ----------------------------------------------------------- -->
+          <!--  REQUESTER 2 rel="tooltip" title="{{ request?.lead?.lead_id }}" -->
+          <!-- ----------------------------------------------------------- -->
+          <td (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;">
+          
+            <div class="requester-avatar-and-lead-data-wpr">
+              <div class="requester-avatar-wrapper">
+                <div class="requester---avatar"
+                  [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + request?.requester_fullname_fillColour + ')'}">
+                  <span
+                    *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML && request?.lead?.fullname !== request?.lead?.phone"
+                    style="color: #ffffff">
+                    {{ request?.requester_fullname_initial }}
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && request?.lead?.fullname === request?.lead?.phone"
+                    class="material-icons-outlined"
+                    style="color: #ffffff; font-size:18px; position: relative; top: 1px;">
+                    call
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone"
+                    class="material-icons-outlined"
+                    style="color: #ffffff; font-size:18px; position: relative; top: 1px;">
+                    call
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && request?.lead?.phone && (request?.lead?.fullname !== request?.lead?.phone)"
+                    style="color: #ffffff;">
+                    {{ request?.requester_fullname_initial }}
+                  </span>
+
+                  <div class="verified-user-icon-wpr" *ngIf="request?.requester_is_verified === true">
+                    <svg class="requester-verified--icon" 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 26.6 26.6" width="17"
+                      height="17" xml:space="preserve">
+                      <style type="text/css">
+                        .st0_UserVerified {
+                          fill: none;
+                        }
+
+                        .st1_UserVerified {
+                          fill: #FFFFFF;
+                        }
+
+                        .st2_UserVerified {
+                          fill: #18BDF7;
+                        }
+                      </style>
+                      <path class="st0_UserVerified" d="M1.3,1.3h24v24h-24V1.3z" />
+                      <path class="st1_UserVerified"
+                        d="M13.3,0L2.4,4.9v7.3c0,6.7,4.6,13,10.9,14.5c6.2-1.5,10.9-7.8,10.9-14.5V4.9L13.3,0z" />
+                      <path class="st2_UserVerified" d="M13.3,2.3l-9,4v6c0,5.5,3.8,10.7,9,12c5.2-1.3,9-6.5,9-12v-6L13.3,2.3z M11.3,18.3l-4-4l1.4-1.4l2.6,2.6
+                        l6.6-6.6l1.4,1.4L11.3,18.3z" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column-td lead-data-wpr" style="white-space: nowrap;">
+
+                <div class="requester---fullname-wpr">
+                  
+                  <span class="requester---fullname" [ngClass]="
+                    {'requester-not-has-email' : request?.channel?.name !== CHANNELS_NAME.VOICE_VXML && !request?.lead?.email, 
+                    'requester-not-has-phone': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone,
+                    'requester-fullname-is-phone': (request?.channel?.name === CHANNELS_NAME.VOICE_VXML) && (request?.lead?.phone === request?.lead?.fullname)
+                    }">
+                    {{ request?.lead?.fullname}}
+                  </span>
+
+                  <span *ngIf="!request?.lead?.fullname"
+                    [ngClass]="{'requester_fullname_initial-undefined' : !request?.lead?.fullname}">
+                    N/A
+                  </span>
+                </div>
+                <div class="requester---email-wpr">
+                  <span class="requester---email">
+                    
+                    <span *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML" class="requester-has-email">
+                      <span *ngIf="request?.lead?.email">
+                        {{ request?.lead?.email }}
+                      </span>
+                    </span>
+                    <span *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML">
+                      <span *ngIf="request?.lead?.phone !== request?.lead?.fullname"
+                        matTooltipClass="convs-custom-mat-tooltip" matTooltip="{{ 'RequesterPhoneNumber' | translate }}"
+                        #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
+                        {{request?.lead?.phone}}
+                      </span>
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </td>
 
-          <!-- ------ ====== USER AGENT BROWSER & OPERATING SYSTEM (in served requests)====== ------ -->
+          <!-- ------------------------------------------------------------------------------------- -->
+          <!-- USER AGENT BROWSER & OPERATING SYSTEM (in served requests) -->
+          <!-- ------------------------------------------------------------------------------------- -->
           <td>
             <span *ngIf="request?.userAgent" class="tooltipx">
 
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.scss b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.scss
index 9ece8d02e4bf..318887cc833b 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.scss
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.scss
@@ -411,6 +411,11 @@ span .switch-agent-admin-requests-btn {
   color: #4caf50;
 }
 
+.lead_data {
+  position: relative;
+  top: -2px;
+}
+
 .requester-avatar {
   border-radius: 50%;
   font-size: 12px;
@@ -427,30 +432,107 @@ span .switch-agent-admin-requests-btn {
   margin-right: 4px;
 }
 
+.requester-avatar-and-lead-data-wpr {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.requester-avatar-wrapper {
+  position: relative;
+}
+
+.verified-user-icon-wpr {
+  position: absolute;
+  top: -2px;
+  left: -6px;
+}
+
+.verified-user-icon-wpr>span {
+  font-size: 16px;
+  color: #18BDF7
+}
+
+
+.requester---avatar {
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 3px;
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  line-height: 21px;
+  position: relative;
+  // top: 4px;
+  margin-right: 4px;
+}
+
+.lead-data-wpr {
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+}
+
+.requester---fullname {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // display: inline-block;
+  // line-height: 13px;
+}
+
+.requester---email {
+  color: #7695a5;
+  font-weight: 400;
+  line-height: 18px;
+  font-size: 11px;
+  display: block;
+  // margin-left: 34px;
+  margin-top: -8px;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: lowercase;
+}
+
+
 .requester_avatar_not_has_email {
-  top: -5px;
+  // top: -5px;
+  top: 5px;
 }
 
-.requester-avatar-has-phone-as-email {
-  top: 3px !important;
+.requester-fullname-is-phone {
+  top: 3px;
+  position: relative;
 }
 
-.lead_data {
+.requester-not-has-email {
+  top: 3px;
   position: relative;
-  top: -2px;
 }
 
-.requester_not_has_email {
-  top: -2px;
+.requester-not-has-phone {
+  top: 3px;
   position: relative;
 }
 
-.requester-email-is-a-phone {
-  top: 0px!important; 
+.requester-avatar-has-phone-as-email {
+  top: 3px !important;
 }
 
+// .requester-email-is-a-phone {
+//   top: 0px!important; 
+// }
+
 .requester-name-is-a-phone-num {
-  position: relative ;
+  position: relative;
   top: -5px !important;
 }
 
@@ -1034,13 +1116,15 @@ $f21blue: #039be5;
 .requester-verified-icon-voice-channel {
   top: -26px;
 }
+
 .requester-has-phone-as-fullname {
-  top: -29px !important;
+  top: -23px !important;
 }
 
 .requester-fullname-is-not-phone {
   top: -18px !important;
 }
+
 .active-row {
   animation-name: ripple_effect;
   animation-duration: 3s;
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.ts b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.ts
index f981a7b8b105..d87e33225107 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.ts
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-served/ws-requests-served.component.ts
@@ -200,6 +200,7 @@ export class WsRequestsServedComponent extends WsSharedComponent implements OnIn
   ngOnChanges(changes: SimpleChanges) {
     this.logger.log('[WS-REQUESTS-LIST][SERVED] ngOnChanges changes', changes)
     this.logger.log('[WS-REQUESTS-LIST][SERVED] ngOnChanges wsRequestsServed length', this.wsRequestsServed.length)
+    // console.log('[WS-REQUESTS-LIST][SERVED] ngOnChanges wsRequestsServed ', this.wsRequestsServed)
 
     // this.logger.log('[WS-REQUEST-SERVED] ngOnChanges requestCountResp', this.requestCountResp)
 
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.html b/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.html
index ff7669f38dc4..d70db9ffe210 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.html
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.html
@@ -70,6 +70,7 @@ <h4 class="title customh4" style="margin-bottom:2px;">
             </span>
           </th>
 
+
           <!-- ----------------------------------------- -->
           <!-- USER AGENT BROWSER & OPERATING SYSTEM -->
           <!-- ----------------------------------------- -->
@@ -696,12 +697,11 @@ <h4 style="font-weight:400" style="white-space: nowrap;">
             </div>
           </td>
 
-          <!-- ------ ====== REQUESTER (in UNSERVED)====== ------ -->
-          <td (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;"
+          <!-- ---------------------------------------------- -->
+          <!--  REQUESTER (in UNSERVED) !!! Deprecated ------ -->
+          <!-- ---------------------------------------------- -->
+          <!-- <td (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;"
             rel="tooltip" title="requester id:{{ request?.lead?.fullname }}">
-
-            <!-- REQUESTER VERIFIED ICON (UNSERVED REQUEST SECTION)-->
-            <!-- [ngStyle]="{'background-color': request?.requester_fullname_fillColour }" -->
             <span class="requester-avatar-wrapper">
               <span class="requester-avatar"
                 [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + request?.requester_fullname_fillColour + ')'}"
@@ -733,31 +733,123 @@ <h4 style="font-weight:400" style="white-space: nowrap;">
                   <path class="st2_UserVerified" d="M13.3,2.3l-9,4v6c0,5.5,3.8,10.7,9,12c5.2-1.3,9-6.5,9-12v-6L13.3,2.3z M11.3,18.3l-4-4l1.4-1.4l2.6,2.6
                         l6.6-6.6l1.4,1.4L11.3,18.3z" />
                 </svg>
-
                 <span class="tooltiptext"> {{ "VisitorsPage.AuthenticatedUser" | translate }} </span>
-
               </span>
             </span>
-            <!-- [ngClass]="{'requester-verified' : request?.requester_is_verified === true}" -->
+           
             <span class="column-td" style="white-space: nowrap;">
-
               <span class="lead_data">
-
                 <span class="contact-fullname" [ngClass]="{'requester_not_has_email' : !request?.lead?.email}">
                   {{ request?.lead?.fullname }}
                 </span>
-
                 <span *ngIf="!request?.lead?.fullname"
                   [ngClass]="{'requester_fullname_initial-undefined' : !request?.lead?.fullname}">
                   N/A
                 </span>
-                <!-- [ngClass]="{'requester-verified-email' : request?.requester_is_verified === true}" -->
                 <span class="requester-email">
                   {{ request?.lead?.email }}
                 </span>
-            
               </span>
             </span>
+          </td> -->
+
+          <!-- ----------------------------------------------------------- -->
+          <!--  REQUESTER (in UNSERVED) -->
+          <!-- ----------------------------------------------------------- -->
+
+          <td (click)='goToRequestMsgs(request?.request_id)' style="cursor:pointer;white-space: nowrap; width: 1%;">
+          
+            <div class="requester-avatar-and-lead-data-wpr">
+              <div class="requester-avatar-wrapper">
+                <div class="requester---avatar"
+                  [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + request?.requester_fullname_fillColour + ')'}">
+                  <span
+                    *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML && request?.lead?.fullname !== request?.lead?.phone"
+                    style="color: #ffffff">
+                    {{ request?.requester_fullname_initial }}
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && request?.lead?.fullname === request?.lead?.phone"
+                    class="material-icons-outlined"
+                    style="color: #ffffff; font-size:18px; position: relative; top: 1px;">
+                    call
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone"
+                    class="material-icons-outlined"
+                    style="color: #ffffff; font-size:18px; position: relative; top: 1px;">
+                    call
+                  </span>
+                  <span
+                    *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML && request?.lead?.phone && (request?.lead?.fullname !== request?.lead?.phone)"
+                    style="color: #ffffff;">
+                    {{ request?.requester_fullname_initial }}
+                  </span>
+
+                 
+                  <div class="verified-user-icon-wpr" *ngIf="request?.requester_is_verified === true">
+                    <svg class="requester-verified--icon" 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 26.6 26.6" width="17"
+                      height="17" xml:space="preserve">
+                      <style type="text/css">
+                        .st0_UserVerified {
+                          fill: none;
+                        }
+
+                        .st1_UserVerified {
+                          fill: #FFFFFF;
+                        }
+
+                        .st2_UserVerified {
+                          fill: #18BDF7;
+                        }
+                      </style>
+                      <path class="st0_UserVerified" d="M1.3,1.3h24v24h-24V1.3z" />
+                      <path class="st1_UserVerified"
+                        d="M13.3,0L2.4,4.9v7.3c0,6.7,4.6,13,10.9,14.5c6.2-1.5,10.9-7.8,10.9-14.5V4.9L13.3,0z" />
+                      <path class="st2_UserVerified" d="M13.3,2.3l-9,4v6c0,5.5,3.8,10.7,9,12c5.2-1.3,9-6.5,9-12v-6L13.3,2.3z M11.3,18.3l-4-4l1.4-1.4l2.6,2.6
+                        l6.6-6.6l1.4,1.4L11.3,18.3z" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <div class="column-td lead-data-wpr" style="white-space: nowrap;">
+
+                <div class="requester---fullname-wpr">
+                  
+                  <span class="requester---fullname" [ngClass]="
+                    {'requester-not-has-email' : request?.channel?.name !== CHANNELS_NAME.VOICE_VXML && !request?.lead?.email, 
+                    'requester-not-has-phone': request?.channel?.name === CHANNELS_NAME.VOICE_VXML && !request?.lead?.phone,
+                    'requester-fullname-is-phone': (request?.channel?.name === CHANNELS_NAME.VOICE_VXML) && (request?.lead?.phone === request?.lead?.fullname)
+                    }">
+                    {{ request?.lead?.fullname}}
+                  </span>
+
+                  <span *ngIf="!request?.lead?.fullname"
+                    [ngClass]="{'requester_fullname_initial-undefined' : !request?.lead?.fullname}">
+                    N/A
+                  </span>
+                </div>
+                <div class="requester---email-wpr">
+                  <span class="requester---email">
+                    
+                    <span *ngIf="request?.channel?.name !== CHANNELS_NAME.VOICE_VXML" class="requester-has-email">
+                      <span *ngIf="request?.lead?.email">
+                        {{ request?.lead?.email }}
+                      </span>
+                    </span>
+                    <span *ngIf="request?.channel?.name === CHANNELS_NAME.VOICE_VXML">
+                      <span *ngIf="request?.lead?.phone !== request?.lead?.fullname"
+                        matTooltipClass="convs-custom-mat-tooltip" matTooltip="{{ 'RequesterPhoneNumber' | translate }}"
+                        #tooltip="matTooltip" matTooltipPosition='above' matTooltipHideDelay="100">
+                        {{request?.lead?.phone}}
+                      </span>
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
           </td>
 
           <!-- ------ ====== USER AGENT BROWSER & OPERATING SYSTEM (in served requests)====== ------ -->
diff --git a/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.scss b/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.scss
index 6e75c96e78ef..b7923743868f 100755
--- a/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.scss
+++ b/src/app/ws_requests/ws-requests-list/ws-requests-unserved/ws-requests-unserved.component.scss
@@ -211,8 +211,78 @@ span .switch-agent-admin-requests-btn {
   margin-right: 4px;
 }
 
+.requester-avatar-and-lead-data-wpr {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.requester-avatar-wrapper {
+  position: relative;
+}
+
+.verified-user-icon-wpr {
+  position: absolute;
+  top: -2px;
+  left: -6px;
+}
+
+.verified-user-icon-wpr>span {
+  font-size: 16px;
+  color: #18BDF7
+}
+
+.requester---avatar {
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 3px;
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  line-height: 21px;
+  position: relative;
+  // top: 4px;
+  margin-right: 4px;
+}
+
+.lead-data-wpr {
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+}
+
+.requester---fullname {
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  // display: inline-block;
+  // line-height: 13px;
+}
+
+.requester---email {
+  color: #7695a5;
+  font-weight: 400;
+  line-height: 18px;
+  font-size: 11px;
+  display: block;
+  // margin-left: 34px;
+  margin-top: -8px;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: lowercase;
+}
+
 .requester_avatar_not_has_email {
-  top: -5px;
+  top: 5px;
+  // top: -5px;
 }
 
 .requester_not_has_email {
@@ -220,6 +290,25 @@ span .switch-agent-admin-requests-btn {
   position: relative;
 }
 
+.requester-fullname-is-phone {
+  top: 3px;
+  position: relative;
+}
+
+.requester-not-has-email {
+  top: 3px;
+  position: relative;
+}
+
+.requester-not-has-phone {
+  top: 3px;
+  position: relative;
+}
+
+.requester-avatar-has-phone-as-email {
+  top: 3px !important;
+}
+
 .lead_data {
   position: relative;
   top: -2px;
diff --git a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.html b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.html
index 70df21c4cf66..3deff3c71137 100755
--- a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.html
+++ b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.html
@@ -3327,7 +3327,7 @@ <h4 style="font-weight:400" [ngClass]="{'modal-subtitle-chat-panel-mode' : CHAT_
 
           <div class="col-md-12" [ngClass]="{'no-padding' : CHAT_PANEL_MODE === true}">
            
-              <mat-tab-group  mat-align-tabs="center"  *ngIf="actionInModal === 'reassign'">
+              <mat-tab-group  mat-align-tabs="center"  *ngIf="actionInModal === 'reassign'" [ngClass]="{'mat-tab-group-on-panel': CHAT_PANEL_MODE === true}">
                 <mat-tab label="{{'HumanTeammates' | translate }} ( {{projectUsersList?.length}} )"> 
                   <!-- assign-reassign-modal-card-in-accordion -->
                   <div class="card assign-reassign-modal-card"
@@ -3352,12 +3352,12 @@ <h4 style="font-weight:400" [ngClass]="{'modal-subtitle-chat-panel-mode' : CHAT_
                             <!-- the table header if CHAT_PANEL_MODE === true (replace the label User abd the above modal subtitle) -->
                             <!-- --------------------------------------------------------------------------------------------------- -->
                             <span *ngIf="CHAT_PANEL_MODE === true" style="color: #566787">
-                              <span *ngIf="actionInModal === 'reassign'">
+                              <!-- <span *ngIf="actionInModal === 'reassign'">
                                 <h4 style="font-weight:400"
                                   [ngClass]="{'modal-subtitle-chat-panel-mode' : CHAT_PANEL_MODE === true}">
                                   {{ "VisitorsPage.SelectTheUserToWhom" | translate }}
                                 </h4>
-                              </span>
+                              </span> -->
 
                               <span *ngIf="actionInModal === 'invite'">
                                 <h4 style="font-weight:400"
@@ -4029,7 +4029,7 @@ <h4 style="font-weight:400"> {{dept?.name}}
               <mat-expansion-panel  (opened)="panelOpenState = true" (closed)="panelOpenState = false">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
-                    {{'Departments' | translate}}  ( {{departments?.length }})
+                    {{'Departments' | translate}}  ( {{departments?.length }} )
                   </mat-panel-title>
                   <!- - <mat-panel-description>
                     2 Currently I am {{panelOpenState ? 'open' : 'closed'}}
diff --git a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.scss b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.scss
index 72725375c3fc..364c094d5190 100755
--- a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.scss
+++ b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.scss
@@ -4846,6 +4846,7 @@ label {
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: var(--no-tags-line-clamp);
+  line-clamp: var(--no-tags-line-clamp);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   font-family: var(--content-font-family);
@@ -5677,6 +5678,10 @@ label {
   letter-spacing: -0.01em;
 }
 
+.mat-tab-group-on-panel {
+  margin-top: 5px;
+}
+
 ::ng-deep .mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
   background-color: #0566ff;
 }
diff --git a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.ts b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.ts
index 59c1281f9ef0..ec816157486f 100755
--- a/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.ts
+++ b/src/app/ws_requests/ws-requests-msgs/ws-requests-msgs.component.ts
@@ -66,6 +66,7 @@ export class WsRequestsMsgsComponent extends WsSharedComponent implements OnInit
 
   objectKeys = Object.keys;
   isVisiblePaymentTab: boolean;
+  overridePay: boolean;
   @ViewChild('scrollMe', { static: false })
   private myScrollContainer: ElementRef;
 
@@ -1316,6 +1317,16 @@ export class WsRequestsMsgsComponent extends WsSharedComponent implements OnInit
         }
       }
 
+      if (key.includes("OVP")) {
+        let pay = key.split(":");
+
+        if (pay[1] === "F") {
+          this.overridePay = false;
+        } else {
+          this.overridePay = true;
+        }
+      }
+
       if (key.includes("APP")) {
         let app = key.split(":");
         if (app[1] === "F") {
@@ -1337,6 +1348,12 @@ export class WsRequestsMsgsComponent extends WsSharedComponent implements OnInit
     if (!this.public_Key.includes("PAY")) {
       this.isVisiblePaymentTab = false;
     }
+
+    if (!this.public_Key.includes("OVP")) {
+      this.overridePay = false;
+    }
+
+    
   }
 
   // -------------------------------------------------------------
@@ -4425,25 +4442,58 @@ export class WsRequestsMsgsComponent extends WsSharedComponent implements OnInit
     }
   }
 
+  checkPlanAndPresentModalContactUs() {
+
+    if ((this.profile_name === PLAN_NAME.A) ||
+      (this.profile_name === PLAN_NAME.B && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.C && this.subscription_is_active === false) ||
+      (this.profile_name === 'free' && this.trial_expired === true)) {
+
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+      return false
+
+    } else if ((this.profile_name === PLAN_NAME.D) ||
+      (this.profile_name === PLAN_NAME.E && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.EE && this.subscription_is_active === false) ||
+      (this.profile_name === PLAN_NAME.F && this.subscription_is_active === false) ||
+      (this.profile_name === 'Sandbox' && this.trial_expired === true)) {
+      this.notify._displayContactUsModal(true, 'upgrade_plan');
+      return false
+    }
+  }
+
 
 
   displayModalDownloadTranscript() {
-    if (this.isVisiblePaymentTab) {
+    if (!this.overridePay) {
+      if (this.isVisiblePaymentTab) {
+
+        const isAvailable = this.checkPlanAndPresentModal()
+        this.logger.log('[WS-REQUESTS-MSGS] feature is available ', isAvailable, 'overridePay ', this.overridePay)
+        if (isAvailable === false) {
+          return
+        }
 
-      const isAvailable = this.checkPlanAndPresentModal()
-      this.logger.log('[WS-REQUESTS-MSGS] feature is available ', isAvailable)
+        this.displayModalTranscript = 'block'
+
+
+      } else {
+        this.notify._displayContactUsModal(true, 'upgrade_plan');
+      }
+    } else {
+
+      const isAvailable = this.checkPlanAndPresentModalContactUs()
+      this.logger.log('[WS-REQUESTS-MSGS] feature is available ', isAvailable, 'overridePay ', this.overridePay)
       if (isAvailable === false) {
         return
       }
 
       this.displayModalTranscript = 'block'
 
-
-    } else {
-      this.notify._displayContactUsModal(true, 'upgrade_plan');
     }
   }
 
+
   closeModalTranscript() {
     this.displayModalTranscript = 'none'
   }
diff --git a/src/assets/css/demo.scss b/src/assets/css/demo.scss
index c4c2c2570ccf..726d16a92df5 100755
--- a/src/assets/css/demo.scss
+++ b/src/assets/css/demo.scss
@@ -1919,9 +1919,9 @@ appdashboard-app-store>div>div>div>div>div>div.card-content>div.available-from-b
 //   height: 48px !important;
 // }
 
-appdashboard-app-store>div>div>div>div>.card-app-store {
-  height: 269px;
-}
+// appdashboard-app-store>div>div>div>div>.card-app-store {
+//   height: 269px;
+// }
 
 .b-plan-badge-color {
   color: $plan-b-color;
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
index b48d9bacef90..0d7831ecf509 100644
--- a/src/assets/i18n/it.json
+++ b/src/assets/i18n/it.json
@@ -656,7 +656,7 @@
         "WillExpireIn": "scadranno tra",
         "Days": "giorni",
         "Tomorrow": "domani",
-        "HasExpired": "sono scaduti",
+        "HasExpired": "è scaduto",
         "YourSubscriptionIsActive": "Il tuo abbonamento è attivo",
         "ThePlanIsActive": "Il piano è attivo",
         "ThePlanHasExpired": "Il piano è scaduto",
diff --git a/src/assets/img/int/n8n-icon.svg b/src/assets/img/int/n8n-icon.svg
new file mode 100644
index 000000000000..c0d3e6f5de1a
--- /dev/null
+++ b/src/assets/img/int/n8n-icon.svg
@@ -0,0 +1,3 @@
+<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M204 48C192.817 48 183.42 40.3514 180.756 30H153.248C147.382 30 142.376 34.241 141.412 40.0272L140.425 45.9456C139.489 51.5648 136.646 56.4554 132.626 60C136.646 63.5446 139.489 68.4352 140.425 74.0544L141.412 79.9728C142.376 85.759 147.382 90 153.248 90H156.756C159.42 79.6486 168.817 72 180 72C193.255 72 204 82.7452 204 96C204 109.255 193.255 120 180 120C168.817 120 159.42 112.351 156.756 102H153.248C141.516 102 131.504 93.5181 129.575 81.9456L128.588 76.0272C127.624 70.241 122.618 66 116.752 66H107.244C104.58 76.3514 95.183 84 84 84C72.817 84 63.4204 76.3514 60.7561 66H47.2439C44.5796 76.3514 35.183 84 24 84C10.7452 84 0 73.2548 0 60C0 46.7452 10.7452 36 24 36C35.183 36 44.5796 43.6486 47.2439 54H60.7561C63.4204 43.6486 72.817 36 84 36C95.183 36 104.58 43.6486 107.244 54H116.752C122.618 54 127.624 49.759 128.588 43.9728L129.575 38.0544C131.504 26.4819 141.516 18 153.248 18L180.756 18C183.42 7.64864 192.817 0 204 0C217.255 0 228 10.7452 228 24C228 37.2548 217.255 48 204 48ZM204 36C210.627 36 216 30.6274 216 24C216 17.3726 210.627 12 204 12C197.373 12 192 17.3726 192 24C192 30.6274 197.373 36 204 36ZM24 72C30.6274 72 36 66.6274 36 60C36 53.3726 30.6274 48 24 48C17.3726 48 12 53.3726 12 60C12 66.6274 17.3726 72 24 72ZM96 60C96 66.6274 90.6274 72 84 72C77.3726 72 72 66.6274 72 60C72 53.3726 77.3726 48 84 48C90.6274 48 96 53.3726 96 60ZM192 96C192 102.627 186.627 108 180 108C173.373 108 168 102.627 168 96C168 89.3726 173.373 84 180 84C186.627 84 192 89.3726 192 96Z" fill="#EA4B71"/>
+</svg>
diff --git a/src/assets/img/int/n8n-logo.png b/src/assets/img/int/n8n-logo.png
new file mode 100644
index 000000000000..2bb6b2d750a1
Binary files /dev/null and b/src/assets/img/int/n8n-logo.png differ