Merge branch 'develop' into spike/permissions-for-agents

# Conflicts:
#	app/models/account_user.rb

.circleci/config.yml

@@ -7,7 +7,7 @@ defaults: &defaults
   working_directory: ~/build
   docker:
     # specify the version you desire here
-    - image: cimg/ruby:3.3.3-browsers
+    - image: cimg/ruby:3.2.2-browsers
 
     # Specify service dependencies here if necessary
     # CircleCI maintains a library of pre-built images
@@ -130,7 +130,10 @@ jobs:
           command: |
             mkdir -p ~/tmp/test-results/frontend_specs
             ~/tmp/cc-test-reporter before-build
-            yarn test:coverage
+            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}
       - 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.3.3"
+        RUBY_VERSION: "3.2.2"
         # 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.3.3"
+        RUBY_VERSION: "3.2.2"
         # 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"

.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.3.3
+3.2.2

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-ruby '3.3.3'
+ruby '3.2.2'
 
 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
@@ -111,12 +111,12 @@ 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.18.2', require: false
+gem 'sentry-rails', '>= 5.18.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.18.2', require: false
+gem 'sentry-sidekiq', '>= 5.18.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.0'
+gem 'sidekiq', '>= 7.2.4'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 

Gemfile.lock

@@ -103,8 +103,8 @@ GEM
       tzinfo (~> 2.0)
     acts-as-taggable-on (9.0.1)
       activerecord (>= 6.0, < 7.1)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -171,13 +171,10 @@ GEM
     commonmarker (0.23.10)
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
-    crack (1.0.0)
-      bigdecimal
+    crack (0.4.5)
       rexml
     crass (1.0.6)
-    csv (3.3.0)
-    csv-safe (3.3.1)
-      csv (~> 3.0)
+    csv-safe (3.2.1)
     cypress-on-rails (1.16.0)
       rack
     database_cleaner (2.0.2)
@@ -186,16 +183,13 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog-ci (0.8.3)
-      msgpack
     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)
+    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)
       msgpack
-    debase-ruby_core_source (3.3.1)
+    debase-ruby_core_source (3.2.0)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -359,7 +353,7 @@ GEM
       ruby2ruby (~> 2.4)
       ruby_parser (~> 3.10)
     hana (1.3.7)
-    hashdiff (1.1.0)
+    hashdiff (1.0.1)
     hashie (5.0.0)
     http (5.1.1)
       addressable (~> 2.8)
@@ -422,15 +416,15 @@ GEM
       addressable (~> 2.8)
     letter_opener (1.8.1)
       launchy (>= 2.2, < 3)
-    libdatadog (7.0.0.1.0)
-    libdatadog (7.0.0.1.0-x86_64-linux)
-    libddwaf (1.14.0.0.0)
+    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.14.0.0.0-arm64-darwin)
+    libddwaf (1.8.2.0.0-arm64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-darwin)
+    libddwaf (1.8.2.0.0-x86_64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-linux)
+    libddwaf (1.8.2.0.0-x86_64-linux)
       ffi (~> 1.0)
     line-bot-api (1.28.0)
     liquid (5.4.0)
@@ -440,7 +434,6 @@ 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)
@@ -467,7 +460,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.7)
-    minitest (5.24.1)
+    minitest (5.24.0)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -551,7 +544,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (5.0.1)
     puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
@@ -634,8 +627,8 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.2)
-      strscan
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
     rspec-expectations (3.13.1)
@@ -710,24 +703,23 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.18.2)
+    sentry-rails (5.18.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.18.2)
-    sentry-ruby (5.18.2)
+      sentry-ruby (~> 5.18.0)
+    sentry-ruby (5.18.0)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.18.2)
-      sentry-ruby (~> 5.18.2)
+    sentry-sidekiq (5.18.0)
+      sentry-ruby (~> 5.18.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.3.0)
+    sidekiq (7.2.4)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
-      logger
       rack (>= 2.2.4)
-      redis-client (>= 0.22.2)
+      redis-client (>= 0.19.0)
     sidekiq-cron (1.12.0)
       fugit (~> 1.8)
       globalid (>= 1.0.1)
@@ -810,7 +802,7 @@ GEM
     web-push (3.0.1)
       jwt (~> 2.0)
       openssl (~> 3.0)
-    webmock (3.23.1)
+    webmock (3.18.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
@@ -939,11 +931,11 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.18.2)
+  sentry-rails (>= 5.18.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.18.2)
+  sentry-sidekiq (>= 5.18.0)
   shoulda-matchers
-  sidekiq (>= 7.3.0)
+  sidekiq (>= 7.2.4)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
@@ -968,7 +960,7 @@ DEPENDENCIES
   working_hours
 
 RUBY VERSION
-   ruby 3.3.3p89
+   ruby 3.2.2p185
 
 BUNDLED WITH
-   2.5.16
+   2.4.6

app/builders/messages/messenger/message_builder.rb

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

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

@@ -0,0 +1,11 @@
+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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

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

