fix: attachment initalization issues

The disconnect threshold is added to account for delays in identifying disconnections (for example, the websocket disconnection takes up to 3 seconds) while fetching the latest updated conversations or messages.

In this case, the cable disconnection event takes about 3 seconds to fire. If there was a conversation which was created in this 3 second, it would not be displayed in the UI until the refresh.

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

.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

.eslintrc.js

@@ -65,10 +65,10 @@ module.exports = {
   },
   env: {
     browser: true,
-    jest: true,
     node: true,
   },
   globals: {
     bus: true,
+    vi: true,
   },
 };

.ruby-version

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

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.18.1', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.15.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.1', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.4'
+gem 'sidekiq', '>= 7.3.0'
 # 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.3'
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false

Gemfile.lock

@@ -33,70 +33,70 @@ 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)
@@ -148,15 +148,15 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
     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,14 @@ 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)
       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 +185,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 +209,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 +228,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)
@@ -237,8 +242,9 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.7.4)
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-mashify (0.1.1)
@@ -246,8 +252,7 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    faraday-net_http (3.0.2)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
@@ -316,10 +321,7 @@ GEM
     google-cloud-translate-v3 (0.6.0)
       gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.3)
     google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.3-x86_64-linux)
     googleapis-common-protos (1.4.0)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
@@ -335,16 +337,7 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-linux)
+    grpc (1.63.0-arm64-darwin)
       google-protobuf (~> 3.25)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
@@ -355,7 +348,6 @@ GEM
     hana (1.3.7)
     hashdiff (1.0.1)
     hashie (5.0.0)
-    hkdf (1.0.0)
     http (5.1.1)
       addressable (~> 2.8)
       http-cookie (~> 1.0)
@@ -369,7 +361,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -393,8 +385,7 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
-    jwt (2.8.1)
-      base64
+    jwt (2.7.0)
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
       kaminari-actionview (= 1.2.2)
@@ -417,15 +408,8 @@ 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)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.8.2.0.0-x86_64-linux)
+    libdatadog (7.0.0.1.0)
+    libddwaf (1.14.0.0.0-arm64-darwin)
       ffi (~> 1.0)
     line-bot-api (1.28.0)
     liquid (5.4.0)
@@ -435,6 +419,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)
@@ -454,14 +439,13 @@ GEM
     meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    method_source (1.0.0)
     mime-types (3.4.1)
       mime-types-data (~> 3.2015)
     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)
+    minitest (5.24.1)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -470,11 +454,9 @@ GEM
     multipart-post (2.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
-    net-http (0.4.1)
-      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 +472,7 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.16.5)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
-    nokogiri (1.16.5-arm64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.6-arm64-darwin)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -527,7 +502,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)
@@ -551,7 +526,7 @@ GEM
     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)
@@ -561,28 +536,27 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (3.2.0)
-      base64 (>= 0.1.0)
+    rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.6)
       rack
     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,21 +564,21 @@ 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)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    rake (13.2.1)
+    rake (13.1.0)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       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 +602,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.1)
+      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.3)
       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 +678,24 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.17.3)
+    sentry-rails (5.18.1)
       railties (>= 5.0)
-      sentry-ruby (~> 5.17.3)
-    sentry-ruby (5.17.3)
+      sentry-ruby (~> 5.18.1)
+    sentry-ruby (5.18.1)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.17.3)
-      sentry-ruby (~> 5.17.3)
+    sentry-sidekiq (5.18.1)
+      sentry-ruby (~> 5.18.1)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.4)
+    sidekiq (7.3.0)
       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)
@@ -762,7 +737,7 @@ GEM
     strscan (3.1.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.3.0)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
@@ -787,12 +762,11 @@ GEM
     unf_ext (0.0.8.2)
     unicode-display_width (2.4.2)
     uniform_notifier (1.16.0)
-    uri (0.13.0)
     uri_template (0.7.0)
     valid_email2 (4.0.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.4)
+    version_gem (1.1.3)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -800,8 +774,7 @@ 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)
@@ -821,18 +794,10 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.14)
+    zeitwerk (2.6.16)
 
 PLATFORMS
-  arm64-darwin-20
-  arm64-darwin-21
-  arm64-darwin-22
-  ruby
-  x86_64-darwin-18
-  x86_64-darwin-20
-  x86_64-darwin-21
-  x86_64-darwin-22
-  x86_64-linux
+  arm64-darwin-23
 
 DEPENDENCIES
   active_record_query_trace
@@ -863,7 +828,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 +883,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.3)
   rspec_junit_formatter
   rubocop
   rubocop-performance
@@ -933,11 +898,11 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.14.0)
+  sentry-rails (>= 5.18.1)
   sentry-ruby
-  sentry-sidekiq (>= 5.15.0)
+  sentry-sidekiq (>= 5.18.1)
   shoulda-matchers
-  sidekiq (>= 7.2.4)
+  sidekiq (>= 7.3.0)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
@@ -955,14 +920,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.14

VERSION_CW

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

VERSION_CWCTL

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

app/builders/v2/base_conversation_report_builder.rb

@@ -0,0 +1,30 @@
+class V2::BaseConversationReportBuilder
+  pattr_initialize :account, :params
+
+  private
+
+  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
+  COUNT_METRICS = %w[
+    conversations_count
+    incoming_messages_count
+    outgoing_messages_count
+    resolutions_count
+    bot_resolutions_count
+    bot_handoffs_count
+  ].freeze
+
+  def builder_class(metric)
+    case metric
+    when *AVG_METRICS
+      V2::Reports::Timeseries::AverageReportBuilder
+    when *COUNT_METRICS
+      V2::Reports::Timeseries::CountReportBuilder
+    end
+  end
+
+  def log_invalid_metric
+    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
+
+    {}
+  end
+end

app/builders/v2/conversation_metric_builder.rb

@@ -0,0 +1,30 @@
+class V2::ConversationMetricBuilder < V2::BaseConversationReportBuilder
+  def summary
+    {
+      conversations_count: count('conversations_count'),
+      incoming_messages_count: count('incoming_messages_count'),
+      outgoing_messages_count: count('outgoing_messages_count'),
+      avg_first_response_time: count('avg_first_response_time'),
+      avg_resolution_time: count('avg_resolution_time'),
+      resolutions_count: count('resolutions_count'),
+      reply_time: count('reply_time')
+    }
+  end
+
+  def bot_summary
+    {
+      bot_resolutions_count: count('bot_resolutions_count'),
+      bot_handoffs_count: count('bot_handoffs_count')
+    }
+  end
+
+  private
+
+  def count(metric)
+    builder_class(metric).new(account, builder_params(metric)).aggregate_value
+  end
+
+  def builder_params(metric)
+    params.merge({ metric: metric })
+  end
+end

app/builders/v2/conversation_report_builder.rb

@@ -0,0 +1,25 @@
+class V2::ConversationReportBuilder < V2::BaseConversationReportBuilder
+  include DateRangeHelper
+
+  pattr_initialize :account, :params
+
+  def timeseries
+    perform_action(:timeseries)
+  end
+
+  def aggregate_value
+    perform_action(:aggregate_value)
+  end
+
+  private
+
+  def perform_action(method_name)
+    return builder.new(account, params).public_send(method_name) if builder.present?
+
+    log_invalid_metric
+  end
+
+  def builder
+    builder_class(params[:metric])
+  end
+end

app/builders/v2/reports/agent_summary_builder.rb

@@ -3,6 +3,7 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def build
     set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
     set_grouped_avg_reply_time
     set_grouped_avg_first_response_time
     set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
     @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
   def group_by_key
     :user_id
   end
@@ -37,12 +47,14 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def prepare_report
     account.account_users.each_with_object([]) do |account_user, arr|
