refactor: expose replaceRoute directly

This reverts commit a0153daca4.

.circleci/config.yml

@@ -7,7 +7,7 @@ defaults: &defaults
   working_directory: ~/build
   docker:
     # specify the version you desire here
-    - image: cimg/ruby:3.2.2-browsers
+    - image: cimg/ruby:3.3.3-browsers
 
     # Specify service dependencies here if necessary
     # CircleCI maintains a library of pre-built images
@@ -130,10 +130,7 @@ jobs:
           command: |
             mkdir -p ~/tmp/test-results/frontend_specs
             ~/tmp/cc-test-reporter before-build
-            TESTFILES=$(circleci tests glob **/specs/*.spec.js | circleci tests split --split-by=timings)
-            yarn test:coverage --profile 10 \
-                               --out ~/tmp/test-results/yarn.xml \
-                               -- ${TESTFILES}
+            yarn test:coverage
       - run:
           name: Code Climate Test Coverage
           command: |

.devcontainer/docker-compose.yml

@@ -12,7 +12,7 @@ services:
       args:
         VARIANT: "ubuntu-22.04"
         NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.2.2"
+        RUBY_VERSION: "3.3.3"
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: "1000"
         USER_GID: "1000"
@@ -25,7 +25,7 @@ services:
       args:
         VARIANT: "ubuntu-22.04"
         NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.2.2"
+        RUBY_VERSION: "3.3.3"
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: "1000"
         USER_GID: "1000"

.env.example

@@ -85,6 +85,8 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Comment out the following environment variables if required by your SMTP server
 # SMTP_TLS=
 # SMTP_SSL=
+# SMTP_OPEN_TIMEOUT
+# SMTP_READ_TIMEOUT
 
 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
@@ -255,3 +257,4 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
+

.eslintrc.js

@@ -27,6 +27,160 @@ module.exports = {
     'import/no-unresolved': 'off',
     'vue/html-indent': 'off',
     'vue/multi-word-component-names': 'off',
+    'vue/next-tick-style': ['error', 'callback'],
+    'vue/block-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style'],
+      },
+    ],
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+      },
+    ],
+    'vue/component-options-name-casing': ['error', 'PascalCase'],
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/define-emits-declaration': ['error'],
+    'vue/define-macros-order': [
+      'error',
+      {
+        order: ['defineProps', 'defineEmits'],
+        defineExposeLast: false,
+      },
+    ],
+    'vue/define-props-declaration': ['error', 'runtime'],
+    'vue/match-component-import-name': ['error'],
+    'vue/no-bare-strings-in-template': [
+      'error',
+      {
+        allowlist: [
+          '(',
+          ')',
+          ',',
+          '.',
+          '&',
+          '+',
+          '-',
+          '=',
+          '*',
+          '/',
+          '#',
+          '%',
+          '!',
+          '?',
+          ':',
+          '[',
+          ']',
+          '{',
+          '}',
+          '<',
+          '>',
+          '⌘',
+          '📄',
+          '🎉',
+          '💬',
+          '👥',
+          '📥',
+          '🔖',
+          '❌',
+          '✅',
+          '\u00b7',
+          '\u2022',
+          '\u2010',
+          '\u2013',
+          '\u2014',
+          '\u2212',
+          '|',
+        ],
+        attributes: {
+          '/.+/': [
+            'title',
+            'aria-label',
+            'aria-placeholder',
+            'aria-roledescription',
+            'aria-valuetext',
+          ],
+          input: ['placeholder'],
+        },
+        directives: ['v-text'],
+      },
+    ],
+    'vue/no-empty-component-block': 'error',
+    'vue/no-multiple-objects-in-class': 'error',
+    'vue/no-root-v-if': 'warn',
+    'vue/no-static-inline-styles': [
+      'error',
+      {
+        allowBinding: false,
+      },
+    ],
+    'vue/no-template-target-blank': [
+      'error',
+      {
+        allowReferrer: false,
+        enforceDynamicLinks: 'always',
+      },
+    ],
+    'vue/no-required-prop-with-default': [
+      'error',
+      {
+        autofix: false,
+      },
+    ],
+    'vue/no-this-in-before-route-enter': 'error',
+    'vue/no-undef-components': [
+      'error',
+      {
+        ignorePatterns: [
+          '^woot-',
+          '^fluent-',
+          '^multiselect',
+          '^router-link',
+          '^router-view',
+          '^ninja-keys',
+          '^FormulateForm',
+          '^FormulateInput',
+          '^highlightjs',
+        ],
+      },
+    ],
+    'vue/no-unused-emit-declarations': 'error',
+    'vue/no-unused-refs': 'error',
+    'vue/no-use-v-else-with-v-for': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
+    'vue/no-useless-v-bind': [
+      'error',
+      {
+        ignoreIncludesComment: false,
+        ignoreStringEscape: false,
+      },
+    ],
+    'vue/no-v-text': 'error',
+    'vue/padding-line-between-blocks': ['error', 'always'],
+    'vue/prefer-separate-static-class': 'error',
+    'vue/require-explicit-slots': 'error',
+    'vue/require-macro-variable-name': [
+      'error',
+      {
+        defineProps: 'props',
+        defineEmits: 'emit',
+        defineSlots: 'slots',
+        useSlots: 'slots',
+        useAttrs: 'attrs',
+      },
+    ],
+    'vue/no-unused-properties': [
+      'error',
+      {
+        groups: ['props'],
+        deepData: false,
+        ignorePublicMembers: false,
+        unreferencedOptions: [],
+      },
+    ],
     'vue/max-attributes-per-line': [
       'error',
       {
@@ -65,10 +219,10 @@ module.exports = {
   },
   env: {
     browser: true,
-    jest: true,
     node: true,
   },
   globals: {
     bus: true,
+    vi: true,
   },
 };

.github/workflows/lock.yml

@@ -25,13 +25,5 @@ jobs:
         with: 
           issue-inactive-days: '30'
           issue-lock-reason: 'resolved'
-          issue-comment: >
-            This issue has been automatically locked since there
-            has not been any recent activity after it was closed.
-            Please open a new issue for related bugs.
           pr-inactive-days: '30'
           pr-lock-reason: 'resolved'
-          pr-comment: >
-            This pull request has been automatically locked since there
-            has not been any recent activity after it was closed.
-            Please open a new issue for related bugs.

.ruby-version

@@ -1 +1 @@
-3.2.2
+3.3.3

.storybook/preview.js

@@ -2,7 +2,6 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -14,7 +13,6 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -32,7 +30,7 @@ addDecorator(() => ({
   template: '<story/>',
   i18n: i18nConfig,
   store,
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$root._i18n = this.$i18n;
   },
 }));

Gemfile

@@ -1,10 +1,10 @@
 source 'https://rubygems.org'
 
-ruby '3.2.2'
+ruby '3.3.3'
 
 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.1'
+gem 'rails', '~> 7.0.8.4'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
 
@@ -61,7 +61,7 @@ gem 'redis-namespace'
 gem 'activerecord-import'
 
 ##--- gems for server & infra configuration ---##
-gem 'dotenv-rails'
+gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
 gem 'puma'
 gem 'webpacker'
@@ -111,18 +111,18 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.14.0', require: false
+gem 'sentry-rails', '>= 5.19.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.15.0', require: false
+gem 'sentry-sidekiq', '>= 5.19.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.4'
+gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
 ##-- Push notification service --##
 gem 'fcm'
-gem 'web-push'
+gem 'web-push', '>= 3.0.1'
 
 ##-- geocoding / parse location from ip --##
 # http://www.rubygeocoder.com/
@@ -228,7 +228,7 @@ group :development, :test do
   gem 'mock_redis'
   gem 'pry-rails'
   gem 'rspec_junit_formatter'
-  gem 'rspec-rails'
+  gem 'rspec-rails', '>= 6.1.4'
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false

Gemfile.lock

@@ -33,78 +33,78 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actioncable (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionmailbox (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      actionview (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionmailer (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.3)
-      actionview (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionpack (7.0.8.4)
+      actionview (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actiontext (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.3)
-      activesupport (= 7.0.8.3)
+    actionview (7.0.8.4)
+      activesupport (= 7.0.8.4)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.3)
-      activesupport (= 7.0.8.3)
+    activejob (7.0.8.4)
+      activesupport (= 7.0.8.4)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.3)
-      activesupport (= 7.0.8.3)
-    activerecord (7.0.8.3)
-      activemodel (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    activemodel (7.0.8.4)
+      activesupport (= 7.0.8.4)
+    activerecord (7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    activestorage (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.3)
+    activesupport (7.0.8.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
       tzinfo (~> 2.0)
     acts-as-taggable-on (9.0.1)
       activerecord (>= 6.0, < 7.1)
-    addressable (2.8.4)
-      public_suffix (>= 2.0.2, < 6.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -150,13 +150,13 @@ GEM
       statsd-ruby (~> 1.1)
     base64 (0.2.0)
     bcrypt (3.1.20)
-    bigdecimal (3.1.7)
+    bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     brakeman (5.4.1)
     browser (5.3.1)
-    builder (3.2.4)
+    builder (3.3.0)
     bullet (7.0.7)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
@@ -169,12 +169,15 @@ GEM
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.2.3)
+    concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
-    crack (0.4.5)
+    crack (1.0.0)
+      bigdecimal
       rexml
     crass (1.0.6)
-    csv-safe (3.2.1)
+    csv (3.3.0)
+    csv-safe (3.3.1)
+      csv (~> 3.0)
     cypress-on-rails (1.16.0)
       rack
     database_cleaner (2.0.2)
@@ -183,13 +186,16 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.3.4)
-    ddtrace (1.11.1)
-      debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
-      libdatadog (~> 2.0.0.1.0)
-      libddwaf (~> 1.8.2.0.0)
+    datadog-ci (0.8.3)
       msgpack
-    debase-ruby_core_source (3.2.0)
+    date (3.3.4)
+    ddtrace (1.23.2)
+      datadog-ci (~> 0.8.1)
+      debase-ruby_core_source (= 3.3.1)
+      libdatadog (~> 7.0.0.1.0)
+      libddwaf (~> 1.14.0.0.0)
+      msgpack
+    debase-ruby_core_source (3.3.1)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -204,16 +210,16 @@ GEM
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
       rails (>= 4.2.0, < 7.2)
-    diff-lcs (1.5.0)
+    diff-lcs (1.5.1)
     digest-crc (0.6.4)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
-    dotenv (2.8.1)
-    dotenv-rails (2.8.1)
-      dotenv (= 2.8.1)
-      railties (>= 3.2)
+    dotenv (3.1.2)
+    dotenv-rails (3.1.2)
+      dotenv (= 3.1.2)
+      railties (>= 6.1)
     down (5.4.0)
       addressable (~> 2.8)
     ecma-re-validator (0.4.0)
@@ -223,7 +229,7 @@ GEM
       http (>= 3.0)
       ruby2_keywords
     email_reply_trimmer (0.1.13)
-    erubi (1.12.0)
+    erubi (1.13.0)
     et-orbi (1.2.7)
       tzinfo
     execjs (2.8.1)
@@ -353,9 +359,8 @@ GEM
       ruby2ruby (~> 2.4)
       ruby_parser (~> 3.10)
     hana (1.3.7)
-    hashdiff (1.0.1)
+    hashdiff (1.1.0)
     hashie (5.0.0)
-    hkdf (1.0.0)
     http (5.1.1)
       addressable (~> 2.8)
       http-cookie (~> 1.0)
@@ -417,15 +422,15 @@ GEM
       addressable (~> 2.8)
     letter_opener (1.8.1)
       launchy (>= 2.2, < 3)
-    libdatadog (2.0.0.1.0)
-    libdatadog (2.0.0.1.0-x86_64-linux)
-    libddwaf (1.8.2.0.0)
+    libdatadog (7.0.0.1.0)
+    libdatadog (7.0.0.1.0-x86_64-linux)
+    libddwaf (1.14.0.0.0)
       ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-arm64-darwin)
+    libddwaf (1.14.0.0.0-arm64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-darwin)
+    libddwaf (1.14.0.0.0-x86_64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-linux)
+    libddwaf (1.14.0.0.0-x86_64-linux)
       ffi (~> 1.0)
     line-bot-api (1.28.0)
     liquid (5.4.0)
@@ -435,6 +440,7 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
+    logger (1.6.0)
     lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
@@ -460,8 +466,8 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.6)
-    minitest (5.23.0)
+    mini_portile2 (2.8.7)
+    minitest (5.24.1)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -474,7 +480,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.11)
+    net-imap (0.4.12)
       date
       net-protocol
     net-pop (0.1.2)
@@ -490,14 +496,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.5)
+    nokogiri (1.16.6)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.5-arm64-darwin)
+    nokogiri (1.16.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-darwin)
+    nokogiri (1.16.6-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.6-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -527,7 +533,7 @@ GEM
     omniauth-rails_csrf_protection (1.0.2)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    openssl (3.1.0)
+    openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
     parallel (1.23.0)
@@ -545,13 +551,13 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (5.0.1)
+    public_suffix (6.0.0)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.7.3)
+    racc (1.8.0)
     rack (2.2.9)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
@@ -569,20 +575,20 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.3)
-      actioncable (= 7.0.8.3)
-      actionmailbox (= 7.0.8.3)
-      actionmailer (= 7.0.8.3)
-      actionpack (= 7.0.8.3)
-      actiontext (= 7.0.8.3)
-      actionview (= 7.0.8.3)
-      activejob (= 7.0.8.3)
-      activemodel (= 7.0.8.3)
-      activerecord (= 7.0.8.3)
-      activestorage (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    rails (7.0.8.4)
+      actioncable (= 7.0.8.4)
+      actionmailbox (= 7.0.8.4)
+      actionmailer (= 7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actiontext (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.3)
+      railties (= 7.0.8.4)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -590,9 +596,9 @@ GEM
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (7.0.8.3)
-      actionpack (= 7.0.8.3)
-      activesupport (= 7.0.8.3)
+    railties (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -604,7 +610,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.22.1)
+    redis-client (0.22.2)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -628,25 +634,25 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
-    rspec-core (3.12.2)
-      rspec-support (~> 3.12.0)
-    rspec-expectations (3.12.3)
+    rexml (3.3.4)
+      strscan
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-mocks (3.12.5)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.12.0)
-    rspec-rails (6.0.2)
+      rspec-support (~> 3.13.0)
+    rspec-rails (6.1.4)
       actionpack (>= 6.1)
       activesupport (>= 6.1)
       railties (>= 6.1)
-      rspec-core (~> 3.12)
-      rspec-expectations (~> 3.12)
-      rspec-mocks (~> 3.12)
-      rspec-support (~> 3.12)
-    rspec-support (3.12.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
     rspec_junit_formatter (0.6.0)
       rspec-core (>= 2, < 4, != 2.12.0)
     rubocop (1.50.2)
@@ -704,23 +710,24 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.17.3)
+    sentry-rails (5.19.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.17.3)
-    sentry-ruby (5.17.3)
+      sentry-ruby (~> 5.19.0)
+    sentry-ruby (5.19.0)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.17.3)
-      sentry-ruby (~> 5.17.3)
+    sentry-sidekiq (5.19.0)
+      sentry-ruby (~> 5.19.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.4)
+    sidekiq (7.3.1)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
+      logger
       rack (>= 2.2.4)
-      redis-client (>= 0.19.0)
+      redis-client (>= 0.22.2)
     sidekiq-cron (1.12.0)
       fugit (~> 1.8)
       globalid (>= 1.0.1)
@@ -800,11 +807,10 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
-    web-push (3.0.0)
-      hkdf (~> 1.0)
+    web-push (3.0.1)
       jwt (~> 2.0)
       openssl (~> 3.0)
-    webmock (3.18.1)
+    webmock (3.23.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -821,7 +827,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.14)
+    zeitwerk (2.6.16)
 
 PLATFORMS
   arm64-darwin-20
@@ -863,7 +869,7 @@ DEPENDENCIES
   devise (>= 4.9.4)
   devise-secure_password!
   devise_token_auth (>= 1.2.3)
-  dotenv-rails
+  dotenv-rails (>= 3.0.0)
   down
   elastic-apm
   email_reply_trimmer
@@ -918,13 +924,13 @@ DEPENDENCIES
   rack-cors (= 2.0.0)
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
-  rails (~> 7.0.8.1)
+  rails (~> 7.0.8.4)
   redis
   redis-namespace
   responders (>= 3.1.1)
   rest-client
   reverse_markdown
-  rspec-rails
+  rspec-rails (>= 6.1.4)
   rspec_junit_formatter
   rubocop
   rubocop-performance
@@ -933,11 +939,11 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.14.0)
+  sentry-rails (>= 5.19.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.15.0)
+  sentry-sidekiq (>= 5.19.0)
   shoulda-matchers
-  sidekiq (>= 7.2.4)
+  sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
@@ -955,14 +961,14 @@ DEPENDENCIES
   uglifier
   valid_email2
   web-console (>= 4.2.1)
-  web-push
+  web-push (>= 3.0.1)
   webmock
   webpacker
   wisper (= 2.0.0)
   working_hours
 
 RUBY VERSION
-   ruby 3.2.2p185
+   ruby 3.3.3p89
 
 BUNDLED WITH
-   2.4.6
+   2.5.16

VERSION_CW

@@ -1 +1 @@
-3.3.1
+3.9.0

VERSION_CWCTL

@@ -1 +1 @@
-2.7.0
+2.8.0

app/builders/messages/messenger/message_builder.rb

@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
     file_type = attachment['type'].to_sym
     params = { file_type: file_type, account_id: @message.account_id }
 
-    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
       params.merge!(file_type_params(attachment))
     elsif file_type == :location
       params.merge!(location_params(attachment))

app/controllers/api/v1/accounts/google/authorizations_controller.rb

@@ -0,0 +1,32 @@
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
+  include GoogleConcern
+  before_action :check_authorization
+
+  def create
+    email = params[:authorization][:email]
+    redirect_url = google_client.auth_code.authorize_url(
+      {
+        redirect_uri: "#{base_url}/google/callback",
+        scope: 'email profile https://mail.google.com/',
+        response_type: 'code',
+        prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
+        access_type: 'offline', # the default is 'online'
+        client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
+      }
+    )
+
+    if redirect_url
+      cache_key = "google::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
+      render json: { success: true, url: redirect_url }
+    else
+      render json: { success: false }, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
+end

app/controllers/api/v1/accounts/integrations/apps_controller.rb

@@ -10,7 +10,7 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
   private
 
   def fetch_apps
-    @apps = Integrations::App.all.select(&:active?)
+    @apps = Integrations::App.all.select { |app| app.active?(Current.account) }
   end
 
   def fetch_app

app/controllers/api/v1/accounts/integrations/captain_controller.rb

@@ -0,0 +1,22 @@
+class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
+  before_action :check_admin_authorization?
+  before_action :fetch_hook
+
+  def sso_url
+    params_string =
+      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
+      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
+      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
+
+    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
+
+    sso_url = "#{installation_config.value}/sso?#{params_string}"
+    render json: { sso_url: sso_url }, status: :ok
+  end
+
+  private
+
+  def fetch_hook
+    @hook = Current.account.hooks.find_by!(app_id: 'captain')
+  end
+end

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -12,8 +12,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
       }
     )
     if redirect_url
-      email = email.downcase
-      ::Redis::Alfred.setex(email, Current.account.id, 5.minutes)
+      cache_key = "microsoft::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
       render json: { success: true, url: redirect_url }
     else
       render json: { success: false }, status: :unprocessable_entity

app/controllers/concerns/google_concern.rb

@@ -0,0 +1,20 @@
+module GoogleConcern
+  extend ActiveSupport::Concern
+
+  def google_client
+    app_id = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
+    app_secret = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_SECRET', nil)
+
+    ::OAuth2::Client.new(app_id, app_secret, {
+                           site: 'https://oauth2.googleapis.com',
+                           authorize_url: 'https://accounts.google.com/o/oauth2/auth',
+                           token_url: 'https://accounts.google.com/o/oauth2/token'
+                         })
+  end
+
+  private
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+end

app/controllers/concerns/microsoft_concern.rb

@@ -15,10 +15,6 @@ module MicrosoftConcern
 
   private
 
-  def parsed_body
-    @parsed_body ||= Rack::Utils.parse_nested_query(@response.raw_response.body)
-  end
-
   def base_url
     ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
   end

app/controllers/dashboard_controller.rb

@@ -37,7 +37,7 @@ class DashboardController < ActionController::Base
   end
 
   def set_dashboard_scripts
-    @dashboard_scripts = GlobalConfig.get_value('DASHBOARD_SCRIPTS')
+    @dashboard_scripts = sensitive_path? ? nil : GlobalConfig.get_value('DASHBOARD_SCRIPTS')
   end
 
   def ensure_installation_onboarding
@@ -75,4 +75,14 @@ class DashboardController < ActionController::Base
                           'application'
                         end
   end
+
+  def sensitive_path?
+    # dont load dashboard scripts on sensitive paths like password reset
+    sensitive_paths = [edit_user_password_path].freeze
+
+    # remove app prefix
+    current_path = request.path.gsub(%r{^/app}, '')
+
+    sensitive_paths.include?(current_path)
+  end
 end

app/controllers/google/callbacks_controller.rb

@@ -0,0 +1,18 @@
+class Google::CallbacksController < OauthCallbackController
+  include GoogleConcern
+
+  private
+
+  def provider_name
+    'google'
+  end
+
+  def imap_address
+    'imap.gmail.com'
+  end
+
+  def oauth_client
+    # from GoogleConcern
+    google_client
+  end
+end

app/controllers/microsoft/callbacks_controller.rb

@@ -1,90 +1,17 @@
-class Microsoft::CallbacksController < ApplicationController
+class Microsoft::CallbacksController < OauthCallbackController
   include MicrosoftConcern
 
-  def show
-    @response = microsoft_client.auth_code.get_token(
-      oauth_code,
-      redirect_uri: "#{base_url}/microsoft/callback"
-    )
-
-    inbox, already_exists = find_or_create_inbox
-    ::Redis::Alfred.delete(users_data['email'].downcase)
-
-    if already_exists
-      redirect_to app_microsoft_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
-    else
-      redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
-    end
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e).capture_exception
-    redirect_to '/'
-  end
-
   private
 
-  def oauth_code
-    params[:code]
+  def oauth_client
+    microsoft_client
   end
 
-  def users_data
-    decoded_token = JWT.decode parsed_body[:id_token], nil, false
-    decoded_token[0]
+  def provider_name
+    'microsoft'
   end
 
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def account_id
-    ::Redis::Alfred.get(users_data['email'].downcase)
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  def find_or_create_inbox
-    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
-    # we need this value to know where to redirect on sucessful processing of the callback
-    channel_exists = channel_email.present?
-
-    channel_email ||= create_microsoft_channel_with_inbox
-    update_microsoft_channel(channel_email)
-
-    # reauthorize channel, this code path only triggers when microsoft auth is successful
-    # reauthorized will also update cache keys for the associated inbox
-    channel_email.reauthorized!
-
-    [channel_email.inbox, channel_exists]
-  end
-
-  # Fallback name, for when name field is missing from users_data
-  def fallback_name
-    users_data['email'].split('@').first.parameterize.titleize
-  end
-
-  def create_microsoft_channel_with_inbox
-    ActiveRecord::Base.transaction do
-      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
-      account.inboxes.create!(
-        account: account,
-        channel: channel_email,
-        name: users_data['name'] || fallback_name
-      )
-      channel_email
-    end
-  end
-
-  def update_microsoft_channel(channel_email)
-    channel_email.update!({
-                            imap_login: users_data['email'], imap_address: 'outlook.office365.com',
-                            imap_port: '993', imap_enabled: true,
-                            provider: 'microsoft',
-                            provider_config: {
-                              access_token: parsed_body['access_token'],
-                              refresh_token: parsed_body['refresh_token'],
-                              expires_on: (Time.current.utc + 1.hour).to_s
-                            }
-                          })
+  def imap_address
+    'outlook.office365.com'
   end
 end

app/controllers/oauth_callback_controller.rb

@@ -0,0 +1,108 @@
+class OauthCallbackController < ApplicationController
+  def show
+    @response = oauth_client.auth_code.get_token(
+      oauth_code,
+      redirect_uri: "#{base_url}/#{provider_name}/callback"
+    )
+
+    handle_response
+    ::Redis::Alfred.delete(cache_key)
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    redirect_to '/'
+  end
+
+  private
+
+  def handle_response
+    inbox, already_exists = find_or_create_inbox
+
+    if already_exists
+      redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
+    else
+      redirect_to app_email_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+    end
+  end
+
+  def find_or_create_inbox
+    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
+    # we need this value to know where to redirect on sucessful processing of the callback
+    channel_exists = channel_email.present?
+
+    channel_email ||= create_channel_with_inbox
+    update_channel(channel_email)
+
+    # reauthorize channel, this code path only triggers when microsoft auth is successful
+    # reauthorized will also update cache keys for the associated inbox
+    channel_email.reauthorized!
+
+    [channel_email.inbox, channel_exists]
+  end
+
+  def update_channel(channel_email)
+    channel_email.update!({
+                            imap_login: users_data['email'], imap_address: imap_address,
+                            imap_port: '993', imap_enabled: true,
+                            provider: provider_name,
+                            provider_config: {
+                              access_token: parsed_body['access_token'],
+                              refresh_token: parsed_body['refresh_token'],
+                              expires_on: (Time.current.utc + 1.hour).to_s
+                            }
+                          })
+  end
+
+  def provider_name
+    raise NotImplementedError
+  end
+
+  def oauth_client
+    raise NotImplementedError
+  end
+
+  def cache_key
+    "#{provider_name}::#{users_data['email'].downcase}"
+  end
+
+  def create_channel_with_inbox
+    ActiveRecord::Base.transaction do
+      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
+      account.inboxes.create!(
+        account: account,
+        channel: channel_email,
+        name: users_data['name'] || fallback_name
+      )
+      channel_email
+    end
+  end
+
+  def users_data
+    decoded_token = JWT.decode parsed_body[:id_token], nil, false
+    decoded_token[0]
+  end
+
+  def account_id
+    ::Redis::Alfred.get(cache_key)
+  end
+
+  def account
+    @account ||= Account.find(account_id)
+  end
+
+  # Fallback name, for when name field is missing from users_data
+  def fallback_name
+    users_data['email'].split('@').first.parameterize.titleize
+  end
+
+  def oauth_code
+    params[:code]
+  end
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+
+  def parsed_body
+    @parsed_body ||= @response.response.parsed
+  end
+end

app/controllers/super_admin/app_configs_controller.rb

@@ -40,7 +40,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
                        when 'email'
                          ['MAILER_INBOUND_EMAIL_DOMAIN']
                        else
-                         %w[ENABLE_ACCOUNT_SIGNUP]
+                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                        end
   end
 end

app/javascript/dashboard/App.Vue.spec.js

@@ -1,11 +0,0 @@
-import App from './App';
-import '../../test-matchers';
-
-describe(`App component`, () => {
-  it(`should be a component`, () => {
-    // Arrange
-    // Act
-    expect(App).toBeVueComponent('App');
-    // Assert
-  });
-});

app/javascript/dashboard/App.vue

@@ -1,32 +1,6 @@
-<template>
-  <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
-    id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTLView }"
-    :dir="isRTLView ? 'rtl' : 'ltr'"
-  >
-    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
-      <pending-email-verification-banner v-if="hideOnOnboardingView" />
-      <payment-pending-banner v-if="hideOnOnboardingView" />
-      <upgrade-banner />
-    </template>
-    <transition name="fade" mode="out-in">
-      <router-view />
-    </transition>
-    <add-account-modal
-      :show="showAddAccountModal"
-      :has-accounts="hasAccounts"
-    />
-    <woot-snackbar-box />
-    <network-notification />
-  </div>
-  <loading-state v-else />
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
+import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -36,13 +10,13 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
-import rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
 } from './helper/pushHelper';
+import ReconnectService from 'dashboard/helper/ReconnectService';
 
 export default {
   name: 'App',
@@ -57,21 +31,19 @@ export default {
     UpgradeBanner,
     PendingEmailVerificationBanner,
   },
-
-  mixins: [rtlMixin],
-
   data() {
     return {
       showAddAccountModal: false,
       latestChatwootVersion: null,
+      reconnectService: null,
     };
   },
 
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
+      isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
-      globalConfig: 'globalConfig/get',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
       currentAccountId: 'getCurrentAccountId',
@@ -102,6 +74,11 @@ export default {
     this.listenToThemeChanges();
     this.setLocale(window.chatwootConfig.selectedLocale);
   },
+  beforeDestroy() {
+    if (this.reconnectService) {
+      this.reconnectService.disconnect();
+    }
+  },
   methods: {
     initializeColorTheme() {
       setColorTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -122,9 +99,9 @@ export default {
         this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
-      this.updateRTLDirectionView(locale);
       this.latestChatwootVersion = latestChatwootVersion;
       vueActionCable.init(pubsubToken);
+      this.reconnectService = new ReconnectService(this.$store, router);
 
       verifyServiceWorkerExistence(registration =>
         registration.pushManager.getSubscription().then(subscription => {
@@ -138,6 +115,30 @@ export default {
 };
 </script>
 
+<template>
+  <div
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    id="app"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTL }"
+    :dir="isRTL ? 'rtl' : 'ltr'"
+  >
+    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
+    <template v-if="currentAccountId">
+      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
+      <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <UpgradeBanner />
+    </template>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
+    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
+    <WootSnackbarBox />
+    <NetworkNotification />
+  </div>
+  <LoadingState v-else />
+</template>
+
 <style lang="scss">
 @import './assets/scss/app';
 </style>

app/javascript/dashboard/api/account.js

@@ -9,6 +9,13 @@ class AccountAPI extends ApiClient {
   createAccount(data) {
     return axios.post(`${this.apiVersion}/accounts`, data);
   }
+
+  async getCacheKeys() {
+    const response = await axios.get(
+      `/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
+    );
+    return response.data.cache_keys;
+  }
 }
 
 export default new AccountAPI();

app/javascript/dashboard/api/channel/googleClient.js

@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class MicrosoftClient extends ApiClient {
+  constructor() {
+    super('google', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new MicrosoftClient();

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -15,10 +15,10 @@ describe('#enterpriseAccountAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/integrations.js

@@ -32,6 +32,10 @@ class IntegrationsAPI extends ApiClient {
   deleteHook(hookId) {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
+
+  fetchCaptainURL() {
+    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
+  }
 }
 
 export default new IntegrationsAPI();

app/javascript/dashboard/api/specs/account.spec.js

@@ -15,10 +15,10 @@ describe('#accountAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/accountActions.spec.js

@@ -10,10 +10,10 @@ describe('#ContactsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/agents.spec.js

@@ -14,7 +14,7 @@ describe('#AgentAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/article.spec.js

@@ -14,10 +14,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -44,10 +44,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -71,10 +71,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -98,10 +98,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -129,10 +129,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/assignableAgents.spec.js

@@ -4,10 +4,10 @@ describe('#AssignableAgentsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/channel/fbChannel.spec.js

@@ -13,10 +13,10 @@ describe('#FBChannel', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/contacts.spec.js

@@ -17,10 +17,10 @@ describe('#ContactsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -16,10 +16,10 @@ describe('#ConversationApi', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/csatReports.spec.js

@@ -11,10 +11,10 @@ describe('#Reports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -24,10 +24,10 @@ describe('#ConversationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -15,10 +15,10 @@ describe('#ConversationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -17,10 +17,10 @@ describe('#InboxesAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations.spec.js

@@ -18,10 +18,10 @@ describe('#integrationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations/dyte.spec.js

@@ -11,10 +11,10 @@ describe('#accountAPI', () => {
   describe('createAMeeting', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -39,10 +39,10 @@ describe('#accountAPI', () => {
   describe('addParticipantToMeeting', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/integrations/linear.spec.js

@@ -16,10 +16,10 @@ describe('#linearAPI', () => {
   describe('getTeams', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -41,10 +41,10 @@ describe('#linearAPI', () => {
   describe('getTeamEntities', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -66,10 +66,10 @@ describe('#linearAPI', () => {
   describe('createIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -96,10 +96,10 @@ describe('#linearAPI', () => {
   describe('link_issue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -125,10 +125,10 @@ describe('#linearAPI', () => {
   describe('getLinkedIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -150,10 +150,10 @@ describe('#linearAPI', () => {
   describe('unlinkIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -178,10 +178,10 @@ describe('#linearAPI', () => {
   describe('searchIssues', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/notifications.spec.js

@@ -13,10 +13,10 @@ describe('#NotificationAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/reports.spec.js

@@ -20,10 +20,10 @@ describe('#Reports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/slaReports.spec.js

@@ -12,10 +12,10 @@ describe('#SLAReports API', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/api/specs/teams.spec.js

@@ -16,10 +16,10 @@ describe('#TeamsAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

app/javascript/dashboard/assets/scss/_woot.scss

@@ -3,6 +3,9 @@
 @import 'tailwindcss/utilities';
 
 @import 'shared/assets/fonts/plus-jakarta';
+@import 'shared/assets/fonts/InterDisplay/inter-display';
+@import 'shared/assets/fonts/inter';
+
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
@@ -42,6 +45,7 @@
 }
 
 @layer base {
+
   // scss-lint:disable PropertySortOrder
   :root {
     --color-amber-25: 254 253 251;
@@ -213,6 +217,7 @@
     --color-orange-800: 204 78 0;
     --color-orange-900: 88 45 29;
   }
+
   // scss-lint:disable QualifyingElement
   body.dark {
     --color-amber-25: 31 19 0;

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -1,6 +1,10 @@
 table {
   @apply border-spacing-0 text-sm w-full;
 
+
+}
+
+.woot-table {
   thead {
     th {
       @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
@@ -16,9 +20,7 @@ table {
       @apply p-2.5 text-slate-700 dark:text-slate-100;
     }
   }
-}
 
-.woot-table {
   tr {
     .show-if-hover {
       transition: opacity 0.2s $swift-ease-out-function;

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -1,35 +1,3 @@
-<template>
-  <div class="-mt-px text-sm">
-    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click="$emit('click')"
-    >
-      <div class="flex justify-between mb-0.5">
-        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
-          {{ title }}
-        </h5>
-      </div>
-      <div class="flex flex-row">
-        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
-          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <fluent-icon v-else size="24" icon="add" type="solid" />
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
 <script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
@@ -61,3 +29,35 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="-mt-px text-sm">
+    <button
+      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5
+          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+        >
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-woot-500">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,17 +1,3 @@
-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-    @click="$emit('click')"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,6 +13,20 @@ export default {
 };
 </script>
 
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <style scoped lang="scss">
 .inactive {
   img {

app/javascript/dashboard/components/ChatList.vue

@@ -1,148 +1,22 @@
-<template>
-  <div
-    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="[
-      { hidden: !showConversationList },
-      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
-    ]"
-  >
-    <slot />
-    <chat-list-header
-      :page-title="pageTitle"
-      :has-applied-filters="hasAppliedFilters"
-      :has-active-folders="hasActiveFolders"
-      :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
-    />
-
-    <add-custom-views
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
-
-    <delete-custom-views
-      v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
-      :active-custom-view="activeFolder"
-      :custom-views-id="foldersId"
-      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
-      @close="onCloseDeleteFoldersModal"
-    />
-
-    <chat-type-tabs
-      v-if="!hasAppliedFiltersOrActiveFolders"
-      :items="assigneeTabItems"
-      :active-tab="activeAssigneeTab"
-      class="tab--chat-type"
-      @chatTabChange="updateAssigneeTab"
-    />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
-    >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
-    <conversation-bulk-actions
-      v-if="selectedConversations.length"
-      :conversations="selectedConversations"
-      :all-conversations-selected="allConversationsSelected"
-      :selected-inboxes="uniqueInboxes"
-      :show-open-action="allSelectedConversationsStatus('open')"
-      :show-resolved-action="allSelectedConversationsStatus('resolved')"
-      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
-    />
-    <div
-      ref="conversationList"
-      class="flex-1 conversations-list"
-      :class="{ 'overflow-hidden': isContextMenuOpen }"
-    >
-      <virtual-list
-        ref="conversationVirtualList"
-        :data-key="'id'"
-        :data-sources="conversationList"
-        :data-component="itemComponent"
-        :extra-props="virtualListExtraProps"
-        class="w-full h-full overflow-auto"
-        footer-tag="div"
-      >
-        <template #footer>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
-          </div>
-          <p
-            v-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
-          >
-            {{ $t('CHAT_LIST.EOF') }}
-          </p>
-          <intersection-observer
-            v-if="!showEndOfListMessage && !chatListLoading"
-            :options="infiniteLoaderOptions"
-            @observed="loadMoreConversations"
-          />
-        </template>
-      </virtual-list>
-    </div>
-    <woot-modal
-      :show.sync="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <conversation-advanced-filter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
-        :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
-      />
-    </woot-modal>
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <script>
+import { ref } from 'vue';
 import { mapGetters } from 'vuex';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useAlert } from 'dashboard/composables';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
-import timeMixin from '../mixins/time';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 import filterMixin from 'shared/mixins/filterMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -152,10 +26,6 @@ import {
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
-import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import { getUnixTime } from 'date-fns';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import IntersectionObserver from './IntersectionObserver.vue';
 
 export default {
@@ -170,16 +40,8 @@ export default {
     ConversationBulkActions,
     IntersectionObserver,
     VirtualList,
-    CustomSnoozeModal,
   },
-  mixins: [
-    timeMixin,
-    conversationMixin,
-    keyboardEventListenerMixins,
-    alertMixin,
-    filterMixin,
-    uiSettingsMixin,
-  ],
+  mixins: [filterMixin],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -224,6 +86,68 @@ export default {
       type: Boolean,
     },
   },
+  setup() {
+    const { uiSettings } = useUISettings();
+
+    const conversationListRef = ref(null);
+
+    const getKeyboardListenerParams = () => {
+      const allConversations = conversationListRef.value.querySelectorAll(
+        'div.conversations-list div.conversation'
+      );
+      const activeConversation = conversationListRef.value.querySelector(
+        'div.conversations-list div.conversation.active'
+      );
+      const activeConversationIndex = [...allConversations].indexOf(
+        activeConversation
+      );
+      const lastConversationIndex = allConversations.length - 1;
+      return {
+        allConversations,
+        activeConversation,
+        activeConversationIndex,
+        lastConversationIndex,
+      };
+    };
+    const handlePreviousConversation = () => {
+      const { allConversations, activeConversationIndex } =
+        getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
+      }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
+      }
+    };
+    const handleNextConversation = () => {
+      const {
+        allConversations,
+        activeConversationIndex,
+        lastConversationIndex,
+      } = getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
+      }
+    };
+    const keyboardEvents = {
+      'Alt+KeyJ': {
+        action: () => handlePreviousConversation(),
+        allowOnFocusedInput: true,
+      },
+      'Alt+KeyK': {
+        action: () => handleNextConversation(),
+        allowOnFocusedInput: true,
+      },
+    };
+    useKeyboardEvents(keyboardEvents, conversationListRef);
+
+    return {
+      uiSettings,
+      conversationListRef,
+    };
+  },
   data() {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
@@ -244,10 +168,9 @@ export default {
       isContextMenuOpen: false,
       appliedFilter: [],
       infiniteLoaderOptions: {
-        root: this.$refs.conversationList,
+        root: this.$refs.conversationListRef,
         rootMargin: '100px 0px 100px 0px',
       },
-      showCustomSnoozeModal: false,
 
       itemComponent: ConversationItem,
       // virtualListExtraProps is to pass the props to the conversationItem component.
@@ -263,27 +186,22 @@ export default {
   },
   computed: {
     ...mapGetters({
-      currentChat: 'getSelectedChat',
       currentUser: 'getCurrentUser',
       chatLists: 'getAllConversations',
       mineChatsList: 'getMineChats',
       allChatList: 'getAllStatusChats',
-      chatListFilters: 'getChatListFilters',
       unAssignedChatsList: 'getUnAssignedChats',
       chatListLoading: 'getChatListLoadingStatus',
-      currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
       conversationStats: 'conversationStats/getStats',
       appliedFilters: 'getAppliedConversationFilters',
       folders: 'customViews/getCustomViews',
-      inboxes: 'inboxes/getInboxes',
       agentList: 'agents/getAgents',
       teamsList: 'teams/getTeams',
       inboxesList: 'inboxes/getInboxes',
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
       selectedConversations: 'bulkActions/getSelectedConversationIds',
-      contextMenuChatId: 'getContextMenuChatId',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -517,11 +435,6 @@ export default {
     this.$emitter.on('fetch_conversation_stats', () => {
       this.$store.dispatch('conversationStats/get', this.conversationFilters);
     });
-
-    this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
-  },
-  beforeDestroy() {
-    this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
   },
   methods: {
     updateVirtualListProps(key, value) {
@@ -632,58 +545,6 @@ export default {
         }))
       );
     },
-    getKeyboardListenerParams() {
-      const allConversations = this.$refs.conversationList.querySelectorAll(
-        'div.conversations-list div.conversation'
-      );
-      const activeConversation = this.$refs.conversationList.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-      return {
-        allConversations,
-        activeConversation,
-        activeConversationIndex,
-        lastConversationIndex,
-      };
-    },
-    handlePreviousConversation() {
-      const { allConversations, activeConversationIndex } =
-        this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
-      }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
-      }
-    },
-    handleNextConversation() {
-      const {
-        allConversations,
-        activeConversationIndex,
-        lastConversationIndex,
-      } = this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[lastConversationIndex].click();
-      } else if (activeConversationIndex < lastConversationIndex) {
-        allConversations[activeConversationIndex + 1].click();
-      }
-    },
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyJ': {
-          action: () => this.handlePreviousConversation(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyK': {
-          action: () => this.handleNextConversation(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     resetAndFetchData() {
       this.appliedFilter = [];
       this.resetBulkActions();
@@ -750,7 +611,7 @@ export default {
       }
     },
     emitConversationLoaded() {
-      this.$emit('conversation-load');
+      this.$emit('conversationLoad');
       this.$nextTick(() => {
         // Addressing a known issue in the virtual list library where dynamically added items
         // might not render correctly. This workaround involves a slight manual adjustment
@@ -833,7 +694,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          this.showAlert(
+          useAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.AGENT_ASSIGNMENT.SUCCESFUL',
               {
@@ -843,10 +704,10 @@ export default {
             )
           );
         } else {
-          this.showAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
+          useAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
     async assignPriority(priority, conversationId = null) {
@@ -861,7 +722,7 @@ export default {
             newValue: priority,
             from: 'Context menu',
           });
-          this.showAlert(
+          useAlert(
             this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
               priority,
               conversationId,
@@ -904,7 +765,7 @@ export default {
           conversationId,
           teamId: team.id,
         });
-        this.showAlert(
+        useAlert(
           this.$t(
             'CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL',
             {
@@ -914,7 +775,7 @@ export default {
           )
         );
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED')
         );
       }
@@ -931,7 +792,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          this.showAlert(
+          useAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_ASSIGNMENT.SUCCESFUL',
               {
@@ -941,10 +802,10 @@ export default {
             )
           );
         } else {
-          this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+          useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
       }
     },
     async onAssignTeamsForBulk(team) {
@@ -957,9 +818,9 @@ export default {
           },
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
+        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
+        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
     async onUpdateConversations(status, snoozedUntil) {
@@ -973,9 +834,9 @@ export default {
           snoozed_until: snoozedUntil,
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
-        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
+        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
       }
     },
     toggleConversationStatus(conversationId, status, snoozedUntil) {
@@ -986,7 +847,7 @@ export default {
           snoozedUntil,
         })
         .then(() => {
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
           this.isLoading = false;
         });
     },
@@ -999,46 +860,125 @@ export default {
     onContextMenuToggle(state) {
       this.isContextMenuOpen = state;
     },
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomSnoozeModal = true;
-      } else {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          findSnoozeTime(snoozeType) || null
-        );
-      }
-    },
-    chooseSnoozeTime(customSnoozeTime) {
-      this.showCustomSnoozeModal = false;
-      if (customSnoozeTime) {
-        this.toggleStatus(
-          wootConstants.STATUS_TYPE.SNOOZED,
-          getUnixTime(customSnoozeTime)
-        );
-      }
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat?.id || this.contextMenuChatId,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.$store.dispatch('setContextMenuChatId', null);
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-        });
-    },
-    hideCustomSnoozeModal() {
-      // if we select custom snooze and then the custom snooze modal is open
-      // Then if the custom snooze modal is closed and set the context menu chat id to null
-      this.$store.dispatch('setContextMenuChatId', null);
-      this.showCustomSnoozeModal = false;
-    },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    :class="[
+      { hidden: !showConversationList },
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+    ]"
+  >
+    <slot />
+    <ChatListHeader
+      :page-title="pageTitle"
+      :has-applied-filters="hasAppliedFilters"
+      :has-active-folders="hasActiveFolders"
+      :active-status="activeStatus"
+      @addFolders="onClickOpenAddFoldersModal"
+      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @filtersModal="onToggleAdvanceFiltersModal"
+      @resetFilters="resetAndFetchData"
+      @basicFilterChange="onBasicFilterChange"
+    />
+
+    <AddCustomViews
+      v-if="showAddFoldersModal"
+      :custom-views-query="foldersQuery"
+      :open-last-saved-item="openLastSavedItemInFolder"
+      @close="onCloseAddFoldersModal"
+    />
+
+    <DeleteCustomViews
+      v-if="showDeleteFoldersModal"
+      :show-delete-popup.sync="showDeleteFoldersModal"
+      :active-custom-view="activeFolder"
+      :custom-views-id="foldersId"
+      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
+      @close="onCloseDeleteFoldersModal"
+    />
+
+    <ChatTypeTabs
+      v-if="!hasAppliedFiltersOrActiveFolders"
+      :items="assigneeTabItems"
+      :active-tab="activeAssigneeTab"
+      @chatTabChange="updateAssigneeTab"
+    />
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex items-center justify-center p-4 overflow-auto"
+    >
+      {{ $t('CHAT_LIST.LIST.404') }}
+    </p>
+    <ConversationBulkActions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @selectAllConversations="selectAllConversations"
+      @assignAgent="onAssignAgent"
+      @updateConversations="onUpdateConversations"
+      @assignLabels="onAssignLabels"
+      @assignTeam="onAssignTeamsForBulk"
+    />
+    <div
+      ref="conversationListRef"
+      class="flex-1 conversations-list"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
+    >
+      <VirtualList
+        ref="conversationVirtualList"
+        data-key="id"
+        :data-sources="conversationList"
+        :data-component="itemComponent"
+        :extra-props="virtualListExtraProps"
+        class="w-full h-full overflow-auto"
+        footer-tag="div"
+      >
+        <template #footer>
+          <div v-if="chatListLoading" class="text-center">
+            <span class="mt-4 mb-4 spinner" />
+          </div>
+          <p
+            v-if="showEndOfListMessage"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
+          >
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <IntersectionObserver
+            v-if="!showEndOfListMessage && !chatListLoading"
+            :options="infiniteLoaderOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </VirtualList>
+    </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <ConversationAdvancedFilter
+        v-if="showAdvancedFilters"
+        :initial-filter-types="advancedFilterTypes"
+        :initial-applied-filters="appliedFilter"
+        :active-folder-name="activeFolderName"
+        :on-close="closeAdvanceFiltersModal"
+        :is-folder-view="hasActiveFolders"
+        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {
@@ -1052,14 +992,4 @@ export default {
 .conversations-list {
   @apply overflow-hidden hover:overflow-y-auto;
 }
-
-.tab--chat-type {
-  @apply py-0 px-4;
-
-  ::v-deep {
-    .tabs {
-      @apply p-0;
-    }
-  }
-}
 </style>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -21,16 +21,16 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
-  'add-folders',
-  'delete-folders',
-  'reset-filters',
-  'basic-filter-change',
-  'filters-modal',
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basic-filter-change', value, type);
+  emit('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('add-folders')"
+          @click="emit('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('reset-filters')"
+          @click="emit('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filters-modal')"
+          @click="emit('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('delete-folders')"
+          @click="emit('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,9 +104,9 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filters-modal')"
+        @click="emit('filtersModal')"
       />
-      <conversation-basic-filter
+      <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
         @changeFilter="onBasicFilterChange"
       />

app/javascript/dashboard/components/Code.vue

@@ -1,34 +1,9 @@
-<template>
-  <div class="code--container">
-    <div class="code--action-area">
-      <form
-        v-if="enableCodePen"
-        class="code--codeopen-form"
-        action="https://codepen.io/pen/define"
-        method="POST"
-        target="_blank"
-      >
-        <input type="hidden" name="data" :value="codepenScriptValue" />
-
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
-      </form>
-      <button class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
-    </div>
-    <highlightjs v-if="script" :language="lang" :code="script" />
-  </div>
-</template>
-
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     script: {
       type: String,
@@ -61,12 +36,36 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.script);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
   },
 };
 </script>
 
+<template>
+  <div class="code--container">
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
+    <highlightjs v-if="script" :language="lang" :code="script" />
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .code--container {
   position: relative;

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,26 +1,3 @@
-<template>
-  <conversation-card
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    :enable-context-menu="true"
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
-
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -70,3 +47,26 @@ export default {
   },
 };
 </script>
+
+<template>
+  <ConversationCard
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    enable-context-menu
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
+  />
+</template>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -1,147 +1,12 @@
-<template>
-  <div class="py-3 px-4">
-    <div class="flex items-center mb-1">
-      <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
-          <input
-            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
-            type="checkbox"
-            @change="onUpdate"
-          />
-        </div>
-        <div class="flex items-center justify-between w-full">
-          <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
-            :class="
-              $v.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
-          >
-            {{ label }}
-            <helper-text-popup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
-          </span>
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end w-4"
-            @click="onDelete"
-          />
-        </div>
-      </h4>
-    </div>
-    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="mb-2 w-full flex items-center">
-          <input
-            ref="inputfield"
-            v-model="editedValue"
-            :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
-            autofocus="true"
-            :class="{ error: $v.editedValue.$error }"
-            @blur="$v.editedValue.$touch"
-            @keyup.enter="onUpdate"
-          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
-          </div>
-        </div>
-        <span
-          v-if="shouldShowErrorMessage"
-          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
-        >
-          {{ errorMessage }}
-        </span>
-      </div>
-      <div
-        v-show="!isEditing"
-        class="flex group"
-        :class="{ 'is-editable': showActions }"
-      >
-        <a
-          v-if="isAttributeTypeLink"
-          :href="hrefURL"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ urlValue }}
-        </a>
-        <p
-          v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ displayValue || '---' }}
-        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onCopy"
-          />
-          <woot-button
-            v-if="showActions"
-            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onEdit"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="isAttributeTypeList">
-      <multiselect-dropdown
-        :options="listOptions"
-        :selected-item="selectedItem"
-        :has-thumbnail="false"
-        :multiselector-placeholder="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
-        "
-        :input-placeholder="
-          $t(
-            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
-          )
-        "
-        @click="onUpdateListValue"
-      />
-    </div>
-  </div>
-</template>
-
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from 'vuelidate/lib/validators';
+import { required, url } from '@vuelidate/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
-import customAttributeMixin from '../mixins/customAttributeMixin';
+import { getRegexp } from 'shared/helpers/Validators';
+import { useVuelidate } from '@vuelidate/core';
 
 const DATE_FORMAT = 'yyyy-MM-dd';
 
@@ -150,7 +15,6 @@ export default {
     MultiselectDropdown,
     HelperTextPopup,
   },
-  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
     description: { type: String, default: '' },
@@ -163,10 +27,12 @@ export default {
       default: null,
     },
     regexCue: { type: String, default: null },
-    regexEnabled: { type: Boolean, default: false },
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isEditing: false,
@@ -225,13 +91,13 @@ export default {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
     shouldShowErrorMessage() {
-      return this.$v.editedValue.$error;
+      return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.$v.editedValue.url) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (!this.$v.editedValue.regexValidation) {
+      if (!this.v$.editedValue.regexValidation) {
         return this.regexCue
           ? this.regexCue
           : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -246,7 +112,7 @@ export default {
     },
     contactId() {
       // Fix to solve validation not resetting when contactId changes in contact page
-      this.$v.$reset();
+      this.v$.$reset();
     },
   },
 
@@ -261,8 +127,7 @@ export default {
         required,
         regexValidation: value => {
           return !(
-            this.attributeRegex &&
-            !this.getRegexp(this.attributeRegex).test(value)
+            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
           );
         },
       },
@@ -287,7 +152,7 @@ export default {
       }
     },
     onClickAway() {
-      this.$v.$reset();
+      this.v$.$reset();
       this.isEditing = false;
     },
     onEdit() {
@@ -307,8 +172,8 @@ export default {
         this.attributeType === 'date'
           ? parseISO(this.editedValue)
           : this.editedValue;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.isEditing = false;
@@ -316,7 +181,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -326,6 +191,142 @@ export default {
 };
 </script>
 
+<template>
+  <div class="px-4 py-3">
+    <div class="flex items-center mb-1">
+      <h4 class="flex items-center w-full m-0 text-sm error">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
+          <input
+            v-model="editedValue"
+            class="!my-0 mr-2 ml-0"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              v$.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
+          >
+            {{ label }}
+            <HelperTextPopup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end w-4"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="flex items-center w-full mb-2">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            autofocus="true"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div>
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
+          </div>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="hrefURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ urlValue }}
+        </a>
+        <p
+          v-else
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ displayValue || '---' }}
+        </p>
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="clipboard"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onCopy"
+          />
+          <woot-button
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="edit"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <MultiselectDropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep {
   .selector-wrap {

app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+const props = defineProps({
+  showOnCustomBrandedInstance: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const getters = useStoreGetters();
+
+const isACustomBrandedInstance =
+  getters['globalConfig/isACustomBrandedInstance'];
+
+const shouldShowContent = computed(
+  () => props.showOnCustomBrandedInstance || !isACustomBrandedInstance.value
+);
+</script>
+
+<template>
+  <div v-if="shouldShowContent">
+    <slot />
+  </div>
+</template>

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -1,28 +1,3 @@
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
-      <date-picker
-        v-model="snoozeTime"
-        type="datetime"
-        inline
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-        :popup-style="{ width: '100%' }"
-      />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <script>
 import DatePicker from 'vue2-datepicker';
 
@@ -47,7 +22,7 @@ export default {
       this.$emit('close');
     },
     chooseTime() {
-      this.$emit('choose-time', this.snoozeTime);
+      this.$emit('chooseTime', this.snoozeTime);
     },
     disabledDate(date) {
       // Disable all the previous dates
@@ -64,6 +39,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <DatePicker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .modal-content {
   @apply pt-2 px-5 pb-6;

app/javascript/dashboard/components/FormSection.vue

@@ -1,3 +1,16 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
 <template>
   <div class="flex flex-col items-start w-full gap-6">
     <div class="flex flex-col w-full gap-4">
@@ -16,16 +29,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>

app/javascript/dashboard/components/IntersectionObserver.vue

@@ -1,7 +1,3 @@
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
-
 <script>
 export default {
   props: {
@@ -32,3 +28,7 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>

app/javascript/dashboard/components/MaskedText.vue

@@ -1,3 +1,33 @@
+<script>
+import 'highlight.js/styles/default.css';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      masked: true,
+    };
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+    },
+    toggleMasked() {
+      this.masked = !this.masked;
+    },
+  },
+};
+</script>
+
 <template>
   <div class="text--container">
     <woot-button size="small" class="button--text" @click="onCopy">
@@ -15,37 +45,6 @@
   </div>
 </template>
 
-<script>
-import 'highlight.js/styles/default.css';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  mixins: [alertMixin],
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      masked: true,
-    };
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-    toggleMasked() {
-      this.masked = !this.masked;
-    },
-  },
-};
-</script>
-
 <style lang="scss" scoped>
 .text--container {
   position: relative;

app/javascript/dashboard/components/Modal.vue

@@ -1,36 +1,3 @@
-<template>
-  <transition name="modal-fade">
-    <div
-      v-if="show"
-      :class="modalClassName"
-      transition="modal"
-      @mousedown="handleMouseDown"
-    >
-      <div
-        :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
-          'rounded-xl w-[37.5rem]': !fullWidth,
-          'items-center rounded-none flex h-full justify-center w-full':
-            fullWidth,
-          [size]: true,
-        }"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
-        <woot-button
-          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
-          @click="close"
-        />
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
 <script>
 export default {
   props: {
@@ -108,6 +75,39 @@ export default {
 };
 </script>
 
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @mousedown="handleMouseDown"
+    >
+      <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
+        :class="{
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <woot-button
+          v-if="showCloseButton"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <style lang="scss">
 .modal-mask {
   @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;

app/javascript/dashboard/components/ModalHeader.vue

@@ -1,3 +1,28 @@
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
@@ -23,26 +48,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-    headerContentValue: {
-      type: String,
-      default: '',
-    },
-    headerImage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/NetworkNotification.vue

@@ -1,26 +1,133 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+  isNotificationRoute,
+} from 'dashboard/helper/routeHelpers';
+import { useEventListener } from '@vueuse/core';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const RECONNECTED_BANNER_TIMEOUT = 2000;
+
+const showNotification = ref(!navigator.onLine);
+const isDisconnected = ref(false);
+const isReconnecting = ref(false);
+const isReconnected = ref(false);
+let reconnectTimeout = null;
+
+const bannerText = computed(() => {
+  if (isReconnecting.value) return t('NETWORK.NOTIFICATION.RECONNECTING');
+  if (isReconnected.value) return t('NETWORK.NOTIFICATION.RECONNECT_SUCCESS');
+  return t('NETWORK.NOTIFICATION.OFFLINE');
+});
+
+const iconName = computed(() => (isReconnected.value ? 'wifi' : 'wifi-off'));
+const canRefresh = computed(
+  () => !isReconnecting.value && !isReconnected.value
+);
+
+const refreshPage = () => {
+  window.location.reload();
+};
+
+const closeNotification = () => {
+  showNotification.value = false;
+  isReconnected.value = false;
+  clearTimeout(reconnectTimeout);
+};
+
+const isInAnyOfTheRoutes = routeName => {
+  return (
+    isAConversationRoute(routeName, true) ||
+    isAInboxViewRoute(routeName, true) ||
+    isNotificationRoute(routeName, true)
+  );
+};
+
+const updateWebsocketStatus = () => {
+  isDisconnected.value = true;
+  showNotification.value = true;
+};
+
+const handleReconnectionCompleted = () => {
+  isDisconnected.value = false;
+  isReconnecting.value = false;
+  isReconnected.value = true;
+  showNotification.value = true;
+  reconnectTimeout = setTimeout(closeNotification, RECONNECTED_BANNER_TIMEOUT);
+};
+
+const handleReconnecting = () => {
+  if (isInAnyOfTheRoutes(route.name)) {
+    isReconnecting.value = true;
+    isReconnected.value = false;
+    showNotification.value = true;
+  } else {
+    handleReconnectionCompleted();
+  }
+};
+
+const updateOnlineStatus = event => {
+  // Case: Websocket is not disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online, close the notification
+
+  // Case: Websocket is disconnected
+  // If the app goes offline, show the notification
+  // If the app goes online but the websocket is disconnected, don't close the notification
+  // If the app goes online and the websocket is not disconnected, close the notification
+
+  if (event.type === 'offline') {
+    showNotification.value = true;
+  } else if (event.type === 'online' && !isDisconnected.value) {
+    handleReconnectionCompleted();
+  }
+};
+
+useEventListener('online', updateOnlineStatus);
+useEventListener('offline', updateOnlineStatus);
+useEmitter(BUS_EVENTS.WEBSOCKET_DISCONNECT, updateWebsocketStatus);
+useEmitter(
+  BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED,
+  handleReconnectionCompleted
+);
+useEmitter(BUS_EVENTS.WEBSOCKET_RECONNECT, handleReconnecting);
+
+onBeforeUnmount(() => {
+  clearTimeout(reconnectTimeout);
+});
+</script>
+
 <template>
   <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="fixed top-4 left-2 z-50 group">
+    <div v-show="showNotification" class="fixed z-50 top-4 left-2 group">
       <div
-        class="flex items-center justify-between py-1 px-2 w-full rounded-lg shadow-lg bg-yellow-200 dark:bg-yellow-700 relative"
+        class="relative flex items-center justify-between w-full px-2 py-1 bg-yellow-200 rounded-lg shadow-lg dark:bg-yellow-700"
       >
         <fluent-icon
-          icon="wifi-off"
+          :icon="iconName"
           class="text-yellow-700/50 dark:text-yellow-50"
           size="18"
         />
         <span
-          class="text-xs tracking-wide font-medium px-2 text-yellow-700/70 dark:text-yellow-50"
+          class="px-2 text-xs font-medium tracking-wide text-yellow-700/70 dark:text-yellow-50"
         >
-          {{ $t('NETWORK.NOTIFICATION.OFFLINE') }}
+          {{ bannerText }}
         </span>
         <woot-button
+          v-if="canRefresh"
           :title="$t('NETWORK.BUTTON.REFRESH')"
           variant="clear"
           size="small"
           color-scheme="warning"
           icon="arrow-clockwise"
-          class="visible transition-all duration-500 ease-in-out ml-1"
           @click="refreshPage"
         />
         <woot-button
@@ -34,55 +141,3 @@
     </div>
   </transition>
 </template>
-
-<script>
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { mapGetters } from 'vuex';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-
-export default {
-  mixins: [globalConfigMixin],
-
-  data() {
-    return {
-      showNotification: !navigator.onLine,
-    };
-  },
-
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-  },
-
-  mounted() {
-    window.addEventListener('offline', this.updateOnlineStatus);
-    this.$emitter.on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
-      // TODO: Remove this after completing the conversation list refetching
-      // TODO: DIRTY FIX : CLEAN UP THIS WITH PROPER FIX, DELAYING THE RECONNECT FOR NOW
-      // THE CABLE IS FIRING IS VERY COMMON AND THUS INTERFERING USER EXPERIENCE
-      setTimeout(() => {
-        this.updateOnlineStatus({ type: 'offline' });
-      }, 4000);
-    });
-  },
-
-  beforeDestroy() {
-    window.removeEventListener('offline', this.updateOnlineStatus);
-  },
-
-  methods: {
-    refreshPage() {
-      window.location.reload();
-    },
-
-    closeNotification() {
-      this.showNotification = false;
-    },
-
-    updateOnlineStatus(event) {
-      if (event.type === 'offline') {
-        this.showNotification = true;
-      }
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/SettingsSection.vue

@@ -1,3 +1,26 @@
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+
 <template>
   <div
     class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
@@ -30,26 +53,3 @@
     </div>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    showBorder: {
-      type: Boolean,
-      default: true,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,14 +1,3 @@
-<template>
-  <woot-button
-    :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
-    @click="onMenuItemClick"
-  />
-</template>
-
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -26,3 +15,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-button
+    :size="size"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
+    @click="onMenuItemClick"
+  />
+</template>

app/javascript/dashboard/components/Snackbar.vue

@@ -1,24 +1,3 @@
-<template>
-  <div>
-    <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
-    >
-      <div class="text-white dark:text-white text-sm font-medium">
-        {{ message }}
-      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
-        >
-          {{ action.message }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 export default {
   props: {
@@ -27,11 +6,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    showButton: Boolean,
-    duration: {
-      type: [String, Number],
-      default: 3000,
-    },
   },
   data() {
     return {
@@ -42,3 +16,24 @@ export default {
   methods: {},
 };
 </script>
+
+<template>
+  <div>
+    <div
+      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
+    >
+      <div class="text-sm font-medium text-white dark:text-white">
+        {{ message }}
+      </div>
+      <div v-if="action">
+        <router-link
+          v-if="action.type == 'link'"
+          :to="action.to"
+          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -1,27 +1,10 @@
-<template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
-  >
-    <woot-snackbar
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
-</template>
-
 <script>
 import WootSnackbar from './Snackbar.vue';
-import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     WootSnackbar,
   },
-  mixins: [alertMixin],
   props: {
     duration: {
       type: Number,
@@ -42,7 +25,7 @@ export default {
     this.$emitter.off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage(message, action) {
+    onNewToastMessage({ message, action }) {
       this.snackMessages.push({
         key: new Date().getTime(),
         message,
@@ -55,3 +38,18 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
+  >
+    <WootSnackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage.key"
+      :message="snackMessage.message"
+      :action="snackMessage.action"
+    />
+  </transition-group>
+</template>

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -1,19 +1,8 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
-import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import adminMixin from 'dashboard/mixins/isAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useAccount } from 'dashboard/composables/useAccount';
+import Banner from 'dashboard/components/ui/Banner.vue';
 
 const EMPTY_SUBSCRIPTION_INFO = {
   status: null,
@@ -22,7 +11,16 @@ const EMPTY_SUBSCRIPTION_INFO = {
 
 export default {
   components: { Banner },
-  mixins: [adminMixin, accountMixin],
+  setup() {
+    const { isAdmin } = useAdmin();
+
+    const { accountId } = useAccount();
+
+    return {
+      accountId,
+      isAdmin,
+    };
+  },
   computed: {
     ...mapGetters({
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
@@ -80,3 +78,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -1,24 +1,10 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    action-button-icon="mail"
-    has-action-button
-    @click="resendVerificationEmail"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import accountMixin from 'dashboard/mixins/account';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin, alertMixin],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -36,8 +22,20 @@ export default {
   methods: {
     resendVerificationEmail() {
       this.$store.dispatch('resendConfirmation');
-      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+      useAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
     },
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="mail"
+    has-action-button
+    @click="resendVerificationEmail"
+  />
+</template>

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -1,28 +1,22 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="primary"
-    :banner-message="bannerMessage"
-    href-link="https://github.com/chatwoot/chatwoot/releases"
-    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
-    has-close-button
-    @close="dismissUpdateBanner"
-  />
-</template>
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { mapGetters } from 'vuex';
-import adminMixin from 'dashboard/mixins/isAdmin';
+import { useAdmin } from 'dashboard/composables/useAdmin';
 import { hasAnUpdateAvailable } from './versionCheckHelper';
 
 export default {
   components: { Banner },
-  mixins: [adminMixin],
   props: {
     latestChatwootVersion: { type: String, default: '' },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    return {
+      isAdmin,
+    };
+  },
   data() {
     return { userDismissedBanner: false };
   },
@@ -72,3 +66,15 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>

app/javascript/dashboard/components/app/UpgradeBanner.vue

@@ -1,24 +1,17 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
-
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import adminMixin from 'dashboard/mixins/isAdmin';
-import accountMixin from 'dashboard/mixins/account';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { differenceInDays } from 'date-fns';
 
 export default {
   components: { Banner },
-  mixins: [adminMixin, accountMixin],
+  setup() {
+    const { accountId } = useAccount();
+    return {
+      accountId,
+    };
+  },
   data() {
     return { conversationMeta: {} };
   },
@@ -87,3 +80,14 @@ export default {
   },
 };
 </script>
+
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>

app/javascript/dashboard/components/base/Hotkey.vue

@@ -1,8 +1,3 @@
-<template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
-    <slot />
-  </kbd>
-</template>
 <script>
 export default {
   props: {
@@ -14,6 +9,12 @@ export default {
 };
 </script>
 
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
+
 <style lang="scss">
 kbd.hotkey {
   @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;

app/javascript/dashboard/components/buttons/Button.vue

@@ -1,18 +1,10 @@
-<template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
-
 <script>
+import Spinner from 'shared/components/Spinner.vue';
+
 export default {
+  components: {
+    Spinner,
+  },
   props: {
     isLoading: {
       type: Boolean,
@@ -42,3 +34,16 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <Spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -1,17 +1,3 @@
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 
@@ -61,6 +47,21 @@ export default {
   },
 };
 </script>
+
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
+
 <style lang="scss" scoped>
 button:disabled {
   @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -1,5 +1,147 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useToggle } from '@vueuse/core';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStore, useStoreGetters } from 'dashboard/composables/store';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import wootConstants from 'dashboard/constants/globals';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+
+const store = useStore();
+const getters = useStoreGetters();
+const { t } = useI18n();
+
+const resolveActionsRef = ref(null);
+const arrowDownButtonRef = ref(null);
+const isLoading = ref(false);
+
+const [showActionsDropdown, toggleDropdown] = useToggle();
+const closeDropdown = () => toggleDropdown(false);
+const openDropdown = () => toggleDropdown(true);
+
+const currentChat = computed(() => getters.getSelectedChat.value);
+
+const isOpen = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.OPEN
+);
+const isPending = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.PENDING
+);
+const isResolved = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.RESOLVED
+);
+const isSnoozed = computed(
+  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
+);
+
+const buttonClass = computed(() => {
+  if (isPending.value) return 'primary';
+  if (isOpen.value) return 'success';
+  if (isResolved.value) return 'warning';
+  return '';
+});
+
+const showAdditionalActions = computed(
+  () => !isPending.value && !isSnoozed.value
+);
+
+const showOpenButton = computed(() => {
+  return isPending.value || isSnoozed.value;
+});
+
+const getConversationParams = () => {
+  const allConversations = document.querySelectorAll(
+    '.conversations-list .conversation'
+  );
+
+  const activeConversation = document.querySelector(
+    'div.conversations-list div.conversation.active'
+  );
+  const activeConversationIndex = [...allConversations].indexOf(
+    activeConversation
+  );
+  const lastConversationIndex = allConversations.length - 1;
+
+  return {
+    all: allConversations,
+    activeIndex: activeConversationIndex,
+    lastIndex: lastConversationIndex,
+  };
+};
+
+const openSnoozeModal = () => {
+  const ninja = document.querySelector('ninja-keys');
+  ninja.open({ parent: 'snooze_conversation' });
+};
+
+const toggleStatus = (status, snoozedUntil) => {
+  closeDropdown();
+  isLoading.value = true;
+  store
+    .dispatch('toggleStatus', {
+      conversationId: currentChat.value.id,
+      status,
+      snoozedUntil,
+    })
+    .then(() => {
+      useAlert(t('CONVERSATION.CHANGE_STATUS'));
+      isLoading.value = false;
+    });
+};
+
+const onCmdOpenConversation = () => {
+  toggleStatus(wootConstants.STATUS_TYPE.OPEN);
+};
+
+const onCmdResolveConversation = () => {
+  toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+};
+
+const keyboardEvents = {
+  'Alt+KeyM': {
+    action: () => arrowDownButtonRef.value?.$el.click(),
+    allowOnFocusedInput: true,
+  },
+  'Alt+KeyE': {
+    action: async () => {
+      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+    },
+  },
+  '$mod+Alt+KeyE': {
+    action: async event => {
+      const { all, activeIndex, lastIndex } = getConversationParams();
+      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+
+      if (activeIndex < lastIndex) {
+        all[activeIndex + 1].click();
+      } else if (all.length > 1) {
+        all[0].click();
+        document.querySelector('.conversations-list').scrollTop = 0;
+      }
+      event.preventDefault();
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents, resolveActionsRef);
+
+useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
+useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
+</script>
+
 <template>
-  <div class="relative flex items-center justify-end resolve-actions">
+  <div
+    ref="resolveActionsRef"
+    class="relative flex items-center justify-end resolve-actions"
+  >
     <div class="button-group">
       <woot-button
         v-if="isOpen"
@@ -21,7 +163,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="showOpenButton"
@@ -31,11 +173,11 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-if="showAdditionalActions"
-        ref="arrowDownButton"
+        ref="arrowDownButtonRef"
         :color-scheme="buttonClass"
         :disabled="isLoading"
         icon="chevron-down"
@@ -46,10 +188,10 @@
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open"
+      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
     >
-      <woot-dropdown-menu class="mb-0">
-        <woot-dropdown-item v-if="!isPending">
+      <WootDropdownMenu class="mb-0">
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
@@ -57,173 +199,27 @@
             icon="snooze"
             @click="() => openSnoozeModal()"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="!isPending">
+        </WootDropdownItem>
+        <WootDropdownItem v-if="!isPending">
           <woot-button
             variant="clear"
             color-scheme="secondary"
             size="small"
             icon="book-clock"
-            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
+            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
+        </WootDropdownItem>
+      </WootDropdownMenu>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-
-import wootConstants from 'dashboard/constants/globals';
-import {
-  CMD_REOPEN_CONVERSATION,
-  CMD_RESOLVE_CONVERSATION,
-} from '../../routes/dashboard/commands/commandBarBusEvents';
-
-export default {
-  components: {
-    WootDropdownItem,
-    WootDropdownMenu,
-  },
-  mixins: [alertMixin, keyboardEventListenerMixins],
-  props: { conversationId: { type: [String, Number], required: true } },
-  data() {
-    return {
-      isLoading: false,
-      showActionsDropdown: false,
-      STATUS_TYPE: wootConstants.STATUS_TYPE,
-    };
-  },
-  computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
-    isOpen() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
-    },
-    isPending() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.PENDING;
-    },
-    isResolved() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.RESOLVED;
-    },
-    isSnoozed() {
-      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
-    },
-    buttonClass() {
-      if (this.isPending) return 'primary';
-      if (this.isOpen) return 'success';
-      if (this.isResolved) return 'warning';
-      return '';
-    },
-    showAdditionalActions() {
-      return !this.isPending && !this.isSnoozed;
-    },
-  },
-  mounted() {
-    this.$emitter.on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
-  },
-  destroyed() {
-    this.$emitter.off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
-  },
-  methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyM': {
-          action: () => this.$refs.arrowDownButton?.$el.click(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyE': this.resolveOrToast,
-        '$mod+Alt+KeyE': async event => {
-          const { all, activeIndex, lastIndex } = this.getConversationParams();
-          await this.resolveOrToast();
-
-          if (activeIndex < lastIndex) {
-            all[activeIndex + 1].click();
-          } else if (all.length > 1) {
-            all[0].click();
-            document.querySelector('.conversations-list').scrollTop = 0;
-          }
-
-          event.preventDefault();
-        },
-      };
-    },
-    getConversationParams() {
-      const allConversations = document.querySelectorAll(
-        '.conversations-list .conversation'
-      );
-
-      const activeConversation = document.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-
-      return {
-        all: allConversations,
-        activeIndex: activeConversationIndex,
-        lastIndex: lastConversationIndex,
-      };
-    },
-    async resolveOrToast() {
-      try {
-        await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-      } catch (error) {
-        // error
-      }
-    },
-    onCmdOpenConversation() {
-      this.toggleStatus(this.STATUS_TYPE.OPEN);
-    },
-    onCmdResolveConversation() {
-      this.toggleStatus(this.STATUS_TYPE.RESOLVED);
-    },
-    showOpenButton() {
-      return this.isResolved || this.isSnoozed;
-    },
-    closeDropdown() {
-      this.showActionsDropdown = false;
-    },
-    openDropdown() {
-      this.showActionsDropdown = true;
-    },
-    toggleStatus(status, snoozedUntil) {
-      this.closeDropdown();
-      this.isLoading = true;
-      this.$store
-        .dispatch('toggleStatus', {
-          conversationId: this.currentChat.id,
-          status,
-          snoozedUntil,
-        })
-        .then(() => {
-          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
-          this.isLoading = false;
-        });
-    },
-    openSnoozeModal() {
-      const ninja = document.querySelector('ninja-keys');
-      ninja.open({ parent: 'snooze_conversation' });
-    },
-  },
-};
-</script>
 <style lang="scss" scoped>
 .dropdown-pane {
-  @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
-
   .dropdown-menu__item {
     @apply mb-0;
   }

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -1,53 +1,6 @@
-<template>
-  <woot-dropdown-menu>
-    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <woot-dropdown-item
-      v-for="status in availabilityStatuses"
-      :key="status.value"
-      class="flex items-baseline"
-    >
-      <woot-button
-        size="small"
-        :color-scheme="status.disabled ? '' : 'secondary'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
-        class-names="status-change--dropdown-button"
-        @click="changeAvailabilityStatus(status.value)"
-      >
-        <availability-status-badge :status="status.value" />
-        {{ status.label }}
-      </woot-button>
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-    <woot-dropdown-item class="m-0 flex items-center justify-between p-2">
-      <div class="flex items-center">
-        <fluent-icon
-          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
-          icon="info"
-          size="14"
-          class="mt-px"
-        />
-
-        <span
-          class="my-0 mx-1 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mt-px mx-1 mb-0"
-        :value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </woot-dropdown-item>
-    <woot-dropdown-divider />
-  </woot-dropdown-menu>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -65,9 +18,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatusBadge,
   },
-
-  mixins: [alertMixin],
-
   data() {
     return {
       isStatusMenuOpened: false,
@@ -129,7 +79,7 @@ export default {
           account_id: this.currentAccountId,
         });
       } catch (error) {
-        this.showAlert(
+        useAlert(
           this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
         );
       } finally {
@@ -139,3 +89,50 @@ export default {
   },
 };
 </script>
+
+<template>
+  <WootDropdownMenu>
+    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <WootDropdownItem
+      v-for="status in availabilityStatuses"
+      :key="status.value"
+      class="flex items-baseline"
+    >
+      <woot-button
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class-names="status-change--dropdown-button"
+        @click="changeAvailabilityStatus(status.value)"
+      >
+        <AvailabilityStatusBadge :status="status.value" />
+        {{ status.label }}
+      </woot-button>
+    </WootDropdownItem>
+    <WootDropdownDivider />
+    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
+      <div class="flex items-center">
+        <fluent-icon
+          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
+          icon="info"
+          size="14"
+          class="mt-px"
+        />
+
+        <span
+          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+        >
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </span>
+      </div>
+
+      <woot-switch
+        size="small"
+        class="mx-1 mt-px mb-0"
+        :value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </WootDropdownItem>
+    <WootDropdownDivider />
+  </WootDropdownMenu>
+</template>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -1,50 +1,20 @@
-<template>
-  <aside class="flex h-full">
-    <primary-sidebar
-      :logo-source="globalConfig.logoThumbnail"
-      :installation-name="globalConfig.installationName"
-      :is-a-custom-branded-instance="isACustomBrandedInstance"
-      :account-id="accountId"
-      :menu-items="primaryMenuItems"
-      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
-    />
-    <secondary-sidebar
-      v-if="showSecondarySidebar"
-      :class="sidebarClassName"
-      :account-id="accountId"
-      :inboxes="inboxes"
-      :labels="labels"
-      :teams="teams"
-      :custom-views="customViews"
-      :menu-config="activeSecondaryMenu"
-      :current-role="currentRole"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
-    />
-  </aside>
-</template>
-
 <script>
+import { ref } from 'vue';
 import { mapGetters } from 'vuex';
-import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import { useRoute, useRouter } from 'dashboard/composables/route';
 
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import router from '../../routes';
+import { routesWithPermissions } from '../../routes';
+import { hasPermissions } from '../../helper/permissionsHelper';
 
 export default {
   components: {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,
@@ -55,6 +25,52 @@ export default {
       default: '',
     },
   },
+  setup(props, { emit }) {
+    const sidebarRef = ref(null);
+    const route = useRoute();
+    const router = useRouter();
+
+    const toggleKeyShortcutModal = () => {
+      emit('openKeyShortcutModal');
+    };
+    const closeKeyShortcutModal = () => {
+      emit('closeKeyShortcutModal');
+    };
+    const isCurrentRouteSameAsNavigation = routeName => {
+      return route.name === routeName;
+    };
+    const navigateToRoute = routeName => {
+      if (!isCurrentRouteSameAsNavigation(routeName)) {
+        router.push({ name: routeName });
+      }
+    };
+    const keyboardEvents = {
+      '$mod+Slash': {
+        action: toggleKeyShortcutModal,
+      },
+      '$mod+Escape': {
+        action: closeKeyShortcutModal,
+      },
+      'Alt+KeyC': {
+        action: () => navigateToRoute('home'),
+      },
+      'Alt+KeyV': {
+        action: () => navigateToRoute('contacts_dashboard'),
+      },
+      'Alt+KeyR': {
+        action: () => navigateToRoute('account_overview_reports'),
+      },
+      'Alt+KeyS': {
+        action: () => navigateToRoute('agent_list'),
+      },
+    };
+    useKeyboardEvents(keyboardEvents, sidebarRef);
+
+    return {
+      toggleKeyShortcutModal,
+      sidebarRef,
+    };
+  },
   data() {
     return {
       showOptionsMenu: false,
@@ -64,7 +80,6 @@ export default {
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
-      currentRole: 'getCurrentRole',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       inboxes: 'inboxes/getInboxes',
@@ -98,9 +113,13 @@ export default {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
+      const userPermissions = this.currentUser.permissions;
       const menuItems = this.sideMenuConfig.primaryMenu;
       return menuItems.filter(menuItem => {
-        const isAvailableForTheUser = menuItem.roles.includes(this.currentRole);
+        const isAvailableForTheUser = hasPermissions(
+          routesWithPermissions[menuItem.toStateName],
+          userPermissions
+        );
 
         if (!isAvailableForTheUser) {
           return false;
@@ -159,50 +178,48 @@ export default {
         this.$store.dispatch('customViews/get', this.activeCustomView);
       }
     },
-    toggleKeyShortcutModal() {
-      this.$emit('open-key-shortcut-modal');
-    },
-    closeKeyShortcutModal() {
-      this.$emit('close-key-shortcut-modal');
-    },
-    getKeyboardEvents() {
-      return {
-        '$mod+Slash': this.toggleKeyShortcutModal,
-        '$mod+Escape': this.closeKeyShortcutModal,
-        'Alt+KeyC': {
-          action: () => this.navigateToRoute('home'),
-        },
-        'Alt+KeyV': {
-          action: () => this.navigateToRoute('contacts_dashboard'),
-        },
-        'Alt+KeyR': {
-          action: () => this.navigateToRoute('account_overview_reports'),
-        },
-        'Alt+KeyS': {
-          action: () => this.navigateToRoute('agent_list'),
-        },
-      };
-    },
-    navigateToRoute(routeName) {
-      if (!this.isCurrentRouteSameAsNavigation(routeName)) {
-        router.push({ name: routeName });
-      }
-    },
-    isCurrentRouteSameAsNavigation(routeName) {
-      return this.$route.name === routeName;
-    },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.$emit('toggle-account-modal');
+      this.$emit('toggleAccountModal');
     },
     showAddLabelPopup() {
-      this.$emit('show-add-label-popup');
+      this.$emit('showAddLabelPopup');
     },
     openNotificationPanel() {
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
+
+<template>
+  <aside ref="sidebarRef" class="flex h-full">
+    <PrimarySidebar
+      :logo-source="globalConfig.logoThumbnail"
+      :installation-name="globalConfig.installationName"
+      :is-a-custom-branded-instance="isACustomBrandedInstance"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
+    />
+    <SecondarySidebar
+      v-if="showSecondarySidebar"
+      :class="sidebarClassName"
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :labels="labels"
+      :teams="teams"
+      :custom-views="customViews"
+      :menu-config="activeSecondaryMenu"
+      :current-user="currentUser"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
+    />
+  </aside>
+</template>

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -9,7 +9,6 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.INBOX_VIEW,
     toState: frontendURL(`accounts/${accountId}/inbox-view`),
     toStateName: 'inbox_view',
-    roles: ['administrator', 'agent'],
   },
   {
     icon: 'chat',
@@ -17,7 +16,14 @@ const primaryMenuItems = accountId => [
     label: 'CONVERSATIONS',
     toState: frontendURL(`accounts/${accountId}/dashboard`),
     toStateName: 'home',
-    roles: ['administrator', 'agent'],
+  },
+  {
+    icon: 'captain',
+    key: 'captain',
+    label: 'CAPTAIN',
+    featureFlag: FEATURE_FLAGS.CAPTAIN,
+    toState: frontendURL(`accounts/${accountId}/captain`),
+    toStateName: 'captain',
   },
   {
     icon: 'book-contacts',
@@ -26,7 +32,6 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
     toStateName: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
   },
   {
     icon: 'arrow-trending-lines',
@@ -34,8 +39,7 @@ const primaryMenuItems = accountId => [
     label: 'REPORTS',
     featureFlag: FEATURE_FLAGS.REPORTS,
     toState: frontendURL(`accounts/${accountId}/reports`),
-    toStateName: 'settings_account_reports',
-    roles: ['administrator'],
+    toStateName: 'account_overview_reports',
   },
   {
     icon: 'megaphone',
@@ -44,7 +48,6 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
     toStateName: 'ongoing_campaigns',
-    roles: ['administrator'],
   },
   {
     icon: 'library',
@@ -54,7 +57,6 @@ const primaryMenuItems = accountId => [
     alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
-    roles: ['administrator'],
   },
   {
     icon: 'settings',
@@ -62,7 +64,6 @@ const primaryMenuItems = accountId => [
     label: 'SETTINGS',
     toState: frontendURL(`accounts/${accountId}/settings`),
     toStateName: 'settings_home',
-    roles: ['administrator', 'agent'],
   },
 ];
 

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -24,7 +24,6 @@ const settings = accountId => ({
     'settings_inbox_list',
     'settings_inbox_new',
     'settings_inbox_show',
-    'settings_inbox',
     'settings_inboxes_add_agents',
     'settings_inboxes_page_channel',
     'settings_integrations_dashboard_apps',
@@ -46,6 +45,9 @@ const settings = accountId => ({
       icon: 'briefcase',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/general`),
       toStateName: 'general_settings_index',
     },
@@ -53,6 +55,9 @@ const settings = accountId => ({
       icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
       featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
@@ -61,6 +66,9 @@ const settings = accountId => ({
       icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
       featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
@@ -69,6 +77,9 @@ const settings = accountId => ({
       icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
       featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
@@ -77,6 +88,9 @@ const settings = accountId => ({
       icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
       featureFlag: FEATURE_FLAGS.LABELS,
@@ -85,6 +99,9 @@ const settings = accountId => ({
       icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(
         `accounts/${accountId}/settings/custom-attributes/list`
       ),
@@ -95,6 +112,9 @@ const settings = accountId => ({
       icon: 'automation',
       label: 'AUTOMATION',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
       featureFlag: FEATURE_FLAGS.AUTOMATIONS,
@@ -103,6 +123,9 @@ const settings = accountId => ({
       icon: 'bot',
       label: 'AGENT_BOTS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
       toStateName: 'agent_bots',
@@ -112,6 +135,9 @@ const settings = accountId => ({
       icon: 'flash-settings',
       label: 'MACROS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/macros`),
       toStateName: 'macros_wrapper',
       featureFlag: FEATURE_FLAGS.MACROS,
@@ -120,6 +146,9 @@ const settings = accountId => ({
       icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       toState: frontendURL(
         `accounts/${accountId}/settings/canned-response/list`
       ),
@@ -130,15 +159,10 @@ const settings = accountId => ({
       icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
-      toStateName: 'settings_integrations',
-      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
-    },
-    {
-      icon: 'star-emphasis',
-      label: 'APPLICATIONS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
@@ -146,16 +170,21 @@ const settings = accountId => ({
       icon: 'key',
       label: 'AUDIT_LOGS',
       hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
+      meta: {
+        permissions: ['administrator'],
+      },
+      toState: frontendURL(`accounts/${accountId}/settings/audit-logs/list`),
       toStateName: 'auditlogs_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
-      beta: true,
     },
     {
       icon: 'document-list-clock',
       label: 'SLA',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
       toStateName: 'sla_list',
       isEnterpriseOnly: true,
@@ -166,6 +195,9 @@ const settings = accountId => ({
       icon: 'credit-card-person',
       label: 'BILLING',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/billing`),
       toStateName: 'billing_settings_index',
       showOnlyOnCloud: true,

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -1,35 +1,3 @@
-<template>
-  <div
-    v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
-    @mouseover="setShowSwitch"
-    @mouseleave="resetShowSwitch"
-  >
-    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p
-      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
-    >
-      {{ account.name }}
-    </p>
-    <transition name="fade">
-      <div
-        v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
-      >
-        <div class="my-0 mx-2">
-          <woot-button
-            variant="clear"
-            size="tiny"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR.SWITCH') }}
-          </woot-button>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 
@@ -56,6 +24,40 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p
+      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
+    >
+      {{ account.name }}
+    </p>
+    <transition name="fade">
+      <div
+        v-if="showSwitchButton"
+        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
+      >
+        <div class="mx-2 my-0">
+          <woot-button
+            variant="clear"
+            size="tiny"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR.SWITCH') }}
+          </woot-button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
 <style scoped>
 @tailwind components;
 @layer components {

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -1,62 +1,3 @@
-<template>
-  <woot-modal
-    :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
-  >
-    <woot-modal-header
-      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
-    />
-    <div class="px-8 py-4">
-      <div
-        v-for="account in currentUser.accounts"
-        :id="`account-${account.id}`"
-        :key="account.id"
-        class="pt-0 pb-0"
-      >
-        <button
-          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
-          @click="onChangeAccount(account.id)"
-        >
-          <span class="w-full">
-            <label :for="account.name" class="text-left rtl:text-right">
-              <div
-                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
-              >
-                {{ account.name }}
-              </div>
-              <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
-              >
-                {{ account.role }}
-              </div>
-            </label>
-          </span>
-          <fluent-icon
-            v-show="account.id === accountId"
-            class="text-slate-800 dark:text-slate-100"
-            icon="checkmark-circle"
-            type="solid"
-            size="24"
-          />
-        </button>
-      </div>
-    </div>
-
-    <div
-      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
-    >
-      <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
-      >
-        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-      </button>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -82,3 +23,62 @@ export default {
   },
 };
 </script>
+
+<template>
+  <woot-modal
+    :show="showAccountModal"
+    :on-close="() => $emit('closeAccountModal')"
+  >
+    <woot-modal-header
+      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
+      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    />
+    <div class="px-8 py-4">
+      <div
+        v-for="account in currentUser.accounts"
+        :id="`account-${account.id}`"
+        :key="account.id"
+        class="pt-0 pb-0"
+      >
+        <button
+          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          @click="onChangeAccount(account.id)"
+        >
+          <span class="w-full">
+            <label :for="account.name" class="text-left rtl:text-right">
+              <div
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
+              >
+                {{ account.name }}
+              </div>
+              <div
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+              >
+                {{ account.role }}
+              </div>
+            </label>
+          </span>
+          <fluent-icon
+            v-show="account.id === accountId"
+            class="text-slate-800 dark:text-slate-100"
+            icon="checkmark-circle"
+            type="solid"
+            size="24"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="globalConfig.createNewAccountFromDashboard"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
+    >
+      <button
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
+      >
+        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+      </button>
+    </div>
+  </woot-modal>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -1,60 +1,10 @@
-<template>
-  <woot-modal
-    :show="show"
-    :on-close="() => $emit('close-account-create-modal')"
-  >
-    <div class="h-auto overflow-auto flex flex-col">
-      <woot-modal-header
-        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
-        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
-      />
-      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
-        <div class="items-center rounded-md flex alert">
-          <div class="ml-1 mr-3">
-            <fluent-icon icon="warning" />
-          </div>
-          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
-        </div>
-      </div>
-
-      <form class="flex flex-col w-full" @submit.prevent="addAccount">
-        <div class="w-full">
-          <label :class="{ error: $v.accountName.$error }">
-            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="accountName"
-              type="text"
-              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="$v.accountName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                $v.accountName.$invalid ||
-                $v.accountName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-              button-class="large expanded"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
-
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';
+import { useAlert } from 'dashboard/composables';
 
 export default {
-  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -65,6 +15,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',
@@ -87,17 +40,64 @@ export default {
         const account_id = await this.$store.dispatch('accounts/create', {
           account_name: this.accountName,
         });
-        this.$emit('close-account-create-modal');
-        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        this.$emit('closeAccountCreateModal');
+        useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
         if (error.response.status === 422) {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+          useAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
         } else {
-          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+          useAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
         }
       }
     },
   },
 };
 </script>
+
+<template>
+  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+      />
+      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
+        <div class="flex items-center rounded-md alert">
+          <div class="ml-1 mr-3">
+            <fluent-icon icon="warning" />
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
+
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
+          <label :class="{ error: v$.accountName.$error }">
+            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="accountName"
+              type="text"
+              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+              @input="v$.accountName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+              button-class="large expanded"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -1,19 +1,3 @@
-<template>
-  <woot-button
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="items-center flex rounded-full"
-    @click="handleClick"
-  >
-    <thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-    />
-  </woot-button>
-</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
@@ -33,8 +17,25 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('toggle-menu');
+      this.$emit('toggleMenu');
     },
   },
 };
 </script>
+
+<template>
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="flex items-center rounded-full"
+    @click="handleClick"
+  >
+    <Thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
+    />
+  </woot-button>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue

@@ -1,10 +1,3 @@
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -30,3 +23,11 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="w-8 h-8">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,7 +1,38 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    unreadCount() {
+      if (!this.notificationMetadata.unreadCount) {
+        return '';
+      }
+
+      return this.notificationMetadata.unreadCount < 100
+        ? `${this.notificationMetadata.unreadCount}`
+        : '99+';
+    },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('openNotificationPanel');
+      }
+    },
+  },
+};
+</script>
+
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,
@@ -23,34 +54,3 @@
     </button>
   </div>
 </template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return '';
-      }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? `${this.notificationMetadata.unreadCount}`
-        : '99+';
-    },
-    isNotificationPanelActive() {
-      return this.$route.name === 'notifications_index';
-    },
-  },
-  methods: {
-    openNotificationPanel() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
-      }
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -1,110 +1,3 @@
-<template>
-  <transition name="menu-slide">
-    <div
-      v-if="show"
-      v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
-      :class="{ 'block visible': show }"
-    >
-      <availability-status />
-      <woot-dropdown-menu>
-        <woot-dropdown-item v-if="showChangeAccountOption">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="chat-help"
-            @click="$emit('show-support-chat-window')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="keyboard"
-            @click="handleKeyboardHelpClick"
-          >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <router-link
-            v-slot="{ href, isActive, navigate }"
-            :to="`/app/accounts/${accountId}/profile/settings`"
-            custom
-          >
-            <a
-              :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-              :class="{ 'is-active': isActive }"
-              @click="e => handleProfileSettingClick(e, navigate)"
-            >
-              <fluent-icon icon="person" size="14" class="icon icon--font" />
-              <span class="button__content">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </span>
-            </a>
-          </router-link>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="appearance"
-            @click="openAppearanceOptions"
-          >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-          </woot-button>
-        </woot-dropdown-item>
-        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
-          <a
-            href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-            @click="$emit('close')"
-          >
-            <fluent-icon
-              icon="content-settings"
-              size="14"
-              class="icon icon--font"
-            />
-            <span class="button__content">
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-            </span>
-          </a>
-        </woot-dropdown-item>
-        <woot-dropdown-item>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="power"
-            @click="logout"
-          >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </woot-button>
-        </woot-dropdown-item>
-      </woot-dropdown-menu>
-    </div>
-  </transition>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
@@ -145,7 +38,7 @@ export default {
       navigate(e);
     },
     handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
       this.$emit('close');
     },
     logout() {
@@ -161,3 +54,110 @@ export default {
   },
 };
 </script>
+
+<template>
+  <transition name="menu-slide">
+    <div
+      v-if="show"
+      v-on-clickaway="onClickAway"
+      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
+      :class="{ 'block visible': show }"
+    >
+      <AvailabilityStatus />
+      <WootDropdownMenu>
+        <WootDropdownItem v-if="showChangeAccountOption">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="arrow-swap"
+            @click="$emit('toggleAccounts')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="chat-help"
+            @click="$emit('showSupportChatWindow')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="keyboard"
+            @click="handleKeyboardHelpClick"
+          >
+            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <router-link
+            v-slot="{ href, isActive, navigate }"
+            :to="`/app/accounts/${accountId}/profile/settings`"
+            custom
+          >
+            <a
+              :href="href"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+              :class="{ 'is-active': isActive }"
+              @click="e => handleProfileSettingClick(e, navigate)"
+            >
+              <fluent-icon icon="person" size="14" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
+            </a>
+          </router-link>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </WootDropdownItem>
+        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
+          <a
+            href="/super_admin"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            @click="$emit('close')"
+          >
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
+          </a>
+        </WootDropdownItem>
+        <WootDropdownItem>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="power"
+            @click="logout"
+          >
+            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+          </woot-button>
+        </WootDropdownItem>
+      </WootDropdownMenu>
+    </div>
+  </transition>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -1,43 +1,3 @@
-<template>
-  <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
-  >
-    <div class="flex flex-col items-center">
-      <logo
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <primary-nav-item
-        v-for="menuItem in menuItems"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <primary-nav-item
-        v-if="!isACustomBrandedInstance"
-        icon="book-open-globe"
-        name="DOCS"
-        :open-in-new-page="true"
-        :to="helpDocsURL"
-      />
-      <notification-bell @open-notification-panel="openNotificationPanel" />
-      <agent-details @toggle-menu="toggleOptions" />
-      <options-menu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
 <script>
 import Logo from './Logo.vue';
 import PrimaryNavItem from './PrimaryNavItem.vue';
@@ -94,15 +54,56 @@ export default {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
       this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
+
+<template>
+  <div
+    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
+  >
+    <div class="flex flex-col items-center">
+      <Logo
+        :source="logoSource"
+        :name="installationName"
+        :account-id="accountId"
+        class="m-4 mb-10"
+      />
+      <PrimaryNavItem
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
+      />
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
+      <PrimaryNavItem
+        v-if="!isACustomBrandedInstance"
+        icon="book-open-globe"
+        name="DOCS"
+        open-in-new-page
+        :to="helpDocsURL"
+      />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
+      <OptionsMenu
+        :show="showOptionsMenu"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -1,33 +1,3 @@
-<template>
-  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
-    <a
-      v-tooltip.right="$t(`SIDEBAR.${name}`)"
-      :href="href"
-      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
-      :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isActive || isChildMenuActive,
-      }"
-      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
-      :target="openInNewPage ? '_blank' : undefined"
-      @click="navigate"
-    >
-      <fluent-icon
-        :icon="icon"
-        :class="{
-          'text-woot-500': isActive || isChildMenuActive,
-        }"
-      />
-      <span class="sr-only">{{ name }}</span>
-      <span
-        v-if="count"
-        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
-      >
-        {{ count }}
-      </span>
-    </a>
-  </router-link>
-</template>
 <script>
 export default {
   props: {
@@ -58,3 +28,34 @@ export default {
   },
 };
 </script>
+
+<template>
+  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+    <a
+      v-tooltip.right="$t(`SIDEBAR.${name}`)"
+      :href="href"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      :class="{
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isActive || isChildMenuActive,
+      }"
+      :rel="openInNewPage ? 'noopener noreferrer nofollow' : undefined"
+      :target="openInNewPage ? '_blank' : undefined"
+      @click="navigate"
+    >
+      <fluent-icon
+        :icon="icon"
+        :class="{
+          'text-woot-500': isActive || isChildMenuActive,
+        }"
+      />
+      <span class="sr-only">{{ name }}</span>
+      <span
+        v-if="count"
+        class="text-black-900 bg-yellow-500 absolute -top-1 -right-1"
+      >
+        {{ count }}
+      </span>
+    </a>
+  </router-link>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -1,34 +1,11 @@
-<template>
-  <div
-    v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
-  >
-    <account-context @toggle-accounts="toggleAccountModal" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
-    >
-      <secondary-nav-item
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <secondary-nav-item
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
+import { hasPermissions } from '../../../helper/permissionsHelper';
+import { routesWithPermissions } from '../../../routes';
 
 export default {
   components: {
@@ -60,9 +37,9 @@ export default {
       type: Object,
       default: () => {},
     },
-    currentRole: {
-      type: String,
-      default: '',
+    currentUser: {
+      type: Object,
+      default: () => {},
     },
     isOnChatwootCloud: {
       type: Boolean,
@@ -80,16 +57,16 @@ export default {
       return this.customViews.filter(view => view.filter_type === 'contact');
     },
     accessibleMenuItems() {
-      if (!this.currentRole) {
-        return [];
-      }
-      const menuItemsFilteredByRole = this.menuConfig.menuItems.filter(
-        menuItem =>
-          window.roleWiseRoutes[this.currentRole].indexOf(
-            menuItem.toStateName
-          ) > -1
+      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
+        menuItem => {
+          const { permissions: userPermissions = [] } = this.currentUser;
+          return hasPermissions(
+            routesWithPermissions[menuItem.toStateName],
+            userPermissions
+          );
+        }
       );
-      return menuItemsFilteredByRole.filter(item => {
+      return menuItemsFilteredByPermissions.filter(item => {
         if (item.showOnlyOnCloud) {
           return this.isOnChatwootCloud;
         }
@@ -246,10 +223,10 @@ export default {
   },
   methods: {
     showAddLabelPopup() {
-      this.$emit('add-label');
+      this.$emit('addLabel');
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     showNewLink(featureFlag) {
       return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -257,3 +234,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div
+    v-if="hasSecondaryMenu"
+    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
+  >
+    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 mb-0 ml-0 list-none"
+    >
+      <SecondaryNavItem
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <SecondaryNavItem
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @addLabel="showAddLabelPopup"
+      />
+    </transition-group>
+  </div>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -1,3 +1,55 @@
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
+    showChildCount: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    showIcon() {
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
+    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
+
 <template>
   <router-link
     v-slot="{ href, isActive, navigate }"
@@ -78,54 +130,3 @@
     </li>
   </router-link>
 </template>
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -1,100 +1,7 @@
-<template>
-  <li v-show="isMenuItemVisible" class="mt-1">
-    <div v-if="hasSubMenu" class="flex justify-between">
-      <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
-      >
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </span>
-      <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
-      </div>
-    </div>
-    <router-link
-      v-else
-      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
-      :class="computedClass"
-      :to="menuItem && menuItem.toState"
-    >
-      <fluent-icon
-        :icon="menuItem.icon"
-        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        size="14"
-      />
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
-        :class="{
-          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
-          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
-          'bg-slate-50 dark:bg-slate-700': !isActiveView,
-        }"
-      >
-        {{ `${menuItem.count}` }}
-      </span>
-      <span
-        v-if="menuItem.beta"
-        data-view-component="true"
-        label="Beta"
-        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
-      >
-        {{ $t('SIDEBAR.BETA') }}
-      </span>
-    </router-link>
-
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <secondary-child-nav-item
-        v-for="child in menuItem.children"
-        :key="child.id"
-        :to="child.toState"
-        :label="child.label"
-        :label-color="child.color"
-        :should-truncate="child.truncateLabel"
-        :icon="computedInboxClass(child)"
-        :warning-icon="computedInboxErrorClass(child)"
-        :show-child-count="showChildCount(child.count)"
-        :child-item-count="child.count"
-      />
-      <router-link
-        v-if="showItem(menuItem)"
-        v-slot="{ href, navigate }"
-        :to="menuItem.toState"
-        custom
-      >
-        <li class="pl-1">
-          <a :href="href">
-            <woot-button
-              size="tiny"
-              variant="clear"
-              color-scheme="secondary"
-              icon="add"
-              :data-testid="menuItem.dataTestid"
-              @click="e => newLinkClick(e, navigate)"
-            >
-              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-            </woot-button>
-          </a>
-        </li>
-      </router-link>
-    </ul>
-  </li>
-</template>
-
 <script>
 import { mapGetters } from 'vuex';
-
-import adminMixin from '../../../mixins/isAdmin';
-import configMixin from 'shared/mixins/configMixin';
+import { useAdmin } from 'dashboard/composables/useAdmin';
+import { useConfig } from 'dashboard/composables/useConfig';
 import {
   getInboxClassByType,
   getInboxWarningIconClass,
@@ -105,16 +12,24 @@ import {
   isOnMentionsView,
   isOnUnattendedView,
 } from '../../../store/modules/conversations/helpers/actionHelpers';
+import Policy from '../../policy.vue';
 
 export default {
-  components: { SecondaryChildNavItem },
-  mixins: [adminMixin, configMixin],
+  components: { SecondaryChildNavItem, Policy },
   props: {
     menuItem: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup() {
+    const { isAdmin } = useAdmin();
+    const { isEnterprise } = useConfig();
+    return {
+      isAdmin,
+      isEnterprise,
+    };
+  },
   computed: {
     ...mapGetters({
       activeInbox: 'getSelectedInbox',
@@ -255,7 +170,7 @@ export default {
       } else if (this.menuItem.showModalForNewItem) {
         if (this.menuItem.modalName === 'AddLabel') {
           e.preventDefault();
-          this.$emit('add-label');
+          this.$emit('addLabel');
         }
       }
     },
@@ -271,3 +186,97 @@ export default {
   },
 };
 </script>
+
+<template>
+  <li v-show="isMenuItemVisible" class="mt-1">
+    <div v-if="hasSubMenu" class="flex justify-between">
+      <span
+        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+      >
+        {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      </span>
+      <div v-if="menuItem.showNewButton" class="flex items-center">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
+      </div>
+    </div>
+    <router-link
+      v-else
+      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      :class="computedClass"
+      :to="menuItem && menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      <span
+        v-if="showChildCount(menuItem.count)"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        :class="{
+          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
+          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
+          'bg-slate-50 dark:bg-slate-700': !isActiveView,
+        }"
+      >
+        {{ `${menuItem.count}` }}
+      </span>
+      <span
+        v-if="menuItem.beta"
+        data-view-component="true"
+        label="Beta"
+        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+      >
+        {{ $t('SIDEBAR.BETA') }}
+      </span>
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+      <SecondaryChildNavItem
+        v-for="child in menuItem.children"
+        :key="child.id"
+        :to="child.toState"
+        :label="child.label"
+        :label-color="child.color"
+        :should-truncate="child.truncateLabel"
+        :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
+        :show-child-count="showChildCount(child.count)"
+        :child-item-count="child.count"
+      />
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
+    </ul>
+  </li>
+</template>

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -1,12 +1,12 @@
-import AccountSelector from '../AccountSelector';
+import AccountSelector from '../AccountSelector.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 
 import i18n from 'dashboard/i18n';
-import WootModal from 'dashboard/components/Modal';
-import WootModalHeader from 'dashboard/components/ModalHeader';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import WootModal from 'dashboard/components/Modal.vue';
+import WootModalHeader from 'dashboard/components/ModalHeader.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);

app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js

@@ -1,12 +1,12 @@
-import AgentDetails from '../AgentDetails';
+import AgentDetails from '../AgentDetails.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
 
 import i18n from 'dashboard/i18n';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
-import WootButton from 'dashboard/components/ui/WootButton';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import WootButton from 'dashboard/components/ui/WootButton.vue';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);

app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js

@@ -1,13 +1,15 @@
-import NotificationBell from '../NotificationBell';
+import NotificationBell from '../NotificationBell.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
 import i18n from 'dashboard/i18n';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
+localVue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
@@ -27,7 +29,7 @@ describe('notificationBell', () => {
 
   beforeEach(() => {
     actions = {
-      showNotification: jest.fn(),
+      showNotification: vi.fn(),
     };
     modules = {
       auth: {

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -2,15 +2,21 @@ import AvailabilityStatus from '../AvailabilityStatus.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
+
+import WootButton from 'dashboard/components/ui/WootButton.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
-import WootButton from 'dashboard/components/ui/WootButton';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import i18n from 'dashboard/i18n';
 
 const localVue = createLocalVue();
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});
 localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.component('woot-button', WootButton);
@@ -18,12 +24,14 @@ localVue.component('woot-dropdown-header', WootDropdownHeader);
 localVue.component('woot-dropdown-menu', WootDropdownMenu);
 localVue.component('woot-dropdown-divider', WootDropdownDivider);
 localVue.component('woot-dropdown-item', WootDropdownItem);
+localVue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
 
 describe('AvailabilityStatus', () => {
   const currentAvailability = 'online';
   const currentAccountId = '1';
+  const currentUserAutoOffline = false;
   let store = null;
   let actions = null;
   let modules = null;
@@ -31,7 +39,7 @@ describe('AvailabilityStatus', () => {
 
   beforeEach(() => {
     actions = {
-      updateAvailability: jest.fn(() => {
+      updateAvailability: vi.fn(() => {
         return Promise.resolve();
       }),
     };
@@ -41,6 +49,7 @@ describe('AvailabilityStatus', () => {
         getters: {
           getCurrentUserAvailability: () => currentAvailability,
           getCurrentAccountId: () => currentAccountId,
+          getCurrentUserAutoOffline: () => currentUserAutoOffline,
         },
       },
     };

app/javascript/dashboard/components/policy.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { useStoreGetters } from 'dashboard/composables/store';
+import { computed } from 'vue';
+import { hasPermissions } from '../helper/permissionsHelper';
+const props = defineProps({
+  permissions: {
+    type: Array,
+    required: true,
+  },
+});
+
+const getters = useStoreGetters();
+const user = getters.getCurrentUser.value;
+const hasPermission = computed(() =>
+  hasPermissions(props.permissions, user.permissions)
+);
+</script>
+
+<template>
+  <div v-if="hasPermission">
+    <slot />
+  </div>
+</template>

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import SidemenuIcon from '../SidemenuIcon';
+import SidemenuIcon from '../SidemenuIcon.vue';
 
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`SidemenuIcon matches snapshot 1`] = `
+exports[`SidemenuIcon > matches snapshot 1`] = `
 <button
   class="-ml-3 text-black-900 dark:text-slate-300"
   color-scheme="secondary"