@@ -15,10 +15,10 @@ describe('#accountAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
+      post: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -44,10 +44,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -71,10 +71,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -98,10 +98,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -129,10 +129,10 @@ describe('#PortalAPI', () => {
   describe('API calls', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -39,10 +39,10 @@ describe('#accountAPI', () => {
   describe('addParticipantToMeeting', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -41,10 +41,10 @@ describe('#linearAPI', () => {
   describe('getTeamEntities', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -66,10 +66,10 @@ describe('#linearAPI', () => {
   describe('createIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -96,10 +96,10 @@ describe('#linearAPI', () => {
   describe('link_issue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -125,10 +125,10 @@ describe('#linearAPI', () => {
   describe('getLinkedIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -150,10 +150,10 @@ describe('#linearAPI', () => {
   describe('unlinkIssue', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {
@@ -178,10 +178,10 @@ describe('#linearAPI', () => {
   describe('searchIssues', () => {
     const originalAxios = window.axios;
     const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.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: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
     };
 
     beforeEach(() => {

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

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

app/javascript/dashboard/components/ChatList.vue

@@ -111,19 +111,27 @@
         @updateFolder="onUpdateSavedFilter"
       />
     </woot-modal>
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="chooseSnoozeTime"
+      />
+    </woot-modal>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useAlert } from 'dashboard/composables';
 import VirtualList from 'vue-virtual-scroll-list';
 
 import ChatListHeader from './ChatListHeader.vue';
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
+import timeMixin from '../mixins/time';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
@@ -132,7 +140,9 @@ import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 import filterMixin from 'shared/mixins/filterMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
@@ -142,6 +152,10 @@ 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 {
@@ -156,8 +170,16 @@ export default {
     ConversationBulkActions,
     IntersectionObserver,
     VirtualList,
+    CustomSnoozeModal,
   },
-  mixins: [conversationMixin, keyboardEventListenerMixins, filterMixin],
+  mixins: [
+    timeMixin,
+    conversationMixin,
+    keyboardEventListenerMixins,
+    alertMixin,
+    filterMixin,
+    uiSettingsMixin,
+  ],
   provide() {
     return {
       // Actions to be performed on virtual list item and context menu.
@@ -202,13 +224,6 @@ export default {
       type: Boolean,
     },
   },
-  setup() {
-    const { uiSettings } = useUISettings();
-
-    return {
-      uiSettings,
-    };
-  },
   data() {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
@@ -232,6 +247,7 @@ 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.
@@ -267,6 +283,7 @@ export default {
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
       selectedConversations: 'bulkActions/getSelectedConversationIds',
+      contextMenuChatId: 'getContextMenuChatId',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -297,14 +314,28 @@ export default {
         unassigned: 'unAssignedCount',
         all: 'allCount',
       };
-      return Object.keys(ASSIGNEE_TYPE_TAB_KEYS).map(key => {
-        const count = this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
-        return {
-          key,
-          name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
-          count,
-        };
-      });
+      const userPermissions = this.currentUser.permissions;
+      const allowedTabs = {
+        me: ['conversation_manage', 'conversation_participating_manage'].some(
+          permission => userPermissions.includes(permission)
+        ),
+        unassigned: [
+          'conversation_manage',
+          'conversation_unassigned_manage',
+        ].some(permission => userPermissions.includes(permission)),
+        all: true,
+      };
+      return Object.keys(allowedTabs)
+        .filter(key => allowedTabs[key])
+        .map(key => {
+          const count =
+            this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
+          return {
+            key,
+            name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
+            count,
+          };
+        });
     },
     showAssigneeInConversationCard() {
       return (
@@ -500,6 +531,11 @@ 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) {
@@ -811,7 +847,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          useAlert(
+          this.showAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.AGENT_ASSIGNMENT.SUCCESFUL',
               {
@@ -821,10 +857,10 @@ export default {
             )
           );
         } else {
-          useAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
+          this.showAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        useAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
     async assignPriority(priority, conversationId = null) {
@@ -839,7 +875,7 @@ export default {
             newValue: priority,
             from: 'Context menu',
           });
-          useAlert(
+          this.showAlert(
             this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
               priority,
               conversationId,
@@ -882,7 +918,7 @@ export default {
           conversationId,
           teamId: team.id,
         });
-        useAlert(
+        this.showAlert(
           this.$t(
             'CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL',
             {
@@ -892,7 +928,7 @@ export default {
           )
         );
       } catch (error) {
-        useAlert(
+        this.showAlert(
           this.$t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED')
         );
       }
@@ -909,7 +945,7 @@ export default {
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
-          useAlert(
+          this.showAlert(
             this.$t(
               'CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_ASSIGNMENT.SUCCESFUL',
               {
@@ -919,10 +955,10 @@ export default {
             )
           );
         } else {
-          useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+          this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
         }
       } catch (err) {
-        useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
       }
     },
     async onAssignTeamsForBulk(team) {
@@ -935,9 +971,9 @@ export default {
           },
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
-        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
     async onUpdateConversations(status, snoozedUntil) {
@@ -951,9 +987,9 @@ export default {
           snoozed_until: snoozedUntil,
         });
         this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
-        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
       }
     },
     toggleConversationStatus(conversationId, status, snoozedUntil) {
@@ -964,7 +1000,7 @@ export default {
           snoozedUntil,
         })
         .then(() => {
-          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
           this.isLoading = false;
         });
     },
@@ -977,6 +1013,43 @@ 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/Code.vue

@@ -25,9 +25,10 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     script: {
       type: String,
@@ -60,7 +61,7 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.script);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
   },
 };

app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue

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

app/javascript/dashboard/components/MaskedText.vue

@@ -18,9 +18,10 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     value: {
       type: String,
@@ -36,7 +37,7 @@ export default {
     async onCopy(e) {
       e.preventDefault();
       await copyTextToClipboard(this.value);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
     },
     toggleMasked() {
       this.masked = !this.masked;

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -15,11 +15,13 @@
 
 <script>
 import WootSnackbar from './Snackbar.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: {
     WootSnackbar,
   },
+  mixins: [alertMixin],
   props: {
     duration: {
       type: Number,
@@ -40,7 +42,7 @@ export default {
     this.$emitter.off('newToastMessage', this.onNewToastMessage);
   },
   methods: {
-    onNewToastMessage({ message, action }) {
+    onNewToastMessage(message, action) {
       this.snackMessages.push({
         key: new Date().getTime(),
         message,

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

@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
 import Banner from 'dashboard/components/ui/Banner.vue';
+import { mapGetters } from 'vuex';
+import adminMixin from 'dashboard/mixins/isAdmin';
 import accountMixin from 'dashboard/mixins/account';
 
 const EMPTY_SUBSCRIPTION_INFO = {
@@ -22,13 +22,7 @@ const EMPTY_SUBSCRIPTION_INFO = {
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
+  mixins: [adminMixin, accountMixin],
   computed: {
     ...mapGetters({
       isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',

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

@@ -14,11 +14,11 @@
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
 import accountMixin from 'dashboard/mixins/account';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
+  mixins: [accountMixin, alertMixin],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -36,7 +36,7 @@ export default {
   methods: {
     resendVerificationEmail() {
       this.$store.dispatch('resendConfirmation');
-      useAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
     },
   },
 };

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

@@ -14,20 +14,15 @@ import Banner from 'dashboard/components/ui/Banner.vue';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
+import adminMixin from 'dashboard/mixins/isAdmin';
 import { hasAnUpdateAvailable } from './versionCheckHelper';
 
 export default {
   components: { Banner },
+  mixins: [adminMixin],
   props: {
     latestChatwootVersion: { type: String, default: '' },
   },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
   data() {
     return { userDismissedBanner: false };
   },

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

@@ -12,12 +12,13 @@
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
+import adminMixin from 'dashboard/mixins/isAdmin';
 import accountMixin from 'dashboard/mixins/account';
 import { differenceInDays } from 'date-fns';
 
 export default {
   components: { Banner },
-  mixins: [accountMixin],
+  mixins: [adminMixin, accountMixin],
   data() {
     return { conversationMeta: {} };
   },

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

@@ -78,7 +78,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -94,7 +94,7 @@ export default {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [alertMixin, keyboardEventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
@@ -209,7 +209,7 @@ export default {
           snoozedUntil,
         })
         .then(() => {
-          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
           this.isLoading = false;
         });
     },

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

@@ -18,7 +18,7 @@
       </woot-button>
     </woot-dropdown-item>
     <woot-dropdown-divider />
-    <woot-dropdown-item class="flex items-center justify-between p-2 m-0">
+    <woot-dropdown-item class="m-0 flex items-center justify-between p-2">
       <div class="flex items-center">
         <fluent-icon
           v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
@@ -28,7 +28,7 @@
         />
 
         <span
-          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
+          class="my-0 mx-1 text-xs font-medium text-slate-600 dark:text-slate-100"
         >
           {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
         </span>
@@ -36,7 +36,7 @@
 
       <woot-switch
         size="small"
-        class="mx-1 mt-px mb-0"
+        class="mt-px mx-1 mb-0"
         :value="currentUserAutoOffline"
         @input="updateAutoOffline"
       />
@@ -47,7 +47,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -65,6 +65,9 @@ export default {
     WootDropdownItem,
     AvailabilityStatusBadge,
   },
+
+  mixins: [alertMixin],
+
   data() {
     return {
       isStatusMenuOpened: false,
@@ -126,7 +129,7 @@ export default {
           account_id: this.currentAccountId,
         });
       } catch (error) {
-        useAlert(
+        this.showAlert(
           this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
         );
       } finally {

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

@@ -30,20 +30,21 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
+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, { routesWithPermissions } from '../../routes';
-import { hasPermissions } from '../../helper/permissionsHelper';
+import router from '../../routes';
 
 export default {
   components: {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,
@@ -97,12 +98,11 @@ export default {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
-      const userPermissions = this.currentUser.permissions;
+      const permissions = this.currentUser.permissions;
       const menuItems = this.sideMenuConfig.primaryMenu;
       return menuItems.filter(menuItem => {
-        const isAvailableForTheUser = hasPermissions(
-          routesWithPermissions[menuItem.toStateName],
-          userPermissions
+        const isAvailableForTheUser = permissions.some(permission =>
+          menuItem.meta.permissions.includes(permission)
         );
 
         if (!isAvailableForTheUser) {

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

@@ -11,6 +11,9 @@ const campaigns = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'ongoing_campaigns',
+      meta: {
+        permissions: ['account_manage'],
+      },
     },
     {
       key: 'oneOffCampaigns',
@@ -19,6 +22,9 @@ const campaigns = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
       toStateName: 'one_off',
+      meta: {
+        permissions: ['account_manage'],
+      },
     },
   ],
 });

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

@@ -14,6 +14,9 @@ const contacts = accountId => ({
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'contacts_dashboard',
     },
   ],

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

@@ -28,6 +28,9 @@ const conversations = accountId => ({
       key: 'conversations',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
       toolTip: 'Conversation from all subscribed inboxes',
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'home',
     },
     {
@@ -35,6 +38,9 @@ const conversations = accountId => ({
       label: 'MENTIONED_CONVERSATIONS',
       key: 'conversation_mentions',
       toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_mentions',
     },
     {
@@ -42,6 +48,9 @@ const conversations = accountId => ({
       label: 'UNATTENDED_CONVERSATIONS',
       key: 'conversation_unattended',
       toState: frontendURL(`accounts/${accountId}/unattended/conversations`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_unattended',
     },
   ],

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

@@ -9,6 +9,14 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.INBOX_VIEW,
     toState: frontendURL(`accounts/${accountId}/inbox-view`),
     toStateName: 'inbox_view',
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'chat',
@@ -16,6 +24,14 @@ const primaryMenuItems = accountId => [
     label: 'CONVERSATIONS',
     toState: frontendURL(`accounts/${accountId}/dashboard`),
     toStateName: 'home',
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'book-contacts',
@@ -24,6 +40,14 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
     toStateName: 'contacts_dashboard',
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
   {
     icon: 'arrow-trending-lines',
@@ -31,7 +55,10 @@ const primaryMenuItems = accountId => [
     label: 'REPORTS',
     featureFlag: FEATURE_FLAGS.REPORTS,
     toState: frontendURL(`accounts/${accountId}/reports`),
-    toStateName: 'account_overview_reports',
+    toStateName: 'settings_account_reports',
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'megaphone',
@@ -40,6 +67,9 @@ const primaryMenuItems = accountId => [
     featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
     toStateName: 'ongoing_campaigns',
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'library',
@@ -49,6 +79,9 @@ const primaryMenuItems = accountId => [
     alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
+    meta: {
+      permissions: ['account_manage'],
+    },
   },
   {
     icon: 'settings',
@@ -56,6 +89,14 @@ const primaryMenuItems = accountId => [
     label: 'SETTINGS',
     toState: frontendURL(`accounts/${accountId}/settings`),
     toStateName: 'settings_home',
+    meta: {
+      permissions: [
+        'account_manage',
+        'conversation_manage',
+        'conversation_participating_manage',
+        'conversation_unassigned_manage',
+      ],
+    },
   },
 ];
 

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

@@ -20,6 +20,9 @@ const reports = accountId => ({
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'account_overview_reports',
     },
     {
@@ -27,6 +30,9 @@ const reports = accountId => ({
       label: 'REPORTS_CONVERSATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/conversation`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'conversation_reports',
     },
     {
@@ -34,6 +40,9 @@ const reports = accountId => ({
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'csat_reports',
     },
     {
@@ -42,6 +51,9 @@ const reports = accountId => ({
       hasSubMenu: false,
       featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
       toState: frontendURL(`accounts/${accountId}/reports/bot`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'bot_reports',
     },
     {
@@ -49,6 +61,9 @@ const reports = accountId => ({
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'agent_reports',
     },
     {
@@ -56,6 +71,9 @@ const reports = accountId => ({
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'label_reports',
     },
     {
@@ -63,6 +81,9 @@ const reports = accountId => ({
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'inbox_reports',
     },
     {
@@ -70,6 +91,9 @@ const reports = accountId => ({
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'team_reports',
     },
     {
@@ -78,6 +102,9 @@ const reports = accountId => ({
       hasSubMenu: false,
       featureFlag: FEATURE_FLAGS.SLA,
       toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'sla_reports',
     },
   ],

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

@@ -24,6 +24,7 @@ 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',
@@ -45,162 +46,173 @@ const settings = accountId => ({
       icon: 'briefcase',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/general`),
+      meta: {
+        permissions: ['account_manage'],
+      },
       toStateName: 'general_settings_index',
     },
     {
       icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AGENT_MANAGEMENT,
     },
     {
       icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.TEAM_MANAGEMENT,
     },
     {
       icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.INBOX_MANAGEMENT,
     },
     {
       icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.LABELS,
     },
     {
       icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(
         `accounts/${accountId}/settings/custom-attributes/list`
       ),
       toStateName: 'attributes_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.CUSTOM_ATTRIBUTES,
     },
     {
       icon: 'automation',
       label: 'AUTOMATION',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AUTOMATIONS,
     },
     {
       icon: 'bot',
       label: 'AGENT_BOTS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
       toStateName: 'agent_bots',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.AGENT_BOTS,
     },
     {
       icon: 'flash-settings',
       label: 'MACROS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator', 'agent'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/macros`),
       toStateName: 'macros_wrapper',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.MACROS,
     },
     {
       icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator', 'agent'],
-      },
       toState: frontendURL(
         `accounts/${accountId}/settings/canned-response/list`
       ),
       toStateName: 'canned_list',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.CANNED_RESPONSES,
     },
     {
       icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
+      toStateName: 'settings_integrations',
+      meta: {
+        permissions: ['account_manage'],
+      },
+      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
+    },
+    {
+      icon: 'star-emphasis',
+      label: 'APPLICATIONS',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
+      meta: {
+        permissions: ['account_manage'],
+      },
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
     {
       icon: 'key',
       label: 'AUDIT_LOGS',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
       toStateName: 'auditlogs_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
+      meta: {
+        permissions: ['account_manage'],
+      },
       beta: true,
     },
     {
       icon: 'document-list-clock',
       label: 'SLA',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
       toStateName: 'sla_list',
       isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.SLA,
+      meta: {
+        permissions: ['account_manage'],
+      },
       beta: true,
     },
     {
       icon: 'credit-card-person',
       label: 'BILLING',
       hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
       toState: frontendURL(`accounts/${accountId}/settings/billing`),
       toStateName: 'billing_settings_index',
+      meta: {
+        permissions: ['account_manage'],
+      },
       showOnlyOnCloud: true,
     },
   ],

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

@@ -51,9 +51,10 @@
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -87,13 +88,13 @@ export default {
           account_name: this.accountName,
         });
         this.$emit('close-account-create-modal');
-        useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
         if (error.response.status === 422) {
-          useAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
         } else {
-          useAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
         }
       }
     },

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

@@ -29,8 +29,6 @@ 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: {
@@ -84,10 +82,10 @@ export default {
     accessibleMenuItems() {
       const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
         menuItem => {
+          const { meta: { permissions: menuPermissions = [] } = {} } = menuItem;
           const { permissions: userPermissions = [] } = this.currentUser;
-          return hasPermissions(
-            routesWithPermissions[menuItem.toStateName],
-            userPermissions
+          return menuPermissions.some(permission =>
+            userPermissions.includes(permission)
           );
         }
       );

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

@@ -65,7 +65,7 @@
         :show-child-count="showChildCount(child.count)"
         :child-item-count="child.count"
       />
-      <Policy :permissions="['administrator']">
+      <Policy :permissions="['account_manage']">
         <router-link
           v-if="menuItem.newLink"
           v-slot="{ href, navigate }"
@@ -94,7 +94,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
+
+import adminMixin from '../../../mixins/isAdmin';
 import configMixin from 'shared/mixins/configMixin';
 import {
   getInboxClassByType,
@@ -110,19 +111,13 @@ import Policy from '../../policy.vue';
 
 export default {
   components: { SecondaryChildNavItem, Policy },
-  mixins: [configMixin],
+  mixins: [adminMixin, configMixin],
   props: {
     menuItem: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
   computed: {
     ...mapGetters({
       activeInbox: 'getSelectedInbox',

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

@@ -1,12 +1,12 @@
-import AccountSelector from '../AccountSelector.vue';
+import AccountSelector from '../AccountSelector';
 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.vue';
-import WootModalHeader from 'dashboard/components/ModalHeader.vue';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+import WootModal from 'dashboard/components/Modal';
+import WootModalHeader from 'dashboard/components/ModalHeader';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 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.vue';
+import AgentDetails from '../AgentDetails';
 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.vue';
-import WootButton from 'dashboard/components/ui/WootButton.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import WootButton from 'dashboard/components/ui/WootButton';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);

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

@@ -1,15 +1,13 @@
-import NotificationBell from '../NotificationBell.vue';
+import NotificationBell from '../NotificationBell';
 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',
@@ -29,7 +27,7 @@ describe('notificationBell', () => {
 
   beforeEach(() => {
     actions = {
-      showNotification: vi.fn(),
+      showNotification: jest.fn(),
     };
     modules = {
       auth: {

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

@@ -2,21 +2,15 @@ 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);
@@ -24,14 +18,12 @@ 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;
@@ -39,7 +31,7 @@ describe('AvailabilityStatus', () => {
 
   beforeEach(() => {
     actions = {
-      updateAvailability: vi.fn(() => {
+      updateAvailability: jest.fn(() => {
         return Promise.resolve();
       }),
     };
@@ -49,7 +41,6 @@ describe('AvailabilityStatus', () => {
         getters: {
           getCurrentUserAvailability: () => currentAvailability,
           getCurrentAccountId: () => currentAccountId,
-          getCurrentUserAutoOffline: () => currentUserAutoOffline,
         },
       },
     };

app/javascript/dashboard/components/policy.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useStoreGetters } from 'dashboard/composables/store';
 import { computed } from 'vue';
-import { hasPermissions } from '../helper/permissionsHelper';
+
 const props = defineProps({
   permissions: {
     type: Array,
@@ -11,8 +11,9 @@ const props = defineProps({
 
 const getters = useStoreGetters();
 const user = getters.getCurrentUser.value;
+
 const hasPermission = computed(() =>
-  hasPermissions(props.permissions, user.permissions)
+  props.permissions.some(permission => user.permissions.includes(permission))
 );
 </script>
 

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

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

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

@@ -1,6 +1,6 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
-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(() => {
-    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
   });
 
   afterEach(() => {
-    vi.restoreAllMocks();
+    jest.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', () => {
-    vi.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    jest.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
 
-  beforeEach(() => {
+  beforeAll(() => {
     // Mocking the current date to ensure consistency in tests
-    vi.useFakeTimers().setSystemTime(currentDate.getTime());
+    jest.useFakeTimers().setSystemTime(currentDate.getTime());
   });
 
-  afterEach(() => {
-    vi.useRealTimers();
+  afterAll(() => {
+    jest.useRealTimers();
   });
 
   it('returns the correct range for "last7days"', () => {

app/javascript/dashboard/components/ui/TimeAgo.vue

@@ -5,7 +5,7 @@
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
+    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
   >
     <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
   </div>
@@ -16,14 +16,11 @@ const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;
 
-import {
-  dynamicTime,
-  dateFormat,
-  shortTimestamp,
-} from 'shared/helpers/timeHelper';
+import timeMixin from 'dashboard/mixins/time';
 
 export default {
   name: 'TimeAgo',
+  mixins: [timeMixin],
   props: {
     isAutoRefreshEnabled: {
       type: Boolean,
@@ -40,17 +37,17 @@ export default {
   },
   data() {
     return {
-      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
-      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
+      lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
       timer: null,
     };
   },
   computed: {
     lastActivityTime() {
-      return shortTimestamp(this.lastActivityAtTimeAgo);
+      return this.shortTimestamp(this.lastActivityAtTimeAgo);
     },
     createdAtTime() {
-      return shortTimestamp(this.createdAtTimeAgo);
+      return this.shortTimestamp(this.createdAtTimeAgo);
     },
     createdAt() {
       const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
@@ -59,9 +56,9 @@ export default {
         ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
             this.createdAtTimeAgo
           }`
-        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
-            this.createdAtTimestamp
-          )}`;
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
+          )} ${this.dateFormat(this.createdAtTimestamp)}`;
     },
     lastActivity() {
       const lastActivityTimeDiff =
@@ -73,7 +70,7 @@ export default {
           }`
         : `${this.$t(
             'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${dateFormat(this.lastActivityTimestamp)}`;
+          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
     },
     tooltipText() {
       return `${this.createdAt}
@@ -82,10 +79,10 @@ export default {
   },
   watch: {
     lastActivityTimestamp() {
-      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+      this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
     },
     createdAtTimestamp() {
-      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+      this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
     },
   },
   mounted() {
@@ -99,8 +96,10 @@ export default {
   methods: {
     createTimer() {
       this.timer = setTimeout(() => {
-        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
-        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+        this.lastActivityAtTimeAgo = this.dynamicTime(
+          this.lastActivityTimestamp
+        );
+        this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
         this.createTimer();
       }, this.refreshTime());
     },

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -35,13 +35,13 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import aiMixin from 'dashboard/mixins/aiMixin';
+import adminMixin from 'dashboard/mixins/aiMixin';
+import aiMixin from 'dashboard/mixins/isAdmin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {
@@ -50,17 +50,7 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
-  mixins: [aiMixin, keyboardEventListenerMixins],
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
-    const { isAdmin } = useAdmin();
-
-    return {
-      uiSettings,
-      updateUISettings,
-      isAdmin,
-    };
-  },
+  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
   data: () => ({
     showAIAssistanceModal: false,
     showAICtaModal: false,

app/javascript/dashboard/components/widgets/AICTAModal.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="flex-1 min-w-0 px-0">
+  <div class="px-0 min-w-0 flex-1">
     <woot-modal-header
       :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
       :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
     />
     <form
-      class="flex flex-col flex-wrap modal-content"
+      class="flex flex-wrap flex-col modal-content"
       @submit.prevent="finishOpenAI"
     >
-      <div class="w-full mt-2">
+      <div class="mt-2 w-full">
         <woot-input
           v-model="value"
           type="text"
@@ -19,7 +19,7 @@
           @blur="$v.value.$touch"
         />
       </div>
-      <div class="flex flex-row justify-between w-full gap-2 px-0 py-2">
+      <div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
         <woot-button variant="link" @click.prevent="openOpenAIDoc">
           {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
         </woot-button>
@@ -39,20 +39,13 @@
 <script>
 import { required } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import aiMixin from 'dashboard/mixins/aiMixin';
+import alertMixin from 'shared/mixins/alertMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
-  mixins: [aiMixin],
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
+  mixins: [aiMixin, alertMixin, uiSettingsMixin],
   data() {
     return {
       value: '',
@@ -74,7 +67,7 @@ export default {
     },
 
     onDismiss() {
-      useAlert(
+      this.showAlert(
         this.$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DISMISS_MESSAGE')
       );
       this.updateUISettings({
@@ -104,7 +97,7 @@ export default {
         this.alertMessage =
           errorMessage || this.$t('INTEGRATION_APPS.ADD.API.ERROR_MESSAGE');
       } finally {
-        useAlert(this.alertMessage);
+        this.showAlert(this.alertMessage);
       }
     },
     openOpenAIDoc() {

app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -26,12 +26,13 @@
 </template>
 
 <script>
-import { useAlert } from 'dashboard/composables';
 import Spinner from 'shared/components/Spinner.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     Spinner,
   },
+  mixins: [alertMixin],
   props: {
     value: {
       type: Array,
@@ -70,7 +71,7 @@ export default {
       } catch (error) {
         this.uploadState = 'failed';
         this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOAD_FAILED');
-        useAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
+        this.showAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
       }
     },
   },

app/javascript/dashboard/components/widgets/LabelSelector.vue

@@ -33,7 +33,7 @@
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
-import { useAdmin } from 'dashboard/composables/useAdmin';
+import adminMixin from 'dashboard/mixins/isAdmin';
 
 export default {
   components: {
@@ -41,7 +41,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [keyboardEventListenerMixins],
+  mixins: [adminMixin, keyboardEventListenerMixins],
 
   props: {
     allLabels: {
@@ -54,13 +54,6 @@ export default {
     },
   },
 
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-
   data() {
     return {
       showSearchDropdownLabel: false,

app/javascript/dashboard/components/widgets/VideoCallButton.vue

@@ -15,9 +15,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import DyteAPI from 'dashboard/api/integrations/dyte';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     conversationId: {
       type: Number,
@@ -46,7 +47,7 @@ export default {
       try {
         await DyteAPI.createAMeeting(this.conversationId);
       } catch (error) {
-        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR'));
+        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.CREATE_ERROR'));
       } finally {
         this.isLoading = false;
       }

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -11,7 +11,7 @@ import 'videojs-record/dist/css/videojs.record.css';
 
 import videojs from 'video.js';
 
-import { useAlert } from 'dashboard/composables';
+import alertMixin from '../../../../shared/mixins/alertMixin';
 
 import Recorder from 'opus-recorder';
 
@@ -50,6 +50,7 @@ const RECORDER_CONFIG = {
 
 export default {
   name: 'WootAudioRecorder',
+  mixins: [alertMixin],
   props: {
     audioRecordFormat: {
       type: String,
@@ -187,10 +188,14 @@ export default {
         deviceErrorName?.includes('notallowederror') ||
         deviceErrorName?.includes('permissiondeniederror')
       ) {
-        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION'));
+        this.showAlert(
+          this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION')
+        );
         this.fireStateRecorderChanged('notallowederror');
       } else {
-        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ERROR'));
+        this.showAlert(
+          this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ERROR')
+        );
       }
     },
     formatTimeProgress() {

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -80,7 +80,8 @@ import {
   hasPressedCommandAndEnter,
 } from 'shared/helpers/KeyboardHelpers';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import { useUISettings } from 'dashboard/composables/useUISettings';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import {
   replaceVariablesInMessage,
   createTypingIndicator,
@@ -88,7 +89,7 @@ import {
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import {
   MESSAGE_EDITOR_MENU_OPTIONS,
   MESSAGE_EDITOR_IMAGE_RESIZES,
@@ -118,7 +119,7 @@ const createState = (
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -138,19 +139,6 @@ export default {
     channelType: { type: String, default: '' },
     showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   },
-  setup() {
-    const {
-      uiSettings,
-      isEditorHotKeyEnabled,
-      fetchSignatureFlagFromUISettings,
-    } = useUISettings();
-
-    return {
-      uiSettings,
-      isEditorHotKeyEnabled,
-      fetchSignatureFlagFromUISettings,
-    };
-  },
   data() {
     return {
       typingIndicator: createTypingIndicator(
@@ -290,7 +278,7 @@ export default {
       // this is considered the source of truth, we watch this property
       // on change, we toggle the signature in the editor
       if (this.allowSignature && !this.isPrivate && this.channelType) {
-        return this.fetchSignatureFlagFromUISettings(this.channelType);
+        return this.fetchSignatureFlagFromUiSettings(this.channelType);
       }
 
       return false;
@@ -533,10 +521,10 @@ export default {
       }
     },
     isEnterToSendEnabled() {
-      return this.isEditorHotKeyEnabled('enter');
+      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
     },
     isCmdPlusEnterToSendEnabled() {
-      return this.isEditorHotKeyEnabled('cmd_enter');
+      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
     },
     getKeyboardEvents() {
       return {
@@ -623,7 +611,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
         this.uploadImageToStorage(file);
       } else {
-        useAlert(
+        this.showAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR',
             {
@@ -641,13 +629,13 @@ export default {
         if (fileUrl) {
           this.onImageInsertInEditor(fileUrl);
         }
-        useAlert(
+        this.showAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
           )
         );
       } catch (error) {
-        useAlert(
+        this.showAlert(
           this.$t(
             'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_ERROR'
           )

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -24,9 +24,9 @@ import {
   Selection,
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
+import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const createState = (
@@ -51,21 +51,13 @@ const createState = (
 };
 
 export default {
-  mixins: [keyboardEventListenerMixins],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
   },
-  setup() {
-    const { uiSettings, updateUISettings } = useUISettings();
-
-    return {
-      uiSettings,
-      updateUISettings,
-    };
-  },
   data() {
     return {
       editorView: null,
@@ -116,7 +108,7 @@ export default {
       if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
         this.uploadImageToStorage(file);
       } else {
-        useAlert(
+        this.showAlert(
           this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR_FILE_SIZE', {
             size: MAXIMUM_FILE_UPLOAD_SIZE,
           })
@@ -135,9 +127,13 @@ export default {
         if (fileUrl) {
           this.onImageUploadStart(fileUrl);
         }
-        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS'));
+        this.showAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.SUCCESS')
+        );
       } catch (error) {
-        useAlert(this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR'));
+        this.showAlert(
+          this.$t('HELP_CENTER.ARTICLE_EDITOR.IMAGE_UPLOAD.ERROR')
+        );
       }
     },
     onImageUploadStart(fileUrl) {

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -134,10 +134,10 @@
 </template>
 
 <script>
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
@@ -153,7 +153,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [keyboardEventListenerMixins, inboxMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
   props: {
     mode: {
       type: String,
@@ -248,15 +248,6 @@ export default {
       required: true,
     },
   },
-  setup() {
-    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
-      useUISettings();
-
-    return {
-      setSignatureFlagForInbox,
-      fetchSignatureFlagFromUISettings,
-    };
-  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -329,7 +320,7 @@ export default {
     },
     sendWithSignature() {
       // channelType is sourced from inboxMixin
-      return this.fetchSignatureFlagFromUISettings(this.channelType);
+      return this.fetchSignatureFlagFromUiSettings(this.channelType);
     },
     signatureToggleTooltip() {
       return this.sendWithSignature

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

@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import { required, requiredIf } from 'vuelidate/lib/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
@@ -94,7 +94,7 @@ export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
+  mixins: [alertMixin, filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -341,7 +341,7 @@ export default {
     },
     removeFilter(index) {
       if (this.appliedFilters.length <= 1) {
-        useAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
+        this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
       } else {
         this.appliedFilters.splice(index, 1);
       }

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

@@ -12,10 +12,10 @@
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
+      class="dropdown-pane dropdown-pane--open mt-1 right-0 basic-filter"
     >
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+      <div class="items-center flex justify-between last:mt-4">
+        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <filter-item
@@ -26,8 +26,8 @@
           @onChangeFilter="onChangeFilter"
         />
       </div>
-      <div class="flex items-center justify-between last:mt-4">
-        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
+      <div class="items-center flex justify-between last:mt-4">
+        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <filter-item
@@ -46,19 +46,13 @@
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
-import { useUISettings } from 'dashboard/composables/useUISettings';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
     FilterItem,
   },
-  setup() {
-    const { updateUISettings } = useUISettings();
-
-    return {
-      updateUISettings,
-    };
-  },
+  mixins: [uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,

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

@@ -120,11 +120,13 @@ import { mapGetters } from 'vuex';
 import Thumbnail from '../Thumbnail.vue';
 import MessagePreview from './MessagePreview.vue';
 import conversationMixin from '../../../mixins/conversations';
+import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
@@ -141,7 +143,8 @@ export default {
     PriorityMark,
     SLACardLabel,
   },
-  mixins: [inboxMixin, conversationMixin],
+
+  mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
   props: {
     activeLabel: {
       type: String,

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

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
-    <div class="flex flex-col h-auto overflow-auto">
+    <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"
         :header-content="$t('EMAIL_TRANSCRIPT.DESC')"
@@ -61,7 +61,7 @@
             </label>
           </div>
         </div>
-        <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
+        <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
           <woot-submit-button
             :button-text="$t('EMAIL_TRANSCRIPT.SUBMIT')"
             :disabled="!isFormValid"
@@ -77,8 +77,9 @@
 
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 export default {
+  mixins: [alertMixin],
   props: {
     show: {
       type: Boolean,
@@ -141,10 +142,10 @@ export default {
           email: this.selectedEmailAddress,
           conversationId: this.currentChat.id,
         });
-        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
+        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
         this.onCancel();
       } catch (error) {
-        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+        this.showAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
       } finally {
         this.isSubmitting = false;
       }

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

@@ -35,7 +35,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
+import adminMixin from 'dashboard/mixins/isAdmin';
 import accountMixin from 'dashboard/mixins/account';
 import OnboardingView from '../OnboardingView.vue';
 import EmptyStateMessage from './EmptyStateMessage.vue';
@@ -45,19 +45,13 @@ export default {
     OnboardingView,
     EmptyStateMessage,
   },
-  mixins: [accountMixin],
+  mixins: [accountMixin, adminMixin],
   props: {
     isOnExpandedLayout: {
       type: Boolean,
       default: false,
     },
   },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
   computed: {
     ...mapGetters({
       currentChat: 'getSelectedChat',

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

@@ -127,7 +127,7 @@
     </div>
     <div
       v-if="shouldShowContextMenu"
-      class="invisible context-menu-wrap group-hover:visible"
+      class="context-menu-wrap invisible group-hover:visible"
     >
       <context-menu
         v-if="isBubble && !isMessageDeleted"
@@ -157,7 +157,8 @@ import ContextMenu from 'dashboard/modules/conversations/components/MessageConte
 import InstagramStory from './bubble/InstagramStory.vue';
 import InstagramStoryReply from './bubble/InstagramStoryReply.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import { CONTENT_TYPES } from 'shared/constants/contentType';
+import alertMixin from 'shared/mixins/alertMixin';
+import contentTypeMixin from 'shared/mixins/contentTypeMixin';
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { generateBotMessageContent } from './helpers/botMessageContentHelper';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -165,7 +166,6 @@ import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { getDayDifferenceFromNow } from 'shared/helpers/DateHelper';
-import * as Sentry from '@sentry/browser';
 
 export default {
   components: {
@@ -183,7 +183,7 @@ export default {
     InstagramStoryReply,
     Spinner,
   },
-  mixins: [messageFormatterMixin],
+  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
   props: {
     data: {
       type: Object,
@@ -481,9 +481,6 @@ export default {
       }
       return '';
     },
-    isEmailContentType() {
-      return this.contentType === CONTENT_TYPES.INCOMING_EMAIL;
-    },
   },
   watch: {
     data() {
@@ -501,35 +498,19 @@ export default {
   },
   methods: {
     isAttachmentImageVideoAudio(fileType) {
-      return ['image', 'audio', 'video', 'story_mention', 'ig_reel'].includes(
-        fileType
-      );
+      return ['image', 'audio', 'video', 'story_mention'].includes(fileType);
     },
     hasMediaAttachment(type) {
       if (this.hasAttachments && this.data.attachments.length > 0) {
-        return this.compareMessageFileType(this.data, type);
+        const { attachments = [{}] } = this.data;
+        const { file_type: fileType } = attachments[0];
+        return fileType === type && !this.hasMediaLoadError;
       }
       if (this.storyReply) {
         return true;
       }
       return false;
     },
-    compareMessageFileType(messageData, type) {
-      try {
-        const { attachments = [{}] } = messageData;
-        const { file_type: fileType } = attachments[0];
-        return fileType === type && !this.hasMediaLoadError;
-      } catch (err) {
-        Sentry.setContext('attachment-parsing-error', {
-          messageData,
-          type,
-          hasMediaLoadError: this.hasMediaLoadError,
-        });
-
-        Sentry.captureException(err);
-        return false;
-      }
-    },
     handleContextMenuClick() {
       this.showContextMenu = !this.showContextMenu;
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center gap-2 actions--container">
+  <div class="flex actions--container relative items-center gap-2">
     <woot-button
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
@@ -37,7 +37,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
 import {
@@ -51,6 +51,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
+  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,
@@ -72,11 +73,11 @@ export default {
   methods: {
     mute() {
       this.$store.dispatch('muteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
+      this.showAlert(this.$t('CONTACT_PANEL.MUTED_SUCCESS'));
     },
     unmute() {
       this.$store.dispatch('unmuteConversation', this.currentChat.id);
-      useAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
+      this.showAlert(this.$t('CONTACT_PANEL.UNMUTED_SUCCESS'));
     },
     toggleEmailActionsModal() {
       this.showEmailActionsModal = !this.showEmailActionsModal;

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

@@ -153,8 +153,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
+import alertMixin from 'shared/mixins/alertMixin';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import CannedResponse from './CannedResponse.vue';
@@ -181,8 +180,10 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
+import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
@@ -196,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.vue');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
 export default {
   components: {
@@ -217,6 +218,8 @@ export default {
   },
   mixins: [
     inboxMixin,
+    uiSettingsMixin,
+    alertMixin,
     messageFormatterMixin,
     rtlMixin,
     fileUploadMixin,
@@ -228,21 +231,6 @@ export default {
       default: false,
     },
   },
-  setup() {
-    const {
-      uiSettings,
-      updateUISettings,
-      isEditorHotKeyEnabled,
-      fetchSignatureFlagFromUISettings,
-    } = useUISettings();
-
-    return {
-      uiSettings,
-      updateUISettings,
-      isEditorHotKeyEnabled,
-      fetchSignatureFlagFromUISettings,
-    };
-  },
   data() {
     return {
       message: '',
@@ -322,7 +310,7 @@ export default {
             agentId,
           })
           .then(() => {
-            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+            this.showAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
           });
       },
     },
@@ -418,7 +406,7 @@ export default {
       if (this.isPrivate) {
         sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
       }
-      const keyLabel = this.isEditorHotKeyEnabled('cmd_enter')
+      const keyLabel = isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter')
         ? '(⌘ + ↵)'
         : '(↵)';
       return `${sendMessageText} ${keyLabel}`;
@@ -491,7 +479,7 @@ export default {
       return !!this.signatureToApply;
     },
     sendWithSignature() {
-      return this.fetchSignatureFlagFromUISettings(this.channelType);
+      return this.fetchSignatureFlagFromUiSettings(this.channelType);
     },
     editorMessageKey() {
       const { editor_message_key: isEnabled } = this.uiSettings;
@@ -760,7 +748,7 @@ export default {
         !this.showCannedMenu &&
         !this.showVariablesMenu &&
         this.isFocused &&
-        this.isEditorHotKeyEnabled(selectedKey)
+        isEditorHotKeyEnabled(this.uiSettings, selectedKey)
       );
     },
     onPaste(e) {
@@ -892,7 +880,7 @@ export default {
       } catch (error) {
         const errorMessage =
           error?.response?.data?.error || this.$t('CONVERSATION.MESSAGE_ERROR');
-        useAlert(errorMessage);
+        this.showAlert(errorMessage);
       }
     },
     async onSendWhatsAppReply(messagePayload) {

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -77,10 +77,10 @@
 import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { mapGetters } from 'vuex';
-import { messageTimestamp } from 'shared/helpers/timeHelper';
+import timeMixin from '../../../../mixins/time';
 
 export default {
-  mixins: [inboxMixin],
+  mixins: [inboxMixin, timeMixin],
   props: {
     sender: {
       type: Object,
@@ -159,7 +159,7 @@ export default {
       return MESSAGE_STATUS.SENT === this.messageStatus;
     },
     readableTime() {
-      return messageTimestamp(this.createdAt, 'LLL d, h:mm a');
+      return this.messageTimestamp(this.createdAt, 'LLL d, h:mm a');
     },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =

app/javascript/dashboard/components/widgets/conversation/bubble/Contact.vue

@@ -17,13 +17,14 @@
 </template>
 
 <script>
-import { useAlert } from 'dashboard/composables';
 import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     name: {
       type: String,
@@ -51,18 +52,18 @@ export default {
             'contacts/create',
             this.getContactObject()
           );
-          useAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
+          this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
         }
         this.openContactNewTab(contact.id);
       } catch (error) {
         if (error instanceof DuplicateContactException) {
           if (error.data.includes('phone_number')) {
-            useAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+            this.showAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
           }
         } else if (error instanceof ExceptionWithMessage) {
-          useAlert(error.data);
+          this.showAlert(error.data);
         } else {
-          useAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
+          this.showAlert(this.$t('CONTACT_FORM.ERROR_MESSAGE'));
         }
       }
     },

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -40,7 +40,6 @@ const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
   VIDEO: 'video',
   AUDIO: 'audio',
-  IG_REEL: 'ig_reel',
 };
 
 export default {
@@ -67,10 +66,7 @@ export default {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.IMAGE;
     },
     isVideo() {
-      return (
-        this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO ||
-        this.attachment.file_type === ALLOWED_FILE_TYPES.IG_REEL
-      );
+      return this.attachment.file_type === ALLOWED_FILE_TYPES.VIDEO;
     },
     isAudio() {
       return this.attachment.file_type === ALLOWED_FILE_TYPES.AUDIO;

app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue

@@ -31,9 +31,10 @@
 <script>
 import DyteAPI from 'dashboard/api/integrations/dyte';
 import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   props: {
     messageId: {
       type: Number,
@@ -60,7 +61,7 @@ export default {
           await DyteAPI.addParticipantToMeeting(this.messageId);
         this.dyteAuthToken = authToken;
       } catch (err) {
-        useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
+        this.showAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
       } finally {
         this.isLoading = false;
       }

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

@@ -12,7 +12,7 @@
       @click="onClose"
     >
       <div
-        class="z-10 flex items-center justify-between w-full h-16 px-6 py-2 bg-white dark:bg-slate-900"
+        class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
         @click.stop
       >
         <div
@@ -167,7 +167,7 @@
           />
         </div>
       </div>
-      <div class="z-10 flex items-center justify-center w-full h-16 px-6 py-2">
+      <div class="flex items-center justify-center w-full h-16 px-6 py-2 z-10">
         <div
           class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
         >
@@ -182,14 +182,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import { messageTimestamp } from 'shared/helpers/timeHelper';
+import timeMixin from 'dashboard/mixins/time';
 
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 const ALLOWED_FILE_TYPES = {
   IMAGE: 'image',
   VIDEO: 'video',
-  IG_REEL: 'ig_reel',
   AUDIO: 'audio',
 };
 
@@ -200,7 +199,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [keyboardEventListenerMixins, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -237,16 +236,13 @@ export default {
     readableTime() {
       const { created_at: createdAt } = this.activeAttachment;
       if (!createdAt) return '';
-      return messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
+      return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
     },
     isImage() {
       return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
     },
     isVideo() {
-      return (
-        this.activeFileType === ALLOWED_FILE_TYPES.VIDEO ||
-        this.activeFileType === ALLOWED_FILE_TYPES.IG_REEL
-      );
+      return this.activeFileType === ALLOWED_FILE_TYPES.VIDEO;
     },
     isAudio() {
       return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;

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.vue';
+import Button from 'dashboard/components/buttons/Button';
 import i18n from 'dashboard/i18n';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-import MoreActions from '../MoreActions.vue';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+import MoreActions from '../MoreActions';
 
-vi.mock('shared/helpers/mitt', () => ({
+jest.mock('shared/helpers/mitt', () => ({
   emitter: {
-    emit: vi.fn(),
-    on: vi.fn(),
-    off: vi.fn(),
+    emit: jest.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
   },
 }));
 
@@ -26,9 +26,9 @@ localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
 localVue.prototype.$emitter = {
-  emit: vi.fn(),
-  on: vi.fn(),
-  off: vi.fn(),
+  emit: jest.fn(),
+  on: jest.fn(),
+  off: jest.fn(),
 };
 
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
@@ -49,8 +49,8 @@ describe('MoveActions', () => {
       currentChat,
     };
 
-    muteConversation = vi.fn(() => Promise.resolve());
-    unmuteConversation = vi.fn(() => Promise.resolve());
+    muteConversation = jest.fn(() => Promise.resolve());
+    unmuteConversation = jest.fn(() => Promise.resolve());
 
     modules = {
       conversations: { actions: { muteConversation, unmuteConversation } },
@@ -85,11 +85,11 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message:
-          'This contact is blocked successfully. You will not be notified of any future conversations.',
-        action: null,
-      });
+      expect(emitter.emit).toBeCalledWith(
+        'newToastMessage',
+        'This contact is blocked successfully. You will not be notified of any future conversations.',
+        undefined
+      );
     });
   });
 
@@ -111,10 +111,11 @@ describe('MoveActions', () => {
     it('shows alert', async () => {
       await moreActions.find('button:first-child').trigger('click');
 
-      expect(emitter.emit).toBeCalledWith('newToastMessage', {
-        message: 'This contact is unblocked successfully.',
-        action: null,
-      });
+      expect(emitter.emit).toBeCalledWith(
+        'newToastMessage',
+        'This contact is unblocked successfully.',
+        undefined
+      );
     });
   });
 });

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: vi.fn(), adjustScroll: vi.fn() },
+  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
   mixins: [keyboardEventListenerMixins],
 });
 
@@ -21,7 +21,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = vi.fn();
+    const preventDefault = jest.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 = vi.fn();
+    const preventDefault = jest.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.ArrowDown) {
@@ -57,7 +57,7 @@ describe('mentionSelectionKeyboardMixin', () => {
   });
 
   it('Enter key triggers onSelect method', () => {
-    const preventDefault = vi.fn();
+    const preventDefault = jest.fn();
     const keyboardEvents = wrapper.vm.getKeyboardEvents();
 
     if (keyboardEvents && keyboardEvents.Enter) {

app/javascript/dashboard/composables/index.js

@@ -1,10 +1,6 @@
 import { getCurrentInstance } from 'vue';
 import { emitter } from 'shared/helpers/mitt';
 
-/**
- * Custom hook to track events
- * @returns {Function} The track function
- */
 export const useTrack = () => {
   const vm = getCurrentInstance();
   if (!vm) throw new Error('must be called in setup');
@@ -12,11 +8,6 @@ export const useTrack = () => {
   return vm.proxy.$track;
 };
 
-/**
- * Emits a toast message event using a global emitter.
- * @param {string} message - The message to be displayed in the toast.
- * @param {Object|null} action - Optional callback function or object to execute.
- */
-export const useAlert = (message, action = null) => {
-  emitter.emit('newToastMessage', { message, action });
-};
+export function useAlert(message, action) {
+  emitter.emit('newToastMessage', message, action);
+}

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';
 
-vi.mock('shared/helpers/mitt', () => ({
+jest.mock('shared/helpers/mitt', () => ({
   emitter: {
-    on: vi.fn(),
-    off: vi.fn(),
+    on: jest.fn(),
+    off: jest.fn(),
   },
 }));
 
 describe('useEmitter', () => {
   let wrapper;
   const eventName = 'my-event';
-  const callback = vi.fn();
+  const callback = jest.fn();
 
   beforeEach(() => {
     wrapper = shallowMount({
@@ -29,6 +29,10 @@ describe('useEmitter', () => {
     });
   });
 
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('should add an event listener on mount', () => {
     expect(emitter.on).toHaveBeenCalledWith(eventName, callback);
   });

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

@@ -1,51 +0,0 @@
-import { getCurrentInstance } from 'vue';
-import { emitter } from 'shared/helpers/mitt';
-import { useTrack, useAlert } from '../index';
-
-vi.mock('vue', () => ({
-  getCurrentInstance: vi.fn(),
-}));
-vi.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: vi.fn(),
-  },
-}));
-
-describe('useTrack', () => {
-  it('should return $track from the current instance proxy', () => {
-    const mockProxy = { $track: vi.fn() };
-    getCurrentInstance.mockReturnValue({ proxy: mockProxy });
-    const track = useTrack();
-    expect(track).toBe(mockProxy.$track);
-  });
-
-  it('should throw an error if called outside of setup', () => {
-    getCurrentInstance.mockReturnValue(null);
-    expect(useTrack).toThrowError('must be called in setup');
-  });
-});
-
-describe('useAlert', () => {
-  it('should emit a newToastMessage event with the provided message and action', () => {
-    const message = 'Toast message';
-    const action = {
-      type: 'link',
-      to: '/app/accounts/1/conversations/1',
-      message: 'Navigate',
-    };
-    useAlert(message, action);
-    expect(emitter.emit).toHaveBeenCalledWith('newToastMessage', {
-      message,
-      action,
-    });
-  });
-
-  it('should emit a newToastMessage event with the provided message and no action if action is null', () => {
-    const message = 'Toast message';
-    useAlert(message);
-    expect(emitter.emit).toHaveBeenCalledWith('newToastMessage', {
-      message,
-      action: null,
-    });
-  });
-});

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

@@ -1,52 +0,0 @@
-import { ref } from 'vue';
-import { useAdmin } from '../useAdmin';
-import { useStoreGetters } from 'dashboard/composables/store';
-
-vi.mock('dashboard/composables/store');
-
-describe('useAdmin', () => {
-  it('returns true if the current user is an administrator', () => {
-    useStoreGetters.mockReturnValue({
-      getCurrentRole: ref('administrator'),
-    });
-
-    const { isAdmin } = useAdmin();
-    expect(isAdmin.value).toBe(true);
-  });
-
-  it('returns false if the current user is not an administrator', () => {
-    useStoreGetters.mockReturnValue({
-      getCurrentRole: ref('user'),
-    });
-
-    const { isAdmin } = useAdmin();
-    expect(isAdmin.value).toBe(false);
-  });
-
-  it('returns false if the current user role is null', () => {
-    useStoreGetters.mockReturnValue({
-      getCurrentRole: ref(null),
-    });
-
-    const { isAdmin } = useAdmin();
-    expect(isAdmin.value).toBe(false);
-  });
-
-  it('returns false if the current user role is undefined', () => {
-    useStoreGetters.mockReturnValue({
-      getCurrentRole: ref(undefined),
-    });
-
-    const { isAdmin } = useAdmin();
-    expect(isAdmin.value).toBe(false);
-  });
-
-  it('returns false if the current user role is an empty string', () => {
-    useStoreGetters.mockReturnValue({
-      getCurrentRole: ref(''),
-    });
-
-    const { isAdmin } = useAdmin();
-    expect(isAdmin.value).toBe(false);
-  });
-});

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

@@ -1,138 +0,0 @@
-import { ref } from 'vue';
-import {
-  useUISettings,
-  DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-  DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-} from 'dashboard/composables/useUISettings';
-
-// Mocking the store composables
-const mockDispatch = vi.fn();
-
-const getUISettingsMock = ref({
-  is_ct_labels_open: true,
-  conversation_sidebar_items_order: DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-  contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-  editor_message_key: 'enter',
-});
-
-vi.mock('dashboard/composables/store', () => ({
-  useStoreGetters: () => ({
-    getUISettings: getUISettingsMock,
-  }),
-  useStore: () => ({
-    dispatch: mockDispatch,
-  }),
-}));
-
-describe('useUISettings', () => {
-  beforeEach(() => {
-    mockDispatch.mockClear();
-  });
-
-  it('returns uiSettings', () => {
-    const { uiSettings } = useUISettings();
-    expect(uiSettings.value).toEqual({
-      is_ct_labels_open: true,
-      conversation_sidebar_items_order:
-        DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-      contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-      editor_message_key: 'enter',
-    });
-  });
-
-  it('updates UI settings correctly', () => {
-    const { updateUISettings } = useUISettings();
-    updateUISettings({ enter_to_send_enabled: true });
-    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
-      uiSettings: {
-        enter_to_send_enabled: true,
-        is_ct_labels_open: true,
-        conversation_sidebar_items_order:
-          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-        editor_message_key: 'enter',
-      },
-    });
-  });
-
-  it('toggles sidebar UI state correctly', () => {
-    const { toggleSidebarUIState } = useUISettings();
-    toggleSidebarUIState('is_ct_labels_open');
-    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
-      uiSettings: {
-        is_ct_labels_open: false,
-        conversation_sidebar_items_order:
-          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-        editor_message_key: 'enter',
-      },
-    });
-  });
-
-  it('returns correct conversation sidebar items order', () => {
-    const { conversationSidebarItemsOrder } = useUISettings();
-    expect(conversationSidebarItemsOrder.value).toEqual(
-      DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER
-    );
-  });
-
-  it('returns correct contact sidebar items order', () => {
-    const { contactSidebarItemsOrder } = useUISettings();
-    expect(contactSidebarItemsOrder.value).toEqual(
-      DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER
-    );
-  });
-
-  it('returns correct value for isContactSidebarItemOpen', () => {
-    const { isContactSidebarItemOpen } = useUISettings();
-    expect(isContactSidebarItemOpen('is_ct_labels_open')).toBe(true);
-    expect(isContactSidebarItemOpen('non_existent_key')).toBe(false);
-  });
-
-  it('sets signature flag for inbox correctly', () => {
-    const { setSignatureFlagForInbox } = useUISettings();
-    setSignatureFlagForInbox('email', true);
-    expect(mockDispatch).toHaveBeenCalledWith('updateUISettings', {
-      uiSettings: {
-        is_ct_labels_open: true,
-        conversation_sidebar_items_order:
-          DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER,
-        contact_sidebar_items_order: DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER,
-        email_signature_enabled: true,
-        editor_message_key: 'enter',
-      },
-    });
-  });
-
-  it('fetches signature flag from UI settings correctly', () => {
-    const { fetchSignatureFlagFromUISettings } = useUISettings();
-    expect(fetchSignatureFlagFromUISettings('email')).toBe(undefined);
-  });
-
-  it('returns correct value for isEditorHotKeyEnabled when editor_message_key is configured', () => {
-    getUISettingsMock.value.enter_to_send_enabled = false;
-    const { isEditorHotKeyEnabled } = useUISettings();
-    expect(isEditorHotKeyEnabled('enter')).toBe(true);
-    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(false);
-  });
-
-  it('returns correct value for isEditorHotKeyEnabled when editor_message_key is not configured', () => {
-    getUISettingsMock.value.editor_message_key = undefined;
-    const { isEditorHotKeyEnabled } = useUISettings();
-    expect(isEditorHotKeyEnabled('enter')).toBe(false);
-    expect(isEditorHotKeyEnabled('cmd_enter')).toBe(true);
-  });
-
-  it('handles non-existent keys', () => {
-    const {
-      isContactSidebarItemOpen,
-      fetchSignatureFlagFromUISettings,
-      isEditorHotKeyEnabled,
-    } = useUISettings();
-    expect(isContactSidebarItemOpen('non_existent_key')).toBe(false);
-    expect(fetchSignatureFlagFromUISettings('non_existent_key')).toBe(
-      undefined
-    );
-    expect(isEditorHotKeyEnabled('non_existent_key')).toBe(false);
-  });
-});

app/javascript/dashboard/composables/useAdmin.js

@@ -1,17 +0,0 @@
-import { computed } from 'vue';
-import { useStoreGetters } from 'dashboard/composables/store';
-
-/**
- * Composable to determine if the current user is an administrator.
- * @returns {Boolean} - True if the current user is an administrator, false otherwise.
- */
-export function useAdmin() {
-  const getters = useStoreGetters();
-
-  const currentUserRole = computed(() => getters.getCurrentRole.value);
-  const isAdmin = computed(() => currentUserRole.value === 'administrator');
-
-  return {
-    isAdmin,
-  };
-}

app/javascript/dashboard/composables/useUISettings.js

@@ -1,149 +0,0 @@
-import { computed } from 'vue';
-import { useStore, useStoreGetters } from 'dashboard/composables/store';
-
-export const DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER = Object.freeze([
-  { name: 'conversation_actions' },
-  { name: 'macros' },
-  { name: 'conversation_info' },
-  { name: 'contact_attributes' },
-  { name: 'previous_conversation' },
-  { name: 'conversation_participants' },
-]);
-
-export const DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER = Object.freeze([
-  { name: 'contact_attributes' },
-  { name: 'contact_labels' },
-  { name: 'previous_conversation' },
-]);
-
-/**
- * Slugifies the channel name.
- * Replaces spaces, hyphens, and double colons with underscores.
- * @param {string} name - The channel name to slugify.
- * @returns {string} The slugified channel name.
- */
-const slugifyChannel = name =>
-  name?.toLowerCase().replace(' ', '_').replace('-', '_').replace('::', '_');
-
-/**
- * Computes the order of items in the conversation sidebar, using defaults if not present.
- * @param {Object} uiSettings - Reactive UI settings object.
- * @returns {Array} Ordered list of sidebar items.
- */
-const useConversationSidebarItemsOrder = uiSettings => {
-  return computed(() => {
-    const { conversation_sidebar_items_order: itemsOrder } = uiSettings.value;
-    // If the sidebar order is not set, use the default order.
-    if (!itemsOrder) {
-      return DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER;
-    }
-    // Create a copy of itemsOrder to avoid mutating the original store object.
-    const itemsOrderCopy = [...itemsOrder];
-    // If the sidebar order doesn't have the new elements, then add them to the list.
-    DEFAULT_CONVERSATION_SIDEBAR_ITEMS_ORDER.forEach(item => {
-      if (!itemsOrderCopy.find(i => i.name === item.name)) {
-        itemsOrderCopy.push(item);
-      }
-    });
-    return itemsOrderCopy;
-  });
-};
-
-/**
- * Computes the order of items in the contact sidebar,using defaults if not present.
- * @param {Object} uiSettings - Reactive UI settings object.
- * @returns {Array} Ordered list of sidebar items.
- */
-const useContactSidebarItemsOrder = uiSettings => {
-  return computed(() => {
-    const { contact_sidebar_items_order: itemsOrder } = uiSettings.value;
-    return itemsOrder || DEFAULT_CONTACT_SIDEBAR_ITEMS_ORDER;
-  });
-};
-
-/**
- * Toggles the open state of a sidebar item.
- * @param {string} key - The key of the sidebar item to toggle.
- * @param {Object} uiSettings - Reactive UI settings object.
- * @param {Function} updateUISettings - Function to update UI settings.
- */
-const toggleSidebarUIState = (key, uiSettings, updateUISettings) => {
-  updateUISettings({ [key]: !uiSettings.value[key] });
-};
-
-/**
- * Sets the signature flag for a specific channel type in the inbox settings.
- * @param {string} channelType - The type of the channel.
- * @param {boolean} value - The value to set for the signature enabled flag.
- * @param {Function} updateUISettings - Function to update UI settings.
- */
-const setSignatureFlagForInbox = (channelType, value, updateUISettings) => {
-  if (!channelType) return;
-
-  const slugifiedChannel = slugifyChannel(channelType);
-  updateUISettings({ [`${slugifiedChannel}_signature_enabled`]: value });
-};
-
-/**
- * Fetches the signature flag for a specific channel type from UI settings.
- * @param {string} channelType - The type of the channel.
- * @param {Object} uiSettings - Reactive UI settings object.
- * @returns {boolean} The value of the signature enabled flag.
- */
-const fetchSignatureFlagFromUISettings = (channelType, uiSettings) => {
-  if (!channelType) return false;
-
-  const slugifiedChannel = slugifyChannel(channelType);
-  return uiSettings.value[`${slugifiedChannel}_signature_enabled`];
-};
-
-/**
- * Checks if a specific editor hotkey is enabled.
- * @param {string} key - The key to check.
- * @param {Object} uiSettings - Reactive UI settings object.
- * @returns {boolean} True if the hotkey is enabled, otherwise false.
- */
-const isEditorHotKeyEnabled = (key, uiSettings) => {
-  const {
-    editor_message_key: editorMessageKey,
-    enter_to_send_enabled: enterToSendEnabled,
-  } = uiSettings.value || {};
-  if (!editorMessageKey) {
-    return key === (enterToSendEnabled ? 'enter' : 'cmd_enter');
-  }
-  return editorMessageKey === key;
-};
-
-/**
- * Main composable function for managing UI settings.
- * @returns {Object} An object containing reactive properties and methods for UI settings management.
- */
-export function useUISettings() {
-  const getters = useStoreGetters();
-  const store = useStore();
-  const uiSettings = computed(() => getters.getUISettings.value);
-
-  const updateUISettings = (settings = {}) => {
-    store.dispatch('updateUISettings', {
-      uiSettings: {
-        ...uiSettings.value,
-        ...settings,
-      },
-    });
-  };
-
-  return {
-    uiSettings,
-    updateUISettings,
-    conversationSidebarItemsOrder: useConversationSidebarItemsOrder(uiSettings),
-    contactSidebarItemsOrder: useContactSidebarItemsOrder(uiSettings),
-    isContactSidebarItemOpen: key => !!uiSettings.value[key],
-    toggleSidebarUIState: key =>
-      toggleSidebarUIState(key, uiSettings, updateUISettings),
-    setSignatureFlagForInbox: (channelType, value) =>
-      setSignatureFlagForInbox(channelType, value, updateUISettings),
-    fetchSignatureFlagFromUISettings: channelType =>
-      fetchSignatureFlagFromUISettings(channelType, uiSettings),
-    isEditorHotKeyEnabled: key => isEditorHotKeyEnabled(key, uiSettings),
-  };
-}

app/javascript/dashboard/constants/permissions.js

@@ -0,0 +1,10 @@
+export const ACCOUNT_PERMISSIONS = {
+  ACCOUNT_MANAGE: 'account_manage',
+  PORTAL_MANAGE: 'portal_manage',
+  CONVERSATION_MANAGE: 'conversation_manage',
+  CONVERSATION_UNASSIGNED_MANAGE: 'conversation_unassigned_manage',
+  CONVERSATION_PARTICIPATING_MANAGE: 'conversation_participating_manage',
+  MACROS_MANAGE: 'macros_manage',
+  REPORTS_MANAGE: 'reports_manage',
+  CONTACTS_MANAGE: 'contacts_manage',
+};

app/javascript/dashboard/helper/AnalyticsHelper/index.js

@@ -38,10 +38,9 @@ export class AnalyticsHelper {
    * @param {Object} user - User object
    */
   identify(user) {
-    if (!this.analytics || !user) {
+    if (!this.analytics) {
       return;
     }
-
     this.user = user;
     this.analytics.identify(this.user.email, {
       userId: this.user.id,

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

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

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

@@ -2,35 +2,34 @@ 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);
   });
 
-  it('should call the init method on analyticsHelper once during plugin installation', () => {
-    expect(analyticsHelper.init).toHaveBeenCalledTimes(1);
+  afterEach(() => {
+    jest.resetModules();
+    jest.clearAllMocks();
   });
 
-  it('should add the analyticsHelper to the Vue prototype as $analytics', () => {
+  it('should call the init method on the analyticsHelper', () => {
+    expect(analyticsHelper.init).toHaveBeenCalled();
+  });
+
+  it('should add the analyticsHelper to the Vue prototype', () => {
     expect(Vue.prototype.$analytics).toBe(analyticsHelper);
   });
 
-  it('should add a track method to the Vue prototype as $track', () => {
+  it('should add the track method to the Vue prototype', () => {
     expect(typeof Vue.prototype.$track).toBe('function');
     Vue.prototype.$track('eventName');
-    expect(analyticsHelper.track)
-      .toHaveBeenCalledTimes(1)
-      .toHaveBeenCalledWith('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);
+  it('should call the track method on the analyticsHelper when $track is called', () => {
+    Vue.prototype.$track('eventName');
+    expect(analyticsHelper.track).toHaveBeenCalledWith('eventName');
   });
 });

app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js

@@ -52,10 +52,6 @@ class DashboardAudioNotificationHelper {
   };
 
   executeRecurringNotification = () => {
-    if (!window.WOOT || !window.WOOT.$store) {
-      this.clearSetTimeout();
-      return;
-    }
     const mineConversation = window.WOOT.$store.getters.getMineChats({
       assigneeType: 'me',
       status: 'open',

app/javascript/dashboard/helper/DOMHelpers.js

@@ -1,124 +0,0 @@
-const SCRIPT_TYPE = 'text/javascript';
-const DATA_LOADED_ATTR = 'data-loaded';
-const SCRIPT_PROPERTIES = [
-  'defer',
-  'crossOrigin',
-  'noModule',
-  'referrerPolicy',
-  'id',
-];
-
-/**
- * Custom error class for script loading failures.
- * @extends Error
- */
-class ScriptLoaderError extends Error {
-  /**
-   * Creates a new ScriptLoaderError.
-   * @param {string} src - The source URL of the script that failed to load.
-   * @param {string} message - The error message.
-   */
-  constructor(src, message = 'Failed to load script') {
-    super(message);
-    this.name = 'ScriptLoaderError';
-    this.src = src;
-  }
-
-  /**
-   * Gets detailed error information.
-   * @returns {string} A string containing the error details.
-   */
-  getErrorDetails() {
-    return `Failed to load script from source: ${this.src}`;
-  }
-}
-
-/**
- * Creates a new script element with the specified attributes.
- * @param {string} src - The source URL of the script.
- * @param {Object} options - Options for configuring the script element.
- * @param {string} [options.type='text/javascript'] - The type of the script.
- * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
- * @param {boolean} [options.defer] - Whether the script execution should be deferred.
- * @param {string} [options.crossOrigin] - The CORS setting for the script.
- * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
- * @param {string} [options.referrerPolicy] - The referrer policy for the script.
- * @param {string} [options.id] - The id attribute for the script element.
- * @param {Object} [options.attrs] - Additional attributes to set on the script element.
- * @returns {HTMLScriptElement} The created script element.
- */
-const createScriptElement = (src, options) => {
-  const el = document.createElement('script');
-  el.type = options.type || SCRIPT_TYPE;
-  el.async = options.async !== false;
-  el.src = src;
-
-  SCRIPT_PROPERTIES.forEach(property => {
-    if (property in options) {
-      el[property] = options[property];
-    }
-  });
-
-  Object.entries(options.attrs || {}).forEach(([name, value]) =>
-    el.setAttribute(name, value)
-  );
-
-  return el;
-};
-
-/**
- * Finds an existing script element with the specified source URL.
- * @param {string} src - The source URL to search for.
- * @returns {HTMLScriptElement|null} The found script element, or null if not found.
- */
-const findExistingScript = src => {
-  return document.querySelector(`script[src="${src}"]`);
-};
-
-/**
- * Loads a script asynchronously and returns a promise.
- * @param {string} src - The source URL of the script to load.
- * @param {Object} options - Options for configuring the script element.
- * @param {string} [options.type='text/javascript'] - The type of the script.
- * @param {boolean} [options.async=true] - Whether the script should load asynchronously.
- * @param {boolean} [options.defer] - Whether the script execution should be deferred.
- * @param {string} [options.crossOrigin] - The CORS setting for the script.
- * @param {boolean} [options.noModule] - Whether the script should not be treated as a JavaScript module.
- * @param {string} [options.referrerPolicy] - The referrer policy for the script.
- * @param {string} [options.id] - The id attribute for the script element.
- * @param {Object} [options.attrs] - Additional attributes to set on the script element.
- * @returns {Promise<HTMLScriptElement|boolean>} A promise that resolves with the loaded script element,
- *                                               or false if the script couldn't be loaded.
- * @throws {ScriptLoaderError} If the script fails to load.
- */
-export async function loadScript(src, options) {
-  if (typeof window === 'undefined' || !window.document) {
-    return Promise.resolve(false);
-  }
-
-  return new Promise((resolve, reject) => {
-    if (typeof src !== 'string' || src.trim() === '') {
-      reject(new Error('Invalid source URL provided'));
-      return;
-    }
-
-    let el = findExistingScript(src);
-
-    if (!el) {
-      el = createScriptElement(src, options);
-      document.head.appendChild(el);
-    } else if (el.hasAttribute(DATA_LOADED_ATTR)) {
-      resolve(el);
-      return;
-    }
-
-    const handleError = () => reject(new ScriptLoaderError(src));
-
-    el.addEventListener('error', handleError);
-    el.addEventListener('abort', handleError);
-    el.addEventListener('load', () => {
-      el.setAttribute(DATA_LOADED_ATTR, 'true');
-      resolve(el);
-    });
-  });
-}

app/javascript/dashboard/helper/ReconnectService.js

@@ -9,11 +9,6 @@ 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;
@@ -52,8 +47,7 @@ class ReconnectService {
   fetchConversations = async () => {
     await this.store.dispatch('updateChatListFilters', {
       page: null,
-      updatedWithin:
-        this.getSecondsSinceDisconnect() + DISCONNECT_DELAY_THRESHOLD,
+      updatedWithin: this.getSecondsSinceDisconnect(),
     });
     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/permissionsHelper.js

@@ -1,34 +0,0 @@
-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/pushHelper.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import NotificationSubscriptions from '../api/notificationSubscription';
 import auth from '../api/auth';
-import { useAlert } from 'dashboard/composables';
+import { emitter } from 'shared/helpers/mitt';
 
 export const verifyServiceWorkerExistence = (callback = () => {}) => {
   if (!('serviceWorker' in navigator)) {
@@ -69,13 +69,19 @@ export const registerSubscription = (onSuccess = () => {}) => {
       onSuccess();
     })
     .catch(() => {
-      useAlert('This browser does not support desktop notification');
+      emitter.emit(
+        'newToastMessage',
+        'This browser does not support desktop notification'
+      );
     });
 };
 
 export const requestPushPermissions = ({ onSuccess }) => {
   if (!('Notification' in window)) {
-    useAlert('This browser does not support desktop notification');
+    emitter.emit(
+      'newToastMessage',
+      'This browser does not support desktop notification'
+    );
   } else if (Notification.permission === 'granted') {
     registerSubscription(onSuccess);
   } else if (Notification.permission !== 'denied') {

app/javascript/dashboard/helper/routeHelpers.js

@@ -1,5 +1,3 @@
-import { hasPermissions } from './permissionsHelper';
-
 // eslint-disable-next-line default-param-last
 export const getCurrentAccount = ({ accounts } = {}, accountId) => {
   return accounts.find(account => account.id === accountId);
@@ -7,7 +5,9 @@ export const getCurrentAccount = ({ accounts } = {}, accountId) => {
 
 export const routeIsAccessibleFor = (route, userPermissions = []) => {
   const { meta: { permissions: routePermissions = [] } = {} } = route;
-  return hasPermissions(routePermissions, userPermissions);
+  return routePermissions.some(permissions =>
+    userPermissions.includes(permissions)
+  );
 };
 
 const validateActiveAccountRoutes = (to, user) => {