feat: add status in linear search item

2024-05-30 14:23:25 +05:30
154 changed files with 914 additions and 3849 deletions
@@ -85,8 +85,6 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Comment out the following environment variables if required by your SMTP server
 # SMTP_TLS=
 # SMTP_SSL=
-# SMTP_OPEN_TIMEOUT
-# SMTP_READ_TIMEOUT

 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
@@ -4,7 +4,7 @@ ruby '3.2.2'

 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.4'
+gem 'rails', '~> 7.0.8.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

@@ -61,7 +61,7 @@ gem 'redis-namespace'
 gem 'activerecord-import'

 ##--- gems for server & infra configuration ---##
-gem 'dotenv-rails', '>= 3.0.0'
+gem 'dotenv-rails'
 gem 'foreman'
 gem 'puma'
 gem 'webpacker'
@@ -122,7 +122,7 @@ gem 'sidekiq-cron', '>= 1.12.0'

 ##-- Push notification service --##
 gem 'fcm'
-gem 'web-push', '>= 3.0.1'
+gem 'web-push'

 ##-- geocoding / parse location from ip --##
 # http://www.rubygeocoder.com/
@@ -228,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.0.3'
+  gem 'rspec-rails'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actioncable (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionmailbox (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionmailer (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      actionview (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.4)
-      actionview (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionpack (7.0.8.3)
+      actionview (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actiontext (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionview (7.0.8.3)
+      activesupport (= 7.0.8.3)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activejob (7.0.8.3)
+      activesupport (= 7.0.8.3)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.4)
-      activesupport (= 7.0.8.4)
-    activerecord (7.0.8.4)
-      activemodel (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activemodel (7.0.8.3)
+      activesupport (= 7.0.8.3)
+    activerecord (7.0.8.3)
+      activemodel (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    activestorage (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.4)
+    activesupport (7.0.8.3)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -156,7 +156,7 @@ GEM
      msgpack (~> 1.2)
    brakeman (5.4.1)
    browser (5.3.1)
-    builder (3.3.0)
+    builder (3.2.4)
    bullet (7.0.7)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
@@ -169,7 +169,7 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.3)
+    concurrent-ruby (1.2.3)
    connection_pool (2.4.1)
    crack (0.4.5)
      rexml
@@ -204,16 +204,16 @@ GEM
      bcrypt (~> 3.0)
      devise (> 3.5.2, < 5)
      rails (>= 4.2.0, < 7.2)
-    diff-lcs (1.5.1)
+    diff-lcs (1.5.0)
    digest-crc (0.6.4)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.0)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
-    dotenv (3.1.2)
-    dotenv-rails (3.1.2)
-      dotenv (= 3.1.2)
-      railties (>= 6.1)
+    dotenv (2.8.1)
+    dotenv-rails (2.8.1)
+      dotenv (= 2.8.1)
+      railties (>= 3.2)
    down (5.4.0)
      addressable (~> 2.8)
    ecma-re-validator (0.4.0)
@@ -355,6 +355,7 @@ GEM
    hana (1.3.7)
    hashdiff (1.0.1)
    hashie (5.0.0)
+    hkdf (1.0.0)
    http (5.1.1)
      addressable (~> 2.8)
      http-cookie (~> 1.0)
@@ -459,8 +460,8 @@ GEM
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.23.1)
+    mini_portile2 (2.8.6)
+    minitest (5.23.0)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -473,7 +474,7 @@ GEM
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.12)
+    net-imap (0.4.11)
      date
      net-protocol
    net-pop (0.1.2)
@@ -526,7 +527,7 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
-    openssl (3.2.0)
+    openssl (3.1.0)
    orm_adapter (0.5.0)
    os (1.1.4)
    parallel (1.23.0)
@@ -550,7 +551,7 @@ GEM
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.8.0)
+    racc (1.7.3)
    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
@@ -568,20 +569,20 @@ GEM
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.4)
-      actioncable (= 7.0.8.4)
-      actionmailbox (= 7.0.8.4)
-      actionmailer (= 7.0.8.4)
-      actionpack (= 7.0.8.4)
-      actiontext (= 7.0.8.4)
-      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.4)
-      activemodel (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    rails (7.0.8.3)
+      actioncable (= 7.0.8.3)
+      actionmailbox (= 7.0.8.3)
+      actionmailer (= 7.0.8.3)
+      actionpack (= 7.0.8.3)
+      actiontext (= 7.0.8.3)
+      actionview (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activemodel (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.4)
+      railties (= 7.0.8.3)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -589,9 +590,9 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    railties (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
@@ -629,23 +630,23 @@ GEM
      nokogiri
    rexml (3.2.8)
      strscan (>= 3.0.9)
-    rspec-core (3.13.0)
-      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.0)
+    rspec-core (3.12.2)
+      rspec-support (~> 3.12.0)
+    rspec-expectations (3.12.3)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.1)
+      rspec-support (~> 3.12.0)
+    rspec-mocks (3.12.5)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-rails (6.1.2)
+      rspec-support (~> 3.12.0)
+    rspec-rails (6.0.2)
      actionpack (>= 6.1)
      activesupport (>= 6.1)
      railties (>= 6.1)
-      rspec-core (~> 3.13)
-      rspec-expectations (~> 3.13)
-      rspec-mocks (~> 3.13)
-      rspec-support (~> 3.13)
-    rspec-support (3.13.1)
+      rspec-core (~> 3.12)
+      rspec-expectations (~> 3.12)
+      rspec-mocks (~> 3.12)
+      rspec-support (~> 3.12)
+    rspec-support (3.12.0)
    rspec_junit_formatter (0.6.0)
      rspec-core (>= 2, < 4, != 2.12.0)
    rubocop (1.50.2)
@@ -799,7 +800,8 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    web-push (3.0.1)
+    web-push (3.0.0)
+      hkdf (~> 1.0)
      jwt (~> 2.0)
      openssl (~> 3.0)
    webmock (3.18.1)
@@ -819,7 +821,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.15)
+    zeitwerk (2.6.14)

 PLATFORMS
  arm64-darwin-20
@@ -861,7 +863,7 @@ DEPENDENCIES
  devise (>= 4.9.4)
  devise-secure_password!
  devise_token_auth (>= 1.2.3)
-  dotenv-rails (>= 3.0.0)
+  dotenv-rails
  down
  elastic-apm
  email_reply_trimmer
@@ -916,13 +918,13 @@ DEPENDENCIES
  rack-cors (= 2.0.0)
  rack-mini-profiler (>= 3.2.0)
  rack-timeout
-  rails (~> 7.0.8.4)
+  rails (~> 7.0.8.1)
  redis
  redis-namespace
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails (>= 6.0.3)
+  rspec-rails
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -953,7 +955,7 @@ DEPENDENCIES
  uglifier
  valid_email2
  web-console (>= 4.2.1)
-  web-push (>= 3.0.1)
+  web-push
  webmock
  webpacker
  wisper (= 2.0.0)
@@ -1 +1 @@
-3.9.0
+3.3.1
@@ -1 +1 @@
-2.8.0
+2.7.0
@@ -1,32 +0,0 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
-  include GoogleConcern
-  before_action :check_authorization
-
-  def create
-    email = params[:authorization][:email]
-    redirect_url = google_client.auth_code.authorize_url(
-      {
-        redirect_uri: "#{base_url}/google/callback",
-        scope: 'email profile https://mail.google.com/',
-        response_type: 'code',
-        prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
-        access_type: 'offline', # the default is 'online'
-        client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
-      }
-    )
-
-    if redirect_url
-      cache_key = "google::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
-      render json: { success: true, url: redirect_url }
-    else
-      render json: { success: false }, status: :unprocessable_entity
-    end
-  end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
-end
@@ -12,8 +12,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
      }
    )
    if redirect_url
-      cache_key = "microsoft::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
+      email = email.downcase
+      ::Redis::Alfred.setex(email, Current.account.id, 5.minutes)
      render json: { success: true, url: redirect_url }
    else
      render json: { success: false }, status: :unprocessable_entity
@@ -1,20 +0,0 @@
-module GoogleConcern
-  extend ActiveSupport::Concern
-
-  def google_client
-    app_id = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_SECRET', nil)
-
-    ::OAuth2::Client.new(app_id, app_secret, {
-                           site: 'https://oauth2.googleapis.com',
-                           authorize_url: 'https://accounts.google.com/o/oauth2/auth',
-                           token_url: 'https://accounts.google.com/o/oauth2/token'
-                         })
-  end
-
-  private
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end
@@ -15,6 +15,10 @@ module MicrosoftConcern

  private

+  def parsed_body
+    @parsed_body ||= Rack::Utils.parse_nested_query(@response.raw_response.body)
+  end
+
  def base_url
    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
@@ -1,18 +0,0 @@
-class Google::CallbacksController < OauthCallbackController
-  include GoogleConcern
-
-  private
-
-  def provider_name
-    'google'
-  end
-
-  def imap_address
-    'imap.gmail.com'
-  end
-
-  def oauth_client
-    # from GoogleConcern
-    google_client
-  end
-end
@@ -1,17 +1,90 @@
-class Microsoft::CallbacksController < OauthCallbackController
+class Microsoft::CallbacksController < ApplicationController
  include MicrosoftConcern

+  def show
+    @response = microsoft_client.auth_code.get_token(
+      oauth_code,
+      redirect_uri: "#{base_url}/microsoft/callback"
+    )
+
+    inbox, already_exists = find_or_create_inbox
+    ::Redis::Alfred.delete(users_data['email'].downcase)
+
+    if already_exists
+      redirect_to app_microsoft_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
+    else
+      redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+    end
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    redirect_to '/'
+  end
+
  private

-  def oauth_client
-    microsoft_client
+  def oauth_code
+    params[:code]
  end

-  def provider_name
-    'microsoft'
+  def users_data
+    decoded_token = JWT.decode parsed_body[:id_token], nil, false
+    decoded_token[0]
  end

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

 <script>
 import { mapGetters } from 'vuex';