+      user_id = account_user.user_id
       arr << {
-        id: account_user.user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        id: user_id,
+        conversations_count: @grouped_conversations_count[user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[user_id],
+        avg_reply_time: @grouped_avg_reply_time[user_id]
       }
     end
   end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -0,0 +1,65 @@
+class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('inbox_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
+  def group_by_key
+    :inbox_id
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.inboxes.each_with_object([]) do |inbox, arr|
+      inbox_id = inbox.id
+      arr << {
+        id: inbox_id,
+        conversations_count: @grouped_conversations_count[inbox_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[inbox_id],
+        avg_resolution_time: @grouped_avg_resolution_time[inbox_id],
+        avg_first_response_time: @grouped_avg_first_response_time[inbox_id],
+        avg_reply_time: @grouped_avg_reply_time[inbox_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
+end

app/builders/v2/reports/team_summary_builder.rb

@@ -3,6 +3,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def build
     set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
     set_grouped_avg_reply_time
     set_grouped_avg_first_response_time
     set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
     @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
   def reporting_events
     @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
   end
@@ -40,6 +50,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
       arr << {
         id: team.id,
         conversations_count: @grouped_conversations_count[team.id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[team.id],
         avg_resolution_time: @grouped_avg_resolution_time[team.id],
         avg_first_response_time: @grouped_avg_first_response_time[team.id],
         avg_reply_time: @grouped_avg_reply_time[team.id]

app/controllers/api/v2/accounts/live_reports_controller.rb

@@ -0,0 +1,57 @@
+class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
+  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
+  before_action :set_group_scope, only: [:grouped_conversation_metrics]
+
+  def conversation_metrics
+    render json: {
+      open: @conversations.open.count,
+      unattended: @conversations.open.unattended.count,
+      unassigned: @conversations.open.unassigned.count
+    }
+  end
+
+  def grouped_conversation_metrics
+    count_by_group = @conversations.open.group(@group_scope).count
+    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
+    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
+
+    group_metrics = count_by_group.map do |group_id, count|
+      metric = {
+        open: count,
+        unattended: unattended_by_group[group_id] || 0,
+        unassigned: unassigned_by_group[group_id] || 0
+      }
+      metric[@group_scope] = group_id
+      metric
+    end
+
+    render json: group_metrics
+  end
+
+  private
+
+  def set_group_scope
+    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
+      team_id
+      assignee_id
+    ].include?(permitted_params[:group_by])
+
+    @group_scope = permitted_params[:group_by]
+  end
+
+  def team
+    return unless permitted_params[:team_id]
+
+    @team ||= Current.account.teams.find(permitted_params[:team_id])
+  end
+
+  def load_conversations
+    scope = Current.account.conversations
+    scope = scope.where(team_id: team.id) if team.present?
+    @conversations = scope
+  end
+
+  def permitted_params
+    params.permit(:team_id, :group_by)
+  end
+end

app/controllers/api/v2/accounts/summary_reports_controller.rb

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
+  def inbox
+    render_report_with(V2::Reports::InboxSummaryBuilder)
+  end
+
   private
 
   def check_authorization

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/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/helpers/api/v2/accounts/heatmap_helper.rb

@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
   end
 
   def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
+    (date - number_of_days).to_i.to_s
   end
 
   def until_timestamp(date)

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/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/liveReports.js

@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();

app/javascript/dashboard/api/reports.js

@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
     });
   }
 

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/api/summaryReports.js

@@ -0,0 +1,40 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SummaryReportsAPI extends ApiClient {
+  constructor() {
+    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getTeamReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/team`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getAgentReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/agent`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getInboxReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/inbox`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+}
+
+export default new SummaryReportsAPI();

app/javascript/dashboard/components/ChatList.vue

@@ -111,15 +111,6 @@
         @updateFolder="onUpdateSavedFilter"
       />
     </woot-modal>
-    <woot-modal
-      :show.sync="showCustomSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
-      />
-    </woot-modal>
   </div>
 </template>
 
@@ -152,10 +143,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,7 +157,6 @@ export default {
     ConversationBulkActions,
     IntersectionObserver,
     VirtualList,
-    CustomSnoozeModal,
   },
   mixins: [
     timeMixin,
@@ -247,7 +233,6 @@ export default {
         root: this.$refs.conversationList,
         rootMargin: '100px 0px 100px 0px',
       },
-      showCustomSnoozeModal: false,
 
       itemComponent: ConversationItem,
       // virtualListExtraProps is to pass the props to the conversationItem component.
@@ -283,7 +268,6 @@ export default {
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
       selectedConversations: 'bulkActions/getSelectedConversationIds',
-      contextMenuChatId: 'getContextMenuChatId',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -517,11 +501,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) {
@@ -999,43 +978,6 @@ 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>

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

@@ -20,7 +20,7 @@
       :teams="teams"
       :custom-views="customViews"
       :menu-config="activeSecondaryMenu"
-      :current-role="currentRole"
+      :current-user="currentUser"
       :is-on-chatwoot-cloud="isOnChatwootCloud"
       @add-label="showAddLabelPopup"
       @toggle-accounts="toggleAccountModal"
@@ -37,7 +37,8 @@ import alertMixin from 'shared/mixins/alertMixin';
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import router from '../../routes';
+import router, { routesWithPermissions } from '../../routes';
+import { hasPermissions } from '../../helper/permissionsHelper';
 
 export default {
   components: {
@@ -98,9 +99,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;

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,6 @@ const primaryMenuItems = accountId => [
     label: 'CONVERSATIONS',
     toState: frontendURL(`accounts/${accountId}/dashboard`),
     toStateName: 'home',
-    roles: ['administrator', 'agent'],
   },
   {
     icon: 'book-contacts',
@@ -26,7 +24,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 +31,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 +40,6 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
     toStateName: 'ongoing_campaigns',
-    roles: ['administrator'],
   },
   {
     icon: 'library',
@@ -54,7 +49,6 @@ const primaryMenuItems = accountId => [
     alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
-    roles: ['administrator'],
   },
   {
     icon: 'settings',
@@ -62,7 +56,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,6 +159,9 @@ 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,
@@ -138,6 +170,9 @@ const settings = accountId => ({
       icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
@@ -146,6 +181,9 @@ const settings = accountId => ({
       icon: 'key',
       label: 'AUDIT_LOGS',
       hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
       toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
       toStateName: 'auditlogs_list',
       isEnterpriseOnly: true,
@@ -156,6 +194,9 @@ const settings = accountId => ({
       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 +207,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/Secondary.vue

@@ -29,6 +29,8 @@ 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 +62,9 @@ export default {
       type: Object,
       default: () => {},
     },
-    currentRole: {
-      type: String,
-      default: '',
+    currentUser: {
+      type: Object,
+      default: () => {},
     },
     isOnChatwootCloud: {
       type: Boolean,
@@ -80,16 +82,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;
         }

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

@@ -65,27 +65,29 @@
         :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>
+      <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>
@@ -105,9 +107,10 @@ import {
   isOnMentionsView,
   isOnUnattendedView,
 } from '../../../store/modules/conversations/helpers/actionHelpers';
+import Policy from '../../policy.vue';
 
 export default {
-  components: { SecondaryChildNavItem },
+  components: { SecondaryChildNavItem, Policy },
   mixins: [adminMixin, configMixin],
   props: {
     menuItem: {

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"

app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js

@@ -18,11 +18,11 @@ describe('Date formatting functions', () => {
   const testDate = new Date(2020, 4, 15); // May 15, 2020
 
   beforeEach(() => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
   });
 
   afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
   });
 
   it('returns the correct month name from a date', () => {
@@ -39,7 +39,7 @@ describe('Date formatting functions', () => {
   });
 
   it('returns the correct date format for the current locale en-IN', () => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
     const expected = 'dd/MM/yyyy';
     expect(getIntlDateFormatForLocale()).toBe(expected);
   });
@@ -231,13 +231,13 @@ describe('isHoveringNextDayInRange', () => {
 describe('getActiveDateRange', () => {
   const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
 
-  beforeAll(() => {
+  beforeEach(() => {
     // Mocking the current date to ensure consistency in tests
-    jest.useFakeTimers().setSystemTime(currentDate.getTime());
+    vi.useFakeTimers().setSystemTime(currentDate.getTime());
   });
 
-  afterAll(() => {
-    jest.useRealTimers();
+  afterEach(() => {
+    vi.useRealTimers();
   });
 
   it('returns the correct range for "last7days"', () => {

app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue

@@ -13,7 +13,7 @@ defineProps({
 <template>
   <button
     class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click.stop="$emit('click')"
+    @click.stop.prevent="$emit('click')"
     @mouseenter="$emit('mouseenter')"
     @mouseleave="$emit('mouseleave')"
     @focus="$emit('focus')"

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -257,7 +257,16 @@ export default {
         html_content: { full: fullHTMLContent } = {},
         text_content: { full: fullTextContent } = {},
       } = this.contentAttributes.email || {};
-      return fullHTMLContent || fullTextContent || '';
+
+      if (fullHTMLContent) {
+        return fullHTMLContent;
+      }
+
+      if (fullTextContent) {
+        return fullTextContent.replace(/\n/g, '<br>');
+      }
+
+      return '';
     },
     displayQuotedButton() {
       if (this.emailMessageContent.includes('<blockquote')) {

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -197,7 +197,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: {

app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @submit.prevent="onSubmit">
+  <div>
     <woot-input
       v-model="formState.title"
       :class="{ error: v$.title.$error }"
@@ -26,61 +26,19 @@
         "
       />
     </label>
-    <label :class="{ error: v$.teamId.$error }">
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
-      <select
-        v-model="formState.teamId"
-        :style="inputStyles"
-        @change="onChangeTeam"
-      >
-        <option v-for="item in teams" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-      <span v-if="v$.teamId.$error" class="message">
-        {{ teamError }}
-      </span>
-    </label>
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL') }}
-      <select v-model="formState.assigneeId" :style="inputStyles">
-        <option v-for="item in assignees" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL') }}
-      <select v-model="formState.labelId" :style="inputStyles">
-        <option v-for="item in labels" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL') }}
-      <select v-model="formState.priority" :style="inputStyles">
-        <option v-for="item in priorities" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL') }}
-      <select v-model="formState.projectId" :style="inputStyles">
-        <option v-for="item in projects" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-    </label>
-    <label>
-      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL') }}
-      <select v-model="formState.stateId" :style="inputStyles">
-        <option v-for="item in statuses" :key="item.name" :value="item.id">
-          {{ item.name }}
-        </option>
-      </select>
-    </label>
+    <div class="flex flex-col gap-4">
+      <searchable-dropdown
+        v-for="dropdown in dropdowns"
+        :key="dropdown.type"
+        :type="dropdown.type"
+        :value="formState[dropdown.type]"
+        :label="$t(dropdown.label)"
+        :items="dropdown.items"
+        :placeholder="$t(dropdown.placeholder)"
+        :error="dropdown.error"
+        @change="onChange"
+      />
+    </div>
     <div class="flex items-center justify-end w-full gap-2 mt-8">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
@@ -108,6 +66,7 @@ import { useAlert } from 'dashboard/composables';
 import LinearAPI from 'dashboard/api/integrations/linear';
 import validations from './validations';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
+import SearchableDropdown from './SearchableDropdown.vue';
 
 const props = defineProps({
   accountId: {
@@ -162,7 +121,6 @@ const formState = reactive({
   priority: '',
   projectId: '',
 });
-
 const v$ = useVuelidate(validations, formState);
 
 const isSubmitDisabled = computed(
@@ -179,6 +137,56 @@ const teamError = computed(() =>
     : ''
 );
 
+const dropdowns = computed(() => {
+  return [
+    {
+      type: 'teamId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL',
+      items: teams.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.SEARCH',
+      error: teamError.value,
+    },
+    {
+      type: 'assigneeId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL',
+      items: assignees.value,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.SEARCH',
+      error: '',
+    },
+    {
+      type: 'labelId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL',
+      items: labels.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.SEARCH',
+      error: '',
+    },
+    {
+      type: 'priority',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL',
+      items: priorities,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.SEARCH',
+      error: '',
+    },
+    {
+      type: 'projectId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL',
+      items: projects.value,
+      placeholder:
+        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.SEARCH',
+      error: '',
+    },
+    {
+      type: 'stateId',
+      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL',
+      items: statuses.value,
+      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.SEARCH',
+      error: '',
+    },
+  ];
+});
+
 const onClose = () => emit('close');
 
 const getTeams = async () => {
@@ -212,12 +220,15 @@ const getTeamEntities = async () => {
   }
 };
 
-const onChangeTeam = event => {
-  formState.teamId = event.target.value;
-  formState.assigneeId = '';
-  formState.stateId = '';
-  formState.labelId = '';
-  getTeamEntities();
+const onChange = (item, type) => {
+  formState[type] = item.id;
+  if (type === 'teamId') {
+    formState.assigneeId = '';
+    formState.stateId = '';
+    formState.labelId = '';
+    formState.projectId = '';
+    getTeamEntities();
+  }
 };
 
 const createIssue = async () => {

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -6,7 +6,7 @@
     <filter-button
       right-icon="chevron-down"
       :button-text="linkIssueTitle"
-      class="justify-between w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
+      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
       @click="toggleDropdown"
     >
       <template v-if="shouldShowDropdown" #dropdown>
@@ -26,7 +26,7 @@
         />
       </template>
     </filter-button>
-    <div class="flex items-center justify-end w-full gap-2">
+    <div class="flex items-center justify-end w-full gap-2 mt-2">
       <woot-button
         class="px-4 rounded-xl button clear outline-woot-200/50 outline"
         @click.prevent="onClose"

app/javascript/dashboard/components/widgets/conversation/linear/SearchableDropdown.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="flex w-full"
+    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
+  >
+    <label class="w-full" :class="{ error: hasError }">
+      {{ label }}
+      <filter-button
+        right-icon="chevron-down"
+        :button-text="selectedItemName"
+        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+        @click="toggleDropdown"
+      >
+        <template v-if="shouldShowDropdown" #dropdown>
+          <filter-list-dropdown
+            v-on-clickaway="toggleDropdown"
+            :show-clear-filter="false"
+            :list-items="items"
+            :active-filter-id="selectedItemId"
+            :input-placeholder="placeholder"
+            enable-search
+            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
+            @click="onSelect"
+          />
+        </template>
+      </filter-button>
+      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineComponent } from 'vue';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
+
+defineComponent({
+  name: 'SearchableDropdown',
+});
+
+const props = defineProps({
+  type: { type: String, required: true },
+  label: { type: String, default: null },
+  items: { type: Array, required: true },
+  value: { type: [Number, String], default: null },
+  placeholder: { type: String, default: null },
+  error: { type: String, default: null },
+});
+
+const emit = defineEmits(['change']);
+const shouldShowDropdown = ref(false);
+
+const toggleDropdown = () => {
+  shouldShowDropdown.value = !shouldShowDropdown.value;
+};
+const onSelect = item => {
+  emit('change', item, props.type);
+  toggleDropdown();
+};
+
+const hasError = computed(() => !!props.error);
+
+const selectedItem = computed(() => {
+  if (!props.value) return null;
+  return props.items.find(i => i.id === props.value);
+});
+
+const selectedItemName = computed(
+  () => selectedItem.value?.name || props.placeholder
+);
+
+const selectedItemId = computed(() => selectedItem.value?.id || null);
+</script>

app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js

@@ -2,16 +2,16 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
-import Button from 'dashboard/components/buttons/Button';
+import Button from 'dashboard/components/buttons/Button.vue';
 import i18n from 'dashboard/i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
-import MoreActions from '../MoreActions';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import MoreActions from '../MoreActions.vue';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    emit: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
+    emit: vi.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
   },
 }));
 
@@ -26,9 +26,9 @@ localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
 localVue.prototype.$emitter = {
-  emit: jest.fn(),
-  on: jest.fn(),
-  off: jest.fn(),
+  emit: vi.fn(),
+  on: vi.fn(),
+  off: vi.fn(),
 };
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
@@ -49,8 +49,8 @@ describe('MoveActions', () => {
       currentChat,
     };
 
-    muteConversation = jest.fn(() => Promise.resolve());
-    unmuteConversation = jest.fn(() => Promise.resolve());
+    muteConversation = vi.fn(() => Promise.resolve());
+    unmuteConversation = vi.fn(() => Promise.resolve());
 
     modules = {
       conversations: { actions: { muteConversation, unmuteConversation } },

app/javascript/dashboard/components/widgets/mentions/specs/mentionSelectionKeyboardMixin.spec.js

@@ -8,7 +8,7 @@ const buildComponent = ({ data = {}, methods = {} }) => ({
   data() {
     return { ...data, selectedIndex: 0, items: [1, 2, 3] };
   },
-  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
+  methods: { ...methods, onSelect: vi.fn(), adjustScroll: vi.fn() },
   mixins: [keyboardEventListenerMixins],
 });
 
@@ -21,7 +21,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.ArrowUp) {
@@ -39,7 +39,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.ArrowDown) {
@@ -57,7 +57,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('Enter key triggers onSelect method', () => {
-    const preventDefault = jest.fn();
+    const preventDefault = vi.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.Enter) {

app/javascript/dashboard/composables/spec/emitter.spec.js

@@ -2,17 +2,17 @@ import { shallowMount } from '@vue/test-utils';
 import { emitter } from 'shared/helpers/mitt';
 import { useEmitter } from '../emitter';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    on: jest.fn(),
-    off: jest.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
   },
 }));
 
 describe('useEmitter', () => {
   let wrapper;
   const eventName = 'my-event';
-  const callback = jest.fn();
+  const callback = vi.fn();
 
   beforeEach(() => {
     wrapper = shallowMount({
@@ -29,10 +29,6 @@ describe('useEmitter', () => {
     });
   });
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
   it('should add an event listener on mount', () => {
     expect(emitter.on).toHaveBeenCalledWith(eventName, callback);
   });

app/javascript/dashboard/helper/AnalyticsHelper/specs/helper.spec.js

@@ -1,13 +1,13 @@
 import helperObject, { AnalyticsHelper } from '../';
 
-jest.mock('@june-so/analytics-next', () => ({
+vi.mock('@june-so/analytics-next', () => ({
   AnalyticsBrowser: {
     load: () => [
       {
-        identify: jest.fn(),
-        track: jest.fn(),
-        page: jest.fn(),
-        group: jest.fn(),
+        identify: vi.fn(),
+        track: vi.fn(),
+        page: vi.fn(),
+        group: vi.fn(),
       },
     ],
   },
@@ -40,7 +40,7 @@ describe('AnalyticsHelper', () => {
 
   describe('identify', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { identify: jest.fn(), group: jest.fn() };
+      analyticsHelper.analytics = { identify: vi.fn(), group: vi.fn() };
     });
 
     it('should call identify on analytics browser with correct arguments', () => {
@@ -87,7 +87,7 @@ describe('AnalyticsHelper', () => {
 
   describe('track', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { track: jest.fn() };
+      analyticsHelper.analytics = { track: vi.fn() };
       analyticsHelper.user = { id: '123' };
     });
 
@@ -118,7 +118,7 @@ describe('AnalyticsHelper', () => {
 
   describe('page', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { page: jest.fn() };
+      analyticsHelper.analytics = { page: vi.fn() };
     });
 
     it('should call the analytics.page method with the correct arguments', () => {

app/javascript/dashboard/helper/AnalyticsHelper/specs/plugin.spec.js

@@ -2,34 +2,35 @@ import Vue from 'vue';
 import plugin from '../plugin';
 import analyticsHelper from '../index';
 
+vi.spyOn(analyticsHelper, 'init');
+vi.spyOn(analyticsHelper, 'track');
+
 describe('Vue Analytics Plugin', () => {
   beforeEach(() => {
-    jest.spyOn(analyticsHelper, 'init');
-    jest.spyOn(analyticsHelper, 'track');
     Vue.use(plugin);
   });
 
-  afterEach(() => {
-    jest.resetModules();
-    jest.clearAllMocks();
+  it('should call the init method on analyticsHelper once during plugin installation', () => {
+    expect(analyticsHelper.init).toHaveBeenCalledTimes(1);
   });
 
-  it('should call the init method on the analyticsHelper', () => {
-    expect(analyticsHelper.init).toHaveBeenCalled();
-  });
-
-  it('should add the analyticsHelper to the Vue prototype', () => {
+  it('should add the analyticsHelper to the Vue prototype as $analytics', () => {
     expect(Vue.prototype.$analytics).toBe(analyticsHelper);
   });
 
-  it('should add the track method to the Vue prototype', () => {
+  it('should add a track method to the Vue prototype as $track', () => {
     expect(typeof Vue.prototype.$track).toBe('function');
     Vue.prototype.$track('eventName');
-    expect(analyticsHelper.track).toHaveBeenCalledWith('eventName');
+    expect(analyticsHelper.track)
+      .toHaveBeenCalledTimes(1)
+      .toHaveBeenCalledWith('eventName');
   });
 
-  it('should call the track method on the analyticsHelper when $track is called', () => {
-    Vue.prototype.$track('eventName');
-    expect(analyticsHelper.track).toHaveBeenCalledWith('eventName');
+  it('should call the track method on analyticsHelper with the correct event name when $track is called', () => {
+    const eventName = 'testEvent';
+    Vue.prototype.$track(eventName);
+    expect(analyticsHelper.track)
+      .toHaveBeenCalledTimes(1)
+      .toHaveBeenCalledWith(eventName);
   });
 });

app/javascript/dashboard/helper/ReconnectService.js

@@ -9,6 +9,11 @@ import {
 
 const MAX_DISCONNECT_SECONDS = 10800;
 
+// The disconnect delay threshold is added to account for delays in identifying
+// disconnections (for example, the websocket disconnection takes up to 3 seconds)
+// while fetching the latest updated conversations or messages.
+const DISCONNECT_DELAY_THRESHOLD = 15;
+
 class ReconnectService {
   constructor(store, router) {
     this.store = store;
@@ -47,7 +52,8 @@ class ReconnectService {
   fetchConversations = async () => {
     await this.store.dispatch('updateChatListFilters', {
       page: null,
-      updatedWithin: this.getSecondsSinceDisconnect(),
+      updatedWithin:
+        this.getSecondsSinceDisconnect() + DISCONNECT_DELAY_THRESHOLD,
     });
     await this.store.dispatch('fetchAllConversations');
     // Reset the updatedWithin in the store chat list filter after fetching conversations when the user is reconnected

app/javascript/dashboard/helper/automationHelper.js

@@ -121,7 +121,7 @@ export const generateConditionOptions = (options, key = 'id') => {
 };
 
 // Add the "None" option to the agent list
-export const agentList = agents => [
+export const addNoneToList = agents => [
   {
     id: 'nil',
     name: 'None',
@@ -137,8 +137,8 @@ export const getActionOptions = ({
   type,
 }) => {
   const actionsMap = {
-    assign_agent: agentList(agents),
-    assign_team: teams,
+    assign_agent: addNoneToList(agents),
+    assign_team: addNoneToList(teams),
     send_email_to_team: teams,
     add_label: generateConditionOptions(labels, 'title'),
     remove_label: generateConditionOptions(labels, 'title'),

app/javascript/dashboard/helper/permissionsHelper.js

@@ -0,0 +1,34 @@
+export const hasPermissions = (
+  requiredPermissions = [],
+  availablePermissions = []
+) => {
+  return requiredPermissions.some(permission =>
+    availablePermissions.includes(permission)
+  );
+};
+
+const isPermissionsPresentInRoute = route =>
+  route.meta && route.meta.permissions;
+
+export const buildPermissionsFromRouter = (routes = []) =>
+  routes.reduce((acc, route) => {
+    if (route.name) {
+      if (!isPermissionsPresentInRoute(route)) {
+        // eslint-disable-next-line
+        console.error(route);
+        throw new Error(
+          "The route doesn't have the required permissions defined"
+        );
+      }
+      acc[route.name] = route.meta.permissions;
+    }
+
+    if (route.children) {
+      acc = {
+        ...acc,
+        ...buildPermissionsFromRouter(route.children),
+      };
+    }
+
+    return acc;
+  }, {});

app/javascript/dashboard/helper/routeHelpers.js

@@ -1,19 +1,16 @@
+import { hasPermissions } from './permissionsHelper';
+
 // eslint-disable-next-line default-param-last
 export const getCurrentAccount = ({ accounts } = {}, accountId) => {
   return accounts.find(account => account.id === accountId);
 };
 
-// eslint-disable-next-line default-param-last
-export const getUserRole = ({ accounts } = {}, accountId) => {
-  const currentAccount = getCurrentAccount({ accounts }, accountId) || {};
-  return currentAccount.role || null;
+export const routeIsAccessibleFor = (route, userPermissions = []) => {
+  const { meta: { permissions: routePermissions = [] } = {} } = route;
+  return hasPermissions(routePermissions, userPermissions);
 };
 
-export const routeIsAccessibleFor = (route, role, roleWiseRoutes) => {
-  return roleWiseRoutes[role].includes(route);
-};
-
-const validateActiveAccountRoutes = (to, user, roleWiseRoutes) => {
+const validateActiveAccountRoutes = (to, user) => {
   // If the current account is active, then check for the route permissions
   const accountDashboardURL = `accounts/${to.params.accountId}/dashboard`;
 
@@ -22,15 +19,13 @@ const validateActiveAccountRoutes = (to, user, roleWiseRoutes) => {
     return accountDashboardURL;
   }
 
-  const userRole = getUserRole(user, Number(to.params.accountId));
-  const isAccessible = routeIsAccessibleFor(to.name, userRole, roleWiseRoutes);
+  const isAccessible = routeIsAccessibleFor(to, user.permissions);
   // If the route is not accessible for the user, return to dashboard screen
   return isAccessible ? null : accountDashboardURL;
 };
 
-export const validateLoggedInRoutes = (to, user, roleWiseRoutes) => {
+export const validateLoggedInRoutes = (to, user) => {
   const currentAccount = getCurrentAccount(user, Number(to.params.accountId));
-
   // If current account is missing, either user does not have
   // access to the account or the account is deleted, return to login screen
   if (!currentAccount) {
@@ -40,7 +35,7 @@ export const validateLoggedInRoutes = (to, user, roleWiseRoutes) => {
   const isCurrentAccountActive = currentAccount.status === 'active';
 
   if (isCurrentAccountActive) {
-    return validateActiveAccountRoutes(to, user, roleWiseRoutes);
+    return validateActiveAccountRoutes(to, user);
   }
 
   // If the current account is not active, then redirect the user to the suspended screen

app/javascript/dashboard/helper/specs/CacheHelper/DataManger.spec.js

@@ -4,7 +4,7 @@ describe('DataManager', () => {
   const accountId = 'test-account';
   let dataManager;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     dataManager = new DataManager(accountId);
     await dataManager.initDb();
   });

app/javascript/dashboard/helper/specs/ReconnectService.spec.js

@@ -8,26 +8,26 @@ import {
 } from 'dashboard/helper/routeHelpers';
 import ReconnectService from 'dashboard/helper/ReconnectService';
 
-jest.mock('shared/helpers/mitt', () => ({
+vi.mock('shared/helpers/mitt', () => ({
   emitter: {
-    on: jest.fn(),
-    off: jest.fn(),
-    emit: jest.fn(),
+    on: vi.fn(),
+    off: vi.fn(),
+    emit: vi.fn(),
   },
 }));
 
-jest.mock('date-fns', () => ({
-  differenceInSeconds: jest.fn(),
+vi.mock('date-fns', () => ({
+  differenceInSeconds: vi.fn(),
 }));
 
-jest.mock('dashboard/helper/routeHelpers', () => ({
-  isAConversationRoute: jest.fn(),
-  isAInboxViewRoute: jest.fn(),
-  isNotificationRoute: jest.fn(),
+vi.mock('dashboard/helper/routeHelpers', () => ({
+  isAConversationRoute: vi.fn(),
+  isAInboxViewRoute: vi.fn(),
+  isNotificationRoute: vi.fn(),
 }));
 
 const storeMock = {
-  dispatch: jest.fn(),
+  dispatch: vi.fn(),
   getters: {
     getAppliedConversationFiltersQuery: [],
     'customViews/getActiveConversationFolder': { query: {} },
@@ -46,17 +46,17 @@ describe('ReconnectService', () => {
   let reconnectService;
 
   beforeEach(() => {
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
+    window.addEventListener = vi.fn();
+    window.removeEventListener = vi.fn();
     Object.defineProperty(window, 'location', {
       configurable: true,
-      value: { reload: jest.fn() },
+      value: { reload: vi.fn() },
     });
     reconnectService = new ReconnectService(storeMock, routerMock);
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   describe('constructor', () => {
@@ -102,7 +102,7 @@ describe('ReconnectService', () => {
       expect(reconnectService.getSecondsSinceDisconnect()).toBe(0);
     });
 
-    it('should return the number of seconds since disconnect', () => {
+    it('should return the number of seconds + threshold since disconnect', () => {
       reconnectService.disconnectTime = new Date();
       differenceInSeconds.mockReturnValue(100);
       expect(reconnectService.getSecondsSinceDisconnect()).toBe(100);
@@ -111,7 +111,7 @@ describe('ReconnectService', () => {
 
   describe('handleOnlineEvent', () => {
     it('should reload the page if disconnected for more than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi
         .fn()
         .mockReturnValue(10801);
       reconnectService.handleOnlineEvent();
@@ -119,7 +119,7 @@ describe('ReconnectService', () => {
     });
 
     it('should not reload the page if disconnected for less than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
+      reconnectService.getSecondsSinceDisconnect = vi
         .fn()
         .mockReturnValue(10799);
       reconnectService.handleOnlineEvent();
@@ -128,22 +128,27 @@ describe('ReconnectService', () => {
   });
 
   describe('fetchConversations', () => {
-    it('should dispatch updateChatListFilters and fetchAllConversations', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(100);
+    it('should update the filters with disconnected time and the threshold', async () => {
+      reconnectService.getSecondsSinceDisconnect = vi.fn().mockReturnValue(100);
       await reconnectService.fetchConversations();
       expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
         page: null,
-        updatedWithin: 100,
+        updatedWithin: 115,
+      });
+    });
+
+    it('should dispatch updateChatListFilters and fetchAllConversations', async () => {
+      reconnectService.getSecondsSinceDisconnect = vi.fn().mockReturnValue(100);
+      await reconnectService.fetchConversations();
+      expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
+        page: null,
+        updatedWithin: 115,
       });
       expect(storeMock.dispatch).toHaveBeenCalledWith('fetchAllConversations');
     });
 
     it('should dispatch updateChatListFilters and reset updatedWithin', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(100);
+      reconnectService.getSecondsSinceDisconnect = vi.fn().mockReturnValue(100);
       await reconnectService.fetchConversations();
       expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
         updatedWithin: null,
@@ -173,7 +178,7 @@ describe('ReconnectService', () => {
           },
         ],
       };
-      const spy = jest.spyOn(
+      const spy = vi.spyOn(
         reconnectService,
         'fetchFilteredOrSavedConversations'
       );
@@ -191,7 +196,7 @@ describe('ReconnectService', () => {
         query: null,
       };
 
-      const spy = jest.spyOn(reconnectService, 'fetchConversations');
+      const spy = vi.spyOn(reconnectService, 'fetchConversations');
 
       await reconnectService.fetchConversationsOnReconnect();
 
@@ -204,7 +209,7 @@ describe('ReconnectService', () => {
         query: { test: 'activeFolderQuery' },
       };
 
-      const spy = jest.spyOn(
+      const spy = vi.spyOn(
         reconnectService,
         'fetchFilteredOrSavedConversations'
       );
@@ -270,11 +275,11 @@ describe('ReconnectService', () => {
   describe('handleRouteSpecificFetch', () => {
     it('should fetch conversations and messages if current route is a conversation route', async () => {
       isAConversationRoute.mockReturnValue(true);
-      const spyConversations = jest.spyOn(
+      const spyConversations = vi.spyOn(
         reconnectService,
         'fetchConversationsOnReconnect'
       );
-      const spyMessages = jest.spyOn(
+      const spyMessages = vi.spyOn(
         reconnectService,
         'fetchConversationMessagesOnReconnect'
       );
@@ -285,14 +290,14 @@ describe('ReconnectService', () => {
 
     it('should fetch notifications if current route is an inbox view route', async () => {
       isAInboxViewRoute.mockReturnValue(true);
-      const spy = jest.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
+      const spy = vi.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
       await reconnectService.handleRouteSpecificFetch();
       expect(spy).toHaveBeenCalled();
     });
 
     it('should fetch notifications if current route is a notification route', async () => {
       isNotificationRoute.mockReturnValue(true);
-      const spy = jest.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
+      const spy = vi.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
       await reconnectService.handleRouteSpecificFetch();
       expect(spy).toHaveBeenCalled();
     });
@@ -320,7 +325,7 @@ describe('ReconnectService', () => {
 
   describe('onDisconnect', () => {
     it('should set disconnectTime and call setConversationLastMessageId', () => {
-      reconnectService.setConversationLastMessageId = jest.fn();
+      reconnectService.setConversationLastMessageId = vi.fn();
       reconnectService.onDisconnect();
       expect(reconnectService.disconnectTime).toBeInstanceOf(Date);
       expect(reconnectService.setConversationLastMessageId).toHaveBeenCalled();
@@ -329,8 +334,8 @@ describe('ReconnectService', () => {
 
   describe('onReconnect', () => {
     it('should handle route-specific fetch, revalidate caches, and emit WEBSOCKET_RECONNECT_COMPLETED event', async () => {
-      reconnectService.handleRouteSpecificFetch = jest.fn();
-      reconnectService.revalidateCaches = jest.fn();
+      reconnectService.handleRouteSpecificFetch = vi.fn();
+      reconnectService.revalidateCaches = vi.fn();
       await reconnectService.onReconnect();
       expect(reconnectService.handleRouteSpecificFetch).toHaveBeenCalled();
       expect(reconnectService.revalidateCaches).toHaveBeenCalled();

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -36,16 +36,14 @@ describe('#createPendingMessage', () => {
     message: 'hi',
   };
   it('returns the pending message with expected new keys', () => {
-    expect(createPendingMessage(message)).toHaveProperty(
-      'content',
-      'id',
-      'status',
-      'echo_id',
-      'status',
-      'created_at',
-      'message_type',
-      'conversation_id'
-    );
+    expect(createPendingMessage(message)).toMatchObject({
+      content: expect.anything(),
+      id: expect.anything(),
+      status: expect.anything(),
+      echo_id: expect.anything(),
+      created_at: expect.anything(),
+      message_type: expect.anything(),
+    });
   });
 
   it('returns the pending message with status progress', () => {
@@ -61,23 +59,20 @@ describe('#createPendingMessage', () => {
     });
   });
 
-  it('returns the pending message with attachmnet key if file is passed', () => {
+  it('returns the pending message with attachment key if file is passed', () => {
     const messageWithFile = {
       message: 'hi',
       file: {},
     };
-    expect(createPendingMessage(messageWithFile)).toHaveProperty(
-      'content',
-      'id',
-      'status',
-      'echo_id',
-      'status',
-      'created_at',
-      'message_type',
-      'conversation_id',
-      'attachments',
-      'private'
-    );
+    expect(createPendingMessage(messageWithFile)).toMatchObject({
+      content: expect.anything(),
+      id: expect.anything(),
+      status: expect.anything(),
+      echo_id: expect.anything(),
+      created_at: expect.anything(),
+      message_type: expect.anything(),
+      attachments: [{ id: expect.anything() }],
+    });
   });
 
   it('returns the pending message to have one attachment', () => {

app/javascript/dashboard/helper/specs/directives/resize.spec.js

@@ -19,19 +19,19 @@ describe('resize directive', () => {
   beforeEach(() => {
     el = document.createElement('div');
     binding = {
-      value: jest.fn(),
+      value: vi.fn(),
     };
     observer = {
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     };
     window.ResizeObserver = ResizeObserverMock;
-    jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
+    vi.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('should create ResizeObserver on bind', () => {
@@ -44,7 +44,7 @@ describe('resize directive', () => {
   it('should call callback on observer callback', () => {
     el = document.createElement('div');
     binding = {
-      value: jest.fn(),
+      value: vi.fn(),
     };
 
     resize.bind(el, binding);

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -283,17 +283,17 @@ describe('findNodeToInsertImage', () => {
     mockEditorState = {
       selection: {
         $from: {
-          node: jest.fn(() => ({})),
+          node: vi.fn(() => ({})),
         },
         from: 0,
       },
       schema: {
         nodes: {
           image: {
-            create: jest.fn(attrs => ({ type: { name: 'image' }, attrs })),
+            create: vi.fn(attrs => ({ type: { name: 'image' }, attrs })),
           },
           paragraph: {
-            create: jest.fn((_, node) => ({
+            create: vi.fn((_, node) => ({
               type: { name: 'paragraph' },
               content: [node],
             })),
@@ -381,11 +381,11 @@ describe('setURLWithQueryAndSize', () => {
 
   beforeEach(() => {
     selectedNode = {
-      setAttribute: jest.fn(),
+      setAttribute: vi.fn(),
     };
 
     const tr = {
-      setNodeMarkup: jest.fn().mockReturnValue({
+      setNodeMarkup: vi.fn().mockReturnValue({
         docChanged: true,
       }),
     };
@@ -397,7 +397,7 @@ describe('setURLWithQueryAndSize', () => {
 
     editorView = {
       state,
-      dispatch: jest.fn(),
+      dispatch: vi.fn(),
     };
   });
 
@@ -420,7 +420,7 @@ describe('setURLWithQueryAndSize', () => {
   });
 
   it('does not update the editor view if the document has not changed', () => {
-    editorView.state.tr.setNodeMarkup = jest.fn().mockReturnValue({
+    editorView.state.tr.setNodeMarkup = vi.fn().mockReturnValue({
       docChanged: false,
     });
 

app/javascript/dashboard/helper/specs/permissionsHelper.spec.js

@@ -0,0 +1,84 @@
+import {
+  buildPermissionsFromRouter,
+  hasPermissions,
+} from '../permissionsHelper';
+
+describe('hasPermissions', () => {
+  it('returns true if permission is present', () => {
+    expect(
+      hasPermissions(['contact_manage'], ['team_manage', 'contact_manage'])
+    ).toBe(true);
+  });
+
+  it('returns true if permission is not present', () => {
+    expect(
+      hasPermissions(['contact_manage'], ['team_manage', 'user_manage'])
+    ).toBe(false);
+    expect(hasPermissions()).toBe(false);
+    expect(hasPermissions([])).toBe(false);
+  });
+});
+
+describe('buildPermissionsFromRouter', () => {
+  it('returns a valid object when routes have permissions defined', () => {
+    expect(
+      buildPermissionsFromRouter([
+        {
+          path: 'agent',
+          name: 'agent_list',
+          meta: { permissions: ['agent_admin'] },
+        },
+        {
+          path: 'inbox',
+          children: [
+            {
+              path: '',
+              name: 'inbox_list',
+              meta: { permissions: ['inbox_admin'] },
+            },
+          ],
+        },
+        {
+          path: 'conversations',
+          children: [
+            {
+              path: '',
+              children: [
+                {
+                  path: 'attachments',
+                  name: 'attachments_list',
+                  meta: { permissions: ['conversation_admin'] },
+                },
+              ],
+            },
+          ],
+        },
+      ])
+    ).toEqual({
+      agent_list: ['agent_admin'],
+      inbox_list: ['inbox_admin'],
+      attachments_list: ['conversation_admin'],
+    });
+  });
+
+  it('throws an error if a named routed does not have permissions defined', () => {
+    expect(() => {
+      buildPermissionsFromRouter([
+        {
+          path: 'agent',
+          name: 'agent_list',
+        },
+      ]);
+    }).toThrow("The route doesn't have the required permissions defined");
+
+    expect(() => {
+      buildPermissionsFromRouter([
+        {
+          path: 'agent',
+          name: 'agent_list',
+          meta: {},
+        },
+      ]);
+    }).toThrow("The route doesn't have the required permissions defined");
+  });
+});

app/javascript/dashboard/helper/specs/routeHelpers.spec.js

@@ -1,7 +1,6 @@
 import {
   getConversationDashboardRoute,
   getCurrentAccount,
-  getUserRole,
   isAConversationRoute,
   routeIsAccessibleFor,
   validateLoggedInRoutes,
@@ -15,24 +14,11 @@ describe('#getCurrentAccount', () => {
   });
 });
 
-describe('#getUserRole', () => {
-  it('should return the current role', () => {
-    expect(
-      getUserRole({ accounts: [{ id: 1, role: 'administrator' }] }, 1)
-    ).toEqual('administrator');
-    expect(getUserRole({ accounts: [] }, 1)).toEqual(null);
-  });
-});
-
 describe('#routeIsAccessibleFor', () => {
   it('should return the correct access', () => {
-    const roleWiseRoutes = { agent: ['conversations'], admin: ['billing'] };
-    expect(routeIsAccessibleFor('billing', 'agent', roleWiseRoutes)).toEqual(
-      false
-    );
-    expect(routeIsAccessibleFor('billing', 'admin', roleWiseRoutes)).toEqual(
-      true
-    );
+    let route = { meta: { permissions: ['administrator'] } };
+    expect(routeIsAccessibleFor(route, ['agent'])).toEqual(false);
+    expect(routeIsAccessibleFor(route, ['administrator'])).toEqual(true);
   });
 });
 
@@ -40,11 +26,7 @@ describe('#validateLoggedInRoutes', () => {
   describe('when account access is missing', () => {
     it('should return the login route', () => {
       expect(
-        validateLoggedInRoutes(
-          { params: { accountId: 1 } },
-          { accounts: [] },
-          {}
-        )
+        validateLoggedInRoutes({ params: { accountId: 1 } }, { accounts: [] })
       ).toEqual(`app/login`);
     });
   });
@@ -53,9 +35,12 @@ describe('#validateLoggedInRoutes', () => {
       it('return suspended route', () => {
         expect(
           validateLoggedInRoutes(
-            { name: 'conversations', params: { accountId: 1 } },
-            { accounts: [{ id: 1, role: 'agent', status: 'suspended' }] },
-            { agent: ['conversations'] }
+            {
+              name: 'conversations',
+              params: { accountId: 1 },
+              meta: { permissions: ['agent'] },
+            },
+            { accounts: [{ id: 1, role: 'agent', status: 'suspended' }] }
           )
         ).toEqual(`accounts/1/suspended`);
       });
@@ -65,9 +50,22 @@ describe('#validateLoggedInRoutes', () => {
         it('returns null (no action required)', () => {
           expect(
             validateLoggedInRoutes(
-              { name: 'conversations', params: { accountId: 1 } },
-              { accounts: [{ id: 1, role: 'agent', status: 'active' }] },
-              { agent: ['conversations'] }
+              {
+                name: 'conversations',
+                params: { accountId: 1 },
+                meta: { permissions: ['agent'] },
+              },
+              {
+                permissions: ['agent'],
+                accounts: [
+                  {
+                    id: 1,
+                    role: 'agent',
+                    permissions: ['agent'],
+                    status: 'active',
+                  },
+                ],
+              }
             )
           ).toEqual(null);
         });
@@ -76,9 +74,12 @@ describe('#validateLoggedInRoutes', () => {
         it('returns dashboard url', () => {
           expect(
             validateLoggedInRoutes(
-              { name: 'conversations', params: { accountId: 1 } },
-              { accounts: [{ id: 1, role: 'agent', status: 'active' }] },
-              { admin: ['conversations'], agent: [] }
+              {
+                name: 'billing',
+                params: { accountId: 1 },
+                meta: { permissions: ['administrator'] },
+              },
+              { accounts: [{ id: 1, role: 'agent', status: 'active' }] }
             )
           ).toEqual(`accounts/1/dashboard`);
         });
@@ -88,8 +89,7 @@ describe('#validateLoggedInRoutes', () => {
           expect(
             validateLoggedInRoutes(
               { name: 'account_suspended', params: { accountId: 1 } },
-              { accounts: [{ id: 1, role: 'agent', status: 'active' }] },
-              { agent: ['account_suspended'] }
+              { accounts: [{ id: 1, role: 'agent', status: 'active' }] }
             )
           ).toEqual(`accounts/1/dashboard`);
         });

app/javascript/dashboard/helper/specs/themeHelper.spec.js

@@ -1,7 +1,7 @@
 import { setColorTheme } from 'dashboard/helper/themeHelper.js';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-jest.mock('shared/helpers/localStorage');
+vi.mock('shared/helpers/localStorage');
 
 describe('setColorTheme', () => {
   it('should set body class to dark if selectedColorScheme is dark', () => {

app/javascript/dashboard/helper/specs/uploadHelper.spec.js

@@ -1,9 +1,8 @@
 import { uploadFile } from '../uploadHelper';
 import axios from 'axios';
 
-// Mocking axios using jest-mock-axios
 global.axios = axios;
-jest.mock('axios');
+vi.mock('axios');
 
 describe('#Upload Helpers', () => {
   afterEach(() => {

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -367,7 +367,6 @@
         "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "EMAIL_PLACEHOLDER": "Enter email address",
         "SIGN_IN": "Sign in with Microsoft",
-        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
       },
       "GOOGLE": {
@@ -375,7 +374,6 @@
         "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
         "SIGN_IN": "Sign in with Google",
         "EMAIL_PLACEHOLDER": "Enter email address",
-        "HELP": "To add your Google account as a channel, you need to authenticate your Google account by clicking on 'Sign in with Google' ",
         "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
       }
     },

app/javascript/dashboard/i18n/locale/en/report.json

@@ -494,6 +494,17 @@
         "STATUS": "Status"
       }
     },
+    "TEAM_CONVERSATIONS": {
+      "HEADER": "Conversations by teams",
+      "LOADING_MESSAGE": "Loading team metrics...",
+      "NO_AGENTS": "There is no data available",
+      "TABLE_HEADER": {
+        "AGENT": "Team",
+        "OPEN": "open",
+        "UNATTENDED": "Unattended",
+        "STATUS": "Status"
+      }
+    },
     "AGENT_STATUS": {
       "HEADER": "Agent status",
       "ONLINE": "Online",

app/javascript/dashboard/mixins/specs/aiMixin.spec.js

@@ -4,8 +4,8 @@ import Vuex from 'vuex';
 import OpenAPI from '../../api/integrations/openapi';
 import { LocalStorage } from '../../../shared/helpers/localStorage';
 
-jest.mock('../../api/integrations/openapi');
-jest.mock('../../../shared/helpers/localStorage');
+vi.mock('../../api/integrations/openapi');
+vi.mock('../../../shared/helpers/localStorage');
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -18,12 +18,12 @@ describe('aiMixin', () => {
   let actions;
 
   beforeEach(() => {
-    OpenAPI.processEvent = jest.fn();
-    LocalStorage.set = jest.fn();
-    LocalStorage.get = jest.fn();
+    OpenAPI.processEvent = vi.fn();
+    LocalStorage.set = vi.fn();
+    LocalStorage.get = vi.fn();
 
     actions = {
-      ['integrations/get']: jest.fn(),
+      ['integrations/get']: vi.fn(),
     };
 
     getters = {
@@ -63,20 +63,20 @@ describe('aiMixin', () => {
       localVue,
     });
 
-    const dispatchSpy = jest.spyOn(wrapper.vm.$store, 'dispatch');
+    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
     await wrapper.vm.fetchIntegrationsIfRequired();
     expect(dispatchSpy).toHaveBeenCalledWith('integrations/get');
   });
 
   it('does not fetch integrations', async () => {
-    const dispatchSpy = jest.spyOn(wrapper.vm.$store, 'dispatch');
+    const dispatchSpy = vi.spyOn(wrapper.vm.$store, 'dispatch');
     await wrapper.vm.fetchIntegrationsIfRequired();
     expect(dispatchSpy).not.toHaveBeenCalledWith('integrations/get');
     expect(wrapper.vm.isAIIntegrationEnabled).toBeTruthy();
   });
 
   it('fetches label suggestions', async () => {
-    const processEventSpy = jest.spyOn(OpenAPI, 'processEvent');
+    const processEventSpy = vi.spyOn(OpenAPI, 'processEvent');
     await wrapper.vm.fetchLabelSuggestions({
       conversationId: '123',
     });

app/javascript/dashboard/mixins/specs/attributeMixin.spec.js

@@ -11,7 +11,7 @@ describe('attributeMixin', () => {
   let store;
 
   beforeEach(() => {
-    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
+    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
     getters = {
       getSelectedChat: () => ({
         id: 7165,

app/javascript/dashboard/mixins/specs/fileUploadMixin.spec.js

@@ -1,13 +1,13 @@
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import Vue from 'vue';
 
-jest.mock('shared/helpers/FileHelper', () => ({
-  checkFileSizeLimit: jest.fn(),
+vi.mock('shared/helpers/FileHelper', () => ({
+  checkFileSizeLimit: vi.fn(),
 }));
 
-jest.mock('activestorage', () => ({
-  DirectUpload: jest.fn().mockImplementation(() => ({
-    create: jest.fn(),
+vi.mock('activestorage', () => ({
+  DirectUpload: vi.fn().mockImplementation(() => ({
+    create: vi.fn(),
   })),
 }));
 
@@ -27,20 +27,20 @@ describe('FileUploadMixin', () => {
     vm.currentUser = {
       access_token: 'token',
     };
-    vm.$t = jest.fn(message => message);
-    vm.showAlert = jest.fn();
-    vm.attachFile = jest.fn();
+    vm.$t = vi.fn(message => message);
+    vm.showAlert = vi.fn();
+    vm.attachFile = vi.fn();
   });
 
   it('should call onDirectFileUpload when direct uploads are enabled', () => {
-    vm.onDirectFileUpload = jest.fn();
+    vm.onDirectFileUpload = vi.fn();
     vm.onFileUpload({});
     expect(vm.onDirectFileUpload).toHaveBeenCalledWith({});
   });
 
   it('should call onIndirectFileUpload when direct uploads are disabled', () => {
     vm.globalConfig.directUploadsEnabled = false;
-    vm.onIndirectFileUpload = jest.fn();
+    vm.onIndirectFileUpload = vi.fn();
     vm.onFileUpload({});
     expect(vm.onIndirectFileUpload).toHaveBeenCalledWith({});
   });
@@ -53,7 +53,7 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = jest.fn();
+      vm.showAlert = vi.fn();
       vm.onDirectFileUpload(fakeFile);
       expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
     });
@@ -67,7 +67,7 @@ describe('FileUploadMixin', () => {
 
     it('shows an alert if the file size exceeds the maximum limit', () => {
       const fakeFile = { size: 999999999 };
-      vm.showAlert = jest.fn();
+      vm.showAlert = vi.fn();
       vm.onIndirectFileUpload(fakeFile);
       expect(vm.showAlert).toHaveBeenCalledWith(expect.any(String));
     });

app/javascript/dashboard/mixins/specs/time.spec.js

@@ -11,14 +11,14 @@ describe('#messageStamp', () => {
 
 describe('#messageTimestamp', () => {
   beforeEach(() => {
-    jest.useFakeTimers('modern');
+    vi.useFakeTimers('modern');
 
     const mockDate = new Date(2023, 4, 5);
-    jest.setSystemTime(mockDate);
+    vi.setSystemTime(mockDate);
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   it('should return the message date in the specified format if the message was sent in the current year', () => {
@@ -35,7 +35,7 @@ describe('#messageTimestamp', () => {
 
 describe('#dynamicTime', () => {
   it('returns correct value', () => {
-    Date.now = jest.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
+    Date.now = vi.fn(() => new Date(Date.UTC(2023, 1, 14)).valueOf());
     expect(TimeMixin.methods.dynamicTime(1612971343)).toEqual(
       'about 2 years ago'
     );

app/javascript/dashboard/mixins/specs/uiSettings.spec.js

@@ -14,7 +14,7 @@ describe('uiSettingsMixin', () => {
   let store;
 
   beforeEach(() => {
-    actions = { updateUISettings: jest.fn(), toggleSidebarUIState: jest.fn() };
+    actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
     getters = {
       getUISettings: () => ({
         enter_to_send_enabled: false,

app/javascript/dashboard/modules/search/search.routes.js

@@ -7,7 +7,9 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/search'),
     name: 'search',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: SearchView,
   },
 ];

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -41,7 +41,6 @@
 
 <script>
 import Sidebar from '../../components/layout/Sidebar.vue';
-import CommandBar from './commands/commandbar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
@@ -50,6 +49,7 @@ import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.v
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import wootConstants from 'dashboard/constants/globals';
+const CommandBar = () => import('./commands/commandbar.vue');
 
 export default {
   components: {

app/javascript/dashboard/routes/dashboard/contacts/components/specs/AddReminder.spec.js

@@ -15,7 +15,7 @@ describe('AddReminder', () => {
   });
 
   it('tests resetValue', () => {
-    const resetValue = jest.spyOn(wrapper.vm, 'resetValue');
+    const resetValue = vi.spyOn(wrapper.vm, 'resetValue');
     wrapper.vm.content = 'test';
     wrapper.vm.date = '08/11/2022';
     wrapper.vm.resetValue();
@@ -25,7 +25,7 @@ describe('AddReminder', () => {
   });
 
   it('tests optionSelected', () => {
-    const optionSelected = jest.spyOn(wrapper.vm, 'optionSelected');
+    const optionSelected = vi.spyOn(wrapper.vm, 'optionSelected');
     wrapper.vm.label = '';
     wrapper.vm.optionSelected({ target: { value: 'test' } });
     expect(wrapper.vm.label).toEqual('test');
@@ -33,7 +33,7 @@ describe('AddReminder', () => {
   });
 
   it('tests onAdd', () => {
-    const onAdd = jest.spyOn(wrapper.vm, 'onAdd');
+    const onAdd = vi.spyOn(wrapper.vm, 'onAdd');
     wrapper.vm.label = 'label';
     wrapper.vm.content = 'content';
     wrapper.vm.date = '08/11/2022';

app/javascript/dashboard/routes/dashboard/contacts/routes.js

@@ -7,13 +7,17 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts'),
     name: 'contacts_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
   },
   {
     path: frontendURL('accounts/:accountId/contacts/custom_view/:id'),
     name: 'contacts_segments_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
     props: route => {
       return { segmentsId: route.params.id };
@@ -22,7 +26,9 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/labels/:label/contacts'),
     name: 'contacts_labels_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactsView,
     props: route => {
       return { label: route.params.label };
@@ -31,7 +37,9 @@ export const routes = [
   {
     path: frontendURL('accounts/:accountId/contacts/:contactId'),
     name: 'contact_profile_dashboard',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ContactManageView,
     props: route => {
       return { contactId: route.params.contactId };

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -22,25 +22,40 @@
       :is-on-expanded-layout="isOnExpandedLayout"
       @contact-panel-toggle="onToggleContactPanel"
     />
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="chooseSnoozeTime"
+      />
+    </woot-modal>
   </section>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
+import { getUnixTime } from 'date-fns';
 import ChatList from '../../../components/ChatList.vue';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox.vue';
 import PopOverSearch from './search/PopOverSearch.vue';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
+import alertMixin from 'shared/mixins/alertMixin';
 import wootConstants from 'dashboard/constants/globals';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { CMD_SNOOZE_CONVERSATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 
 export default {
   components: {
     ChatList,
     ConversationBox,
     PopOverSearch,
+    CustomSnoozeModal,
   },
-  mixins: [uiSettingsMixin],
+  mixins: [uiSettingsMixin, alertMixin],
   props: {
     inboxId: {
       type: [String, Number],
@@ -70,12 +85,14 @@ export default {
   data() {
     return {
       showSearchModal: false,
+      showCustomSnoozeModal: false,
     };
   },
   computed: {
     ...mapGetters({
       chatList: 'getAllConversations',
       currentChat: 'getSelectedChat',
+      contextMenuChatId: 'getContextMenuChatId',
     }),
     showConversationList() {
       return this.isOnExpandedLayout ? !this.conversationId : true;
@@ -112,6 +129,10 @@ export default {
     this.$watch('chatList.length', () => {
       this.setActiveChat();
     });
+    this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+  },
+  beforeDestroy() {
+    this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
   },
 
   methods: {
@@ -186,6 +207,43 @@ export default {
     closeSearch() {
       this.showSearchModal = false;
     },
+    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 the custom snooze modal is open
+      // Then if the custom snooze modal is closed then set the context menu chat id to null
+      this.$store.dispatch('setContextMenuChatId', null);
+      this.showCustomSnoozeModal = false;
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -117,7 +117,7 @@
     />
 
     <div class="w-full">
-      <label> Social Profiles </label>
+      <label>{{ $t('CONTACTS_PAGE.LIST.TABLE_HEADER.SOCIAL_PROFILES') }}</label>
       <div
         v-for="socialProfile in socialProfileKeys"
         :key="socialProfile.key"
@@ -130,7 +130,7 @@
         </span>
         <input
           v-model="socialProfileUserNames[socialProfile.key]"
-          class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"
+          class="input-group-field ltr:!rounded-l-none rtl:rounded-r-none !mb-0"
           type="text"
         />
       </div>

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,13 +1,15 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView');
+const ConversationView = () => import('./ConversationView.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => {
         return { inboxId: 0 };
@@ -16,7 +18,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
       name: 'inbox_conversation',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return { inboxId: 0, conversationId: route.params.conversation_id };
@@ -25,7 +29,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
       name: 'inbox_dashboard',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return { inboxId: route.params.inbox_id };
@@ -36,7 +42,9 @@ export default {
         'accounts/:accountId/inbox/:inbox_id/conversations/:conversation_id'
       ),
       name: 'conversation_through_inbox',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => {
         return {
@@ -48,7 +56,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/label/:label'),
       name: 'label_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ label: route.params.label }),
     },
@@ -57,7 +67,9 @@ export default {
         'accounts/:accountId/label/:label/conversations/:conversation_id'
       ),
       name: 'conversations_through_label',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -67,7 +79,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/team/:teamId'),
       name: 'team_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ teamId: route.params.teamId }),
     },
@@ -76,7 +90,9 @@ export default {
         'accounts/:accountId/team/:teamId/conversations/:conversationId'
       ),
       name: 'conversations_through_team',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -86,7 +102,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/custom_view/:id'),
       name: 'folder_conversations',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({ foldersId: route.params.id }),
     },
@@ -95,7 +113,9 @@ export default {
         'accounts/:accountId/custom_view/:id/conversations/:conversation_id'
       ),
       name: 'conversations_through_folders',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversation_id,
@@ -105,7 +125,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/mentions/conversations'),
       name: 'conversation_mentions',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'mention' }),
     },
@@ -114,7 +136,9 @@ export default {
         'accounts/:accountId/mentions/conversations/:conversationId'
       ),
       name: 'conversation_through_mentions',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -124,7 +148,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/unattended/conversations'),
       name: 'conversation_unattended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'unattended' }),
     },
@@ -133,7 +159,9 @@ export default {
         'accounts/:accountId/unattended/conversations/:conversationId'
       ),
       name: 'conversation_through_unattended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,
@@ -143,7 +171,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/participating/conversations'),
       name: 'conversation_participating',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: () => ({ conversationType: 'participating' }),
     },
@@ -152,7 +182,9 @@ export default {
         'accounts/:accountId/participating/conversations/:conversationId'
       ),
       name: 'conversation_through_participating',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: ConversationView,
       props: route => ({
         conversationId: route.params.conversationId,

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -28,7 +28,9 @@ export default {
     {
       path: frontendURL('accounts/:accountId/suspended'),
       name: 'account_suspended',
-      roles: ['administrator', 'agent'],
+      meta: {
+        permissions: ['administrator', 'agent'],
+      },
       component: Suspended,
     },
   ],

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -59,13 +59,12 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage';
+import UpgradePage from './UpgradePage.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import PortalPopover from '../components/PortalPopover.vue';
 import HelpCenterSidebar from '../components/Sidebar/Sidebar.vue';
-import CommandBar from 'dashboard/routes/dashboard/commands/commandbar.vue';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal.vue';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector.vue';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
@@ -73,6 +72,8 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import portalMixin from '../mixins/portalMixin';
 import AddCategory from '../pages/categories/AddCategory.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+const CommandBar = () =>
+  import('dashboard/routes/dashboard/commands/commandbar.vue');
 
 export default {
   components: {

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -1,42 +1,48 @@
-import HelpCenterLayout from './components/HelpCenterLayout';
+import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';
 
-const ListAllPortals = () => import('./pages/portals/ListAllPortals');
-const NewPortal = () => import('./pages/portals/NewPortal');
+const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
+const NewPortal = () => import('./pages/portals/NewPortal.vue');
 
-const EditPortal = () => import('./pages/portals/EditPortal');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
+const EditPortal = () => import('./pages/portals/EditPortal.vue');
+const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
 const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization');
+  import('./pages/portals/EditPortalCustomization.vue');
 const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal');
-const PortalDetails = () => import('./pages/portals/PortalDetails');
-const PortalCustomization = () => import('./pages/portals/PortalCustomization');
+const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
+const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
+const PortalCustomization = () =>
+  import('./pages/portals/PortalCustomization.vue');
 const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish');
+  import('./pages/portals/PortalSettingsFinish.vue');
 
-const ListAllCategories = () => import('./pages/categories/ListAllCategories');
-const NewCategory = () => import('./pages/categories/NewCategory');
-const EditCategory = () => import('./pages/categories/EditCategory');
+const ListAllCategories = () =>
+  import('./pages/categories/ListAllCategories.vue');
+const NewCategory = () => import('./pages/categories/NewCategory.vue');
+const EditCategory = () => import('./pages/categories/EditCategory.vue');
 const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles');
+  import('./pages/articles/ListCategoryArticles.vue');
+const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
 const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles');
-const NewArticle = () => import('./pages/articles/NewArticle');
-const EditArticle = () => import('./pages/articles/EditArticle');
+  import('./pages/articles/DefaultPortalArticles.vue');
+const NewArticle = () => import('./pages/articles/NewArticle.vue');
+const EditArticle = () => import('./pages/articles/EditArticle.vue');
 
 const portalRoutes = [
   {
     path: getPortalRoute(''),
     name: 'default_portal_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator'],
+    },
     component: DefaultPortalArticles,
   },
   {
     path: getPortalRoute('all'),
     name: 'list_all_portals',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllPortals,
   },
   {
@@ -47,55 +53,73 @@ const portalRoutes = [
         path: '',
         name: 'new_portal_information',
         component: PortalDetails,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: ':portalSlug/customization',
         name: 'portal_customization',
         component: PortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: ':portalSlug/finish',
         name: 'portal_finish',
         component: PortalSettingsFinish,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
     ],
   },
   {
     path: getPortalRoute(':portalSlug'),
     name: 'portalSlug',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ShowPortal,
   },
   {
     path: getPortalRoute(':portalSlug/edit'),
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditPortal,
     children: [
       {
         path: '',
         name: 'edit_portal_information',
         component: EditPortalBasic,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'customizations',
         name: 'edit_portal_customization',
         component: EditPortalCustomization,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'locales',
         name: 'edit_portal_locales',
         component: EditPortalLocales,
-        roles: ['administrator'],
+        meta: {
+          permissions: ['administrator'],
+        },
       },
       {
         path: 'categories',
         name: 'list_all_locale_categories',
-        roles: ['administrator', 'agent'],
+        meta: {
+          permissions: ['administrator', 'agent'],
+        },
         component: ListAllCategories,
       },
     ],
@@ -106,39 +130,51 @@ const articleRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/articles'),
     name: 'list_all_locale_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/new'),
     name: 'new_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: NewArticle,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/mine'),
     name: 'list_mine_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/articles/archived'),
     name: 'list_archived_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/draft'),
     name: 'list_draft_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
 
   {
     path: getPortalRoute(':portalSlug/:locale/articles/:articleSlug'),
     name: 'edit_article',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditArticle,
   },
 ];
@@ -147,19 +183,25 @@ const categoryRoutes = [
   {
     path: getPortalRoute(':portalSlug/:locale/categories'),
     name: 'all_locale_categories',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllCategories,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/new'),
     name: 'new_category_in_locale',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: NewCategory,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'show_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListAllArticles,
   },
   {
@@ -167,13 +209,17 @@ const categoryRoutes = [
       ':portalSlug/:locale/categories/:categorySlug/articles'
     ),
     name: 'show_category_articles',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: ListCategoryArticles,
   },
   {
     path: getPortalRoute(':portalSlug/:locale/categories/:categorySlug'),
     name: 'edit_category',
-    roles: ['administrator', 'agent'],
+    meta: {
+      permissions: ['administrator', 'agent'],
+    },
     component: EditCategory,
   },
 ];

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: { EmojiInput },