chore: docker foss arm64 images

.circleci/config.yml

@@ -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: |

.eslintrc.js

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

.github/workflows/publish_foss_docker.yml

@@ -24,10 +24,12 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
+        with:
+          platforms: 'arm64,amd64'
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
 
       - name: Strip enterprise code
         run: |
@@ -54,10 +56,11 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: docker/Dockerfile
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ env.DOCKER_TAG }}
+

Gemfile

@@ -111,9 +111,9 @@ 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.1', require: false
+gem 'sentry-rails', '>= 5.18.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.18.1', require: false
+gem 'sentry-sidekiq', '>= 5.18.0', require: false
 
 ##-- background job processing --##
 gem 'sidekiq', '>= 7.3.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)
@@ -359,7 +356,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)
@@ -467,7 +464,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 +548,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 +631,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,14 +707,14 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.18.1)
+    sentry-rails (5.18.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.18.1)
-    sentry-ruby (5.18.1)
+      sentry-ruby (~> 5.18.0)
+    sentry-ruby (5.18.0)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.18.1)
-      sentry-ruby (~> 5.18.1)
+    sentry-sidekiq (5.18.0)
+      sentry-ruby (~> 5.18.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
@@ -810,7 +807,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,9 +936,9 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.18.1)
+  sentry-rails (>= 5.18.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.18.1)
+  sentry-sidekiq (>= 5.18.0)
   shoulda-matchers
   sidekiq (>= 7.3.0)
   sidekiq-cron (>= 1.12.0)
@@ -971,4 +968,4 @@ RUBY VERSION
    ruby 3.3.3p89
 
 BUNDLED WITH
-   2.5.16
+   2.5.14

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/components/ChatList.vue

@@ -116,14 +116,13 @@
 
 <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 +131,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';
@@ -157,7 +158,14 @@ export default {
     IntersectionObserver,
     VirtualList,
   },
-  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 +210,6 @@ export default {
       type: Boolean,
     },
   },
-  setup() {
-    const { uiSettings } = useUISettings();
-
-    return {
-      uiSettings,
-    };
-  },
   data() {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
@@ -811,7 +812,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 +822,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 +840,7 @@ export default {
             newValue: priority,
             from: 'Context menu',
           });