-import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -44,7 +43,6 @@ import {
  registerSubscription,
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
-import ReconnectService from 'dashboard/helper/ReconnectService';

 export default {
  name: 'App',
@@ -66,7 +64,6 @@ export default {
    return {
      showAddAccountModal: false,
      latestChatwootVersion: null,
-      reconnectService: null,
    };
  },

@@ -105,11 +102,6 @@ export default {
    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
-  beforeDestroy() {
-    if (this.reconnectService) {
-      this.reconnectService.disconnect();
-    }
-  },
  methods: {
    initializeColorTheme() {
      setColorTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -133,7 +125,6 @@ export default {
      this.updateRTLDirectionView(locale);
      this.latestChatwootVersion = latestChatwootVersion;
      vueActionCable.init(pubsubToken);
-      this.reconnectService = new ReconnectService(this.$store, router);

      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -9,13 +9,6 @@ class AccountAPI extends ApiClient {
  createAccount(data) {
    return axios.post(`${this.apiVersion}/accounts`, data);
  }
-
-  async getCacheKeys() {
-    const response = await axios.get(
-      `/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
-    );
-    return response.data.cache_keys;
-  }
 }

 export default new AccountAPI();
@@ -1,14 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class MicrosoftClient extends ApiClient {
-  constructor() {
-    super('google', { accountScoped: true });
-  }
-
-  generateAuthorization(payload) {
-    return axios.post(`${this.url}/authorization`, payload);
-  }
-}
-
-export default new MicrosoftClient();
@@ -1,6 +1,6 @@
 <template>
  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
    @click="$emit('click')"
  >
    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
@@ -514,14 +514,14 @@ export default {
      this.$store.dispatch('campaigns/get');
    }

-    this.$emitter.on('fetch_conversation_stats', () => {
+    bus.$on('fetch_conversation_stats', () => {
      this.$store.dispatch('conversationStats/get', this.conversationFilters);
    });

-    this.$emitter.on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
  },
  beforeDestroy() {
-    this.$emitter.off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
  },
  methods: {
    updateVirtualListProps(key, value) {
@@ -742,7 +742,7 @@ export default {
    updateAssigneeTab(selectedTab) {
      if (this.activeAssigneeTab !== selectedTab) {
        this.resetBulkActions();
-        this.$emitter.emit('clearSearchInput');
+        bus.$emit('clearSearchInput');
        this.activeAssigneeTab = selectedTab;
        if (!this.currentPage) {
          this.fetchConversations();
@@ -25,10 +25,8 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
-  mixins: [alertMixin],
  props: {
    script: {
      type: String,
@@ -61,7 +59,7 @@ export default {
    async onCopy(e) {
      e.preventDefault();
      await copyTextToClipboard(this.script);
-      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      bus.$emit('newToastMessage', this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
 };
@@ -270,10 +270,10 @@ export default {
  },
  mounted() {
    this.editedValue = this.formattedValue;
-    this.$emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    bus.$on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  destroyed() {
-    this.$emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    bus.$off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
    onFocusAttribute(focusAttributeKey) {
@@ -18,10 +18,8 @@
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import alertMixin from 'shared/mixins/alertMixin';

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

 <script>
 import WootSnackbar from './Snackbar.vue';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    WootSnackbar,
  },
-  mixins: [alertMixin],
  props: {
    duration: {
      type: Number,
@@ -36,10 +34,10 @@ export default {
  },

  mounted() {
-    this.$emitter.on('newToastMessage', this.onNewToastMessage);
+    bus.$on('newToastMessage', this.onNewToastMessage);
  },
  beforeDestroy() {
-    this.$emitter.off('newToastMessage', this.onNewToastMessage);
+    bus.$off('newToastMessage', this.onNewToastMessage);
  },
  methods: {
    onNewToastMessage(message, action) {
@@ -128,12 +128,12 @@ export default {
    },
  },
  mounted() {
-    this.$emitter.on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+    bus.$on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  destroyed() {
-    this.$emitter.off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
-    this.$emitter.off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+    bus.$off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  methods: {
    getKeyboardEvents() {
@@ -22,7 +22,7 @@ import {
  setYear,
  isAfter,
 } from 'date-fns';
-import { useAlert } from 'dashboard/composables';
+
 import DatePickerButton from './components/DatePickerButton.vue';
 import CalendarDateInput from './components/CalendarDateInput.vue';
 import CalendarDateRange from './components/CalendarDateRange.vue';
@@ -185,7 +185,7 @@ const updateManualInput = (newDate, calendarType) => {
 };

 const handleManualInputError = message => {
-  useAlert(message);
+  bus.$emit('newToastMessage', message);
 };

 const resetDatePicker = () => {
@@ -201,7 +201,7 @@ const resetDatePicker = () => {

 const emitDateRange = () => {
  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
-    useAlert('Please select a valid time range');
+    bus.$emit('newToastMessage', 'Please select a valid time range');
  } else {
    showDatePicker.value = false;
    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
@@ -100,6 +100,8 @@ const shouldShowEmptyState = computed(() => {
        :key="item.id"
        :is-active="isFilterActive(item.id)"
        :button-text="item.name"
+        :left-icon="item.leftIcon"
+        :left-icon-color="item.leftIconColor"
        @click="$emit('click', item)"
      />
    </slot>
@@ -8,17 +8,31 @@ defineProps({
    type: Boolean,
    default: false,
  },
+  leftIcon: {
+    type: String,
+    default: '',
+  },
+  leftIconColor: {
+    type: String,
+    default: '',
+  },
 });
 </script>
 <template>
  <button
    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
-    @click.stop.prevent="$emit('click')"
+    @click.stop="$emit('click')"
    @mouseenter="$emit('mouseenter')"
    @mouseleave="$emit('mouseleave')"
    @focus="$emit('focus')"
  >
-    <div class="inline-flex items-center gap-3 overflow-hidden">
+    <div class="inline-flex items-center gap-2 overflow-hidden">
+      <fluent-icon
+        v-if="leftIcon"
+        icon="status"
+        size="18"
+        :style="{ color: leftIconColor }"
+      />
      <span
        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
      >
@@ -81,7 +81,7 @@ export default {
  },

  mounted() {
-    this.$emitter.on(CMD_AI_ASSIST, this.onAIAssist);
+    bus.$on(CMD_AI_ASSIST, this.onAIAssist);
    this.initialMessage = this.draftMessage;
  },

@@ -352,16 +352,10 @@ export default {
    // Components using this
    // 1. SearchPopover.vue

-    this.$emitter.on(
-      BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
-      this.insertContentIntoEditor
-    );
+    bus.$on(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
  },
  beforeDestroy() {
-    this.$emitter.off(
-      BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
-      this.insertContentIntoEditor
-    );
+    bus.$off(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
  },
  methods: {
    reloadState(content = this.value) {
@@ -1,9 +1,5 @@
 <template>
-  <li
-    v-if="shouldRenderMessage"
-    :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
-  >
+  <li v-if="shouldRenderMessage" :id="`message${data.id}`" :class="alignBubble">
    <div :class="wrapClass">
      <div
        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
@@ -125,10 +121,7 @@
        </a>
      </div>
    </div>
-    <div
-      v-if="shouldShowContextMenu"
-      class="context-menu-wrap invisible group-hover:visible"
-    >
+    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
      <context-menu
        v-if="isBubble && !isMessageDeleted"
        :context-menu-position="contextMenuPosition"
@@ -480,11 +473,11 @@ export default {
  },
  mounted() {
    this.hasMediaLoadError = false;
-    this.$emitter.on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
+    bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    this.setupHighlightTimer();
  },
  beforeDestroy() {
-    this.$emitter.off(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
+    bus.$off(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
    clearTimeout(this.higlightTimeout);
  },
  methods: {
@@ -538,7 +531,7 @@ export default {
      const { conversation_id: conversationId, id: replyTo } = this.data;

      LocalStorage.updateJsonStore(replyStorageKey, conversationId, replyTo);
-      this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.data);
    },
    setupHighlightTimer() {
      if (Number(this.$route.query.messageId) !== Number(this.data.id)) {
@@ -324,12 +324,12 @@ export default {
  },

  created() {
-    this.$emitter.on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+    bus.$on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
    // when a new message comes in, we refetch the label suggestions
-    this.$emitter.on(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS, this.fetchSuggestions);
+    bus.$on(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS, this.fetchSuggestions);
    // when a message is sent we set the flag to true this hides the label suggestions,
    // until the chat is changed and the flag is reset in the watch for currentChat
-    this.$emitter.on(BUS_EVENTS.MESSAGE_SENT, () => {
+    bus.$on(BUS_EVENTS.MESSAGE_SENT, () => {
      this.messageSentSinceOpened = true;
    });
  },
@@ -396,7 +396,7 @@ export default {
      this.$store.dispatch('fetchAllAttachments', this.currentChat.id);
    },
    removeBusListeners() {
-      this.$emitter.off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
    },
    onScrollToMessage({ messageId = '' } = {}) {
      this.$nextTick(() => {
@@ -514,7 +514,7 @@ export default {
      } else {
        this.hasUserScrolled = true;
      }
-      this.$emitter.emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
+      bus.$emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);
      this.fetchPreviousMessages(e.target.scrollTop);
    },

@@ -61,14 +61,14 @@ export default {
    ...mapGetters({ currentChat: 'getSelectedChat' }),
  },
  mounted() {
-    this.$emitter.on(CMD_MUTE_CONVERSATION, this.mute);
-    this.$emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
-    this.$emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+    bus.$on(CMD_MUTE_CONVERSATION, this.mute);
+    bus.$on(CMD_UNMUTE_CONVERSATION, this.unmute);
+    bus.$on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
  destroyed() {
-    this.$emitter.off(CMD_MUTE_CONVERSATION, this.mute);
-    this.$emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
-    this.$emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
+    bus.$off(CMD_MUTE_CONVERSATION, this.mute);
+    bus.$off(CMD_UNMUTE_CONVERSATION, this.unmute);
+    bus.$off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
  methods: {
    mute() {
@@ -596,15 +596,12 @@ export default {
    );

    this.fetchAndSetReplyTo();
-    this.$emitter.on(
-      BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE,
-      this.fetchAndSetReplyTo
-    );
+    bus.$on(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);

    // A hacky fix to solve the drag and drop
    // Is showing on top of new conversation modal drag and drop
    // TODO need to find a better solution
-    this.$emitter.on(
+    bus.$on(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
    );
@@ -612,13 +609,10 @@ export default {
  destroyed() {
    document.removeEventListener('paste', this.onPaste);
    document.removeEventListener('keydown', this.handleKeyEvents);
-    this.$emitter.off(
-      BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE,
-      this.fetchAndSetReplyTo
-    );
+    bus.$off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
  },
  beforeDestroy() {
-    this.$emitter.off(
+    bus.$off(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
    );
@@ -631,7 +625,7 @@ export default {
        const lines = title.split('\n');
        const nonEmptyLines = lines.filter(line => line.trim() !== '');
        const filteredMarkdown = nonEmptyLines.join(' ');
-        this.$emitter.emit(
+        bus.$emit(
          BUS_EVENTS.INSERT_INTO_RICH_EDITOR,
          `[${filteredMarkdown}](${url})`
        );
@@ -873,8 +867,8 @@ export default {
          'createPendingMessageAndSend',
          messagePayload
        );
-        this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
-        this.$emitter.emit(BUS_EVENTS.MESSAGE_SENT);
+        bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+        bus.$emit(BUS_EVENTS.MESSAGE_SENT);
        this.removeFromDraft();
        this.sendMessageAnalyticsData(messagePayload.private);
      } catch (error) {
@@ -1200,7 +1194,7 @@ export default {
    resetReplyToMessage() {
      const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;
      LocalStorage.deleteFromJsonStore(replyStorageKey, this.conversationId);
-      this.$emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE);
    },
    onNewConversationModalActive(isActive) {
      // Issue is if the new conversation modal is open and we drag and drop the file
@@ -47,9 +47,7 @@ export default {
  },
  methods: {
    scrollToMessage() {
-      this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, {
-        messageId: this.message.id,
-      });
+      bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId: this.message.id });
    },
  },
 };
@@ -167,29 +167,17 @@ export default {
    };
  },
  mounted() {
-    this.$emitter.on(
-      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-      this.onCmdSnoozeConversation
-    );
-    this.$emitter.on(
-      CMD_BULK_ACTION_REOPEN_CONVERSATION,
-      this.onCmdReopenConversation
-    );
-    this.$emitter.on(
+    bus.$on(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$on(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
+    bus.$on(
      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
      this.onCmdResolveConversation
    );
  },
  destroyed() {
-    this.$emitter.off(
-      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-      this.onCmdSnoozeConversation
-    );
-    this.$emitter.off(
-      CMD_BULK_ACTION_REOPEN_CONVERSATION,
-      this.onCmdReopenConversation
-    );
-    this.$emitter.off(
+    bus.$off(CMD_BULK_ACTION_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$off(CMD_BULK_ACTION_REOPEN_CONVERSATION, this.onCmdReopenConversation);
+    bus.$off(
      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
      this.onCmdResolveConversation
    );
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div @submit.prevent="onSubmit">
    <woot-input
      v-model="formState.title"
      :class="{ error: v$.title.$error }"
@@ -26,19 +26,61 @@
        "
      />
    </label>
-    <div class="flex flex-col gap-4">
-      <searchable-dropdown
-        v-for="dropdown in dropdowns"
-        :key="dropdown.type"
-        :type="dropdown.type"
-        :value="formState[dropdown.type]"
-        :label="$t(dropdown.label)"
-        :items="dropdown.items"
-        :placeholder="$t(dropdown.placeholder)"
-        :error="dropdown.error"
-        @change="onChange"
-      />
-    </div>
+    <label :class="{ error: v$.teamId.$error }">
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL') }}
+      <select
+        v-model="formState.teamId"
+        :style="inputStyles"
+        @change="onChangeTeam"
+      >
+        <option v-for="item in teams" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+      <span v-if="v$.teamId.$error" class="message">
+        {{ teamError }}
+      </span>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL') }}
+      <select v-model="formState.assigneeId" :style="inputStyles">
+        <option v-for="item in assignees" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL') }}
+      <select v-model="formState.labelId" :style="inputStyles">
+        <option v-for="item in labels" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL') }}
+      <select v-model="formState.priority" :style="inputStyles">
+        <option v-for="item in priorities" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL') }}
+      <select v-model="formState.projectId" :style="inputStyles">
+        <option v-for="item in projects" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
+    <label>
+      {{ $t('INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL') }}
+      <select v-model="formState.stateId" :style="inputStyles">
+        <option v-for="item in statuses" :key="item.name" :value="item.id">
+          {{ item.name }}
+        </option>
+      </select>
+    </label>
    <div class="flex items-center justify-end w-full gap-2 mt-8">
      <woot-button
        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
@@ -66,7 +108,6 @@ import { useAlert } from 'dashboard/composables';
 import LinearAPI from 'dashboard/api/integrations/linear';
 import validations from './validations';
 import { parseLinearAPIErrorResponse } from 'dashboard/store/utils/api';
-import SearchableDropdown from './SearchableDropdown.vue';

 const props = defineProps({
  accountId: {
@@ -121,6 +162,7 @@ const formState = reactive({
  priority: '',
  projectId: '',
 });
+
 const v$ = useVuelidate(validations, formState);

 const isSubmitDisabled = computed(
@@ -137,56 +179,6 @@ const teamError = computed(() =>
    : ''
 );

-const dropdowns = computed(() => {
-  return [
-    {
-      type: 'teamId',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.LABEL',
-      items: teams.value,
-      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.TEAM.SEARCH',
-      error: teamError.value,
-    },
-    {
-      type: 'assigneeId',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.LABEL',
-      items: assignees.value,
-      placeholder:
-        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.ASSIGNEE.SEARCH',
-      error: '',
-    },
-    {
-      type: 'labelId',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.LABEL',
-      items: labels.value,
-      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.LABEL.SEARCH',
-      error: '',
-    },
-    {
-      type: 'priority',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.LABEL',
-      items: priorities,
-      placeholder:
-        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PRIORITY.SEARCH',
-      error: '',
-    },
-    {
-      type: 'projectId',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.LABEL',
-      items: projects.value,
-      placeholder:
-        'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.PROJECT.SEARCH',
-      error: '',
-    },
-    {
-      type: 'stateId',
-      label: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.LABEL',
-      items: statuses.value,
-      placeholder: 'INTEGRATION_SETTINGS.LINEAR.ADD_OR_LINK.FORM.STATUS.SEARCH',
-      error: '',
-    },
-  ];
-});
-
 const onClose = () => emit('close');

 const getTeams = async () => {
@@ -220,15 +212,12 @@ const getTeamEntities = async () => {
  }
 };

-const onChange = (item, type) => {
-  formState[type] = item.id;
-  if (type === 'teamId') {
-    formState.assigneeId = '';
-    formState.stateId = '';
-    formState.labelId = '';
-    formState.projectId = '';
-    getTeamEntities();
-  }
+const onChangeTeam = event => {
+  formState.teamId = event.target.value;
+  formState.assigneeId = '';
+  formState.stateId = '';
+  formState.labelId = '';
+  getTeamEntities();
 };

 const createIssue = async () => {
@@ -6,7 +6,7 @@
    <filter-button
      right-icon="chevron-down"
      :button-text="linkIssueTitle"
-      class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
+      class="justify-between w-full bg-slate-50 dark:bg-slate-800 hover:bg-slate-75 dark:hover:bg-slate-800"
      @click="toggleDropdown"
    >
      <template v-if="shouldShowDropdown" #dropdown>
@@ -26,7 +26,7 @@
        />
      </template>
    </filter-button>
-    <div class="flex items-center justify-end w-full gap-2 mt-2">
+    <div class="flex items-center justify-end w-full gap-2">
      <woot-button
        class="px-4 rounded-xl button clear outline-woot-200/50 outline"
        @click.prevent="onClose"
@@ -109,6 +109,8 @@ const onSearch = async value => {
    issues.value = response.data.map(issue => ({
      id: issue.id,
      name: `${issue.identifier} ${issue.title}`,
+      leftIcon: 'status',
+      leftIconColor: issue.state.color,
    }));
  } catch (error) {
    const errorMessage = parseLinearAPIErrorResponse(
@@ -1,73 +0,0 @@
-<template>
-  <div
-    class="flex w-full"
-    :class="type === 'stateId' && shouldShowDropdown ? 'h-[150px]' : 'gap-2'"
-  >
-    <label class="w-full" :class="{ error: hasError }">
-      {{ label }}
-      <filter-button
-        right-icon="chevron-down"
-        :button-text="selectedItemName"
-        class="justify-between w-full h-[2.5rem] py-1.5 px-3 rounded-xl border border-slate-50 bg-slate-25 dark:border-slate-600 dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-900/50"
-        @click="toggleDropdown"
-      >
-        <template v-if="shouldShowDropdown" #dropdown>
-          <filter-list-dropdown
-            v-on-clickaway="toggleDropdown"
-            :show-clear-filter="false"
-            :list-items="items"
-            :active-filter-id="selectedItemId"
-            :input-placeholder="placeholder"
-            enable-search
-            class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-            @click="onSelect"
-          />
-        </template>
-      </filter-button>
-      <span v-if="hasError" class="mt-1 message">{{ error }}</span>
-    </label>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, defineComponent } from 'vue';
-import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
-import FilterListDropdown from 'dashboard/components/ui/Dropdown/DropdownList.vue';
-
-defineComponent({
-  name: 'SearchableDropdown',
-});
-
-const props = defineProps({
-  type: { type: String, required: true },
-  label: { type: String, default: null },
-  items: { type: Array, required: true },
-  value: { type: [Number, String], default: null },
-  placeholder: { type: String, default: null },
-  error: { type: String, default: null },
-});
-
-const emit = defineEmits(['change']);
-const shouldShowDropdown = ref(false);
-
-const toggleDropdown = () => {
-  shouldShowDropdown.value = !shouldShowDropdown.value;
-};
-const onSelect = item => {
-  emit('change', item, props.type);
-  toggleDropdown();
-};
-
-const hasError = computed(() => !!props.error);
-
-const selectedItem = computed(() => {
-  if (!props.value) return null;
-  return props.items.find(i => i.id === props.value);
-});
-
-const selectedItemName = computed(
-  () => selectedItem.value?.name || props.placeholder
-);
-
-const selectedItemId = computed(() => selectedItem.value?.id || null);
-</script>
@@ -2,21 +2,12 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VTooltip from 'v-tooltip';
+
 import Button from 'dashboard/components/buttons/Button';
 import i18n from 'dashboard/i18n';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import MoreActions from '../MoreActions';

-jest.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-  },
-}));
-
-import { emitter } from 'shared/helpers/mitt';
-
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -25,12 +16,6 @@ localVue.use(VTooltip);
 localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);

-localVue.prototype.$emitter = {
-  emit: jest.fn(),
-  on: jest.fn(),
-  off: jest.fn(),
-};
-
 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });

 describe('MoveActions', () => {
@@ -44,6 +29,12 @@ describe('MoveActions', () => {
  let moreActions = null;

  beforeEach(() => {
+    window.bus = {
+      $emit: jest.fn(),
+      $on: jest.fn(),
+      $off: jest.fn(),
+    };
+
    state = {
      authenticated: true,
      currentChat,
@@ -85,7 +76,7 @@ describe('MoveActions', () => {
    it('shows alert', async () => {
      await moreActions.find('button:first-child').trigger('click');

-      expect(emitter.emit).toBeCalledWith(
+      expect(window.bus.$emit).toBeCalledWith(
        'newToastMessage',
        'This contact is blocked successfully. You will not be notified of any future conversations.',
        undefined
@@ -111,7 +102,7 @@ describe('MoveActions', () => {
    it('shows alert', async () => {
      await moreActions.find('button:first-child').trigger('click');

-      expect(emitter.emit).toBeCalledWith(
+      expect(window.bus.$emit).toBeCalledWith(
        'newToastMessage',
        'This contact is unblocked successfully.',
        undefined
@@ -1,20 +0,0 @@
-import { emitter } from 'shared/helpers/mitt';
-import { onMounted, onBeforeUnmount } from 'vue';
-
-// this will automatically add event listeners to the emitter
-// and remove them when the component is destroyed
-const useEmitter = (eventName, callback) => {
-  const cleanup = () => {
-    emitter.off(eventName, callback);
-  };
-
-  onMounted(() => {
-    emitter.on(eventName, callback);
-  });
-
-  onBeforeUnmount(cleanup);
-
-  return cleanup;
-};
-
-export { useEmitter };
@@ -1,5 +1,4 @@
 import { getCurrentInstance } from 'vue';
-import { emitter } from 'shared/helpers/mitt';

 export const useTrack = () => {
  const vm = getCurrentInstance();
@@ -9,5 +8,5 @@ export const useTrack = () => {
 };

 export function useAlert(message, action) {
-  emitter.emit('newToastMessage', message, action);
+  bus.$emit('newToastMessage', message, action);
 }
@@ -1,51 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { emitter } from 'shared/helpers/mitt';
-import { useEmitter } from '../emitter';
-
-jest.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    on: jest.fn(),
-    off: jest.fn(),
-  },
-}));
-
-describe('useEmitter', () => {
-  let wrapper;
-  const eventName = 'my-event';
-  const callback = jest.fn();
-
-  beforeEach(() => {
-    wrapper = shallowMount({
-      template: `
-        <div>
-          Hello world
-        </div>
-      `,
-      setup() {
-        return {
-          cleanup: useEmitter(eventName, callback),
-        };
-      },
-    });
-  });
-
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-
-  it('should add an event listener on mount', () => {
-    expect(emitter.on).toHaveBeenCalledWith(eventName, callback);
-  });
-
-  it('should remove the event listener when the component is unmounted', () => {
-    wrapper.destroy();
-    expect(emitter.off).toHaveBeenCalledWith(eventName, callback);
-  });
-
-  it('should return the cleanup function', () => {
-    const cleanup = wrapper.vm.cleanup;
-    expect(typeof cleanup).toBe('function');
-    cleanup();
-    expect(emitter.off).toHaveBeenCalledWith(eventName, callback);
-  });
-});
@@ -1,140 +0,0 @@
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { differenceInSeconds } from 'date-fns';
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-  isNotificationRoute,
-} from 'dashboard/helper/routeHelpers';
-
-const MAX_DISCONNECT_SECONDS = 10800;
-
-class ReconnectService {
-  constructor(store, router) {
-    this.store = store;
-    this.router = router;
-    this.disconnectTime = null;
-
-    this.setupEventListeners();
-  }
-
-  disconnect = () => this.removeEventListeners();
-
-  setupEventListeners = () => {
-    window.addEventListener('online', this.handleOnlineEvent);
-    emitter.on(BUS_EVENTS.WEBSOCKET_RECONNECT, this.onReconnect);
-    emitter.on(BUS_EVENTS.WEBSOCKET_DISCONNECT, this.onDisconnect);
-  };
-
-  removeEventListeners = () => {
-    window.removeEventListener('online', this.handleOnlineEvent);
-    emitter.off(BUS_EVENTS.WEBSOCKET_RECONNECT, this.onReconnect);
-    emitter.off(BUS_EVENTS.WEBSOCKET_DISCONNECT, this.onDisconnect);
-  };
-
-  getSecondsSinceDisconnect = () =>
-    this.disconnectTime
-      ? Math.max(differenceInSeconds(new Date(), this.disconnectTime), 0)
-      : 0;
-
-  // Force reload if the user is disconnected for more than 3 hours
-  handleOnlineEvent = () => {
-    if (this.getSecondsSinceDisconnect() >= MAX_DISCONNECT_SECONDS) {
-      window.location.reload();
-    }
-  };
-
-  fetchConversations = async () => {
-    await this.store.dispatch('updateChatListFilters', {
-      page: null,
-      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
-    await this.store.dispatch('updateChatListFilters', {
-      updatedWithin: null,
-    });
-  };
-
-  fetchFilteredOrSavedConversations = async queryData => {
-    await this.store.dispatch('fetchFilteredConversations', {
-      queryData,
-      page: 1,
-    });
-  };
-
-  fetchConversationsOnReconnect = async () => {
-    const {
-      getAppliedConversationFiltersQuery,
-      'customViews/getActiveConversationFolder': activeFolder,
-    } = this.store.getters;
-    const query = getAppliedConversationFiltersQuery?.payload?.length
-      ? getAppliedConversationFiltersQuery
-      : activeFolder?.query;
-    if (query) {
-      await this.fetchFilteredOrSavedConversations(query);
-    } else {
-      await this.fetchConversations();
-    }
-  };
-
-  fetchConversationMessagesOnReconnect = async () => {
-    const { conversation_id: conversationId } = this.router.currentRoute.params;
-    if (conversationId) {
-      await this.store.dispatch('syncActiveConversationMessages', {
-        conversationId: Number(conversationId),
-      });
-    }
-  };
-
-  fetchNotificationsOnReconnect = async filter => {
-    await this.store.dispatch('notifications/index', { ...filter, page: 1 });
-  };
-
-  revalidateCaches = async () => {
-    const { label, inbox, team } = await this.store.dispatch(
-      'accounts/getCacheKeys'
-    );
-    await Promise.all([
-      this.store.dispatch('labels/revalidate', { newKey: label }),
-      this.store.dispatch('inboxes/revalidate', { newKey: inbox }),
-      this.store.dispatch('teams/revalidate', { newKey: team }),
-    ]);
-  };
-
-  handleRouteSpecificFetch = async () => {
-    const currentRoute = this.router.currentRoute.name;
-    if (isAConversationRoute(currentRoute, true)) {
-      await this.fetchConversationsOnReconnect();
-      await this.fetchConversationMessagesOnReconnect();
-    } else if (isAInboxViewRoute(currentRoute, true)) {
-      await this.fetchNotificationsOnReconnect(
-        this.store.getters['notifications/getNotificationFilters']
-      );
-    } else if (isNotificationRoute(currentRoute)) {
-      await this.fetchNotificationsOnReconnect();
-    }
-  };
-
-  setConversationLastMessageId = async () => {
-    const { conversation_id: conversationId } = this.router.currentRoute.params;
-    if (conversationId) {
-      await this.store.dispatch('setConversationLastMessageId', {
-        conversationId: Number(conversationId),
-      });
-    }
-  };
-
-  onDisconnect = () => {
-    this.disconnectTime = new Date();
-    this.setConversationLastMessageId();
-  };
-
-  onReconnect = async () => {
-    await this.handleRouteSpecificFetch();
-    await this.revalidateCaches();
-    emitter.emit(BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED);
-  };
-}
-
-export default ReconnectService;
@@ -1,8 +1,6 @@
 import AuthAPI from '../api/auth';
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { emitter } from 'shared/helpers/mitt';

 class ActionCableConnector extends BaseActionCableConnector {
  constructor(app, pubsubToken) {
@@ -34,14 +32,34 @@ class ActionCableConnector extends BaseActionCableConnector {
    };
  }

-  // eslint-disable-next-line class-methods-use-this
  onReconnect = () => {
-    emitter.emit(BUS_EVENTS.WEBSOCKET_RECONNECT);
+    this.syncActiveConversationMessages();
  };

-  // eslint-disable-next-line class-methods-use-this
  onDisconnected = () => {
-    emitter.emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
+    this.setActiveConversationLastMessageId();
+  };
+
+  setActiveConversationLastMessageId = () => {
+    const {
+      params: { conversation_id },
+    } = this.app.$route;
+    if (conversation_id) {
+      this.app.$store.dispatch('setConversationLastMessageId', {
+        conversationId: Number(conversation_id),
+      });
+    }
+  };
+
+  syncActiveConversationMessages = () => {
+    const {
+      params: { conversation_id },
+    } = this.app.$route;
+    if (conversation_id) {
+      this.app.$store.dispatch('syncActiveConversationMessages', {
+        conversationId: Number(conversation_id),
+      });
+    }
  };

  isAValidEvent = data => {
@@ -159,8 +177,8 @@ class ActionCableConnector extends BaseActionCableConnector {

  // eslint-disable-next-line class-methods-use-this
  fetchConversationStats = () => {
-    emitter.emit('fetch_conversation_stats');
-    emitter.emit('fetch_overview_reports');
+    bus.$emit('fetch_conversation_stats');
+    bus.$emit('fetch_overview_reports');
  };

  onContactDelete = data => {
@@ -189,7 +207,7 @@ class ActionCableConnector extends BaseActionCableConnector {

  // eslint-disable-next-line class-methods-use-this
  onFirstReplyCreated = () => {
-    emitter.emit('fetch_overview_reports');
+    bus.$emit('fetch_overview_reports');
  };

  onCacheInvalidate = data => {
@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import NotificationSubscriptions from '../api/notificationSubscription';
 import auth from '../api/auth';
-import { emitter } from 'shared/helpers/mitt';

 export const verifyServiceWorkerExistence = (callback = () => {}) => {
  if (!('serviceWorker' in navigator)) {
@@ -69,7 +68,7 @@ export const registerSubscription = (onSuccess = () => {}) => {
      onSuccess();
    })
    .catch(() => {
-      emitter.emit(
+      window.bus.$emit(
        'newToastMessage',
        'This browser does not support desktop notification'
      );
@@ -78,7 +77,7 @@ export const registerSubscription = (onSuccess = () => {}) => {

 export const requestPushPermissions = ({ onSuccess }) => {
  if (!('Notification' in window)) {
-    emitter.emit(
+    window.bus.$emit(
      'newToastMessage',
      'This browser does not support desktop notification'
    );
@@ -109,14 +109,5 @@ export const getConversationDashboardRoute = routeName => {
  }
 };

-export const isAInboxViewRoute = (routeName, includeBase = false) => {
-  const baseRoutes = ['inbox_view'];
-  const extendedRoutes = ['inbox_view_conversation'];
-  const routeNames = includeBase
-    ? [...baseRoutes, ...extendedRoutes]
-    : extendedRoutes;
-  return routeNames.includes(routeName);
-};
-
-export const isNotificationRoute = routeName =>
-  routeName === 'notifications_index';
+export const isAInboxViewRoute = routeName =>
+  ['inbox_view_conversation'].includes(routeName);
@@ -1,6 +1,5 @@
 import AnalyticsHelper from './AnalyticsHelper';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
-import { emitter } from 'shared/helpers/mitt';

 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
 export const CHATWOOT_RESET = 'CHATWOOT_RESET';
@@ -9,7 +8,7 @@ export const ANALYTICS_IDENTITY = 'ANALYTICS_IDENTITY';
 export const ANALYTICS_RESET = 'ANALYTICS_RESET';

 export const initializeAnalyticsEvents = () => {
-  emitter.on(ANALYTICS_IDENTITY, ({ user }) => {
+  window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
    AnalyticsHelper.identify(user);
  });
 };
@@ -35,12 +34,12 @@ const initializeAudioAlerts = user => {
 };

 export const initializeChatwootEvents = () => {
-  emitter.on(CHATWOOT_RESET, () => {
+  window.bus.$on(CHATWOOT_RESET, () => {
    if (window.$chatwoot) {
      window.$chatwoot.reset();
    }
  });
-  emitter.on(CHATWOOT_SET_USER, ({ user }) => {
+  window.bus.$on(CHATWOOT_SET_USER, ({ user }) => {
    if (window.$chatwoot) {
      window.$chatwoot.setUser(user.email, {
        avatar_url: user.avatar_url,
@@ -1,342 +0,0 @@
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { differenceInSeconds } from 'date-fns';
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-  isNotificationRoute,
-} from 'dashboard/helper/routeHelpers';
-import ReconnectService from 'dashboard/helper/ReconnectService';
-
-jest.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    on: jest.fn(),
-    off: jest.fn(),
-    emit: jest.fn(),
-  },
-}));
-
-jest.mock('date-fns', () => ({
-  differenceInSeconds: jest.fn(),
-}));
-
-jest.mock('dashboard/helper/routeHelpers', () => ({
-  isAConversationRoute: jest.fn(),
-  isAInboxViewRoute: jest.fn(),
-  isNotificationRoute: jest.fn(),
-}));
-
-const storeMock = {
-  dispatch: jest.fn(),
-  getters: {
-    getAppliedConversationFiltersQuery: [],
-    'customViews/getActiveConversationFolder': { query: {} },
-    'notifications/getNotificationFilters': {},
-  },
-};
-
-const routerMock = {
-  currentRoute: {
-    name: '',
-    params: { conversation_id: null },
-  },
-};
-
-describe('ReconnectService', () => {
-  let reconnectService;
-
-  beforeEach(() => {
-    window.addEventListener = jest.fn();
-    window.removeEventListener = jest.fn();
-    Object.defineProperty(window, 'location', {
-      configurable: true,
-      value: { reload: jest.fn() },
-    });
-    reconnectService = new ReconnectService(storeMock, routerMock);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('constructor', () => {
-    it('should initialize with store, router, and setup event listeners', () => {
-      expect(reconnectService.store).toBe(storeMock);
-      expect(reconnectService.router).toBe(routerMock);
-      expect(window.addEventListener).toHaveBeenCalledWith(
-        'online',
-        reconnectService.handleOnlineEvent
-      );
-      expect(emitter.on).toHaveBeenCalledWith(
-        BUS_EVENTS.WEBSOCKET_RECONNECT,
-        reconnectService.onReconnect
-      );
-      expect(emitter.on).toHaveBeenCalledWith(
-        BUS_EVENTS.WEBSOCKET_DISCONNECT,
-        reconnectService.onDisconnect
-      );
-    });
-  });
-
-  describe('disconnect', () => {
-    it('should remove event listeners', () => {
-      reconnectService.disconnect();
-      expect(window.removeEventListener).toHaveBeenCalledWith(
-        'online',
-        reconnectService.handleOnlineEvent
-      );
-      expect(emitter.off).toHaveBeenCalledWith(
-        BUS_EVENTS.WEBSOCKET_RECONNECT,
-        reconnectService.onReconnect
-      );
-      expect(emitter.off).toHaveBeenCalledWith(
-        BUS_EVENTS.WEBSOCKET_DISCONNECT,
-        reconnectService.onDisconnect
-      );
-    });
-  });
-
-  describe('getSecondsSinceDisconnect', () => {
-    it('should return 0 if disconnectTime is null', () => {
-      reconnectService.disconnectTime = null;
-      expect(reconnectService.getSecondsSinceDisconnect()).toBe(0);
-    });
-
-    it('should return the number of seconds since disconnect', () => {
-      reconnectService.disconnectTime = new Date();
-      differenceInSeconds.mockReturnValue(100);
-      expect(reconnectService.getSecondsSinceDisconnect()).toBe(100);
-    });
-  });
-
-  describe('handleOnlineEvent', () => {
-    it('should reload the page if disconnected for more than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(10801);
-      reconnectService.handleOnlineEvent();
-      expect(window.location.reload).toHaveBeenCalled();
-    });
-
-    it('should not reload the page if disconnected for less than 3 hours', () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(10799);
-      reconnectService.handleOnlineEvent();
-      expect(window.location.reload).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('fetchConversations', () => {
-    it('should dispatch updateChatListFilters and fetchAllConversations', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(100);
-      await reconnectService.fetchConversations();
-      expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
-        page: null,
-        updatedWithin: 100,
-      });
-      expect(storeMock.dispatch).toHaveBeenCalledWith('fetchAllConversations');
-    });
-
-    it('should dispatch updateChatListFilters and reset updatedWithin', async () => {
-      reconnectService.getSecondsSinceDisconnect = jest
-        .fn()
-        .mockReturnValue(100);
-      await reconnectService.fetchConversations();
-      expect(storeMock.dispatch).toHaveBeenCalledWith('updateChatListFilters', {
-        updatedWithin: null,
-      });
-    });
-  });
-
-  describe('fetchFilteredOrSavedConversations', () => {
-    it('should dispatch fetchFilteredConversations', async () => {
-      const payload = { test: 'data' };
-      await reconnectService.fetchFilteredOrSavedConversations(payload);
-      expect(storeMock.dispatch).toHaveBeenCalledWith(
-        'fetchFilteredConversations',
-        { queryData: payload, page: 1 }
-      );
-    });
-  });
-
-  describe('fetchConversationsOnReconnect', () => {
-    it('should fetch filtered or saved conversations if query exists', async () => {
-      storeMock.getters.getAppliedConversationFiltersQuery = {
-        payload: [
-          {
-            attribute_key: 'status',
-            filter_operator: 'equal_to',
-            values: ['open'],
-          },
-        ],
-      };
-      const spy = jest.spyOn(
-        reconnectService,
-        'fetchFilteredOrSavedConversations'
-      );
-
-      await reconnectService.fetchConversationsOnReconnect();
-
-      expect(spy).toHaveBeenCalledWith(
-        storeMock.getters.getAppliedConversationFiltersQuery
-      );
-    });
-
-    it('should fetch all conversations if no query exists', async () => {
-      storeMock.getters.getAppliedConversationFiltersQuery = [];
-      storeMock.getters['customViews/getActiveConversationFolder'] = {
-        query: null,
-      };
-
-      const spy = jest.spyOn(reconnectService, 'fetchConversations');
-
-      await reconnectService.fetchConversationsOnReconnect();
-
-      expect(spy).toHaveBeenCalled();
-    });
-
-    it('should fetch filtered or saved conversations if active folder query exists and no applied query', async () => {
-      storeMock.getters.getAppliedConversationFiltersQuery = [];
-      storeMock.getters['customViews/getActiveConversationFolder'] = {
-        query: { test: 'activeFolderQuery' },
-      };
-
-      const spy = jest.spyOn(
-        reconnectService,
-        'fetchFilteredOrSavedConversations'
-      );
-
-      await reconnectService.fetchConversationsOnReconnect();
-
-      expect(spy).toHaveBeenCalledWith({ test: 'activeFolderQuery' });
-    });
-  });
-
-  describe('fetchConversationMessagesOnReconnect', () => {
-    it('should dispatch syncActiveConversationMessages if conversationId exists', async () => {
-      routerMock.currentRoute.params.conversation_id = 1;
-      await reconnectService.fetchConversationMessagesOnReconnect();
-      expect(storeMock.dispatch).toHaveBeenCalledWith(
-        'syncActiveConversationMessages',
-        { conversationId: 1 }
-      );
-    });
-
-    it('should not dispatch syncActiveConversationMessages if conversationId does not exist', async () => {
-      routerMock.currentRoute.params.conversation_id = null;
-      await reconnectService.fetchConversationMessagesOnReconnect();
-      expect(storeMock.dispatch).not.toHaveBeenCalledWith(
-        'syncActiveConversationMessages',
-        expect.anything()
-      );
-    });
-  });
-
-  describe('fetchNotificationsOnReconnect', () => {
-    it('should dispatch notifications/index', async () => {
-      const filter = { test: 'filter' };
-      await reconnectService.fetchNotificationsOnReconnect(filter);
-      expect(storeMock.dispatch).toHaveBeenCalledWith('notifications/index', {
-        ...filter,
-        page: 1,
-      });
-    });
-  });
-
-  describe('revalidateCaches', () => {
-    it('should dispatch revalidate actions for labels, inboxes, and teams', async () => {
-      storeMock.dispatch.mockResolvedValueOnce({
-        label: 'labelKey',
-        inbox: 'inboxKey',
-        team: 'teamKey',
-      });
-      await reconnectService.revalidateCaches();
-      expect(storeMock.dispatch).toHaveBeenCalledWith('accounts/getCacheKeys');
-      expect(storeMock.dispatch).toHaveBeenCalledWith('labels/revalidate', {
-        newKey: 'labelKey',
-      });
-      expect(storeMock.dispatch).toHaveBeenCalledWith('inboxes/revalidate', {
-        newKey: 'inboxKey',
-      });
-      expect(storeMock.dispatch).toHaveBeenCalledWith('teams/revalidate', {
-        newKey: 'teamKey',
-      });
-    });
-  });
-
-  describe('handleRouteSpecificFetch', () => {
-    it('should fetch conversations and messages if current route is a conversation route', async () => {
-      isAConversationRoute.mockReturnValue(true);
-      const spyConversations = jest.spyOn(
-        reconnectService,
-        'fetchConversationsOnReconnect'
-      );
-      const spyMessages = jest.spyOn(
-        reconnectService,
-        'fetchConversationMessagesOnReconnect'
-      );
-      await reconnectService.handleRouteSpecificFetch();
-      expect(spyConversations).toHaveBeenCalled();
-      expect(spyMessages).toHaveBeenCalled();
-    });
-
-    it('should fetch notifications if current route is an inbox view route', async () => {
-      isAInboxViewRoute.mockReturnValue(true);
-      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 = jest.spyOn(reconnectService, 'fetchNotificationsOnReconnect');
-      await reconnectService.handleRouteSpecificFetch();
-      expect(spy).toHaveBeenCalled();
-    });
-  });
-
-  describe('setConversationLastMessageId', () => {
-    it('should dispatch setConversationLastMessageId if conversationId exists', async () => {
-      routerMock.currentRoute.params.conversation_id = 1;
-      await reconnectService.setConversationLastMessageId();
-      expect(storeMock.dispatch).toHaveBeenCalledWith(
-        'setConversationLastMessageId',
-        { conversationId: 1 }
-      );
-    });
-
-    it('should not dispatch setConversationLastMessageId if conversationId does not exist', async () => {
-      routerMock.currentRoute.params.conversation_id = null;
-      await reconnectService.setConversationLastMessageId();
-      expect(storeMock.dispatch).not.toHaveBeenCalledWith(
-        'setConversationLastMessageId',
-        expect.anything()
-      );
-    });
-  });
-
-  describe('onDisconnect', () => {
-    it('should set disconnectTime and call setConversationLastMessageId', () => {
-      reconnectService.setConversationLastMessageId = jest.fn();
-      reconnectService.onDisconnect();
-      expect(reconnectService.disconnectTime).toBeInstanceOf(Date);
-      expect(reconnectService.setConversationLastMessageId).toHaveBeenCalled();
-    });
-  });
-
-  describe('onReconnect', () => {
-    it('should handle route-specific fetch, revalidate caches, and emit WEBSOCKET_RECONNECT_COMPLETED event', async () => {
-      reconnectService.handleRouteSpecificFetch = jest.fn();
-      reconnectService.revalidateCaches = jest.fn();
-      await reconnectService.onReconnect();
-      expect(reconnectService.handleRouteSpecificFetch).toHaveBeenCalled();
-      expect(reconnectService.revalidateCaches).toHaveBeenCalled();
-      expect(emitter.emit).toHaveBeenCalledWith(
-        BUS_EVENTS.WEBSOCKET_RECONNECT_COMPLETED
-      );
-    });
-  });
-});
@@ -186,12 +186,4 @@ describe('isAInboxViewRoute', () => {
    expect(isAInboxViewRoute('inbox_view_conversation')).toBe(true);
    expect(isAInboxViewRoute('inbox_conversation')).toBe(false);
  });
-
-  it('returns true if base inbox view route name is provided and includeBase is true', () => {
-    expect(isAInboxViewRoute('inbox_view', true)).toBe(true);
-  });
-
-  it('returns false if base inbox view route name is provided and includeBase is false', () => {
-    expect(isAInboxViewRoute('inbox_view')).toBe(false);
-  });
 });
@@ -95,9 +95,7 @@
  },
  "NETWORK": {
    "NOTIFICATION": {
-      "OFFLINE": "Offline",
-      "RECONNECTING": "Reconnecting...",
-      "RECONNECT_SUCCESS": "Reconnected"
+      "OFFLINE": "Offline"
    },
    "BUTTON": {
      "REFRESH": "Refresh"
@@ -366,15 +366,8 @@
        "TITLE": "Microsoft Email",
        "DESCRIPTION": "Click on the Sign in with Microsoft button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
        "EMAIL_PLACEHOLDER": "Enter email address",
-        "SIGN_IN": "Sign in with Microsoft",
+        "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
        "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
-      },
-      "GOOGLE": {
-        "TITLE": "Google Email",
-        "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
-        "SIGN_IN": "Sign in with Google",
-        "EMAIL_PLACEHOLDER": "Enter email address",
-        "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
      }
    },
    "DETAILS": {
@@ -742,8 +735,7 @@
    },
    "EMAIL_PROVIDERS": {
      "MICROSOFT": "Microsoft",
-      "GOOGLE": "Google",
      "OTHER_PROVIDERS": "Other Providers"
    }
  }
-}
+}
@@ -110,11 +110,11 @@ export default {
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
-    this.$emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
-    this.$emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },

  methods: {
@@ -11,7 +11,6 @@ import {
  ICON_REOPEN_CONVERSATION,
  ICON_RESOLVE_CONVERSATION,
 } from './CommandBarIcons';
-import { emitter } from 'shared/helpers/mitt';

 import { createSnoozeHandlers } from './commandBarActions';

@@ -38,7 +37,7 @@ export const RESOLVED_CONVERSATION_BULK_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
+    handler: () => bus.$emit(CMD_BULK_ACTION_REOPEN_CONVERSATION),
  },
 ];

@@ -48,7 +47,7 @@ export const OPEN_CONVERSATION_BULK_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.BULK_ACTIONS',
    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => emitter.emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
+    handler: () => bus.$emit(CMD_BULK_ACTION_RESOLVE_CONVERSATION),
  },
 ];

@@ -1,5 +1,4 @@
 import wootConstants from 'dashboard/constants/globals';
-import { emitter } from 'shared/helpers/mitt';

 import {
  CMD_MUTE_CONVERSATION,
@@ -27,7 +26,7 @@ export const OPEN_CONVERSATION_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.RESOLVE_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
    icon: ICON_RESOLVE_CONVERSATION,
-    handler: () => emitter.emit(CMD_RESOLVE_CONVERSATION),
+    handler: () => bus.$emit(CMD_RESOLVE_CONVERSATION),
  },
 ];

@@ -38,7 +37,7 @@ export const createSnoozeHandlers = (busEventName, parentId, section) => {
    parent: parentId,
    section: section,
    icon: ICON_SNOOZE_CONVERSATION,
-    handler: () => emitter.emit(busEventName, option),
+    handler: () => bus.$emit(busEventName, option),
  }));
 };

@@ -62,7 +61,7 @@ export const RESOLVED_CONVERSATION_ACTIONS = [
    title: 'COMMAND_BAR.COMMANDS.REOPEN_CONVERSATION',
    section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
    icon: ICON_REOPEN_CONVERSATION,
-    handler: () => emitter.emit(CMD_REOPEN_CONVERSATION),
+    handler: () => bus.$emit(CMD_REOPEN_CONVERSATION),
  },
 ];

@@ -71,7 +70,7 @@ export const SEND_TRANSCRIPT_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.SEND_TRANSCRIPT',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_SEND_TRANSCRIPT,
-  handler: () => emitter.emit(CMD_SEND_TRANSCRIPT),
+  handler: () => bus.$emit(CMD_SEND_TRANSCRIPT),
 };

 export const UNMUTE_ACTION = {
@@ -79,7 +78,7 @@ export const UNMUTE_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.UNMUTE_CONVERSATION',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_UNMUTE_CONVERSATION,
-  handler: () => emitter.emit(CMD_UNMUTE_CONVERSATION),
+  handler: () => bus.$emit(CMD_UNMUTE_CONVERSATION),
 };

 export const MUTE_ACTION = {
@@ -87,5 +86,5 @@ export const MUTE_ACTION = {
  title: 'COMMAND_BAR.COMMANDS.MUTE_CONVERSATION',
  section: 'COMMAND_BAR.SECTIONS.CONVERSATION',
  icon: ICON_MUTE_CONVERSATION,
-  handler: () => emitter.emit(CMD_MUTE_CONVERSATION),
+  handler: () => bus.$emit(CMD_MUTE_CONVERSATION),
 };
@@ -1,6 +1,5 @@
 import { mapGetters } from 'vuex';
 import wootConstants from 'dashboard/constants/globals';
-import { emitter } from 'shared/helpers/mitt';

 import { CMD_AI_ASSIST } from './commandBarBusEvents';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
@@ -319,7 +318,7 @@ export default {
        section: this.$t('COMMAND_BAR.SECTIONS.AI_ASSIST'),
        priority: item,
        icon: item.icon,
-        handler: () => emitter.emit(CMD_AI_ASSIST, item.key),
+        handler: () => bus.$emit(CMD_AI_ASSIST, item.key),
      }));
      return [
        {
@@ -2,7 +2,6 @@ import wootConstants from 'dashboard/constants/globals';

 import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
 import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
-import { emitter } from 'shared/helpers/mitt';

 import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';

@@ -22,7 +21,7 @@ const INBOX_SNOOZE_EVENTS = [
    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_TOMORROW,
@@ -31,7 +30,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_NEXT_WEEK,
@@ -40,7 +39,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_NEXT_MONTH,
@@ -49,7 +48,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
  },
  {
    id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
@@ -58,7 +57,7 @@ const INBOX_SNOOZE_EVENTS = [
    parent: 'snooze_notification',
    icon: ICON_SNOOZE_NOTIFICATION,
    handler: () =>
-      emitter.emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
  },
 ];
 export default {
@@ -19,12 +19,12 @@ const initiatedAt = computed(
  () => props.conversationAttributes.initiated_at?.timestamp
 );

-const browserInfo = computed(() => props.conversationAttributes.browser);
+const browserInfo = props.conversationAttributes.browser;

 const browserName = computed(() => {
-  if (!browserInfo.value) return '';
+  if (!browserInfo) return '';
  const { browser_name: name = '', browser_version: version = '' } =
-    browserInfo.value;
+    browserInfo;
  return `${name} ${version}`;
 });

@@ -33,9 +33,9 @@ const browserLanguage = computed(() =>
 );

 const platformName = computed(() => {
-  if (!browserInfo.value) return '';
+  if (!browserInfo) return '';
  const { platform_name: name = '', platform_version: version = '' } =
-    browserInfo.value;
+    browserInfo;
  return `${name} ${version}`;
 });

@@ -169,7 +169,7 @@ export default {
            after: messageId,
          })
          .then(() => {
-            this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
+            bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId });
          });
      } else {
        this.$store.dispatch('clearSelectedState');
@@ -271,10 +271,7 @@ export default {
    },
    toggleConversationModal() {
      this.showConversationModal = !this.showConversationModal;
-      this.$emitter.emit(
-        BUS_EVENTS.NEW_CONVERSATION_MODAL,
-        this.showConversationModal
-      );
+      bus.$emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, this.showConversationModal);
    },
    toggleDeleteModal() {
      this.showDeleteModal = !this.showDeleteModal;
@@ -265,7 +265,7 @@ export default {
  },

  mounted() {
-    this.$emitter.on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);

    const slug = this.$route.params.portalSlug;
    if (slug) this.lastActivePortalSlug = slug;
@@ -273,7 +273,7 @@ export default {
    this.fetchPortalAndItsCategories();
  },
  beforeDestroy() {
-    this.$emitter.off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
+    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
  },
  updated() {
    const slug = this.$route.params.portalSlug;
@@ -35,7 +35,7 @@ const locales = computed(() => {
 });
 const allowedLocales = computed(() => {
  return Object.keys(locales.value).map(key => {
-    return locales.value[key].code;
+    return this.locales.value[key].code;
  });
 });

@@ -72,7 +72,7 @@ async function updatePortalLocales({

 function changeDefaultLocale({ localeCode }) {
  updatePortalLocales({
-    newAllowedLocales: allowedLocales.value,
+    allowedLocales: allowedLocales.value,
    defaultLocale: localeCode,
    messageKey: 'CHANGE_DEFAULT_LOCALE',
  });
@@ -90,7 +90,7 @@ function deletePortalLocale({ localeCode }) {
  const defaultLocale = currentPortal.value?.meta.default_locale;

  updatePortalLocales({
-    newAllowedLocales: updatedLocales,
+    allowedLocales: updatedLocales,
    defaultLocale,
    messageKey: 'DELETE_LOCALE',
  });
@@ -140,7 +140,7 @@ export default {
      this.$store
        .dispatch('setActiveChat', { data: selectedConversation })
        .then(() => {
-          this.$emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
        });
    },
    findConversation() {
@@ -92,10 +92,10 @@ export default {
    ...mapGetters({ meta: 'notifications/getMeta' }),
  },
  mounted() {
-    this.$emitter.on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+    bus.$on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
  },
  destroyed() {
-    this.$emitter.off(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+    bus.$off(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
  },
  methods: {
    openSnoozeNotificationModal() {
@@ -69,10 +69,8 @@
 <script>
 import { required, minLength, email } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
-  mixins: [alertMixin],
  props: {
    onClose: {
      type: Function,
@@ -119,6 +117,9 @@ export default {
  },

  methods: {
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
+    },
    async addAgent() {
      try {
        await this.$store.dispatch('agents/create', {
@@ -83,7 +83,6 @@ import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vu
 import Modal from '../../../../components/Modal.vue';
 import Auth from '../../../../api/auth';
 import wootConstants from 'dashboard/constants/globals';
-import alertMixin from 'shared/mixins/alertMixin';

 const { AVAILABILITY_STATUS_KEYS } = wootConstants;

@@ -92,7 +91,6 @@ export default {
    WootSubmitButton,
    Modal,
  },
-  mixins: [alertMixin],
  props: {
    id: {
      type: Number,
@@ -171,6 +169,9 @@ export default {
    },
  },
  methods: {
+    showAlert(message) {
+      bus.$emit('newToastMessage', message);
+    },
    async editAgent() {
      try {
        await this.$store.dispatch('agents/update', {
@@ -130,7 +130,6 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
 import AddAgent from './AddAgent.vue';
 import EditAgent from './EditAgent.vue';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
@@ -138,7 +137,7 @@ export default {
    EditAgent,
    Thumbnail,
  },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
  data() {
    return {
      loading: {},
@@ -231,19 +230,19 @@ export default {
    async deleteAgent(id) {
      try {
        await this.$store.dispatch('agents/delete', id);
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
      } catch (error) {
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+        this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
      }
    },
    // Show SnackBar
-    showAlertMessage(message) {
+    showAlert(message) {
      // Reset loading, current selected agent
      this.loading[this.currentAgent.id] = false;
      this.currentAgent = {};
      // Show message
      this.agentAPI.message = message;
-      this.showAlert(message);
+      bus.$emit('newToastMessage', message);
    },
  },
 };
@@ -132,14 +132,12 @@
 import { mapGetters } from 'vuex';
 import AddCanned from './AddCanned.vue';
 import EditCanned from './EditCanned.vue';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    AddCanned,
    EditCanned,
  },
-  mixins: [alertMixin],
  data() {
    return {
      loading: {},
@@ -189,13 +187,13 @@ export default {
      });
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
    },
-    showAlertMessage(message) {
+    showAlert(message) {
      // Reset loading, current selected agent
      this.loading[this.selectedResponse.id] = false;
      this.selectedResponse = {};
      // Show message
      this.cannedResponseAPI.message = message;
-      this.showAlert(message);
+      bus.$emit('newToastMessage', message);
    },
    // Edit Function
    openAddPopup() {
@@ -232,14 +230,12 @@ export default {
      this.$store
        .dispatch('deleteCannedResponse', id)
        .then(() => {
-          this.showAlertMessage(
-            this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE')
-          );
+          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
        })
        .catch(error => {
          const errorMessage =
            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlertMessage(errorMessage);
+          this.showAlert(errorMessage);
        });
    },
  },
@@ -51,13 +51,11 @@ import { mapGetters } from 'vuex';
 import InboxMembersAPI from '../../../../api/inboxMembers';
 import router from '../../../index';
 import PageHeader from '../SettingsSubPageHeader.vue';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    PageHeader,
  },
-  mixins: [alertMixin],

  validations: {
    selectedAgents: {
@@ -100,7 +98,7 @@ export default {
          },
        });
      } catch (error) {
-        this.showAlert(error.message);
+        bus.$emit('newToastMessage', error.message);
      }
      this.isCreating = false;
    },
@@ -136,13 +136,12 @@ import Settings from './Settings.vue';
 import adminMixin from '../../../../mixins/isAdmin';
 import accountMixin from '../../../../mixins/account';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    Settings,
  },
-  mixins: [adminMixin, accountMixin, globalConfigMixin, alertMixin],
+  mixins: [adminMixin, accountMixin, globalConfigMixin],
  data() {
    return {
      loading: {},
@@ -195,9 +194,15 @@ export default {
    async deleteInbox({ id }) {
      try {
        await this.$store.dispatch('inboxes/delete', id);
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+        bus.$emit(
+          'newToastMessage',
+          this.$t('INBOX_MGMT.DELETE.API.SUCCESS_MESSAGE')
+        );
      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE'));
+        bus.$emit(
+          'newToastMessage',
+          this.$t('INBOX_MGMT.DELETE.API.ERROR_MESSAGE')
+        );
      }
    },

@@ -541,8 +541,7 @@ export default {
        this.isALineChannel ||
        this.isAPIInbox ||
        (this.isAnEmailChannel && !this.inbox.provider) ||
-        this.isAMicrosoftInbox ||
-        this.isAGoogleInbox ||
+        (this.isAnEmailChannel && this.inbox.provider === 'microsoft') ||
        this.isAWhatsAppChannel ||
        this.isAWebWidgetInbox
      ) {
@@ -8,7 +8,7 @@
      :header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
      :header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
    />
-    <div class="grid max-w-3xl grid-cols-4 mx-0 mt-6">
+    <div class="grid grid-cols-4 max-w-3xl mx-0 mt-6">
      <channel-selector
        v-for="emailProvider in emailProviderList"
        :key="emailProvider.key"
@@ -20,59 +20,58 @@
    </div>
  </div>
  <microsoft v-else-if="provider === 'microsoft'" />
-  <google v-else-if="provider === 'google'" />
  <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
-<script setup>
-import { ref, computed } from 'vue';
+<script>
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
 import Microsoft from './emailChannels/Microsoft.vue';
-import Google from './emailChannels/Google.vue';
+import { mapGetters } from 'vuex';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';

-import { useStoreGetters } from 'dashboard/composables/store';
-import { useI18n } from 'dashboard/composables/useI18n';
-
-const provider = ref('');
-
-const getters = useStoreGetters();
-const { t } = useI18n();
-
-const globalConfig = getters['globalConfig/get'];
-const isAChatwootInstance = getters['globalConfig/isAChatwootInstance'];
-
-const emailProviderList = computed(() => {
-  return [
-    {
-      title: t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
-      isEnabled: !!globalConfig.value.azureAppId,
-      key: 'microsoft',
-      src: '/assets/images/dashboard/channels/microsoft.png',
+export default {
+  components: {
+    ChannelSelector,
+    ForwardToOption,
+    Microsoft,
+    PageHeader,
+  },
+  data() {
+    return { provider: '' };
+  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+      isAChatwootInstance: 'globalConfig/isAChatwootInstance',
+    }),
+    emailProviderList() {
+      return [
+        {
+          title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.MICROSOFT'),
+          isEnabled: !!this.globalConfig.azureAppId,
+          key: 'microsoft',
+          src: '/assets/images/dashboard/channels/microsoft.png',
+        },
+        {
+          title: this.$t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
+          isEnabled: true,
+          key: 'other_provider',
+          src: '/assets/images/dashboard/channels/email.png',
+        },
+      ].filter(provider => {
+        if (this.isAChatwootInstance) {
+          return true;
+        }
+        return provider.isEnabled;
+      });
    },
-    {
-      title: t('INBOX_MGMT.EMAIL_PROVIDERS.GOOGLE'),
-      isEnabled: !!window.chatwootConfig.googleOAuthClientId,
-      key: 'google',
-      src: '/assets/images/dashboard/channels/google.png',
+  },
+  methods: {
+    onClick(emailProvider) {
+      if (emailProvider.isEnabled) {
+        this.provider = emailProvider.key;
+      }
    },
-    {
-      title: t('INBOX_MGMT.EMAIL_PROVIDERS.OTHER_PROVIDERS'),
-      isEnabled: true,
-      key: 'other_provider',
-      src: '/assets/images/dashboard/channels/email.png',
-    },
-  ].filter(providerConfig => {
-    if (isAChatwootInstance.value) {
-      return true;
-    }
-    return providerConfig.isEnabled;
-  });
-});
-
-function onClick(emailProvider) {
-  if (emailProvider.isEnabled) {
-    this.provider = emailProvider.key;
-  }
-}
+  },
+};
 </script>
@@ -1,18 +0,0 @@
-<script setup>
-import OAuthChannel from './OAuthChannel.vue';
-import { defineComponent } from 'vue';
-
-defineComponent({
-  name: 'GoogleOAuthChannel',
-});
-</script>
-<template>
-  <OAuthChannel
-    provider="google"
-    :title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
-    :description="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
-    :submit-button-text="$t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN')"
-    :error-message="$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE')"
-  />
-</template>
@@ -1,19 +1,71 @@
-<script setup>
-import OAuthChannel from './OAuthChannel.vue';
-import { defineComponent } from 'vue';
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <settings-sub-page-header
+      :header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
+    />
+    <form
+      class="microsoft--sign-in-form"
+      @submit.prevent="requestAuthorization"
+    >
+      <woot-input
+        v-model.trim="email"
+        type="text"
+        :placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
+        @blur="$v.email.$touch"
+      />
+      <woot-submit-button
+        icon="brand-twitter"
+        button-text="Sign in with Microsoft"
+        type="submit"
+        :loading="isRequestingAuthorization"
+      />
+    </form>
+  </div>
+</template>
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import microsoftClient from 'dashboard/api/channel/microsoftClient';
+import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+import { required, email } from 'vuelidate/lib/validators';

-defineComponent({
-  name: 'MicrosoftOAuthChannel',
-});
+export default {
+  components: { SettingsSubPageHeader },
+  mixins: [alertMixin],
+  data() {
+    return { email: '', isRequestingAuthorization: false };
+  },
+  validations: {
+    email: { required, email },
+  },
+  methods: {
+    async requestAuthorization() {
+      try {
+        this.$v.$touch();
+        if (this.$v.$invalid) return;
+
+        this.isRequestingAuthorization = true;
+        const response = await microsoftClient.generateAuthorization({
+          email: this.email,
+        });
+        const {
+          data: { url },
+        } = response;
+        window.location.href = url;
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE'));
+      } finally {
+        this.isRequestingAuthorization = false;
+      }
+    },
+  },
+};
 </script>

-<template>
-  <OAuthChannel
-    provider="microsoft"
-    :title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
-    :description="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
-    :input-placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
-    :submit-button-text="$t('INBOX_MGMT.ADD.MICROSOFT.SIGN_IN')"
-    :error-message="$t('INBOX_MGMT.ADD.MICROSOFT.ERROR_MESSAGE')"
-  />
-</template>
+<style scoped>
+.microsoft--sign-in-form {
+  @apply mt-6;
+}
+</style>
@@ -1,89 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-
-import microsoftClient from 'dashboard/api/channel/microsoftClient';
-import googleClient from 'dashboard/api/channel/googleClient';
-import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
-
-import { useAlert } from 'dashboard/composables';
-
-const props = defineProps({
-  provider: {
-    type: String,
-    required: true,
-    validate: value => ['microsoft', 'google'].includes(value),
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  submitButtonText: {
-    type: String,
-    required: true,
-  },
-  errorMessage: {
-    type: String,
-    required: true,
-  },
-  inputPlaceholder: {
-    type: String,
-    required: true,
-  },
-});
-
-const isRequestingAuthorization = ref(false);
-const email = ref('');
-
-const client = computed(() => {
-  if (props.provider === 'microsoft') {
-    return microsoftClient;
-  }
-
-  return googleClient;
-});
-
-async function requestAuthorization() {
-  try {
-    isRequestingAuthorization.value = true;
-    const response = await client.value.generateAuthorization({
-      email: email.value,
-    });
-    const {
-      data: { url },
-    } = response;
-
-    window.location.href = url;
-  } catch (error) {
-    useAlert(props.errorMessage);
-  } finally {
-    isRequestingAuthorization.value = false;
-  }
-}
-</script>
-<template>
-  <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
-  >
-    <settings-sub-page-header
-      :header-title="title"
-      :header-content="description"
-    />
-    <form class="mt-6" @submit.prevent="requestAuthorization">
-      <woot-input
-        v-model="email"
-        type="email"
-        :placeholder="inputPlaceholder"
-      />
-      <woot-submit-button
-        icon="brand-twitter"
-        type="submit"
-        :button-text="submitButtonText"
-        :loading="isRequestingAuthorization"
-      />
-    </form>
-  </div>
-</template>
@@ -128,7 +128,7 @@ export default {
    this.$store.dispatch('agents/get');
    this.fetchAllData();

-    this.$emitter.on('fetch_overview_reports', () => {
+    bus.$on('fetch_overview_reports', () => {
      this.fetchAllData();
    });
  },
@@ -1,30 +1,24 @@
-<script setup>
-import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
-import { onMounted } from 'vue';
-
-const toggleSupportWidgetVisibility = () => {
-  if (window.$chatwoot) {
-    window.$chatwoot.toggleBubbleVisibility('show');
-  }
-};
-
-const setupListenerForWidgetEvent = () => {
-  window.addEventListener('chatwoot:on-message', () => {
-    toggleSupportWidgetVisibility();
-  });
-};
-
-onMounted(() => {
-  toggleSupportWidgetVisibility();
-  setupListenerForWidgetEvent();
-});
-</script>
-
 <template>
-  <div class="items-center bg-slate-50 flex justify-center h-full w-full">
+  <div class="suspended-page">
    <empty-state
      :title="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.TITLE')"
      :message="$t('APP_GLOBAL.ACCOUNT_SUSPENDED.MESSAGE')"
    />
  </div>
 </template>
+<script>
+import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
+export default {
+  components: { EmptyState },
+};
+</script>
+<style scoped>
+.suspended-page {
+  align-items: center;
+  background: var(--s-50);
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+</style>
@@ -109,10 +109,6 @@ export const actions = {
      // silent error
    }
  },
-
-  getCacheKeys: async () => {
-    return AccountAPI.getCacheKeys();
-  },
 };

 export const mutations = {
@@ -6,7 +6,6 @@ import { findPendingMessageIndex } from './helpers';
 import { MESSAGE_STATUS } from 'shared/constants/messages';
 import wootConstants from 'dashboard/constants/globals';
 import { BUS_EVENTS } from '../../../../shared/constants/busEvents';
-import { emitter } from 'shared/helpers/mitt';

 const state = {
  allConversations: [],
@@ -41,14 +40,11 @@ export const mutations = {
        newAllConversations[indexInCurrentList] = conversation;
      } else {
        // If the conversation is already in the list and selectedChatId is the same,
-        // replace all data except the messages array, attachments, dataFetched, allMessagesLoaded
+        // replace all data except the messages array
        const existingConversation = newAllConversations[indexInCurrentList];
        newAllConversations[indexInCurrentList] = {
          ...conversation,
-          allMessagesLoaded: existingConversation.allMessagesLoaded,
          messages: existingConversation.messages,
-          dataFetched: existingConversation.dataFetched,
-          attachments: existingConversation.attachments,
        };
      }
    });
@@ -199,8 +195,8 @@ export const mutations = {
      const { conversation: { unread_count: unreadCount = 0 } = {} } = message;
      chat.unread_count = unreadCount;
      if (selectedChatId === conversationId) {
-        emitter.emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
-        emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+        window.bus.$emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
+        window.bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
      }
    }
  },
@@ -222,8 +218,8 @@ export const mutations = {
      };
      Vue.set(allConversations, currentConversationIndex, currentConversation);
      if (_state.selectedChatId === conversation.id) {
-        emitter.emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
-        emitter.emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+        window.bus.$emit(BUS_EVENTS.FETCH_LABEL_SUGGESTIONS);
+        window.bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
      }
    } else {
      _state.allConversations.push(conversation);
@@ -1,16 +1,6 @@
 import types from '../../../mutation-types';
 import { mutations } from '../../conversations';

-jest.mock('shared/helpers/mitt', () => ({
-  emitter: {
-    emit: jest.fn(),
-    on: jest.fn(),
-    off: jest.fn(),
-  },
-}));
-
-import { emitter } from 'shared/helpers/mitt';
-
 describe('#mutations', () => {
  describe('#EMPTY_ALL_CONVERSATION', () => {
    it('empty conversations', () => {
@@ -140,7 +130,7 @@ describe('#mutations', () => {
          timestamp: 1602256198,
        },
      ]);
-      expect(emitter.emit).not.toHaveBeenCalled();
+      expect(global.bus.$emit).not.toHaveBeenCalled();
    });

    it('add message to the conversation and emit scrollToMessage if it does not exist in the store', () => {
@@ -168,7 +158,7 @@ describe('#mutations', () => {
          timestamp: 1602256198,
        },
      ]);
-      expect(emitter.emit).toHaveBeenCalledWith('SCROLL_TO_MESSAGE');
+      expect(global.bus.$emit).toHaveBeenCalledWith('SCROLL_TO_MESSAGE');
    });

    it('update message if it exist in the store', () => {
@@ -205,7 +195,7 @@ describe('#mutations', () => {
          ],
        },
      ]);
-      expect(emitter.emit).not.toHaveBeenCalled();
+      expect(global.bus.$emit).not.toHaveBeenCalled();
    });
  });

@@ -307,17 +297,9 @@ describe('#mutations', () => {
      expect(state.allConversations).toEqual(data);
    });

-    it('set all conversation in reconnect if selected chat id and conversation id is the same then do not update messages, attachments, dataFetched, allMessagesLoaded', () => {
+    it('set all conversation in reconnect if selected chat id and conversation id is the same then do not update messages', () => {
      const state = {
-        allConversations: [
-          {
-            id: 1,
-            messages: [{ id: 1, content: 'test' }],
-            attachments: [{ id: 1, name: 'test1.png' }],
-            dataFetched: true,
-            allMessagesLoaded: true,
-          },
-        ],
+        allConversations: [{ id: 1, messages: [{ id: 1, content: 'test' }] }],
        selectedChatId: 1,
      };
      const data = [
@@ -325,20 +307,10 @@ describe('#mutations', () => {
          id: 1,
          name: 'test',
          messages: [{ id: 1, content: 'updated message' }],
-          attachments: [{ id: 1, name: 'test.png' }],
-          dataFetched: true,
-          allMessagesLoaded: true,
        },
      ];
      const expected = [
-        {
-          id: 1,
-          name: 'test',
-          messages: [{ id: 1, content: 'test' }],
-          attachments: [{ id: 1, name: 'test1.png' }],
-          dataFetched: true,
-          allMessagesLoaded: true,
-        },
+        { id: 1, name: 'test', messages: [{ id: 1, content: 'test' }] },
      ];
      mutations[types.SET_ALL_CONVERSATION](state, data);
      expect(state.allConversations).toEqual(expected);
@@ -9,7 +9,6 @@ import {
 } from '../../helper/scriptHelpers';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
-import { emitter } from 'shared/helpers/mitt';

 Cookies.defaults = { sameSite: 'Lax' };

@@ -19,8 +18,8 @@ export const setLoadingStatus = (state, status) => {
 };

 export const setUser = user => {
-  emitter.emit(CHATWOOT_SET_USER, { user });
-  emitter.emit(ANALYTICS_IDENTITY, { user });
+  window.bus.$emit(CHATWOOT_SET_USER, { user });
+  window.bus.$emit(ANALYTICS_IDENTITY, { user });
 };

 export const getHeaderExpiry = response =>
@@ -71,8 +70,8 @@ export const deleteIndexedDBOnLogout = async () => {
 };

 export const clearCookiesOnLogout = () => {
-  emitter.emit(CHATWOOT_RESET);
-  emitter.emit(ANALYTICS_RESET);
+  window.bus.$emit(CHATWOOT_RESET);
+  window.bus.$emit(ANALYTICS_RESET);
  clearBrowserSessionCookies();
  clearLocalStorageOnLogout();
  const globalConfig = window.globalConfig || {};
@@ -15,8 +15,6 @@ import WootUiKit from '../dashboard/components';
 import App from '../dashboard/App';
 import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
-import { emitter } from '../shared/helpers/mitt';
-
 import commonHelpers, { isJSONValid } from '../dashboard/helper/commons';
 import router, { initalizeRouter } from '../dashboard/routes';
 import store from '../dashboard/store';
@@ -95,8 +93,7 @@ commonHelpers();

 window.WootConstants = constants;
 window.axios = createAxios(axios);
-Vue.prototype.$emitter = emitter;
-
+window.bus = new Vue();
 initializeChatwootEvents();
 initializeAnalyticsEvents();
 initalizeRouter();
@@ -62,7 +62,6 @@ const runSDK = ({ baseUrl, websiteToken }) => {
    type: getBubbleView(chatwootSettings.type),
    launcherTitle: chatwootSettings.launcherTitle || '',
    showPopoutButton: chatwootSettings.showPopoutButton || false,
-    showUnreadMessagesDialog: chatwootSettings.showUnreadMessagesDialog ?? true,
    widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard',
    resetTriggered: false,
    darkMode: getDarkMode(chatwootSettings.darkMode),
@@ -4,7 +4,6 @@ import VueI18n from 'vue-i18n';
 import App from '../survey/App.vue';
 import i18n from '../survey/i18n';
 import store from '../survey/store';
-import { emitter } from 'shared/helpers/mitt';

 Vue.use(VueI18n);
 Vue.use(Vuelidate);
@@ -15,7 +14,7 @@ const i18nConfig = new VueI18n({
 });

 // Event Bus
-Vue.prototype.$emitter = emitter;
+window.bus = new Vue();

 Vue.config.productionTip = false;

@@ -14,7 +14,6 @@ import App from '../v3/App.vue';
 import router, { initalizeRouter } from '../v3/views/index';
 import store from '../v3/store';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
-import { emitter } from '../shared/helpers/mitt';

 Vue.config.env = process.env;

@@ -46,11 +45,11 @@ Vue.use(VueRouter);
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(AnalyticsPlugin);
-Vue.prototype.$emitter = emitter;
 Vue.component('fluent-icon', FluentIcon);

 const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });

+window.bus = new Vue();
 initializeChatwootEvents();
 initializeAnalyticsEvents();
 initalizeRouter();
@@ -13,7 +13,7 @@ import {
 } from 'shared/helpers/Validators';
 import router from '../widget/router';
 import { directive as onClickaway } from 'vue-clickaway';
-import { emitter } from 'shared/helpers/mitt';
+
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
 const PhoneInput = () => import('../widget/components/Form/PhoneInput');

@@ -46,7 +46,7 @@ Vue.use(VueFormulate, {
  },
 });
 // Event Bus
-Vue.prototype.$emitter = emitter;
+window.bus = new Vue();

 Vue.config.productionTip = false;

@@ -160,7 +160,6 @@ export const IFrameHelper = {
        showPopoutButton: window.$chatwoot.showPopoutButton,
        widgetStyle: window.$chatwoot.widgetStyle,
        darkMode: window.$chatwoot.darkMode,
-        showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog,
        campaignsSnoozedTill,
      });
      IFrameHelper.onLoad({
@@ -199,7 +199,6 @@
  "video-add-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-1.063c.154-.478.255-.98.294-1.5h.769a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6h-8.5A1.75 1.75 0 0 0 3.5 7.75v3.982A6.517 6.517 0 0 0 2 12.81V7.75A3.25 3.25 0 0 1 5.25 4.5h8.5Zm6.75 3.073L17 9.674v4.651l3.5 2.1V7.573ZM12 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 1 1 1 0V17h2.497a.5.5 0 0 1 0 1H7Z",
  "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
  "wifi-off-outline": "m12.858 14.273 7.434 7.434a1 1 0 0 0 1.414-1.414l-17.999-18a1 1 0 1 0-1.414 1.414L5.39 6.804c-.643.429-1.254.927-1.821 1.495a12.382 12.382 0 0 0-1.39 1.683 1 1 0 0 0 1.644 1.14c.363-.524.761-1.01 1.16-1.41a9.94 9.94 0 0 1 1.855-1.46L7.99 9.405a8.14 8.14 0 0 0-3.203 3.377 1 1 0 0 0 1.784.903 6.08 6.08 0 0 1 1.133-1.563 6.116 6.116 0 0 1 1.77-1.234l1.407 1.407A5.208 5.208 0 0 0 8.336 13.7a5.25 5.25 0 0 0-1.09 1.612 1 1 0 0 0 1.832.802c.167-.381.394-.722.672-1a3.23 3.23 0 0 1 3.108-.841Zm-1.332-5.93 2.228 2.229a6.1 6.1 0 0 1 2.616 1.55c.444.444.837.995 1.137 1.582a1 1 0 1 0 1.78-.911 8.353 8.353 0 0 0-1.503-2.085 8.108 8.108 0 0 0-6.258-2.365ZM8.51 5.327l1.651 1.651a9.904 9.904 0 0 1 10.016 4.148 1 1 0 1 0 1.646-1.136A11.912 11.912 0 0 0 8.51 5.327Zm4.552 11.114a1.501 1.501 0 1 1-2.123 2.123 1.501 1.501 0 0 1 2.123-2.123Z",
-  "wifi-outline": "M17.745 10.75a8.292 8.292 0 0 1 1.492 2.07a.75.75 0 1 1-1.336.683a6.797 6.797 0 0 0-1.217-1.692A6.562 6.562 0 0 0 6.19 13.484a.75.75 0 1 1-1.338-.677a8.062 8.062 0 0 1 12.893-2.057Zm-2.102 3.07c.448.447.816.997 1.072 1.582a.75.75 0 1 1-1.374.602a3.719 3.719 0 0 0-.759-1.124a3.592 3.592 0 0 0-5.08 0c-.31.31-.562.689-.747 1.11a.75.75 0 1 1-1.374-.6a5.11 5.11 0 0 1 1.061-1.57a5.092 5.092 0 0 1 7.201 0Zm4.805-5.541c.51.509.99 1.09 1.408 1.697a.75.75 0 1 1-1.234.852a10.822 10.822 0 0 0-1.235-1.489c-4.08-4.08-10.695-4.08-14.775 0c-.422.422-.84.934-1.222 1.484a.75.75 0 0 1-1.232-.855c.43-.62.904-1.2 1.394-1.69c4.665-4.665 12.23-4.665 16.896 0Zm-7.387 8.16a1.5 1.5 0 1 1-2.122 2.122a1.5 1.5 0 0 1 2.122-2.122Z",
  "whatsapp-outline": "M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01zm-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.264 8.264 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.183 8.183 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07c0 1.22.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28z",
  "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
  "table-switch-outline": [
@@ -8,8 +8,6 @@ export const BUS_EVENTS = {
  TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
  ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
-  WEBSOCKET_RECONNECT: 'WEBSOCKET_RECONNECT',
-  WEBSOCKET_RECONNECT_COMPLETED: 'WEBSOCKET_RECONNECT_COMPLETED',
  TOGGLE_REPLY_TO_MESSAGE: 'TOGGLE_REPLY_TO_MESSAGE',
  SHOW_TOAST: 'newToastMessage',
  NEW_CONVERSATION_MODAL: 'newConversationModal',
@@ -1,4 +1,5 @@
 import { createConsumer } from '@rails/actioncable';
+import { BUS_EVENTS } from 'shared/constants/busEvents';

 const PRESENCE_INTERVAL = 20000;
 const RECONNECT_INTERVAL = 1000;
@@ -26,6 +27,8 @@ class BaseActionCableConnector {
          BaseActionCableConnector.isDisconnected = true;
          this.onDisconnected();
          this.initReconnectTimer();
+          // TODO: Remove this after completing the conversation list refetching
+          window.bus.$emit(BUS_EVENTS.WEBSOCKET_DISCONNECT);
        },
      }
    );
@@ -1,3 +0,0 @@
-import mitt from 'mitt';
-const emitter = mitt();
-export { emitter };
@@ -1,25 +0,0 @@
-import { emitter } from '../mitt';
-
-describe('emitter', () => {
-  it('should emit and listen to events correctly', () => {
-    const mockCallback = jest.fn();
-
-    // Subscribe to an event
-    emitter.on('event', mockCallback);
-
-    // Emit the event
-    emitter.emit('event', 'data');
-
-    // Expect the callback to be called with the correct data
-    expect(mockCallback).toHaveBeenCalledWith('data');
-
-    // Unsubscribe from the event
-    emitter.off('event', mockCallback);
-
-    // Emit the event again
-    emitter.emit('event', 'data');
-
-    // Expect the callback not to be called again
-    expect(mockCallback).toHaveBeenCalledTimes(1);
-  });
-});
@@ -1,9 +1,7 @@
-import { emitter } from 'shared/helpers/mitt';
-
 export default {
  methods: {
    showAlert(message, action) {
-      emitter.emit('newToastMessage', message, action);
+      bus.$emit('newToastMessage', message, action);
    },
  },
 };
@@ -47,9 +47,6 @@ export default {
    isAMicrosoftInbox() {
      return this.isAnEmailChannel && this.inbox.provider === 'microsoft';
    },
-    isAGoogleInbox() {
-      return this.isAnEmailChannel && this.inbox.provider === 'google';
-    },
    isAPIInbox() {
      return this.channelType === INBOX_TYPES.API;
    },
@@ -33,10 +33,10 @@ export default {
  },

  mounted() {
-    this.$emitter.on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+    bus.$on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
  },
  beforeDestroy() {
-    this.$emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+    bus.$off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
  },
  methods: {
    onNewToastMessage(message, action) {
@@ -53,14 +53,12 @@ import FormInput from '../../../components/Form/Input.vue';
 import SubmitButton from '../../../components/Button/SubmitButton.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    FormInput,
    SubmitButton,
  },
-  mixins: [alertMixin],
  props: {
    resetPasswordToken: { type: String, default: '' },
    redirectUrl: { type: String, default: '' },
@@ -107,10 +105,10 @@ export default {
    },
  },
  methods: {
-    showAlertMessage(message) {
+    showAlert(message) {
      // Reset loading, current selected agent
      this.newPasswordAPI.showLoading = false;
-      this.showAlert(message);
+      bus.$emit('newToastMessage', message);
    },
    submitForm() {
      this.newPasswordAPI.showLoading = true;
@@ -124,7 +122,7 @@ export default {
          window.location = DEFAULT_REDIRECT_URL;
        })
        .catch(error => {
-          this.showAlertMessage(
+          this.showAlert(
            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
          );
        });
@@ -1,18 +1,18 @@
 <template>
  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
  >
    <form
-      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
      @submit.prevent="submit"
    >
      <h1
-        class="mb-1 text-2xl font-medium tracking-tight text-left text-slate-900 dark:text-white"
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
      >
        {{ $t('RESET_PASSWORD.TITLE') }}
      </h1>
      <p
-        class="mb-4 text-sm font-normal leading-6 tracking-normal text-slate-600 dark:text-woot-50"
+        class="text-sm text-slate-600 dark:text-woot-50 tracking-normal font-normal leading-6 mb-4"
      >
        {{
          useInstallationName(
@@ -36,7 +36,7 @@
          :loading="resetPassword.showLoading"
        />
      </div>
-      <p class="mt-4 -mb-1 text-sm text-slate-600 dark:text-woot-50">
+      <p class="text-sm text-slate-600 dark:text-woot-50 mt-4 -mb-1">
        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
        <router-link to="/auth/login" class="text-link">
          {{ $t('COMMON.CLICK_HERE') }}.
@@ -53,11 +53,10 @@ import { mapGetters } from 'vuex';
 import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
 import SubmitButton from '../../../../components/Button/SubmitButton.vue';
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: { FormInput, SubmitButton },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
  data() {
    return {
      credentials: { email: '' },
@@ -81,10 +80,10 @@ export default {
    },
  },
  methods: {
-    showAlertMessage(message) {
+    showAlert(message) {
      // Reset loading, current selected agent
      this.resetPassword.showLoading = false;
-      this.showAlert(message);
+      bus.$emit('newToastMessage', message);
    },
    submit() {
      this.resetPassword.showLoading = true;
@@ -94,14 +93,14 @@ export default {
          if (res.data && res.data.message) {
            successMessage = res.data.message;
          }
-          this.showAlertMessage(successMessage);
+          this.showAlert(successMessage);
        })
        .catch(error => {
          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
          if (error?.response?.data?.message) {
            errorMessage = error.response.data.message;
          }
-          this.showAlertMessage(errorMessage);
+          this.showAlert(errorMessage);
        });
    },
  },
@@ -104,7 +104,6 @@ const ERROR_MESSAGES = {
  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
 };
-import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
@@ -113,7 +112,7 @@ export default {
    Spinner,
    SubmitButton,
  },
-  mixins: [globalConfigMixin, alertMixin],
+  mixins: [globalConfigMixin],
  props: {
    ssoAuthToken: { type: String, default: '' },
    ssoAccountId: { type: String, default: '' },
@@ -187,15 +186,15 @@ export default {
        setTimeout(callback, 0);
      }
    },
-    showAlertMessage(message) {
+    showAlert(message) {
      // Reset loading, current selected agent
      this.loginApi.showLoading = false;
      this.loginApi.message = message;
-      this.showAlert(this.loginApi.message);
+      bus.$emit('newToastMessage', this.loginApi.message);
    },
    submitLogin() {
      if (this.$v.credentials.email.$invalid && !this.email) {
-        this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
+        this.showAlert(this.$t('LOGIN.EMAIL.ERROR'));
        return;
      }

@@ -214,7 +213,7 @@ export default {

      login(credentials)
        .then(() => {
-          this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
+          this.showAlert(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
        })
        .catch(response => {
          // Reset URL Params if the authentication is invalid
@@ -222,9 +221,7 @@ export default {
            window.location = '/app/login';
          }
          this.loginApi.hasErrored = true;
-          this.showAlertMessage(
-            response?.message || this.$t('LOGIN.API.UNAUTH')
-          );
+          this.showAlert(response?.message || this.$t('LOGIN.API.UNAUTH'));
        });
    },
  },
@@ -43,7 +43,6 @@ import {
 } from './constants/widgetBusEvents';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { SDK_SET_BUBBLE_VISIBILITY } from '../shared/constants/sharedFrameEvents';
-import { emitter } from 'shared/helpers/mitt';

 export default {
  name: 'App',
@@ -71,7 +70,6 @@ export default {
      messageCount: 'conversation/getMessageCount',
      unreadMessageCount: 'conversation/getUnreadMessageCount',
      isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
-      showUnreadMessagesDialog: 'appConfig/getShowUnreadMessagesDialog',
    }),
    isIFrame() {
      return IFrameHelper.isIFrame();
@@ -159,36 +157,34 @@ export default {
      }
    },
    registerUnreadEvents() {
-      emitter.on(ON_AGENT_MESSAGE_RECEIVED, () => {
+      bus.$on(ON_AGENT_MESSAGE_RECEIVED, () => {
        const { name: routeName } = this.$route;
        if ((this.isWidgetOpen || !this.isIFrame) && routeName === 'messages') {
          this.$store.dispatch('conversation/setUserLastSeen');
        }
        this.setUnreadView();
      });
-      emitter.on(ON_UNREAD_MESSAGE_CLICK, () => {
+      bus.$on(ON_UNREAD_MESSAGE_CLICK, () => {
        this.replaceRoute('messages').then(() => this.unsetUnreadView());
      });
    },
    registerCampaignEvents() {
-      emitter.on(ON_CAMPAIGN_MESSAGE_CLICK, () => {
+      bus.$on(ON_CAMPAIGN_MESSAGE_CLICK, () => {
        if (this.shouldShowPreChatForm) {
          this.replaceRoute('prechat-form');
        } else {
          this.replaceRoute('messages');
-          emitter.emit('execute-campaign', {
-            campaignId: this.activeCampaign.id,
-          });
+          bus.$emit('execute-campaign', { campaignId: this.activeCampaign.id });
        }
        this.unsetUnreadView();
      });
-      emitter.on('execute-campaign', campaignDetails => {
+      bus.$on('execute-campaign', campaignDetails => {
        const { customAttributes, campaignId } = campaignDetails;
        const { websiteToken } = window.chatwootWebChannel;
        this.executeCampaign({ campaignId, websiteToken, customAttributes });
        this.replaceRoute('messages');
      });
-      emitter.on('snooze-campaigns', () => {
+      bus.$on('snooze-campaigns', () => {
        const expireBy = addHours(new Date(), 1);
        this.campaignsSnoozedTill = Number(expireBy);
      });
@@ -210,13 +206,8 @@ export default {
    },
    setUnreadView() {
      const { unreadMessageCount } = this;
-      if (!this.showUnreadMessagesDialog) {
-        this.handleUnreadNotificationDot();
-      } else if (
-        this.isIFrame &&
-        unreadMessageCount > 0 &&
-        !this.isWidgetOpen
-      ) {
+
+      if (this.isIFrame && unreadMessageCount > 0 && !this.isWidgetOpen) {
        this.replaceRoute('unread-messages').then(() => {
          this.setIframeHeight(true);
          IFrameHelper.sendMessage({ event: 'setUnreadMode' });
@@ -93,7 +93,6 @@ import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { emitter } from 'shared/helpers/mitt';

 export default {
  name: 'AgentMessage',
@@ -225,7 +224,7 @@ export default {
      this.hasImageError = true;
    },
    toggleReply() {
-      emitter.emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
+      bus.$emit(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.message);
    },
  },
 };
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .9.0
 .3.1
@@ -1 +1 @@
 .8.0
 .7.0