-          useAlert(
+          this.showAlert(
             this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
               priority,
               conversationId,
@@ -882,7 +883,7 @@ export default {
           conversationId,
           teamId: team.id,
         });
-        useAlert(
+        this.showAlert(
           this.$t(
             'CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL',
             {
@@ -892,7 +893,7 @@ export default {
           )
         );
       } catch (error) {
-        useAlert(
+        this.showAlert(
           this.$t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED')
         );
       }
@@ -909,7 +910,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 +920,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 +936,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 +952,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 +965,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/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/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,7 +30,9 @@
 
 <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';
@@ -43,7 +45,7 @@ export default {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,

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/SecondaryNavItem.vue

@@ -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/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';
@@ -89,13 +89,12 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import cloneObject from 'dashboard/helpers/clone';
 
 export default {
   components: {
     FilterInputBox,
   },
-  mixins: [filterMixin],
+  mixins: [alertMixin, filterMixin],
   props: {
     onClose: {
       type: Function,
@@ -342,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);
       }
@@ -352,7 +351,7 @@ export default {
       if (this.$v.$invalid) return;
       this.$store.dispatch(
         'setConversationFilters',
-        cloneObject(this.appliedFilters)
+        JSON.parse(JSON.stringify(this.appliedFilters))
       );
       this.$emit('applyFilter', this.appliedFilters);
       this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {

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() {
@@ -505,29 +502,15 @@ export default {
     },
     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/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,7 +182,7 @@
 <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';
 
@@ -199,7 +199,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins],
+  mixins: [keyboardEventListenerMixins, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -236,7 +236,7 @@ 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;

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

@@ -1,5 +1,3 @@
-import cloneObject from 'dashboard/helpers/clone';
-
 const allElementsString = arr => {
   return arr.every(elem => typeof elem === 'string');
 };
@@ -29,7 +27,7 @@ const generatePayloadForObject = item => {
 };
 
 const generatePayload = data => {
-  const actions = cloneObject(data);
+  const actions = JSON.parse(JSON.stringify(data));
   let payload = actions.map(item => {
     if (Array.isArray(item.action_params)) {
       item.action_params = formatArray(item.action_params);

app/javascript/dashboard/helper/automationHelper.js

@@ -5,8 +5,6 @@ import {
 } from 'dashboard/routes/dashboard/settings/automation/operators';
 import filterQueryGenerator from './filterQueryGenerator';
 import actionQueryGenerator from './actionQueryGenerator';
-import cloneObject from 'dashboard/helpers/clone';
-
 const MESSAGE_CONDITION_VALUES = [
   {
     id: 'incoming',
@@ -257,7 +255,7 @@ export const getStandardAttributeInputType = (automationTypes, event, key) => {
 };
 
 export const generateAutomationPayload = payload => {
-  const automation = cloneObject(payload);
+  const automation = JSON.parse(JSON.stringify(payload));
   automation.conditions[automation.conditions.length - 1].query_operator = null;
   automation.conditions = filterQueryGenerator(automation.conditions).payload;
   automation.actions = actionQueryGenerator(automation.actions);

app/javascript/dashboard/helper/clone.js

@@ -1,33 +0,0 @@
-/**
- * Creates a deep clone of the provided object.
- *
- * This function attempts to use the `structuredClone` method if available.
- * If `structuredClone` is not supported, it falls back to using
- * `JSON.parse(JSON.stringify())`.
- *
- * @param {*} obj - The object to be cloned. Can be of any type.
- * @returns {*} A deep clone of the input object.
- *
- * @throws {TypeError} If the object contains values that JSON cannot serialize
- *                     (e.g., functions, undefined) when falling back to
- *                     JSON methods.
- *
- * @example
- * const original = { a: 1, b: { c: 2 } };
- * const clone = cloneObject(original);
- * console.log(clone); // { a: 1, b: { c: 2 } }
- * console.log(original === clone); // false
- */
-export function cloneObject(obj) {
-  if (typeof structuredClone === 'function') {
-    return structuredClone(obj);
-  }
-
-  // The JSON method doesn't handle all JavaScript types correctly and may cause unexpected behavior.
-  // At the moment structuredClone has good adoption across browsers https://caniuse.com/mdn-api_structuredclone
-  // and is the preferred method for cloning objects.
-  //
-  // We can consider implementing a more robust fallback method in the future if we find users are running into issues.
-  // Ref: https://github.com/lukeed/klona
-  return JSON.parse(JSON.stringify(obj));
-}

app/javascript/dashboard/helper/filterQueryGenerator.js

@@ -1,5 +1,3 @@
-import cloneObject from 'dashboard/helpers/clone';
-
 const setArrayValues = item => {
   return item.values[0]?.id ? item.values.map(val => val.id) : item.values;
 };
@@ -23,7 +21,7 @@ const generateValues = item => {
 
 const generatePayload = data => {
   // Make a copy of data to avoid vue data reactivity issues
-  const filters = cloneObject(data);
+  const filters = JSON.parse(JSON.stringify(data));
   let payload = filters.map(item => {
     // If item key is content, we will split it using comma and return as array
     // FIX ME: Make this generic option instead of using the key directly here

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/specs/CacheHelper/DataManger.spec.js

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

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

@@ -1,95 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { loadScript } from '../DOMHelpers';
-import { JSDOM } from 'jsdom';
-
-describe('loadScript', () => {
-  let dom;
-  let window;
-  let document;
-
-  beforeEach(() => {
-    dom = new JSDOM('<!DOCTYPE html><html><head></head><body></body></html>', {
-      url: 'http://localhost',
-    });
-    window = dom.window;
-    document = window.document;
-    global.document = document;
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-    delete global.document;
-  });
-
-  it('should load a script successfully', async () => {
-    const src = 'https://example.com/script.js';
-    const loadPromise = loadScript(src, {});
-
-    // Simulate successful script load
-    setTimeout(() => {
-      const script = document.querySelector(`script[src="${src}"]`);
-      if (script) {
-        script.dispatchEvent(new window.Event('load'));
-      }
-    }, 0);
-
-    const script = await loadPromise;
-
-    expect(script).toBeTruthy();
-    expect(script.getAttribute('src')).toBe(src);
-    expect(script.getAttribute('data-loaded')).toBe('true');
-  });
-
-  it('should not load a script if document is not available', async () => {
-    delete global.document;
-    const result = await loadScript('https://example.com/script.js', {});
-    expect(result).toBe(false);
-  });
-
-  it('should use an existing script if already present', async () => {
-    const src = 'https://example.com/existing-script.js';
-    const existingScript = document.createElement('script');
-    existingScript.src = src;
-    existingScript.setAttribute('data-loaded', 'true');
-    document.head.appendChild(existingScript);
-
-    const script = await loadScript(src, {});
-
-    expect(script).toBe(existingScript);
-  });
-
-  it('should set custom attributes on the script element', async () => {
-    const src = 'https://example.com/custom-script.js';
-    const options = {
-      type: 'module',
-      async: false,
-      defer: true,
-      crossOrigin: 'anonymous',
-      noModule: true,
-      referrerPolicy: 'origin',
-      id: 'custom-script',
-      attrs: { 'data-custom': 'value' },
-    };
-
-    const loadPromise = loadScript(src, options);
-
-    // Simulate successful script load
-    setTimeout(() => {
-      const script = document.querySelector(`script[src="${src}"]`);
-      if (script) {
-        script.dispatchEvent(new window.Event('load'));
-      }
-    }, 0);
-
-    const script = await loadPromise;
-
-    expect(script.type).toBe('module');
-    expect(script.async).toBe(false);
-    expect(script.defer).toBe(true);
-    expect(script.crossOrigin).toBe('anonymous');
-    expect(script.noModule).toBe(true);
-    expect(script.referrerPolicy).toBe('origin');
-    expect(script.id).toBe('custom-script');
-    expect(script.getAttribute('data-custom')).toBe('value');
-  });
-});

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

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

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

@@ -1,61 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { cloneObject } from '../clone'; // Update this path
-
-describe('cloneObject', () => {
-  it('should clone a simple object', () => {
-    const original = { a: 1, b: 'string', c: true };
-    const cloned = cloneObject(original);
-    expect(cloned).toEqual(original);
-    expect(cloned).not.toBe(original);
-  });
-
-  it('should clone a nested object', () => {
-    const original = { a: 1, b: { c: 2, d: { e: 3 } } };
-    const cloned = cloneObject(original);
-    expect(cloned).toEqual(original);
-    expect(cloned.b).not.toBe(original.b);
-    expect(cloned.b.d).not.toBe(original.b.d);
-  });
-
-  it('should clone an array', () => {
-    const original = [1, 2, [3, 4]];
-    const cloned = cloneObject(original);
-    expect(cloned).toEqual(original);
-    expect(cloned).not.toBe(original);
-    expect(cloned[2]).not.toBe(original[2]);
-  });
-
-  it('should clone a Date object', () => {
-    const original = new Date();
-    const cloned = cloneObject(original);
-    expect(cloned).toEqual(original);
-    expect(cloned).not.toBe(original);
-  });
-
-  it('should use structuredClone when available', () => {
-    const structuredCloneSpy = vi.fn(x => x);
-    global.structuredClone = structuredCloneSpy;
-    const obj = { a: 1 };
-
-    cloneObject(obj);
-
-    expect(structuredCloneSpy).toHaveBeenCalledWith(obj);
-    delete global.structuredClone;
-  });
-
-  it('should fall back to JSON methods when structuredClone is not available', () => {
-    const jsonParseSpy = vi.spyOn(JSON, 'parse');
-    const jsonStringifySpy = vi.spyOn(JSON, 'stringify');
-
-    const original = { a: 1 };
-    global.structuredClone = undefined;
-
-    cloneObject(original);
-
-    expect(jsonStringifySpy).toHaveBeenCalledWith(original);
-    expect(jsonParseSpy).toHaveBeenCalled();
-
-    jsonParseSpy.mockRestore();
-    jsonStringifySpy.mockRestore();
-  });
-});

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

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

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

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

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

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

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

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

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

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

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

@@ -379,7 +379,6 @@
     },
     "DETAILS": {
       "LOADING_FB": "Authenticating you with Facebook...",
-      "ERROR_FB_LOADING": "Error loading Facebook SDK. Please disable any ad-blockers and try again from a different browser.",
       "ERROR_FB_AUTH": "Something went wrong, Please refresh page...",
       "ERROR_FB_UNAUTHORIZED": "You're not authorized to perform this action. ",
       "ERROR_FB_UNAUTHORIZED_HELP": "Please ensure you have access to the Facebook page with full control. You can read more about Facebook roles <a href=\" https://www.facebook.com/help/187316341316631\">here</a>.",

app/javascript/dashboard/mixins/aiMixin.js

@@ -1,9 +1,10 @@
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
 import { OPEN_AI_EVENTS } from '../helper/AnalyticsHelper/events';
 import OpenAPI from '../api/integrations/openapi';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
+  mixins: [alertMixin],
   mounted() {
     this.fetchIntegrationsIfRequired();
   },
@@ -100,7 +101,7 @@ export default {
         } = result;
         return generatedMessage;
       } catch (error) {
-        useAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
+        this.showAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
         return '';
       }
     },

app/javascript/dashboard/mixins/automations/methodsMixin.js

@@ -17,7 +17,6 @@ import {
   generateCustomAttributes,
 } from 'dashboard/helper/automationHelper';
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
 
 export default {
   computed: {
@@ -139,14 +138,14 @@ export default {
     },
     removeFilter(index) {
       if (this.automation.conditions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+        this.showAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
       } else {
         this.automation.conditions.splice(index, 1);
       }
     },
     removeAction(index) {
       if (this.automation.actions.length <= 1) {
-        useAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+        this.showAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
       } else {
         this.automation.actions.splice(index, 1);
       }