Merge branch 'develop' into report-rewrite

.env.example

@@ -23,9 +23,6 @@ FORCE_SSL=false
 ENABLE_ACCOUNT_SIGNUP=false
 
 # Redis config
-# specify the configs via single URL or individual variables
-# ref: https://www.iana.org/assignments/uri-schemes/prov/redis
-# You can also use the following format for the URL: redis://:password@host:port/db_number
 REDIS_URL=redis://redis:6379
 # If you are using docker-compose, set this variable's value to be any string,
 # which will be the password for the redis service running inside the docker-compose
@@ -183,6 +180,8 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Sentry
 # SENTRY_DSN=
 
+## LogRocket
+# LOG_ROCKET_PROJECT_ID=xxxxx/some-project
 
 # MICROSOFT CLARITY
 # MS_CLARITY_TOKEN=xxxxxxxxx
@@ -252,6 +251,9 @@ AZURE_APP_SECRET=
 ## OpenAI key
 # OPENAI_API_KEY=
 
+# Sentiment analysis model file path
+SENTIMENT_FILE_PATH=
+
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed

Gemfile

@@ -71,13 +71,13 @@ gem 'barnes'
 ##--- gems for authentication & authorization ---##
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
-gem 'devise_token_auth', '>= 1.2.3'
+gem 'devise_token_auth'
 # authorization
 gem 'jwt'
 gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.20.1'
-gem 'administrate-field-active_storage', '>= 1.0.2'
+gem 'administrate-field-active_storage', '>= 1.0.1'
 gem 'administrate-field-belongs_to_search', '>= 0.9.0'
 
 ##--- gems for pubsub service ---##
@@ -113,10 +113,10 @@ gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
 gem 'sentry-rails', '>= 5.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.15.0', require: false
+gem 'sentry-sidekiq', '>= 5.14.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.4'
+gem 'sidekiq', '>= 7.2.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
@@ -166,7 +166,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
 gem 'omniauth-google-oauth2', '>= 1.1.2'
-gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
+gem 'omniauth-rails_csrf_protection', '~> 1.0'
 
 ## Gems for reponse bot
 # adds cosine similarity to postgres using vector extension
@@ -175,6 +175,9 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
 
+# Sentiment analysis
+gem 'informers'
+
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -113,7 +113,7 @@ GEM
       kaminari (~> 1.2.2)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
-    administrate-field-active_storage (1.0.2)
+    administrate-field-active_storage (1.0.1)
       administrate (>= 0.2.2)
       rails (>= 7.0)
     administrate-field-belongs_to_search (0.9.0)
@@ -148,10 +148,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
     bcrypt (3.1.20)
-    bigdecimal (3.1.7)
     bindex (0.8.1)
+    blingfire (0.1.8)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     brakeman (5.4.1)
@@ -200,10 +200,10 @@ GEM
       railties (>= 4.1.0)
       responders
       warden (~> 1.2.3)
-    devise_token_auth (1.2.3)
+    devise_token_auth (1.2.1)
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
-      rails (>= 4.2.0, < 7.2)
+      rails (>= 4.2.0, < 7.1)
     diff-lcs (1.5.0)
     digest-crc (0.6.4)
       rake (>= 12.0.0, < 14.0.0)
@@ -316,15 +316,15 @@ GEM
     google-cloud-translate-v3 (0.6.0)
       gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.3)
-    google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.3-x86_64-linux)
+    google-protobuf (3.25.2)
+    google-protobuf (3.25.2-arm64-darwin)
+    google-protobuf (3.25.2-x86_64-darwin)
+    google-protobuf (3.25.2-x86_64-linux)
     googleapis-common-protos (1.4.0)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
       grpc (~> 1.27)
-    googleapis-common-protos-types (1.14.0)
+    googleapis-common-protos-types (1.11.0)
       google-protobuf (~> 3.18)
     googleauth (1.5.2)
       faraday (>= 0.17.3, < 3.a)
@@ -335,17 +335,14 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
+    grpc (1.54.3)
+      google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
+    grpc (1.54.3-x86_64-darwin)
+      google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-x86_64-linux)
-      google-protobuf (~> 3.25)
+    grpc (1.54.3-x86_64-linux)
+      google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
     hairtrigger (1.0.0)
@@ -369,11 +366,15 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    informers (0.2.0)
+      blingfire (>= 0.1.7)
+      numo-narray
+      onnxruntime (>= 0.5.1)
     io-console (0.6.0)
     irb (1.7.2)
       reline (>= 0.3.6)
@@ -448,13 +449,13 @@ GEM
       net-imap
       net-pop
       net-smtp
-    marcel (1.0.4)
+    marcel (1.0.2)
     maxminddb (0.1.22)
     memoist (0.16.2)
     meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    method_source (1.0.0)
     mime-types (3.4.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
@@ -474,7 +475,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.11)
+    net-imap (0.4.9)
       date
       net-protocol
     net-pop (0.1.2)
@@ -489,16 +490,17 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.3)
-    nokogiri (1.16.5)
+    nio4r (2.7.0)
+    nokogiri (1.16.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.5-arm64-darwin)
+    nokogiri (1.16.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-darwin)
+    nokogiri (1.16.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.5-x86_64-linux)
+    nokogiri (1.16.4-x86_64-linux)
       racc (~> 1.4)
+    numo-narray (0.9.2.1)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
       snaky_hash (~> 2.0)
@@ -524,9 +526,17 @@ GEM
     omniauth-oauth2 (1.8.0)
       oauth2 (>= 1.4, < 3)
       omniauth (~> 2.0)
-    omniauth-rails_csrf_protection (1.0.2)
+    omniauth-rails_csrf_protection (1.0.1)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
+    onnxruntime (0.7.6)
+      ffi
+    onnxruntime (0.7.6-arm64-darwin)
+      ffi
+    onnxruntime (0.7.6-x86_64-darwin)
+      ffi
+    onnxruntime (0.7.6-x86_64-linux)
+      ffi
     openssl (3.1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
@@ -604,7 +614,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.22.1)
+    redis-client (0.19.1)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -703,19 +713,18 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.17.3)
+    sentry-rails (5.14.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.17.3)
-    sentry-ruby (5.17.3)
-      bigdecimal
+      sentry-ruby (~> 5.14.0)
+    sentry-ruby (5.14.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.17.3)
-      sentry-ruby (~> 5.17.3)
+    sentry-sidekiq (5.14.0)
+      sentry-ruby (~> 5.14.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.4)
+    sidekiq (7.2.1)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -819,7 +828,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.14)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   arm64-darwin-20
@@ -837,7 +846,7 @@ DEPENDENCIES
   activerecord-import
   acts-as-taggable-on
   administrate (>= 0.20.1)
-  administrate-field-active_storage (>= 1.0.2)
+  administrate-field-active_storage (>= 1.0.1)
   administrate-field-belongs_to_search (>= 0.9.0)
   annotate
   attr_extras
@@ -860,7 +869,7 @@ DEPENDENCIES
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
-  devise_token_auth (>= 1.2.3)
+  devise_token_auth
   dotenv-rails
   down
   elastic-apm
@@ -883,6 +892,7 @@ DEPENDENCIES
   hashie
   html2text!
   image_processing
+  informers
   jbuilder
   json_refs
   json_schemer
@@ -904,7 +914,7 @@ DEPENDENCIES
   omniauth (>= 2.1.2)
   omniauth-google-oauth2 (>= 1.1.2)
   omniauth-oauth2
-  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
+  omniauth-rails_csrf_protection (~> 1.0)
   pg
   pg_search
   pgvector
@@ -933,9 +943,9 @@ DEPENDENCIES
   seed_dump
   sentry-rails (>= 5.14.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.15.0)
+  sentry-sidekiq (>= 5.14.0)
   shoulda-matchers
-  sidekiq (>= 7.2.4)
+  sidekiq (>= 7.2.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)

app.json

@@ -55,7 +55,7 @@
       "plan": "heroku-redis:mini"
     },
     {
-      "plan": "heroku-postgresql:essential-0"
+      "plan": "heroku-postgresql:mini"
     }
   ],
   "stack": "heroku-20",

app/builders/contact_inbox_with_contact_builder.rb

@@ -19,9 +19,9 @@ class ContactInboxWithContactBuilder
 
     ActiveRecord::Base.transaction(requires_new: true) do
       build_contact_with_contact_inbox
+      update_contact_avatar(@contact) unless @contact.avatar.attached?
+      @contact_inbox
     end
-    update_contact_avatar(@contact) unless @contact.avatar.attached?
-    @contact_inbox
   end
 
   private

app/builders/v2/reports/agent_summary_builder.rb

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

app/builders/v2/reports/inbox_summary_builder.rb

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

app/builders/v2/reports/team_summary_builder.rb

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

app/controllers/api/v1/accounts/bulk_actions_controller.rb

@@ -21,6 +21,6 @@ class Api::V1::Accounts::BulkActionsController < Api::V1::Accounts::BaseControll
   end
 
   def permitted_params
-    params.permit(:type, :snoozed_until, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
+    params.permit(:type, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
   end
 end

app/controllers/api/v1/accounts/contacts_controller.rb

@@ -46,8 +46,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
 
   def export
     column_names = params['column_names']
-    filter_params = { :payload => params.permit!['payload'], :label => params.permit!['label'] }
-    Account::ContactsExportJob.perform_later(Current.account.id, Current.user.id, column_names, filter_params)
+    Account::ContactsExportJob.perform_later(Current.account.id, column_names, Current.user.email)
     head :ok, message: I18n.t('errors.contacts.export.success')
   end
 
@@ -62,7 +61,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def show; end
 
   def filter
-    result = ::Contacts::FilterService.new(Current.account, Current.user, params.permit!).perform
+    result = ::Contacts::FilterService.new(params.permit!, current_user).perform
     contacts = result[:contacts]
     @contacts_count = result[:count]
     @contacts = fetch_contacts(contacts)

app/controllers/api/v1/accounts/conversations/draft_messages_controller.rb

@@ -1,28 +0,0 @@
-class Api::V1::Accounts::Conversations::DraftMessagesController < Api::V1::Accounts::Conversations::BaseController
-  def show
-    render json: { has_draft: false } and return unless Redis::Alfred.exists?(draft_redis_key)
-
-    draft_message = Redis::Alfred.get(draft_redis_key)
-    render json: { has_draft: true, message: draft_message }
-  end
-
-  def update
-    Redis::Alfred.set(draft_redis_key, draft_message_params)
-    head :ok
-  end
-
-  def destroy
-    Redis::Alfred.delete(draft_redis_key)
-    head :ok
-  end
-
-  private
-
-  def draft_redis_key
-    format(Redis::Alfred::CONVERSATION_DRAFT_MESSAGE, id: @conversation.id)
-  end
-
-  def draft_message_params
-    params.dig(:draft_message, :message) || ''
-  end
-end

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

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

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

@@ -131,8 +131,4 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     summary[:previous] = V2::ReportBuilder.new(Current.account, previous_summary_params).summary
     summary
   end
-
-  def conversation_metrics
-    V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
-  end
 end

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

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

app/controllers/public/api/v1/portals_controller.rb

@@ -6,12 +6,6 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
 
   def show; end
 
-  def sitemap
-    @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root
-    # if help_center_url does not contain a protocol, prepend it with https
-    @help_center_url = "https://#{@help_center_url}" unless @help_center_url.include?('://')
-  end
-
   private
 
   def portal

app/dispatchers/async_dispatcher.rb

@@ -10,15 +10,14 @@ class AsyncDispatcher < BaseDispatcher
 
   def listeners
     [
-      AutomationRuleListener.instance,
       CampaignListener.instance,
       CsatSurveyListener.instance,
       HookListener.instance,
       InstallationWebhookListener.instance,
       NotificationListener.instance,
-      ParticipationListener.instance,
       ReportingEventListener.instance,
-      WebhookListener.instance
+      WebhookListener.instance,
+      AutomationRuleListener.instance
     ]
   end
 end

app/helpers/api/v2/accounts/heatmap_helper.rb

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

app/helpers/api/v2/accounts/reports_helper.rb

@@ -1,7 +1,7 @@
 module Api::V2::Accounts::ReportsHelper
   def generate_agents_report
     Current.account.users.map do |agent|
-      agent_report = report_builder({ type: :agent, id: agent.id }).summary
+      agent_report = generate_report({ type: :agent, id: agent.id })
       [agent.name] + generate_readable_report_metrics(agent_report)
     end
   end
@@ -15,7 +15,7 @@ module Api::V2::Accounts::ReportsHelper
 
   def generate_teams_report
     Current.account.teams.map do |team|
-      team_report = report_builder({ type: :team, id: team.id }).summary
+      team_report = generate_report({ type: :team, id: team.id })
       [team.name] + generate_readable_report_metrics(team_report)
     end
   end
@@ -27,7 +27,7 @@ module Api::V2::Accounts::ReportsHelper
     end
   end
 
-  def report_builder(report_params)
+  def generate_report(report_params)
     V2::ReportBuilder.new(
       Current.account,
       report_params.merge(
@@ -37,11 +37,7 @@ module Api::V2::Accounts::ReportsHelper
           business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
         }
       )
-    )
-  end
-
-  def generate_report(report_params)
-    report_builder(report_params).short_summary
+    ).short_summary
   end
 
   private
@@ -50,9 +46,7 @@ module Api::V2::Accounts::ReportsHelper
     [
       report_metric[:conversations_count],
       Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format,
-      Reports::TimeFormatPresenter.new(report_metric[:reply_time]).format,
-      report_metric[:resolutions_count]
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format
     ]
   end
 end

app/javascript/dashboard/api/contacts.js

@@ -77,8 +77,8 @@ class ContactAPI extends ApiClient {
     return axios.delete(`${this.url}/${contactId}/avatar`);
   }
 
-  exportContacts(queryPayload) {
-    return axios.post(`${this.url}/export`, queryPayload);
+  exportContacts() {
+    return axios.get(`${this.url}/export`);
   }
 }
 

app/javascript/dashboard/api/liveReports.js

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

app/javascript/dashboard/api/reports.js

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

app/javascript/dashboard/api/slaReports.js

@@ -37,7 +37,6 @@ class SLAReportsAPI extends ApiClient {
     inbox_id,
     team_id,
     sla_policy_id,
-    label_list,
   } = {}) {
     return axios.get(`${this.url}/download`, {
       params: {
@@ -46,7 +45,6 @@ class SLAReportsAPI extends ApiClient {
         assigned_agent_id,
         inbox_id,
         team_id,
-        label_list,
         sla_policy_id,
       },
     });

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

@@ -83,7 +83,6 @@ describe('#SLAReports API', () => {
         inbox_id: 1,
         team_id: 1,
         sla_policy_id: 1,
-        label_list: ['label1'],
       });
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/applied_slas/download',
@@ -95,7 +94,6 @@ describe('#SLAReports API', () => {
             inbox_id: 1,
             team_id: 1,
             sla_policy_id: 1,
-            label_list: ['label1'],
           },
         }
       );

app/javascript/dashboard/api/summaryReports.js

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

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

@@ -40,347 +40,3 @@
 .hide {
   @apply hidden;
 }
-
-@layer base {
-  // scss-lint:disable PropertySortOrder
-  :root {
-    --color-amber-25: 254 253 251;
-    --color-amber-50: 255 249 237;
-    --color-amber-75: 255 243 208;
-    --color-amber-100: 255 236 183;
-    --color-amber-200: 255 224 161;
-    --color-amber-300: 245 208 140;
-    --color-amber-400: 228 187 120;
-    --color-amber-500: 214 163 92;
-    --color-amber-600: 214 163 92;
-    --color-amber-700: 255 186 26;
-    --color-amber-800: 145 89 48;
-    --color-amber-900: 79 52 34;
-
-    --color-ash-100: 235 235 239;
-    --color-ash-200: 228 228 233;
-    --color-ash-25: 252 252 253;
-    --color-ash-300: 221 221 227;
-    --color-ash-400: 211 212 219;
-    --color-ash-50: 249 249 251;
-    --color-ash-500: 185 187 198;
-    --color-ash-600: 139 141 152;
-    --color-ash-700: 126 128 138;
-    --color-ash-75: 242 242 245;
-    --color-ash-800: 96 100 108;
-    --color-ash-900: 28 32 36;
-
-    --color-primary-25: 251 253 255;
-    --color-primary-50: 245 249 255;
-    --color-primary-75: 233 243 255;
-    --color-primary-100: 218 236 255;
-    --color-primary-200: 201 226 255;
-    --color-primary-300: 181 213 255;
-    --color-primary-400: 155 195 252;
-    --color-primary-500: 117 171 247;
-    --color-primary-600: 39 129 246;
-    --color-primary-700: 16 115 233;
-    --color-primary-800: 8 109 224;
-    --color-primary-900: 11 50 101;
-
-    --color-ruby-100: 255 220 225;
-    --color-ruby-200: 255 206 214;
-    --color-ruby-25: 255 252 253;
-    --color-ruby-300: 248 191 200;
-    --color-ruby-400: 239 172 184;
-    --color-ruby-50: 255 247 248;
-    --color-ruby-500: 229 146 163;
-    --color-ruby-600: 229 70 102;
-    --color-ruby-700: 220 59 93;
-    --color-ruby-75: 254 234 237;
-    --color-ruby-800: 202 36 77;
-    --color-ruby-900: 100 23 43;
-
-    --color-teal-100: 224 248 243;
-    --color-teal-200: 204 243 234;
-    --color-teal-25: 250 254 253;
-    --color-teal-300: 184 234 224;
-    --color-teal-400: 161 222 210;
-    --color-teal-50: 243 251 249;
-    --color-teal-500: 83 185 171;
-    --color-teal-600: 18 165 148;
-    --color-teal-700: 13 155 138;
-    --color-teal-75: 236 249 255;
-    --color-teal-800: 0 133 115;
-    --color-teal-900: 13 61 56;
-
-    --color-green-25: 251 254 252;
-    --color-green-50: 244 251 246;
-    --color-green-75: 230 246 235;
-    --color-green-100: 214 241 223;
-    --color-green-200: 196 232 209;
-    --color-green-300: 173 221 192;
-    --color-green-400: 142 206 170;
-    --color-green-500: 91 185 139;
-    --color-green-600: 48 164 108;
-    --color-green-700: 43 154 102;
-    --color-green-800: 33 131 88;
-    --color-green-900: 25 59 45;
-
-    --color-mint-25: 249 254 253;
-    --color-mint-50: 242 251 249;
-    --color-mint-75: 221 249 242;
-    --color-mint-100: 200 244 233;
-    --color-mint-200: 179 236 222;
-    --color-mint-300: 156 224 208;
-    --color-mint-400: 126 207 189;
-    --color-mint-500: 76 187 165;
-    --color-mint-600: 134 234 212;
-    --color-mint-700: 125 224 203;
-    --color-mint-800: 2 120 100;
-    --color-mint-900: 22 67 60;
-
-    --color-sky-25: 249 254 255;
-    --color-sky-50: 241 250 253;
-    --color-sky-75: 225 246 253;
-    --color-sky-100: 209 240 250;
-    --color-sky-200: 190 231 245;
-    --color-sky-300: 169 218 237;
-    --color-sky-400: 141 202 227;
-    --color-sky-500: 96 179 215;
-    --color-sky-600: 124 226 254;
-    --color-sky-700: 116 218 248;
-    --color-sky-800: 0 116 158;
-    --color-sky-900: 29 62 86;
-
-    --color-indigo-25: 253 253 254;
-    --color-indigo-50: 247 249 255;
-    --color-indigo-75: 237 242 254;
-    --color-indigo-100: 225 233 255;
-    --color-indigo-200: 210 222 255;
-    --color-indigo-300: 193 208 255;
-    --color-indigo-400: 171 189 249;
-    --color-indigo-500: 141 164 239;
-    --color-indigo-600: 62 99 221;
-    --color-indigo-700: 51 88 212;
-    --color-indigo-800: 58 91 199;
-    --color-indigo-900: 31 45 92;
-
-    --color-iris-25: 253 253 255;
-    --color-iris-50: 248 248 255;
-    --color-iris-75: 240 241 254;
-    --color-iris-100: 230 231 255;
-    --color-iris-200: 218 220 255;
-    --color-iris-300: 203 205 255;
-    --color-iris-400: 184 186 248;
-    --color-iris-500: 155 158 240;
-    --color-iris-600: 91 91 214;
-    --color-iris-700: 81 81 205;
-    --color-iris-800: 87 83 198;
-    --color-iris-900: 39 41 98;
-
-    --color-violet-25: 253 252 254;
-    --color-violet-50: 250 248 255;
-    --color-violet-75: 244 240 254;
-    --color-violet-100: 235 228 255;
-    --color-violet-200: 225 217 255;
-    --color-violet-300: 212 202 254;
-    --color-violet-400: 194 181 245;
-    --color-violet-500: 170 153 236;
-    --color-violet-600: 110 86 207;
-    --color-violet-700: 101 77 196;
-    --color-violet-800: 101 80 185;
-    --color-violet-900: 47 38 95;
-
-    --color-pink-25: 255 252 254;
-    --color-pink-50: 254 247 251;
-    --color-pink-75: 254 233 245;
-    --color-pink-100: 251 220 239;
-    --color-pink-200: 246 206 231;
-    --color-pink-300: 239 191 221;
-    --color-pink-400: 231 172 208;
-    --color-pink-500: 221 147 194;
-    --color-pink-600: 214 64 159;
-    --color-pink-700: 207 56 151;
-    --color-pink-800: 194 41 138;
-    --color-pink-900: 101 18 73;
-
-    --color-orange-25: 254 252 251;
-    --color-orange-50: 255 247 237;
-    --color-orange-75: 255 239 214;
-    --color-orange-100: 255 223 181;
-    --color-orange-200: 255 209 154;
-    --color-orange-300: 255 193 130;
-    --color-orange-400: 245 174 115;
-    --color-orange-500: 236 148 85;
-    --color-orange-600: 247 107 21;
-    --color-orange-700: 239 95 0;
-    --color-orange-800: 204 78 0;
-    --color-orange-900: 88 45 29;
-  }
-  // scss-lint:disable QualifyingElement
-  body.dark {
-    --color-amber-25: 31 19 0;
-    --color-amber-50: 37 24 4;
-    --color-amber-75: 48 32 11;
-    --color-amber-100: 57 39 15;
-    --color-amber-200: 67 46 18;
-    --color-amber-300: 83 57 22;
-    --color-amber-400: 111 77 29;
-    --color-amber-500: 169 118 42;
-    --color-amber-600: 169 118 42;
-    --color-amber-700: 255 203 71;
-    --color-amber-800: 255 204 77;
-    --color-amber-900: 255 231 179;
-
-    --color-ash-100: 46 48 53;
-    --color-ash-200: 53 55 60;
-    --color-ash-25: 24 24 26;
-    --color-ash-300: 60 63 68;
-    --color-ash-400: 70 75 80;
-    --color-ash-50: 27 27 31;
-    --color-ash-500: 90 97 101;
-    --color-ash-600: 105 110 119;
-    --color-ash-700: 120 127 133;
-    --color-ash-75: 39 40 45;
-    --color-ash-800: 173 177 184;
-    --color-ash-900: 237 238 240;
-
-    --color-primary-25: 10 17 28;
-    --color-primary-50: 15 24 38;
-    --color-primary-75: 15 39 72;
-    --color-primary-100: 10 49 99;
-    --color-primary-200: 18 61 117;
-    --color-primary-300: 29 74 134;
-    --color-primary-400: 40 89 156;
-    --color-primary-500: 48 106 186;
-    --color-primary-600: 39 129 246;
-    --color-primary-700: 21 116 231;
-    --color-primary-800: 126 182 255;
-    --color-primary-900: 205 227 255;
-
-    --color-ruby-100: 78 19 37;
-    --color-ruby-200: 94 26 46;
-    --color-ruby-25: 25 17 19;
-    --color-ruby-300: 111 37 57;
-    --color-ruby-400: 136 52 71;
-    --color-ruby-50: 30 21 23;
-    --color-ruby-500: 179 68 90;
-    --color-ruby-600: 229 70 102;
-    --color-ruby-700: 236 90 114;
-    --color-ruby-75: 58 20 30;
-    --color-ruby-800: 255 148 157;
-    --color-ruby-900: 254 210 225;
-
-    --color-teal-100: 2 59 55;
-    --color-teal-200: 8 72 67;
-    --color-teal-25: 13 21 20;
-    --color-teal-300: 28 105 97;
-    --color-teal-400: 28 105 97;
-    --color-teal-50: 17 28 27;
-    --color-teal-500: 32 126 115;
-    --color-teal-600: 41 163 131;
-    --color-teal-700: 14 179 158;
-    --color-teal-75: 13 45 42;
-    --color-teal-800: 11 216 182;
-    --color-teal-900: 173 240 221;
-
-    --color-green-25: 14 21 18;
-    --color-green-50: 18 27 23;
-    --color-green-75: 19 45 33;
-    --color-green-100: 17 59 41;
-    --color-green-200: 23 73 51;
-    --color-green-300: 32 87 62;
-    --color-green-400: 40 104 74;
-    --color-green-500: 47 124 87;
-    --color-green-600: 48 164 108;
-    --color-green-700: 51 176 116;
-    --color-green-800: 61 214 140;
-    --color-green-900: 177 241 203;
-
-    --color-mint-25: 14 21 21;
-    --color-mint-50: 15 27 27;
-    --color-mint-75: 9 44 43;
-    --color-mint-100: 0 58 56;
-    --color-mint-200: 0 71 68;
-    --color-mint-300: 16 86 80;
-    --color-mint-400: 30 104 95;
-    --color-mint-500: 39 127 112;
-    --color-mint-600: 134 234 212;
-    --color-mint-700: 168 245 229;
-    --color-mint-800: 88 213 186;
-    --color-mint-900: 196 245 225;
-
-    --color-sky-25: 14 21 21;
-    --color-sky-50: 15 27 27;
-    --color-sky-75: 9 44 43;
-    --color-sky-100: 0 58 56;
-    --color-sky-200: 0 71 68;
-    --color-sky-300: 16 86 80;
-    --color-sky-400: 30 104 95;
-    --color-sky-500: 39 127 112;
-    --color-sky-600: 134 234 212;
-    --color-sky-700: 168 245 229;
-    --color-sky-800: 88 213 186;
-    --color-sky-900: 196 245 225;
-
-    --color-indigo-25: 17 19 31;
-    --color-indigo-50: 20 23 38;
-    --color-indigo-75: 24 36 73;
-    --color-indigo-100: 29 46 98;
-    --color-indigo-200: 37 57 116;
-    --color-indigo-300: 48 67 132;
-    --color-indigo-400: 58 79 151;
-    --color-indigo-500: 67 93 177;
-    --color-indigo-600: 62 99 221;
-    --color-indigo-700: 84 114 228;
-    --color-indigo-800: 158 177 255;
-    --color-indigo-900: 214 225 255;
-
-    --color-iris-25: 19 19 30;
-    --color-iris-50: 23 22 37;
-    --color-iris-75: 32 34 72;
-    --color-iris-100: 38 42 101;
-    --color-iris-200: 48 51 116;
-    --color-iris-300: 61 62 130;
-    --color-iris-400: 74 74 149;
-    --color-iris-500: 89 88 177;
-    --color-iris-600: 91 91 214;
-    --color-iris-700: 110 106 222;
-    --color-iris-800: 177 169 255;
-    --color-iris-900: 224 223 254;
-
-    --color-violet-25: 20 18 31;
-    --color-violet-50: 27 21 37;
-    --color-violet-75: 41 31 67;
-    --color-violet-100: 51 37 91;
-    --color-violet-200: 60 46 105;
-    --color-violet-300: 71 56 118;
-    --color-violet-400: 86 70 139;
-    --color-violet-500: 105 88 173;
-    --color-violet-600: 110 86 207;
-    --color-violet-700: 125 102 217;
-    --color-violet-800: 186 167 255;
-    --color-violet-900: 226 221 254;
-
-    --color-pink-25: 25 17 23;
-    --color-pink-50: 33 18 29;
-    --color-pink-75: 55 23 47;
-    --color-pink-100: 75 20 61;
-    --color-pink-200: 89 28 71;
-    --color-pink-300: 105 41 85;
-    --color-pink-400: 131 56 105;
-    --color-pink-500: 168 72 133;
-    --color-pink-600: 214 64 159;
-    --color-pink-700: 222 81 168;
-    --color-pink-800: 255 141 204;
-    --color-pink-900: 253 209 234;
-    --color-orange-25: 23 18 14;
-    --color-orange-50: 30 22 15;
-    --color-orange-75: 51 30 11;
-    --color-orange-100: 70 33 0;
-    --color-orange-200: 86 40 0;
-    --color-orange-300: 102 53 12;
-    --color-orange-400: 126 69 29;
-    --color-orange-500: 163 88 41;
-    --color-orange-600: 247 107 21;
-    --color-orange-700: 255 128 31;
-    --color-orange-800: 255 160 87;
-    --color-orange-900: 255 224 194;
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -12,6 +12,7 @@ h6 {
 
 p {
   text-rendering: optimizeLegibility;
+  word-spacing: 0.12em;
 
   @apply mb-2 leading-[1.65] text-sm;
 

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="sm:w-[50%] md:w-1/3 lg:w-1/4 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" />
+    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
     <h3
       class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
     >

app/javascript/dashboard/components/ChatList.vue

@@ -185,7 +185,7 @@ import ConversationBasicFilter from './widgets/conversation/ConversationBasicFil
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
 import timeMixin from '../mixins/time';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
@@ -199,6 +199,11 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
+
+import {
+  hasPressedAltAndJKey,
+  hasPressedAltAndKKey,
+} from 'shared/helpers/KeyboardHelpers';
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
   isOnMentionsView,
@@ -223,7 +228,7 @@ export default {
   mixins: [
     timeMixin,
     conversationMixin,
-    keyboardEventListenerMixins,
+    eventListenerMixins,
     alertMixin,
     filterMixin,
     uiSettingsMixin,
@@ -288,6 +293,7 @@ export default {
       foldersQuery: {},
       showAddFoldersModal: false,
       showDeleteFoldersModal: false,
+      selectedConversations: [],
       selectedInboxes: [],
       isContextMenuOpen: false,
       appliedFilter: [],
@@ -328,7 +334,6 @@ export default {
       inboxesList: 'inboxes/getInboxes',
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
-      selectedConversations: 'bulkActions/getSelectedConversationIds',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -686,40 +691,30 @@ export default {
         lastConversationIndex,
       };
     },
-    handlePreviousConversation() {
-      const { allConversations, activeConversationIndex } =
-        this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
+    handleKeyEvents(e) {
+      if (hasPressedAltAndJKey(e)) {
+        const { allConversations, activeConversationIndex } =
+          this.getKeyboardListenerParams();
+        if (activeConversationIndex === -1) {
+          allConversations[0].click();
+        }
+        if (activeConversationIndex >= 1) {
+          allConversations[activeConversationIndex - 1].click();
+        }
       }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
+      if (hasPressedAltAndKKey(e)) {
+        const {
+          allConversations,
+          activeConversationIndex,
+          lastConversationIndex,
+        } = this.getKeyboardListenerParams();
+        if (activeConversationIndex === -1) {
+          allConversations[lastConversationIndex].click();
+        } else if (activeConversationIndex < lastConversationIndex) {
+          allConversations[activeConversationIndex + 1].click();
+        }
       }
     },
-    handleNextConversation() {
-      const {
-        allConversations,
-        activeConversationIndex,
-        lastConversationIndex,
-      } = this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[lastConversationIndex].click();
-      } else if (activeConversationIndex < lastConversationIndex) {
-        allConversations[activeConversationIndex + 1].click();
-      }
-    },
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyJ': {
-          action: () => this.handlePreviousConversation(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyK': {
-          action: () => this.handleNextConversation(),
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     resetAndFetchData() {
       this.appliedFilter = [];
       this.resetBulkActions();
@@ -799,7 +794,7 @@ export default {
       });
     },
     resetBulkActions() {
-      this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+      this.selectedConversations = [];
       this.selectedInboxes = [];
     },
     onBasicFilterChange(value, type) {
@@ -830,16 +825,12 @@ export default {
       return this.selectedConversations.includes(id);
     },
     selectConversation(conversationId, inboxId) {
-      this.$store.dispatch(
-        'bulkActions/setSelectedConversationIds',
-        conversationId
-      );
+      this.selectedConversations.push(conversationId);
       this.selectedInboxes.push(inboxId);
     },
     deSelectConversation(conversationId, inboxId) {
-      this.$store.dispatch(
-        'bulkActions/removeSelectedConversationIds',
-        conversationId
+      this.selectedConversations = this.selectedConversations.filter(
+        item => item !== conversationId
       );
       this.selectedInboxes = this.selectedInboxes.filter(
         item => item !== inboxId
@@ -847,10 +838,7 @@ export default {
     },
     selectAllConversations(check) {
       if (check) {
-        this.$store.dispatch(
-          'bulkActions/setSelectedConversationIds',
-          this.conversationList.map(item => item.id)
-        );
+        this.selectedConversations = this.conversationList.map(item => item.id);
         this.selectedInboxes = this.conversationList.map(item => item.inbox_id);
       } else {
         this.resetBulkActions();
@@ -866,7 +854,7 @@ export default {
             assignee_id: agent.id,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -964,7 +952,7 @@ export default {
             add: labels,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -991,13 +979,13 @@ export default {
             team_id: team.id,
           },
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
-    async onUpdateConversations(status, snoozedUntil) {
+    async onUpdateConversations(status) {
       try {
         await this.$store.dispatch('bulkActions/process', {
           type: 'Conversation',
@@ -1005,9 +993,8 @@ export default {
           fields: {
             status,
           },
-          snoozed_until: snoozedUntil,
         });
-        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
+        this.selectedConversations = [];
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));

app/javascript/dashboard/components/CustomAttribute.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            class="w-full font-medium text-sm mb-0"
             :class="
               $v.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
@@ -20,11 +20,6 @@
             "
           >
             {{ label }}
-            <helper-text-popup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
           </span>
           <woot-button
             v-if="showCopyAndDeleteButton"
@@ -46,7 +41,7 @@
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -135,25 +130,22 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
-import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
-
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
-    HelperTextPopup,
   },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
   props: {
     label: { type: String, required: true },
-    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },

app/javascript/dashboard/components/FormSection.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col items-start w-full gap-6">
-    <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-ash-900">
-        {{ title }}
-      </h4>
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-ash-200" />
-      </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
-        {{ description }}
-      </p>
-    </div>
-    <div class="flex flex-col w-full gap-6">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>

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

@@ -88,9 +88,15 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import {
+  hasPressedAltAndEKey,
+  hasPressedCommandPlusAltAndEKey,
+  hasPressedAltAndMKey,
+} from 'shared/helpers/KeyboardHelpers';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -108,7 +114,7 @@ export default {
     WootDropdownMenu,
     CustomSnoozeModal,
   },
-  mixins: [alertMixin, keyboardEventListenerMixins],
+  mixins: [clickaway, alertMixin, eventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
@@ -153,52 +159,37 @@ export default {
     bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyM': {
-          action: () => this.$refs.arrowDownButton?.$el.click(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyE': this.resolveOrToast,
-        '$mod+Alt+KeyE': async event => {
-          const { all, activeIndex, lastIndex } = this.getConversationParams();
-          await this.resolveOrToast();
-
-          if (activeIndex < lastIndex) {
-            all[activeIndex + 1].click();
-          } else if (all.length > 1) {
-            all[0].click();
-            document.querySelector('.conversations-list').scrollTop = 0;
-          }
-
-          event.preventDefault();
-        },
-      };
-    },
-    getConversationParams() {
+    async handleKeyEvents(e) {
       const allConversations = document.querySelectorAll(
         '.conversations-list .conversation'
       );
-
-      const activeConversation = document.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-
-      return {
-        all: allConversations,
-        activeIndex: activeConversationIndex,
-        lastIndex: lastConversationIndex,
-      };
-    },
-    async resolveOrToast() {
-      try {
-        await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-      } catch (error) {
-        // error
+      if (hasPressedAltAndMKey(e)) {
+        if (this.$refs.arrowDownButton) {
+          this.$refs.arrowDownButton.$el.click();
+        }
+      }
+      if (hasPressedAltAndEKey(e)) {
+        const activeConversation = document.querySelector(
+          'div.conversations-list div.conversation.active'
+        );
+        const activeConversationIndex = [...allConversations].indexOf(
+          activeConversation
+        );
+        const lastConversationIndex = allConversations.length - 1;
+        try {
+          await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+        } catch (error) {
+          // error
+        }
+        if (hasPressedCommandPlusAltAndEKey(e)) {
+          if (activeConversationIndex < lastConversationIndex) {
+            allConversations[activeConversationIndex + 1].click();
+          } else if (allConversations.length > 1) {
+            allConversations[0].click();
+            document.querySelector('.conversations-list').scrollTop = 0;
+          }
+          e.preventDefault();
+        }
       }
     },
     onCmdSnoozeConversation(snoozeType) {

app/javascript/dashboard/components/index.js

@@ -24,7 +24,6 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
-import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -52,7 +51,6 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
-  DatePicker,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

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

@@ -47,6 +47,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -66,7 +67,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [alertMixin],
+  mixins: [clickaway, alertMixin],
 
   data() {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <aside class="flex h-full">
+  <aside class="h-full flex">
     <primary-sidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
@@ -36,7 +36,15 @@ import alertMixin from 'shared/mixins/alertMixin';
 
 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import {
+  hasPressedAltAndCKey,
+  hasPressedAltAndRKey,
+  hasPressedAltAndSKey,
+  hasPressedAltAndVKey,
+  hasPressedCommandAndForwardSlash,
+  isEscape,
+} from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import router from '../../routes';
 
 export default {
@@ -44,7 +52,7 @@ export default {
     PrimarySidebar,
     SecondarySidebar,
   },
-  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [adminMixin, alertMixin, eventListenerMixins],
   props: {
     showSecondarySidebar: {
       type: Boolean,
@@ -165,27 +173,30 @@ export default {
     closeKeyShortcutModal() {
       this.$emit('close-key-shortcut-modal');
     },
-    getKeyboardEvents() {
-      return {
-        '$mod+Slash': this.toggleKeyShortcutModal,
-        '$mod+Escape': this.closeKeyShortcutModal,
-        'Alt+KeyC': {
-          action: () => this.navigateToRoute('home'),
-        },
-        'Alt+KeyV': {
-          action: () => this.navigateToRoute('contacts_dashboard'),
-        },
-        'Alt+KeyR': {
-          action: () => this.navigateToRoute('account_overview_reports'),
-        },
-        'Alt+KeyS': {
-          action: () => this.navigateToRoute('agent_list'),
-        },
-      };
-    },
-    navigateToRoute(routeName) {
-      if (!this.isCurrentRouteSameAsNavigation(routeName)) {
-        router.push({ name: routeName });
+    handleKeyEvents(e) {
+      if (hasPressedCommandAndForwardSlash(e)) {
+        this.toggleKeyShortcutModal();
+      }
+      if (isEscape(e)) {
+        this.closeKeyShortcutModal();
+      }
+
+      if (hasPressedAltAndCKey(e)) {
+        if (!this.isCurrentRouteSameAsNavigation('home')) {
+          router.push({ name: 'home' });
+        }
+      } else if (hasPressedAltAndVKey(e)) {
+        if (!this.isCurrentRouteSameAsNavigation('contacts_dashboard')) {
+          router.push({ name: 'contacts_dashboard' });
+        }
+      } else if (hasPressedAltAndRKey(e)) {
+        if (!this.isCurrentRouteSameAsNavigation('settings_account_reports')) {
+          router.push({ name: 'settings_account_reports' });
+        }
+      } else if (hasPressedAltAndSKey(e)) {
+        if (!this.isCurrentRouteSameAsNavigation('agent_list')) {
+          router.push({ name: 'agent_list' });
+        }
       }
     },
     isCurrentRouteSameAsNavigation(routeName) {

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

@@ -142,13 +142,20 @@ const settings = accountId => ({
       toStateName: 'settings_applications',
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
+    {
+      icon: 'credit-card-person',
+      label: 'BILLING',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/billing`),
+      toStateName: 'billing_settings_index',
+      showOnlyOnCloud: true,
+    },
     {
       icon: 'key',
       label: 'AUDIT_LOGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
       toStateName: 'auditlogs_list',
-      isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
       beta: true,
     },
@@ -158,18 +165,9 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
       toStateName: 'sla_list',
-      isEnterpriseOnly: true,
       featureFlag: FEATURE_FLAGS.SLA,
       beta: true,
     },
-    {
-      icon: 'credit-card-person',
-      label: 'BILLING',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/billing`),
-      toStateName: 'billing_settings_index',
-      showOnlyOnCloud: true,
-    },
   ],
 });
 

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

@@ -106,6 +106,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -118,6 +119,7 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
+  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

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

@@ -2,7 +2,7 @@
   <li v-show="isMenuItemVisible" class="mt-1">
     <div v-if="hasSubMenu" class="flex justify-between">
       <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+        class="text-sm text-slate-700 dark:text-slate-200 font-semibold my-2 px-2 pt-1"
       >
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </span>
@@ -19,7 +19,7 @@
     </div>
     <router-link
       v-else
-      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="rounded-lg leading-4 font-medium flex items-center p-2 m-0 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
       :class="computedClass"
       :to="menuItem && menuItem.toState"
     >
@@ -31,7 +31,7 @@
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
       <span
         v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        class="rounded-md text-xxs font-medium mx-1 py-0 px-1"
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
@@ -46,13 +46,13 @@
         v-if="menuItem.beta"
         data-view-component="true"
         label="Beta"
-        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+        class="px-1 mx-1 inline-block font-medium leading-4 border border-green-400 text-green-500 rounded-lg text-xxs"
       >
         {{ $t('SIDEBAR.BETA') }}
       </span>
     </router-link>
 
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+    <ul v-if="hasSubMenu" class="list-none ml-0 mb-0">
       <secondary-child-nav-item
         v-for="child in menuItem.children"
         :key="child.id"
@@ -94,7 +94,6 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../../mixins/isAdmin';
-import configMixin from 'shared/mixins/configMixin';
 import {
   getInboxClassByType,
   getInboxWarningIconClass,
@@ -108,7 +107,7 @@ import {
 
 export default {
   components: { SecondaryChildNavItem },
-  mixins: [adminMixin, configMixin],
+  mixins: [adminMixin],
   props: {
     menuItem: {
       type: Object,
@@ -133,33 +132,15 @@ export default {
     },
     isMenuItemVisible() {
       if (this.menuItem.globalConfigFlag) {
-        // this checks for the `csmlEditorHost` flag in the global config
-        // if this is present, we toggle the CSML editor menu item
-        // TODO: This is very specific, and can be handled better, fix it
         return !!this.globalConfig[this.menuItem.globalConfigFlag];
       }
-
-      let isFeatureEnabled = true;
-      if (this.menuItem.featureFlag) {
-        isFeatureEnabled = this.isFeatureEnabledonAccount(
-          this.accountId,
-          this.menuItem.featureFlag
-        );
-      }
-
-      if (this.menuItem.isEnterpriseOnly) {
-        if (!this.isEnterprise) return false;
-        return isFeatureEnabled || this.globalConfig.displayManifest;
-      }
-
       if (this.menuItem.featureFlag) {
         return this.isFeatureEnabledonAccount(
           this.accountId,
           this.menuItem.featureFlag
         );
       }
-
-      return isFeatureEnabled;
+      return true;
     },
     isAllConversations() {
       return (

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

@@ -1,304 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-import {
-  getActiveDateRange,
-  moveCalendarDate,
-  DATE_RANGE_TYPES,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from './helpers/DatePickerHelper';
-import {
-  isValid,
-  startOfMonth,
-  subDays,
-  startOfDay,
-  endOfDay,
-  isBefore,
-  subMonths,
-  addMonths,
-  isSameMonth,
-  differenceInCalendarMonths,
-  setMonth,
-  setYear,
-  isAfter,
-} from 'date-fns';
-
-import DatePickerButton from './components/DatePickerButton.vue';
-import CalendarDateInput from './components/CalendarDateInput.vue';
-import CalendarDateRange from './components/CalendarDateRange.vue';
-import CalendarYear from './components/CalendarYear.vue';
-import CalendarMonth from './components/CalendarMonth.vue';
-import CalendarWeek from './components/CalendarWeek.vue';
-import CalendarFooter from './components/CalendarFooter.vue';
-
-const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
-const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
-const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
-
-const showDatePicker = ref(false);
-const calendarViews = ref({ start: WEEK, end: WEEK });
-const currentDate = ref(new Date());
-const selectedStartDate = ref(startOfDay(subDays(currentDate.value, 6))); // LAST_7_DAYS
-const selectedEndDate = ref(endOfDay(currentDate.value));
-// Setting the start and end calendar
-const startCurrentDate = ref(startOfDay(selectedStartDate.value));
-const endCurrentDate = ref(
-  isSameMonth(selectedStartDate.value, selectedEndDate.value)
-    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Moves to the start of the next month if dates are in the same month (Mounted case LAST_7_DAYS)
-    : startOfMonth(selectedEndDate.value) // Always shows the month of the end date starting from the first (Mounted case LAST_7_DAYS)
-);
-const selectingEndDate = ref(false);
-const selectedRange = ref(LAST_7_DAYS);
-const hoveredEndDate = ref(null);
-
-const manualStartDate = ref(selectedStartDate.value);
-const manualEndDate = ref(selectedEndDate.value);
-
-const emit = defineEmits(['change']);
-
-// Watcher will set the start and end dates based on the selected range
-watch(selectedRange, newRange => {
-  if (newRange !== CUSTOM_RANGE) {
-    // If selecting a range other than last 7 days or last 30 days, set the start and end dates to the selected start and end dates
-    // If selecting last 7 days or last 30 days is, set the start date to the selected start date
-    // and the end date to one month ahead of the start date if the start date and end date are in the same month
-    // Otherwise set the end date to the selected end date
-    const isLastSevenOrThirtyDays =
-      newRange === LAST_7_DAYS || newRange === LAST_30_DAYS;
-    startCurrentDate.value = selectedStartDate.value;
-    endCurrentDate.value =
-      isLastSevenOrThirtyDays &&
-      isSameMonth(selectedStartDate.value, selectedEndDate.value)
-        ? startOfMonth(addMonths(selectedStartDate.value, 1))
-        : selectedEndDate.value;
-    selectingEndDate.value = false;
-  } else if (!selectingEndDate.value) {
-    // If selecting a custom range and not selecting an end date, set the start date to the selected start date
-    startCurrentDate.value = startOfDay(currentDate.value);
-  }
-});
-
-// Watcher will set the input values based on the selected start and end dates
-watch(
-  [selectedStartDate, selectedEndDate],
-  ([newStart, newEnd]) => {
-    if (isValid(newStart)) {
-      manualStartDate.value = newStart;
-    } else {
-      manualStartDate.value = selectedStartDate.value;
-    }
-
-    if (isValid(newEnd)) {
-      manualEndDate.value = newEnd;
-    } else {
-      manualEndDate.value = selectedEndDate.value;
-    }
-  },
-  { immediate: true }
-);
-
-// Watcher to ensure dates are always in logical order
-// This watch is will ensure that the start date is always before the end date
-watch(
-  [startCurrentDate, endCurrentDate],
-  ([newStart, newEnd], [oldStart, oldEnd]) => {
-    const monthDifference = differenceInCalendarMonths(newEnd, newStart);
-
-    if (newStart !== oldStart) {
-      if (isAfter(newStart, newEnd) || monthDifference === 0) {
-        // Adjust the end date forward if the start date is adjusted and is after the end date or in the same month
-        endCurrentDate.value = addMonths(newStart, 1);
-      }
-    }
-    if (newEnd !== oldEnd) {
-      if (isBefore(newEnd, newStart) || monthDifference === 0) {
-        // Adjust the start date backward if the end date is adjusted and is before the start date or in the same month
-        startCurrentDate.value = subMonths(newEnd, 1);
-      }
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-const setDateRange = range => {
-  selectedRange.value = range.value;
-  const { start, end } = getActiveDateRange(range.value, currentDate.value);
-  selectedStartDate.value = start;
-  selectedEndDate.value = end;
-};
-
-const moveCalendar = (calendar, direction, period = MONTH) => {
-  const { start, end } = moveCalendarDate(
-    calendar,
-    startCurrentDate.value,
-    endCurrentDate.value,
-    direction,
-    period
-  );
-  startCurrentDate.value = start;
-  endCurrentDate.value = end;
-};
-
-const selectDate = day => {
-  selectedRange.value = CUSTOM_RANGE;
-  if (!selectingEndDate.value || day < selectedStartDate.value) {
-    selectedStartDate.value = day;
-    selectedEndDate.value = null;
-    selectingEndDate.value = true;
-  } else {
-    selectedEndDate.value = day;
-    selectingEndDate.value = false;
-  }
-};
-
-const setViewMode = (calendar, mode) => {
-  selectedRange.value = CUSTOM_RANGE;
-  calendarViews.value[calendar] = mode;
-};
-
-const openCalendar = (index, calendarType, period = MONTH) => {
-  const current =
-    calendarType === START_CALENDAR
-      ? startCurrentDate.value
-      : endCurrentDate.value;
-  const newDate =
-    period === MONTH
-      ? setMonth(startOfMonth(current), index)
-      : setYear(current, index);
-  if (calendarType === START_CALENDAR) {
-    startCurrentDate.value = newDate;
-  } else {
-    endCurrentDate.value = newDate;
-  }
-  setViewMode(calendarType, period === MONTH ? WEEK : MONTH);
-};
-
-const updateManualInput = (newDate, calendarType) => {
-  if (calendarType === START_CALENDAR) {
-    selectedStartDate.value = newDate;
-    startCurrentDate.value = newDate;
-  } else {
-    selectedEndDate.value = newDate;
-    endCurrentDate.value = newDate;
-  }
-  selectingEndDate.value = false;
-};
-
-const handleManualInputError = message => {
-  bus.$emit('newToastMessage', message);
-};
-
-const resetDatePicker = () => {
-  startCurrentDate.value = startOfDay(currentDate.value); // Resets to today at start of the day
-  endCurrentDate.value = addMonths(startOfDay(currentDate.value), 1); // Resets to one month ahead
-  selectedStartDate.value = startOfDay(subDays(currentDate.value, 6));
-  selectedEndDate.value = endOfDay(currentDate.value);
-  selectingEndDate.value = false;
-  selectedRange.value = LAST_7_DAYS;
-  // Reset view modes if they are being used to toggle between different calendar views
-  calendarViews.value = { start: WEEK, end: WEEK };
-};
-
-const emitDateRange = () => {
-  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
-    bus.$emit('newToastMessage', 'Please select a valid time range');
-  } else {
-    showDatePicker.value = false;
-    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
-  }
-};
-</script>
-
-<template>
-  <div class="relative font-inter">
-    <DatePickerButton
-      :selected-start-date="selectedStartDate"
-      :selected-end-date="selectedEndDate"
-      :selected-range="selectedRange"
-      @open="showDatePicker = !showDatePicker"
-    />
-    <div
-      v-if="showDatePicker"
-      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
-    >
-      <CalendarDateRange
-        :selected-range="selectedRange"
-        @set-range="setDateRange"
-      />
-      <div
-        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
-      >
-        <div class="flex justify-around h-fit">
-          <!-- Calendars for Start and End Dates -->
-          <div
-            v-for="calendar in [START_CALENDAR, END_CALENDAR]"
-            :key="`${calendar}-calendar`"
-            class="flex flex-col items-center"
-          >
-            <CalendarDateInput
-              :calendar-type="calendar"
-              :date-value="
-                calendar === START_CALENDAR ? manualStartDate : manualEndDate
-              "
-              :compare-date="
-                calendar === START_CALENDAR ? manualEndDate : manualStartDate
-              "
-              :is-disabled="selectedRange !== CUSTOM_RANGE"
-              @update="
-                calendar === START_CALENDAR
-                  ? (manualStartDate = $event)
-                  : (manualEndDate = $event)
-              "
-              @validate="updateManualInput($event, calendar)"
-              @error="handleManualInputError($event)"
-            />
-            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
-              <div
-                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
-                :class="
-                  calendar === START_CALENDAR &&
-                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
-                "
-              >
-                <CalendarYear
-                  v-if="calendarViews[calendar] === YEAR"
-                  :calendar-type="calendar"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
-                />
-                <CalendarMonth
-                  v-else-if="calendarViews[calendar] === MONTH"
-                  :calendar-type="calendar"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
-                  @prev="moveCalendar(calendar, 'prev', YEAR)"
-                  @next="moveCalendar(calendar, 'next', YEAR)"
-                />
-                <CalendarWeek
-                  v-else-if="calendarViews[calendar] === WEEK"
-                  :calendar-type="calendar"
-                  :current-date="currentDate"
-                  :start-current-date="startCurrentDate"
-                  :end-current-date="endCurrentDate"
-                  :selected-start-date="selectedStartDate"
-                  :selected-end-date="selectedEndDate"
-                  :selecting-end-date="selectingEndDate"
-                  :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
-                  @prev="moveCalendar(calendar, 'prev')"
-                  @next="moveCalendar(calendar, 'next')"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <CalendarFooter @change="emitDateRange" @clear="resetDatePicker" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -1,79 +0,0 @@
-<script setup>
-import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
-
-defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  firstButtonLabel: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  viewMode: {
-    type: String,
-    default: '',
-  },
-});
-const emit = defineEmits(['prev', 'next', 'set-view']);
-
-const { YEAR } = CALENDAR_PERIODS;
-
-const onClickPrev = type => {
-  emit('prev', type);
-};
-
-const onClickNext = type => {
-  emit('next', type);
-};
-
-const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
-};
-</script>
-
-<template>
-  <div class="flex items-start justify-between w-full h-9">
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      @click="onClickPrev(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-left"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
-    <div class="flex items-center gap-1">
-      <button
-        v-if="firstButtonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
-        @click="onClickSetView(calendarType, viewMode)"
-      >
-        {{ firstButtonLabel }}
-      </button>
-      <button
-        v-if="buttonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
-        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
-        @click="onClickSetView(calendarType, YEAR)"
-      >
-        {{ buttonLabel }}
-      </button>
-    </div>
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
-      @click="onClickNext(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-right"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue

@@ -1,74 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { parse, isValid, isAfter, isBefore } from 'date-fns';
-import {
-  getIntlDateFormatForLocale,
-  CALENDAR_TYPES,
-} from '../helpers/DatePickerHelper';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: '',
-  },
-  dateValue: Date,
-  compareDate: Date,
-  isDisabled: Boolean,
-});
-
-const emit = defineEmits(['update', 'validate', 'error']);
-
-const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
-
-const dateFormat = computed(() => getIntlDateFormatForLocale()?.toUpperCase());
-
-const localDateValue = computed({
-  get: () => props.dateValue?.toLocaleDateString(navigator.language) || '',
-  set: newValue => {
-    const format = getIntlDateFormatForLocale();
-    const parsedDate = parse(newValue, format, new Date());
-    if (isValid(parsedDate)) {
-      emit('update', parsedDate);
-    }
-  },
-});
-
-const validateDate = () => {
-  if (!isValid(props.dateValue)) {
-    emit('error', `Please enter the date in valid format: ${dateFormat.value}`);
-    return;
-  }
-
-  const { calendarType, compareDate, dateValue } = props;
-  const isStartCalendar = calendarType === START_CALENDAR;
-  const isEndCalendar = calendarType === END_CALENDAR;
-
-  if (compareDate && isStartCalendar && isAfter(dateValue, compareDate)) {
-    emit('error', 'Start date must be before the end date.');
-  } else if (compareDate && isEndCalendar && isBefore(dateValue, compareDate)) {
-    emit('error', 'End date must be after the start date.');
-  } else {
-    emit('validate', dateValue);
-  }
-};
-</script>
-
-<template>
-  <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{
-        calendarType === START_CALENDAR
-          ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
-          : $t('DATE_PICKER.DATE_RANGE_INPUT.END')
-      }}
-    </span>
-    <input
-      v-model="localDateValue"
-      type="text"
-      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
-      :placeholder="dateFormat"
-      :disabled="isDisabled"
-      @keypress.enter="validateDate"
-    />
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -1,41 +0,0 @@
-<script setup>
-import { dateRanges } from '../helpers/DatePickerHelper';
-
-defineProps({
-  selectedRange: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['set-range']);
-
-const setDateRange = range => {
-  emit('set-range', range);
-};
-</script>
-
-<template>
-  <div class="w-[200px] flex flex-col items-start">
-    <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
-    >
-      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
-    </h4>
-    <div class="flex flex-col items-start w-full">
-      <button
-        v-for="range in dateRanges"
-        :key="range.label"
-        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
-        :class="
-          range.value === selectedRange
-            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-slate-600 dark:text-slate-200'
-        "
-        @click="setDateRange(range)"
-      >
-        {{ $t(range.label) }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -1,28 +0,0 @@
-<script setup>
-const emit = defineEmits(['clear', 'apply']);
-
-const onClickClear = () => {
-  emit('clear');
-};
-
-const onClickApply = () => {
-  emit('change');
-};
-</script>
-
-<template>
-  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
-      @click="onClickClear"
-    >
-      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-    </button>
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
-      @click="onClickApply"
-    >
-      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
-    </button>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { format, getMonth, setMonth, startOfMonth } from 'date-fns';
-import {
-  yearName,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from '../helpers/DatePickerHelper';
-
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-});
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-const { MONTH, YEAR } = CALENDAR_PERIODS;
-
-const months = Array.from({ length: 12 }, (_, index) =>
-  format(setMonth(startOfMonth(new Date()), index), 'MMM')
-);
-
-const activeMonthIndex = computed(() => {
-  const date =
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate;
-  return getMonth(date);
-});
-
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
-
-const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
-};
-
-const onClickPrev = () => {
-  emit('prev');
-};
-
-const onClickNext = () => {
-  emit('next');
-};
-
-const selectMonth = index => {
-  emit('select-month', index);
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :view-mode="YEAR"
-      :calendar-type="calendarType"
-      :button-label="
-        yearName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate,
-          MONTH
-        )
-      "
-      @set-view="setViewMode"
-      @prev="onClickPrev"
-      @next="onClickNext"
-    />
-
-    <div class="grid w-full grid-cols-3 gap-x-3 gap-y-2 auto-rows-[61px]">
-      <button
-        v-for="(month, index) in months"
-        :key="index"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
-        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
-            index === activeMonthIndex,
-        }"
-        @click="selectMonth(index)"
-      >
-        {{ month }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -1,172 +0,0 @@
-<script setup>
-import {
-  monthName,
-  yearName,
-  getWeeksForMonth,
-  isToday,
-  dayIsInRange,
-  isCurrentMonth,
-  isLastDayOfMonth,
-  isHoveringDayInRange,
-  isHoveringNextDayInRange,
-  CALENDAR_TYPES,
-  CALENDAR_PERIODS,
-} from '../helpers/DatePickerHelper';
-
-import CalendarWeekLabel from './CalendarWeekLabel.vue';
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  currentDate: Date,
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-  selectedStartDate: Date,
-  selectingEndDate: Boolean,
-  selectedEndDate: Date,
-  hoveredEndDate: Date,
-});
-
-const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
-  'prev',
-  'next',
-  'set-view',
-]);
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-const { MONTH } = CALENDAR_PERIODS;
-
-const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
-};
-
-const emitSelectDate = day => {
-  emit('select-date', day);
-};
-const onClickPrev = () => {
-  emit('prev');
-};
-
-const onClickNext = () => {
-  emit('next');
-};
-
-const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
-};
-
-const weeks = calendarType => {
-  return getWeeksForMonth(
-    calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  );
-};
-
-const isSelectedStartOrEndDate = day => {
-  return (
-    dayIsInRange(day, props.selectedStartDate, props.selectedStartDate) ||
-    dayIsInRange(day, props.selectedEndDate, props.selectedEndDate)
-  );
-};
-
-const isInRange = day => {
-  return dayIsInRange(day, props.selectedStartDate, props.selectedEndDate);
-};
-
-const isInCurrentMonth = day => {
-  return isCurrentMonth(
-    day,
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  );
-};
-
-const isHoveringInRange = day => {
-  return isHoveringDayInRange(
-    day,
-    props.selectedStartDate,
-    props.selectingEndDate,
-    props.hoveredEndDate
-  );
-};
-
-const isNextDayInRange = day => {
-  return isHoveringNextDayInRange(
-    day,
-    props.selectedStartDate,
-    props.selectedEndDate,
-    props.hoveredEndDate
-  );
-};
-
-const dayClasses = day => ({
-  'text-slate-500 dark:text-slate-400 pointer-events-none':
-    !isInCurrentMonth(day),
-  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
-    isInCurrentMonth(day),
-  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
-    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
-  'bg-woot-50 dark:bg-woot-800':
-    (isInRange(day) || isHoveringInRange(day)) &&
-    !isSelectedStartOrEndDate(day) &&
-    isInCurrentMonth(day),
-  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
-    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
-});
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :view-mode="MONTH"
-      :calendar-type="calendarType"
-      :first-button-label="
-        monthName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
-        )
-      "
-      :button-label="
-        yearName(
-          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
-        )
-      "
-      @prev="onClickPrev"
-      @next="onClickNext"
-      @set-view="setViewMode"
-    />
-    <CalendarWeekLabel />
-    <div
-      v-for="week in weeks(calendarType)"
-      :key="week[0].getTime()"
-      class="grid max-w-md grid-cols-7 gap-2 mx-auto overflow-hidden rounded-lg"
-    >
-      <div
-        v-for="day in week"
-        :key="day.getTime()"
-        class="flex relative items-center justify-center w-9 h-8 py-1.5 px-2 font-medium text-sm rounded-lg cursor-pointer"
-        :class="dayClasses(day)"
-        @mouseenter="emitHoveredEndDate(day)"
-        @mouseleave="emitHoveredEndDate(null)"
-        @click="emitSelectDate(day)"
-      >
-        {{ day.getDate() }}
-        <span
-          v-if="
-            (isInRange(day) || isHoveringInRange(day)) &&
-            isNextDayInRange(day) &&
-            !isLastDayOfMonth(day) &&
-            isInCurrentMonth(day)
-          "
-          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { calendarWeeks } from '../helpers/DatePickerHelper';
-</script>
-
-<template>
-  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
-    <div
-      v-for="day in calendarWeeks"
-      :key="day.id"
-      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
-    >
-      {{ day.label }}
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { getYear, addYears, subYears } from 'date-fns';
-import { CALENDAR_TYPES } from '../helpers/DatePickerHelper';
-
-import CalendarAction from './CalendarAction.vue';
-
-const props = defineProps({
-  calendarType: {
-    type: String,
-    default: 'start',
-  },
-  startCurrentDate: Date,
-  endCurrentDate: Date,
-});
-
-const { START_CALENDAR } = CALENDAR_TYPES;
-
-const calculateStartYear = date => {
-  const year = getYear(date);
-  return year - (year % 10); // Align with the beginning of a decade
-};
-
-const startYear = ref(
-  calculateStartYear(
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate
-  )
-);
-
-const years = computed(() =>
-  Array.from({ length: 10 }, (_, i) => startYear.value + i)
-);
-
-const firstYear = computed(() => years.value[0]);
-const lastYear = computed(() => years.value[years.value.length - 1]);
-
-const activeYear = computed(() => {
-  const date =
-    props.calendarType === START_CALENDAR
-      ? props.startCurrentDate
-      : props.endCurrentDate;
-  return getYear(date);
-});
-
-const onClickPrev = () => {
-  startYear.value = subYears(new Date(startYear.value, 0, 1), 10).getFullYear();
-};
-
-const onClickNext = () => {
-  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
-};
-
-const emit = defineEmits(['select-year']);
-
-const selectYear = year => {
-  emit('select-year', year);
-};
-</script>
-
-<template>
-  <div class="flex flex-col w-full gap-2 max-h-[312px]">
-    <CalendarAction
-      :calendar-type="calendarType"
-      :button-label="`${firstYear} - ${lastYear}`"
-      @prev="onClickPrev"
-      @next="onClickNext"
-    />
-
-    <div class="grid grid-cols-2 gap-x-3 gap-y-2 w-full auto-rows-[47px]">
-      <button
-        v-for="year in years"
-        :key="year"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
-        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-            year === activeYear,
-        }"
-        @click="selectYear(year)"
-      >
-        {{ year }}
-      </button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -1,71 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { dateRanges } from '../helpers/DatePickerHelper';
-import { format, isSameYear, isValid } from 'date-fns';
-
-const props = defineProps({
-  selectedStartDate: Date,
-  selectedEndDate: Date,
-  selectedRange: {
-    type: String,
-    default: '',
-  },
-});
-
-const formatDateRange = computed(() => {
-  const startDate = props.selectedStartDate;
-  const endDate = props.selectedEndDate;
-
-  if (!isValid(startDate) || !isValid(endDate)) {
-    return 'Select a date range';
-  }
-
-  const formatString = isSameYear(startDate, endDate)
-    ? 'MMM d' // Same year: "Apr 1"
-    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
-
-  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
-    // Both dates are in the current year
-    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
-  }
-  // At least one date is not in the current year
-  return `${format(startDate, formatString)} - ${format(
-    endDate,
-    formatString
-  )}`;
-});
-
-const activeDateRange = computed(
-  () => dateRanges.find(range => range.value === props.selectedRange).label
-);
-
-const emit = defineEmits(['open']);
-
-const openDatePicker = () => {
-  emit('open');
-};
-</script>
-
-<template>
-  <button
-    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
-    @click="openDatePicker"
-  >
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="calendar"
-      size="16"
-    />
-    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
-      {{ $t(activeDateRange) }}
-    </span>
-    <span class="text-sm font-medium text-slate-600 dark:text-slate-200">
-      {{ formatDateRange }}
-    </span>
-    <fluent-icon
-      class="text-slate-800 dark:text-slate-50"
-      icon="chevron-down"
-      size="14"
-    />
-  </button>
-</template>

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

@@ -1,219 +0,0 @@
-import {
-  startOfDay,
-  subDays,
-  endOfDay,
-  subMonths,
-  addMonths,
-  subYears,
-  addYears,
-  startOfMonth,
-  isSameMonth,
-  format,
-  startOfWeek,
-  addDays,
-  eachDayOfInterval,
-  endOfMonth,
-  isSameDay,
-  isWithinInterval,
-} from 'date-fns';
-
-// Constants for calendar and date ranges
-export const calendarWeeks = [
-  { id: 1, label: 'M' },
-  { id: 2, label: 'T' },
-  { id: 3, label: 'W' },
-  { id: 4, label: 'T' },
-  { id: 5, label: 'F' },
-  { id: 6, label: 'S' },
-  { id: 7, label: 'S' },
-];
-
-export const dateRanges = [
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
-    value: 'last3months',
-  },
-  {
-    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
-    value: 'last6months',
-  },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
-  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' },
-];
-
-export const DATE_RANGE_TYPES = {
-  LAST_7_DAYS: 'last7days',
-  LAST_30_DAYS: 'last30days',
-  LAST_3_MONTHS: 'last3months',
-  LAST_6_MONTHS: 'last6months',
-  LAST_YEAR: 'lastYear',
-  CUSTOM_RANGE: 'custom',
-};
-
-export const CALENDAR_TYPES = {
-  START_CALENDAR: 'start',
-  END_CALENDAR: 'end',
-};
-
-export const CALENDAR_PERIODS = {
-  WEEK: 'week',
-  MONTH: 'month',
-  YEAR: 'year',
-};
-
-// Utility functions for date operations
-export const monthName = currentDate => format(currentDate, 'MMMM');
-export const yearName = currentDate => format(currentDate, 'yyyy');
-
-export const getIntlDateFormatForLocale = () => {
-  const year = 2222;
-  const month = 12;
-  const day = 15;
-  const date = new Date(year, month - 1, day);
-  const formattedDate = new Intl.DateTimeFormat(navigator.language).format(
-    date
-  );
-  return formattedDate
-    .replace(`${year}`, 'yyyy')
-    .replace(`${month}`, 'MM')
-    .replace(`${day}`, 'dd');
-};
-
-// Utility functions for calendar operations
-export const chunk = (array, size) =>
-  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
-    array.slice(index * size, index * size + size)
-  );
-
-export const getWeeksForMonth = (date, weekStartsOn = 1) => {
-  const startOfTheMonth = startOfMonth(date);
-  const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn });
-  const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar
-  return chunk(
-    eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }),
-    7
-  );
-};
-
-export const moveCalendarDate = (
-  calendar,
-  startCurrentDate,
-  endCurrentDate,
-  direction,
-  period
-) => {
-  const adjustFunctions = {
-    month: { prev: subMonths, next: addMonths },
-    year: { prev: subYears, next: addYears },
-  };
-
-  const adjust = adjustFunctions[period][direction];
-
-  if (calendar === 'start') {
-    const newStart = adjust(startCurrentDate, 1);
-    return { start: newStart, end: endCurrentDate };
-  }
-  const newEnd = adjust(endCurrentDate, 1);
-  return { start: startCurrentDate, end: newEnd };
-};
-
-// Date comparison functions
-export const isToday = (currentDate, date) =>
-  date.getDate() === currentDate.getDate() &&
-  date.getMonth() === currentDate.getMonth() &&
-  date.getFullYear() === currentDate.getFullYear();
-
-export const isCurrentMonth = (day, referenceDate) =>
-  isSameMonth(day, referenceDate);
-
-export const isLastDayOfMonth = day => {
-  const lastDay = endOfMonth(day);
-  return day.getDate() === lastDay.getDate();
-};
-
-export const dayIsInRange = (date, startDate, endDate) => {
-  if (!startDate || !endDate) {
-    return false;
-  }
-  // Normalize dates to ignore time differences
-  let startOfDayStart = startOfDay(startDate);
-  let startOfDayEnd = startOfDay(endDate);
-  // Swap if start is greater than end
-  if (startOfDayStart > startOfDayEnd) {
-    [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart];
-  }
-  // Check if the date is within the interval or is the same as the start date
-  return (
-    isSameDay(date, startOfDayStart) ||
-    isWithinInterval(date, {
-      start: startOfDayStart,
-      end: startOfDayEnd,
-    })
-  );
-};
-
-// Handling hovering states in date range pickers
-export const isHoveringDayInRange = (
-  day,
-  startDate,
-  endDate,
-  hoveredEndDate
-) => {
-  if (endDate && hoveredEndDate && startDate <= hoveredEndDate) {
-    // Ensure the start date is not after the hovered end date
-    return isWithinInterval(day, { start: startDate, end: hoveredEndDate });
-  }
-  return false;
-};
-
-export const isHoveringNextDayInRange = (
-  day,
-  startDate,
-  endDate,
-  hoveredEndDate
-) => {
-  if (startDate && !endDate && hoveredEndDate) {
-    // If a start date is selected, and we're hovering (but haven't clicked an end date yet)
-    const nextDay = addDays(day, 1);
-    return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate });
-  }
-  if (startDate && endDate) {
-    // Normal range checking between selected start and end dates
-    const nextDay = addDays(day, 1);
-    return isWithinInterval(nextDay, { start: startDate, end: endDate });
-  }
-  return false;
-};
-
-// Helper func to determine active date ranges based on user selection
-export const getActiveDateRange = (range, currentDate) => {
-  const ranges = {
-    last7days: () => ({
-      start: startOfDay(subDays(currentDate, 6)),
-      end: endOfDay(currentDate),
-    }),
-    last30days: () => ({
-      start: startOfDay(subDays(currentDate, 29)),
-      end: endOfDay(currentDate),
-    }),
-    last3months: () => ({
-      start: startOfDay(subMonths(currentDate, 3)),
-      end: endOfDay(currentDate),
-    }),
-    last6months: () => ({
-      start: startOfDay(subMonths(currentDate, 6)),
-      end: endOfDay(currentDate),
-    }),
-    lastYear: () => ({
-      start: startOfDay(subMonths(currentDate, 12)),
-      end: endOfDay(currentDate),
-    }),
-    custom: () => ({ start: currentDate, end: currentDate }),
-  };
-
-  return (
-    ranges[range] || (() => ({ start: currentDate, end: currentDate }))
-  )();
-};

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

@@ -1,309 +0,0 @@
-import {
-  monthName,
-  yearName,
-  getIntlDateFormatForLocale,
-  getWeeksForMonth,
-  isToday,
-  isCurrentMonth,
-  isLastDayOfMonth,
-  dayIsInRange,
-  getActiveDateRange,
-  isHoveringDayInRange,
-  isHoveringNextDayInRange,
-  moveCalendarDate,
-  chunk,
-} from '../DatePickerHelper';
-
-describe('Date formatting functions', () => {
-  const testDate = new Date(2020, 4, 15); // May 15, 2020
-
-  beforeEach(() => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  it('returns the correct month name from a date', () => {
-    expect(monthName(testDate)).toBe('May');
-  });
-
-  it('returns the correct year from a date', () => {
-    expect(yearName(testDate)).toBe('2020');
-  });
-
-  it('returns the correct date format for the current locale en-US', () => {
-    const expected = 'MM/dd/yyyy';
-    expect(getIntlDateFormatForLocale()).toBe(expected);
-  });
-
-  it('returns the correct date format for the current locale en-IN', () => {
-    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
-    const expected = 'dd/MM/yyyy';
-    expect(getIntlDateFormatForLocale()).toBe(expected);
-  });
-});
-
-describe('chunk', () => {
-  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-  it('correctly chunks an array into smaller arrays of given size', () => {
-    const expected = [
-      [1, 2, 3],
-      [4, 5, 6],
-      [7, 8, 9],
-    ];
-    expect(chunk(array, 3)).toEqual(expected);
-  });
-
-  it('handles arrays that do not divide evenly by the chunk size', () => {
-    const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]];
-    expect(chunk(array, 2)).toEqual(expected);
-  });
-});
-
-describe('getWeeksForMonth', () => {
-  it('returns the correct weeks array for a month starting on Monday', () => {
-    const date = new Date(2020, 3, 1); // April 2020
-    const weeks = getWeeksForMonth(date, 1);
-    expect(weeks.length).toBe(6);
-    expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct
-  });
-});
-
-describe('moveCalendarDate', () => {
-  it('handles the year transition when moving the start date backward by one month from January', () => {
-    const startDate = new Date(2021, 0, 1);
-    const endDate = new Date(2021, 0, 31);
-    const result = moveCalendarDate(
-      'start',
-      startDate,
-      endDate,
-      'prev',
-      'month'
-    );
-    const expectedStartDate = new Date(2020, 11, 1);
-    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
-    expect(result.end.toISOString()).toEqual(endDate.toISOString());
-  });
-
-  it('handles the year transition when moving the start date forward by one month from January', () => {
-    const startDate = new Date(2020, 0, 1);
-    const endDate = new Date(2020, 1, 31);
-    const result = moveCalendarDate(
-      'start',
-      startDate,
-      endDate,
-      'next',
-      'month'
-    );
-    const expectedStartDate = new Date(2020, 1, 1);
-    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
-    expect(result.end.toISOString()).toEqual(endDate.toISOString());
-  });
-
-  it('handles the year transition when moving the end date forward by one month from December', () => {
-    const startDate = new Date(2021, 11, 1);
-    const endDate = new Date(2021, 11, 31);
-    const result = moveCalendarDate('end', startDate, endDate, 'next', 'month');
-    const expectedEndDate = new Date(2022, 0, 31);
-    expect(result.start).toEqual(startDate);
-    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
-  });
-  it('handles the year transition when moving the end date backward by one month from December', () => {
-    const startDate = new Date(2021, 11, 1);
-    const endDate = new Date(2021, 11, 31);
-    const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month');
-    const expectedEndDate = new Date(2021, 10, 30);
-
-    expect(result.start).toEqual(startDate);
-    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
-  });
-});
-
-describe('isToday', () => {
-  it('returns true if the dates are the same', () => {
-    const today = new Date();
-    const alsoToday = new Date(today);
-    expect(isToday(today, alsoToday)).toBeTruthy();
-  });
-
-  it('returns false if the dates are not the same', () => {
-    const today = new Date();
-    const notToday = new Date(
-      today.getFullYear(),
-      today.getMonth(),
-      today.getDate() - 1
-    );
-    expect(isToday(today, notToday)).toBeFalsy();
-  });
-});
-
-describe('isCurrentMonth', () => {
-  const referenceDate = new Date(2020, 6, 15); // July 15, 2020
-
-  it('returns true if the day is in the same month as the reference date', () => {
-    const testDay = new Date(2020, 6, 1);
-    expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy();
-  });
-
-  it('returns false if the day is not in the same month as the reference date', () => {
-    const testDay = new Date(2020, 5, 30);
-    expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy();
-  });
-});
-
-describe('isLastDayOfMonth', () => {
-  it('returns true if the day is the last day of the month', () => {
-    const testDay = new Date(2020, 6, 31); // July 31, 2020
-    expect(isLastDayOfMonth(testDay)).toBeTruthy();
-  });
-
-  it('returns false if the day is not the last day of the month', () => {
-    const testDay = new Date(2020, 6, 30); // July 30, 2020
-    expect(isLastDayOfMonth(testDay)).toBeFalsy();
-  });
-});
-
-describe('dayIsInRange', () => {
-  it('returns true if the date is within the range', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 15);
-    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
-  });
-
-  it('returns true if the date is the same as the start date', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 10);
-    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
-  });
-
-  it('returns false if the date is outside the range', () => {
-    const start = new Date(2020, 1, 10);
-    const end = new Date(2020, 1, 20);
-    const testDate = new Date(2020, 1, 9);
-    expect(dayIsInRange(testDate, start, end)).toBeFalsy();
-  });
-});
-
-describe('isHoveringDayInRange', () => {
-  const startDate = new Date(2020, 6, 10);
-  const endDate = new Date(2020, 6, 20);
-  const hoveredEndDate = new Date(2020, 6, 15);
-
-  it('returns true if the day is within the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 12);
-    expect(
-      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
-    ).toBeTruthy();
-  });
-
-  it('returns false if the day is outside the hovered date range', () => {
-    const testDay = new Date(2020, 6, 16);
-    expect(
-      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
-    ).toBeFalsy();
-  });
-});
-
-describe('isHoveringNextDayInRange', () => {
-  const startDate = new Date(2020, 6, 10);
-  const hoveredEndDate = new Date(2020, 6, 15);
-
-  it('returns true if the next day after the given day is within the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 14);
-    expect(
-      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
-    ).toBeTruthy();
-  });
-
-  it('returns false if the next day is outside the start and hovered end dates', () => {
-    const testDay = new Date(2020, 6, 15);
-    expect(
-      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
-    ).toBeFalsy();
-  });
-});
-
-describe('getActiveDateRange', () => {
-  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
-
-  beforeAll(() => {
-    // Mocking the current date to ensure consistency in tests
-    jest.useFakeTimers().setSystemTime(currentDate.getTime());
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('returns the correct range for "last7days"', () => {
-    const range = getActiveDateRange('last7days', new Date());
-    const expectedStart = new Date(2020, 5, 9);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last30days"', () => {
-    const range = getActiveDateRange('last30days', new Date());
-    const expectedStart = new Date(2020, 4, 17);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last3months"', () => {
-    const range = getActiveDateRange('last3months', new Date());
-    const expectedStart = new Date(2020, 2, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "last6months"', () => {
-    const range = getActiveDateRange('last6months', new Date());
-    const expectedStart = new Date(2019, 11, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "lastYear"', () => {
-    const range = getActiveDateRange('lastYear', new Date());
-    const expectedStart = new Date(2019, 5, 15);
-    expectedStart.setHours(0, 0, 0, 0);
-    const expectedEnd = new Date();
-    expectedEnd.setHours(23, 59, 59, 999);
-
-    expect(range.start).toEqual(expectedStart);
-    expect(range.end).toEqual(expectedEnd);
-  });
-
-  it('returns the correct range for "custom date range"', () => {
-    const range = getActiveDateRange('custom', new Date());
-    expect(range.start).toEqual(new Date(currentDate));
-    expect(range.end).toEqual(new Date(currentDate));
-  });
-
-  it('handles an unknown range label gracefully', () => {
-    const range = getActiveDateRange('unknown', new Date());
-    expect(range.start).toEqual(new Date(currentDate));
-    expect(range.end).toEqual(new Date(currentDate));
-  });
-});

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

@@ -1,24 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-<template>
-  <div class="relative group w-[inherit] whitespace-normal z-20">
-    <fluent-icon
-      icon="info"
-      size="14"
-      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
-    />
-    <div
-      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
-    >
-      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
-        {{ message }}
-      </p>
-    </div>
-  </div>
-</template>

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

@@ -40,7 +40,8 @@ import AIAssistanceModal from './AIAssistanceModal.vue';
 import adminMixin from 'dashboard/mixins/aiMixin';
 import aiMixin from 'dashboard/mixins/isAdmin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
@@ -50,7 +51,7 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
-  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
+  mixins: [aiMixin, eventListenerMixins, adminMixin, uiSettingsMixin],
   data: () => ({
     showAIAssistanceModal: false,
     showAICtaModal: false,
@@ -86,17 +87,14 @@ export default {
   },
 
   methods: {
-    getKeyboardEvents() {
-      return {
-        '$mod+KeyZ': {
-          action: () => {
-            if (this.initialMessage) {
-              this.$emit('replace-text', this.initialMessage);
-              this.initialMessage = '';
-            }
-          },
-        },
-      };
+    onKeyDownHandler(event) {
+      const keyPattern = buildHotKeys(event);
+      const shouldRevertTheContent =
+        ['meta+z', 'ctrl+z'].includes(keyPattern) && !!this.initialMessage;
+      if (shouldRevertTheContent) {
+        this.$emit('replace-text', this.initialMessage);
+        this.initialMessage = '';
+      }
     },
     hideAIAssistanceModal() {
       this.recordAnalytics('DISMISS_AI_SUGGESTION', {

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

@@ -1,17 +1,17 @@
 <template>
-  <div class="flex overflow-auto max-h-[12.5rem]">
+  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
     <div
-      v-for="(attachment, index) in nonRecordedAudioAttachments"
+      v-for="(attachment, index) in attachments"
       :key="attachment.id"
       class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
           v-if="isTypeImage(attachment.resource)"
-          class="object-cover w-6 h-6 rounded-sm"
+          class="image-thumb"
           :src="attachment.thumb"
         />
-        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
+        <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
           📄
         </span>
       </div>
@@ -23,62 +23,73 @@
         </span>
       </div>
       <div class="w-[30%] justify-center">
-        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
+        <span
+          class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
+        >
           {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
       <div class="flex items-center justify-center">
         <woot-button
-          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
+          v-if="!isTypeAudio(attachment.resource)"
+          class="remove--attachment clear secondary"
           icon="dismiss"
-          @click="onRemoveAttachment(index)"
+          @click="() => onRemoveAttachment(index)"
         />
       </div>
     </div>
   </div>
 </template>
-
-<script setup>
-import { computed } from 'vue';
+<script>
 import { formatBytes } from 'shared/helpers/FileHelper';
-
-const props = defineProps({
-  attachments: {
-    type: Array,
-    default: () => [],
+export default {
+  props: {
+    attachments: {
+      type: Array,
+      default: () => [],
+    },
+    removeAttachment: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  methods: {
+    onRemoveAttachment(index) {
+      this.removeAttachment(index);
+    },
+    formatFileSize(file) {
+      const size = file.byte_size || file.size;
+      return formatBytes(size, 0);
+    },
+    isTypeImage(file) {
+      const type = file.content_type || file.type;
+      return type.includes('image');
+    },
+    isTypeAudio(file) {
+      const type = file.content_type || file.type;
+      return type.includes('audio');
+    },
+    fileName(file) {
+      return file.filename || file.name;
+    },
   },
-});
-
-const emits = defineEmits(['remove-attachment']);
-
-const nonRecordedAudioAttachments = computed(() => {
-  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
-});
-
-const recordedAudioAttachments = computed(() =>
-  props.attachments.filter(attachment => attachment.isRecordedAudio)
-);
-
-const onRemoveAttachment = itemIndex => {
-  emits(
-    'remove-attachment',
-    nonRecordedAudioAttachments.value
-      .filter((_, index) => index !== itemIndex)
-      .concat(recordedAudioAttachments.value)
-  );
-};
-
-const formatFileSize = file => {
-  const size = file.byte_size || file.size;
-  return formatBytes(size, 0);
-};
-
-const isTypeImage = file => {
-  const type = file.content_type || file.type;
-  return type.includes('image');
-};
-
-const fileName = file => {
-  return file.filename || file.name;
 };
 </script>
+<style lang="scss" scoped>
+.image-thumb {
+  @apply w-6 h-6 object-cover rounded-sm;
+}
+
+.file-name-wrap,
+.file-size-wrap {
+  @apply flex items-center py-0 px-1;
+
+  > .item {
+    @apply m-0 overflow-hidden text-xs font-medium;
+  }
+}
+
+.remove--attachment {
+  @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
+}
+</style>

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

@@ -10,10 +10,11 @@
 </template>
 <script>
 import wootConstants from 'dashboard/constants/globals';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import { hasPressedAltAndNKey } from 'shared/helpers/KeyboardHelpers';
 
 export default {
-  mixins: [keyboardEventListenerMixins],
+  mixins: [eventListenerMixins],
   props: {
     items: {
       type: Array,
@@ -30,18 +31,14 @@ export default {
     },
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyN': {
-          action: () => {
-            if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
-              this.onTabChange(0);
-            } else {
-              this.onTabChange(this.activeTabIndex + 1);
-            }
-          },
-        },
-      };
+    handleKeyEvents(e) {
+      if (hasPressedAltAndNKey(e)) {
+        if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
+          this.onTabChange(0);
+        } else {
+          this.onTabChange(this.activeTabIndex + 1);
+        }
+      }
     },
     onTabChange(selectedTabIndex) {
       if (this.items[selectedTabIndex].key !== this.activeTab) {

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

@@ -18,11 +18,13 @@
 
 <script>
 import { Chrome } from 'vue-color';
+import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
+  mixins: [clickaway],
   props: {
     value: {
       type: String,

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

@@ -31,9 +31,15 @@
 
 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
+import {
+  buildHotKeys,
+  isEscape,
+  isActiveElementTypeable,
+} from 'shared/helpers/KeyboardHelpers';
 
 export default {
   components: {
@@ -41,7 +47,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [adminMixin, keyboardEventListenerMixins],
+  mixins: [clickaway, adminMixin, eventListenerMixins],
 
   props: {
     allLabels: {
@@ -82,19 +88,17 @@ export default {
     closeDropdownLabel() {
       this.showSearchDropdownLabel = false;
     },
-    getKeyboardEvents() {
-      return {
-        KeyL: {
-          action: e => {
-            this.toggleLabels();
-            e.preventDefault();
-          },
-        },
-        Escape: {
-          action: () => this.closeDropdownLabel(),
-          allowOnFocusedInput: true,
-        },
-      };
+
+    handleKeyEvents(e) {
+      const keyPattern = buildHotKeys(e);
+
+      if (keyPattern === 'l' && !isActiveElementTypeable(e)) {
+        this.toggleLabels();
+        e.preventDefault();
+      } else if (isEscape(e) && this.showSearchDropdownLabel) {
+        this.closeDropdownLabel();
+        e.preventDefault();
+      }
     },
   },
 };

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

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
 
@@ -29,25 +28,9 @@ import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-
 
 import { format, addSeconds } from 'date-fns';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
-import { convertWavToMp3 } from './utils/mp3ConversionUtils';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
-const RECORDER_CONFIG = {
-  [AUDIO_FORMATS.WAV]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.MP3]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.OGG]: {
-    audioMimeType: 'audio/ogg',
-    audioWorkerURL: encoderWorker,
-  },
-};
-
 export default {
   name: 'WootAudioRecorder',
   mixins: [alertMixin],
@@ -56,10 +39,6 @@ export default {
       type: String,
       default: AUDIO_FORMATS.WAV,
     },
-    isAWhatsAppChannel: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -109,7 +88,14 @@ export default {
             audioSampleRate: 48000,
             audioBitRate: 128,
             audioEngine: 'opus-recorder',
-            ...RECORDER_CONFIG[this.audioRecordFormat],
+            ...(this.audioRecordFormat === AUDIO_FORMATS.WAV && {
+              audioMimeType: 'audio/wav',
+              audioWorkerURL: waveWorker,
+            }),
+            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
+              audioMimeType: 'audio/ogg',
+              audioWorkerURL: encoderWorker,
+            }),
           },
         },
       },
@@ -147,11 +133,7 @@ export default {
   methods: {
     deviceReady() {
       if (this.player.record().engine instanceof OpusRecorderEngine) {
-        if (
-          [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes(
-            this.audioRecordFormat
-          )
-        ) {
+        if (this.audioRecordFormat === AUDIO_FORMATS.WAV) {
           this.player.record().engine.audioType = 'audio/wav';
         }
       }
@@ -163,16 +145,12 @@ export default {
     stopRecord() {
       this.fireStateRecorderChanged('stopped');
     },
-    async finishRecord() {
-      let recordedContent = this.player.recordedData;
-      let fileName = this.player.recordedData.name;
-      let type = this.player.recordedData.type;
-      if (this.audioRecordFormat === AUDIO_FORMATS.MP3) {
-        recordedContent = await convertWavToMp3(this.player.recordedData);
-        fileName = `${getUuid()}.mp3`;
-        type = AUDIO_FORMATS.MP3;
-      }
-      const file = new File([recordedContent], fileName, { type });
+    finishRecord() {
+      const file = new File(
+        [this.player.recordedData],
+        this.player.recordedData.name,
+        { type: this.player.recordedData.type }
+      );
       this.fireRecorderBlob(file);
     },
     progressRecord() {
@@ -253,20 +231,7 @@ export default {
     @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
   }
 }
-
-// Added to override the default text and bg style to support dark and light mode.
-.video-js .vjs-control-bar,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:before {
-  @apply text-slate-600 dark:text-slate-200 bg-transparent dark:bg-transparent;
-}
-
-// Added to fix  div overlays the screen and takes over the button clicks
-// https://github.com/collab-project/videojs-record/issues/688
-// https://github.com/collab-project/videojs-record/pull/709
-.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden,
-.vjs-record.video-js .vjs-control.vjs-record-indicator,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:before,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:after {
-  @apply pointer-events-none;
+.video-js .vjs-control-bar {
+  background-color: transparent;
 }
 </style>

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

@@ -78,8 +78,10 @@ const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 import {
   hasPressedEnterAndNotCmdOrShift,
   hasPressedCommandAndEnter,
+  hasPressedAltAndPKey,
+  hasPressedAltAndLKey,
 } from 'shared/helpers/KeyboardHelpers';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import {
@@ -119,7 +121,7 @@ const createState = (
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -520,21 +522,13 @@ export default {
     isCmdPlusEnterToSendEnabled() {
       return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
     },
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyP': {
-          action: () => {
-            this.focusEditorInputField();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyL': {
-          action: () => {
-            this.focusEditorInputField();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
+    handleKeyEvents(e) {
+      if (hasPressedAltAndPKey(e)) {
+        this.focusEditorInputField();
+      }
+      if (hasPressedAltAndLKey(e)) {
+        this.focusEditorInputField();
+      }
     },
     focusEditorInputField(pos = 'end') {
       const { tr } = this.editorView.state;

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

@@ -25,7 +25,7 @@ import {
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import alertMixin from 'shared/mixins/alertMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
@@ -51,7 +51,7 @@ const createState = (
 };
 
 export default {
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },

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

@@ -136,7 +136,8 @@
 <script>
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import { hasPressedAltAndAKey } from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -153,7 +154,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'ReplyBottomPanel',
   components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
+  mixins: [eventListenerMixins, uiSettingsMixin, inboxMixin],
   props: {
     mode: {
       type: String,
@@ -339,15 +340,10 @@ export default {
     ActiveStorage.start();
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyA': {
-          action: () => {
-            this.$refs.upload.$children[1].$el.click();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
+    handleKeyEvents(e) {
+      if (hasPressedAltAndAKey(e)) {
+        this.$refs.upload.$children[1].$el.click();
+      }
     },
     toggleMessageSignature() {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
+  <div class="bg-black-50 flex justify-between dark:bg-slate-800">
     <div class="button-group">
       <woot-button
         variant="clear"
@@ -20,7 +20,7 @@
         {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
       </woot-button>
     </div>
-    <div class="flex items-center mx-4 my-0">
+    <div class="flex items-center my-0 mx-4">
       <div v-if="isMessageLengthReachingThreshold" class="text-xs">
         <span :class="charLengthClass">
           {{ characterLengthWarning }}
@@ -48,10 +48,14 @@
 
 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import {
+  hasPressedAltAndPKey,
+  hasPressedAltAndLKey,
+} from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 export default {
   name: 'ReplyTopPanel',
-  mixins: [keyboardEventListenerMixins],
+  mixins: [eventListenerMixins],
   props: {
     mode: {
       type: String,
@@ -95,17 +99,13 @@ export default {
     },
   },
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyP': {
-          action: () => this.handleNoteClick(),
-          allowOnFocusedInput: true,
-        },
-        'Alt+KeyL': {
-          action: () => this.handleReplyClick(),
-          allowOnFocusedInput: true,
-        },
-      };
+    handleKeyEvents(e) {
+      if (hasPressedAltAndPKey(e)) {
+        this.handleNoteClick();
+      }
+      if (hasPressedAltAndLKey(e)) {
+        this.handleReplyClick();
+      }
     },
     handleReplyClick() {
       this.setReplyMode(REPLY_EDITOR_MODES.REPLY);

app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -1,53 +0,0 @@
-import lamejs from 'lamejs';
-/**
- * Encodes a mono channel audio stream to MP3 format.
- * @param {number} channels - Number of audio channels.
- * @param {number} sampleRate - Sample rate in Hz.
- * @param {Int16Array} samples - Audio samples to be encoded.
- * @returns {Blob} - The MP3 encoded audio as a Blob.
- */
-export const encodeToMP3 = (channels, sampleRate, samples) => {
-  const outputBuffer = [];
-  const encoder = new lamejs.Mp3Encoder(channels, sampleRate, 128);
-  const maxSamplesPerFrame = 1152;
-
-  for (let offset = 0; offset < samples.length; offset += maxSamplesPerFrame) {
-    const sliceEnd = Math.min(offset + maxSamplesPerFrame, samples.length);
-    const sampleSlice = samples.subarray(offset, sliceEnd);
-    const mp3Buffer = encoder.encodeBuffer(sampleSlice);
-
-    if (mp3Buffer.length > 0) {
-      outputBuffer.push(new Int8Array(mp3Buffer));
-    }
-  }
-
-  const remainingData = encoder.flush();
-  if (remainingData.length > 0) {
-    outputBuffer.push(new Int8Array(remainingData));
-  }
-
-  return new Blob(outputBuffer, { type: 'audio/mp3' });
-};
-
-/**
- * Converts a WAV audio Blob to an MP3 format Blob.
- * @param {Blob} blob - The audio data in WAV format as a Blob.
- * @returns {Promise<Blob>} - A Blob containing the MP3 encoded audio.
- */
-export const convertWavToMp3 = async blob => {
-  try {
-    const audioBuffer = await blob.arrayBuffer();
-    const wavHeader = lamejs.WavHeader.readHeader(new DataView(audioBuffer));
-    const samples = new Int16Array(
-      audioBuffer,
-      wavHeader.dataOffset,
-      wavHeader.dataLen / 2
-    );
-
-    return encodeToMP3(wavHeader.channels, wavHeader.sampleRate, samples);
-  } catch (error) {
-    // eslint-disable-next-line
-    console.log('Failed to convert WAV to MP3:', error);
-    throw new Error('Conversion from WAV to MP3 failed.');
-  }
-};

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

@@ -45,6 +45,7 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -52,7 +53,7 @@ export default {
   components: {
     FilterItem,
   },
-  mixins: [uiSettingsMixin],
+  mixins: [clickaway, uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,

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

@@ -2,7 +2,7 @@
   <div
     class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
         isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,

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

@@ -77,10 +77,11 @@
   </div>
 </template>
 <script>
+import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
@@ -98,7 +99,7 @@ export default {
     Thumbnail,
     SLACardLabel,
   },
-  mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
+  mixins: [inboxMixin, agentMixin, eventListenerMixins],
   props: {
     chat: {
       type: Object,
@@ -181,12 +182,10 @@ export default {
   },
 
   methods: {
-    getKeyboardEvents() {
-      return {
-        'Alt+KeyO': {
-          action: () => this.$emit('contact-panel-toggle'),
-        },
-      };
+    handleKeyEvents(e) {
+      if (hasPressedAltAndOKey(e)) {
+        this.$emit('contact-panel-toggle');
+      }
     },
   },
 };

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

@@ -14,7 +14,11 @@
           @click="retrySendMessage"
         />
       </div>
-      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
+      <div
+        v-tooltip.top-start="messageToolTip"
+        :class="bubbleClass"
+        @contextmenu="openContextMenu($event)"
+      >
         <bubble-mail-head
           :email-attributes="contentAttributes.email"
           :cc="emailHeadAttributes.cc"
@@ -86,7 +90,7 @@
           :id="data.id"
           :sender="data.sender"
           :story-sender="storySender"
-          :external-error="errorMessageTooltip"
+          :external-error="externalError"
           :story-id="`${storyId}`"
           :is-a-tweet="isATweet"
           :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -408,11 +412,14 @@ export default {
           }
         : false;
     },
-    errorMessageTooltip() {
+    messageToolTip() {
+      if (this.isMessageDeleted) {
+        return false;
+      }
       if (this.isFailed) {
         return this.externalError || this.$t(`CONVERSATION.SEND_FAILED`);
       }
-      return '';
+      return false;
     },
     wrapClass() {
       return {

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

@@ -116,12 +116,13 @@ import conversationMixin, {
 } from '../../../mixins/conversations';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import configMixin from 'shared/mixins/configMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';
 
 // utils
 import { getTypingUsersText } from '../../../helper/commons';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
+import { isEscape } from 'shared/helpers/KeyboardHelpers';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
 // constants
@@ -140,7 +141,7 @@ export default {
   mixins: [
     conversationMixin,
     inboxMixin,
-    keyboardEventListenerMixins,
+    eventListenerMixins,
     configMixin,
     aiMixin,
   ],
@@ -417,12 +418,10 @@ export default {
     closePopoutReplyBox() {
       this.isPopoutReplyBox = false;
     },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => this.closePopoutReplyBox(),
-        },
-      };
+    handleKeyEvents(e) {
+      if (isEscape(e)) {
+        this.closePopoutReplyBox();
+      }
     },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');

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

@@ -37,6 +37,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -51,7 +52,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, clickaway],
   data() {
     return {
       showEmailActionsModal: false,

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

@@ -100,7 +100,7 @@
       <attachment-preview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
+        :remove-attachment="removeAttachment"
       />
     </div>
     <message-signature-missing-alert
@@ -153,8 +153,8 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import CannedResponse from './CannedResponse.vue';
 import ReplyToMessage from './ReplyToMessage.vue';
@@ -178,6 +178,7 @@ import {
   replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@@ -217,13 +218,13 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [
+    clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
     fileUploadMixin,
-    keyboardEventListenerMixins,
   ],
   props: {
     popoutReplyBox: {
@@ -501,10 +502,11 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
-        return AUDIO_FORMATS.MP3;
-      }
-      if (this.isAPIInbox) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAPIInbox ||
+        this.isATelegramChannel
+      ) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;
@@ -699,41 +701,24 @@ export default {
         this.$store.dispatch('draftMessages/delete', { key });
       }
     },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => {
-            this.hideEmojiPicker();
-            this.hideMentions();
-          },
-          allowOnFocusedInput: true,
-        },
-        '$mod+KeyK': {
-          action: e => {
-            e.preventDefault();
-            const ninja = document.querySelector('ninja-keys');
-            ninja.open();
-          },
-          allowOnFocusedInput: true,
-        },
-        Enter: {
-          action: e => {
-            if (this.isAValidEvent('enter')) {
-              this.onSendReply();
-              e.preventDefault();
-            }
-          },
-          allowOnFocusedInput: true,
-        },
-        '$mod+Enter': {
-          action: () => {
-            if (this.isAValidEvent('cmd_enter')) {
-              this.onSendReply();
-            }
-          },
-          allowOnFocusedInput: true,
-        },
-      };
+    handleKeyEvents(e) {
+      const keyCode = buildHotKeys(e);
+      if (keyCode === 'escape') {
+        this.hideEmojiPicker();
+        this.hideMentions();
+      } else if (keyCode === 'meta+k') {
+        const ninja = document.querySelector('ninja-keys');
+        ninja.open();
+        e.preventDefault();
+      } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
+        this.onSendReply();
+        e.preventDefault();
+      } else if (
+        ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
+        this.isAValidEvent('cmd_enter')
+      ) {
+        this.onSendReply();
+      }
     },
     isAValidEvent(selectedKey) {
       return (
@@ -952,13 +937,6 @@ export default {
       this.bccEmails = '';
       this.toEmails = '';
     },
-    clearRecorder() {
-      this.isRecordingAudio = false;
-      // Only clear the recorded audio when we click toggle button.
-      this.attachedFiles = this.attachedFiles.filter(
-        file => !file?.isRecordedAudio
-      );
-    },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
@@ -966,7 +944,8 @@ export default {
       this.isRecordingAudio = !this.isRecordingAudio;
       this.isRecorderAudioStopped = !this.isRecordingAudio;
       if (!this.isRecordingAudio) {
-        this.clearRecorder();
+        this.clearMessage();
+        this.clearEmailField();
       }
     },
     toggleAudioRecorderPlayPause() {
@@ -1010,13 +989,7 @@ export default {
       }
     },
     onFinishRecorder(file) {
-      // Added a new key isRecordedAudio to the file to find it's and recorded audio
-      // Because to filter and show only non recorded audio and other attachments
-      const autoRecordedFile = {
-        ...file,
-        isRecordedAudio: true,
-      };
-      return file && this.onFileUpload(autoRecordedFile);
+      return file && this.onFileUpload(file);
     },
     toggleTyping(status) {
       const conversationId = this.currentChat.id;
@@ -1042,12 +1015,13 @@ export default {
           isPrivate: this.isPrivate,
           thumb: reader.result,
           blobSignedId: blob ? blob.signed_id : undefined,
-          isRecordedAudio: file?.isRecordedAudio || false,
         });
       };
     },
-    removeAttachment(attachments) {
-      this.attachedFiles = attachments;
+    removeAttachment(itemIndex) {
+      this.attachedFiles = this.attachedFiles.filter(
+        (item, index) => itemIndex !== index
+      );
     },
     setReplyToInPayload(payload) {
       if (this.inReplyTo?.id) {
@@ -1252,7 +1226,6 @@ export default {
     }
   }
 }
-
 .send-button {
   @apply mb-0;
 }
@@ -1277,7 +1250,6 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
-
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

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

@@ -9,7 +9,7 @@
           <woot-input
             v-model.trim="$v.toEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -25,7 +25,7 @@
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.ccEmailsVal.$model"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             type="text"
             :class="{ error: $v.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -54,7 +54,7 @@
           <woot-input
             v-model.trim="$v.bccEmailsVal.$model"
             type="text"
-            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')

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

@@ -75,10 +75,9 @@ export default {
   },
 
   methods: {
-    adjustScroll() {
-      this.$nextTick(() => {
-        this.$el.scrollTop = 50 * this.selectedIndex;
-      });
+    handleKeyboardEvent(e) {
+      this.processKeyDownEvent(e);
+      this.$el.scrollTop = 50 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;

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

@@ -17,7 +17,7 @@
       @error="onImgError"
       @click="onClick"
     />
-    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
+    <audio v-else-if="isAudio" controls class="skip-context-menu">
       <source :src="`${dataUrl}?t=${Date.now()}`" />
     </audio>
     <gallery-view

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

@@ -7,10 +7,8 @@
       'bg-woot-600 text-woot-50': messageType === MESSAGE_TYPE.OUTGOING,
       '-mx-2': !parentHasAttachments,
     }"
-    @click="scrollToMessage"
   >
     <message-preview
-      class="cursor-pointer"
       :message="message"
       :show-message-type="false"
       :default-empty-message="$t('CONVERSATION.REPLY_MESSAGE_NOT_FOUND')"
@@ -21,7 +19,6 @@
 <script>
 import MessagePreview from 'dashboard/components/widgets/conversation/MessagePreview.vue';
 import { MESSAGE_TYPE } from 'shared/constants/messages';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   name: 'ReplyTo',
@@ -45,10 +42,5 @@ export default {
   data() {
     return { MESSAGE_TYPE };
   },
-  methods: {
-    scrollToMessage() {
-      bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE, { messageId: this.message.id });
-    },
-  },
 };
 </script>

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

@@ -180,8 +180,14 @@
   </woot-modal>
 </template>
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import {
+  isEscape,
+  hasPressedArrowLeftKey,
+  hasPressedArrowRightKey,
+} from 'shared/helpers/KeyboardHelpers';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';
 
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -199,7 +205,7 @@ export default {
   components: {
     Thumbnail,
   },
-  mixins: [keyboardEventListenerMixins, timeMixin],
+  mixins: [eventListenerMixins, clickaway, timeMixin],
   props: {
     show: {
       type: Boolean,
@@ -298,30 +304,20 @@ export default {
       this.activeAttachment = attachment;
       this.activeFileType = type;
     },
-    getKeyboardEvents() {
-      return {
-        Escape: {
-          action: () => {
-            this.onClose();
-          },
-        },
-        ArrowLeft: {
-          action: () => {
-            this.onClickChangeAttachment(
-              this.allAttachments[this.activeImageIndex - 1],
-              this.activeImageIndex - 1
-            );
-          },
-        },
-        ArrowRight: {
-          action: () => {
-            this.onClickChangeAttachment(
-              this.allAttachments[this.activeImageIndex + 1],
-              this.activeImageIndex + 1
-            );
-          },
-        },
-      };
+    onKeyDownHandler(e) {
+      if (isEscape(e)) {
+        this.onClose();
+      } else if (hasPressedArrowLeftKey(e)) {
+        this.onClickChangeAttachment(
+          this.allAttachments[this.activeImageIndex - 1],
+          this.activeImageIndex - 1
+        );
+      } else if (hasPressedArrowRightKey(e)) {
+        this.onClickChangeAttachment(
+          this.allAttachments[this.activeImageIndex + 1],
+          this.activeImageIndex + 1
+        );
+      }
     },
     onClickDownload() {
       const { file_type: type, data_url: url } = this.activeAttachment;

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

@@ -49,8 +49,9 @@
 </template>
 
 <script>
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
 const REFRESH_INTERVAL = 60000;
 
@@ -58,6 +59,7 @@ export default {
   components: {
     SLAPopoverCard,
   },
+  mixins: [clickaway],
   props: {
     chat: {
       type: Object,
@@ -137,10 +139,7 @@ export default {
       }, REFRESH_INTERVAL);
     },
     updateSlaStatus() {
-      this.slaStatus = evaluateSLAStatus({
-        appliedSla: this.appliedSLA,
-        chat: this.chat,
-      });
+      this.slaStatus = evaluateSLAStatus(this.appliedSLA, this.chat);
     },
     openSlaPopover() {
       if (!this.showExtendedInfo) return;

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -101,12 +101,14 @@
 import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
+  mixins: [clickaway],
   props: {
     selectedInboxes: {
       type: Array,

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -95,40 +95,20 @@
     <div v-if="allConversationsSelected" class="bulk-action__alert">
       {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
     </div>
-    <woot-modal
-      :show.sync="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
-    >
-      <custom-snooze-modal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
   </div>
 </template>
 
 <script>
-import { getUnixTime } from 'date-fns';
-import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
-import wootConstants from 'dashboard/constants/globals';
-import {
-  CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-  CMD_BULK_ACTION_REOPEN_CONVERSATION,
-  CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
 import LabelActions from './LabelActions.vue';
 import TeamActions from './TeamActions.vue';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 export default {
   components: {
     AgentSelector,
     UpdateActions,
     LabelActions,
     TeamActions,
-    CustomSnoozeModal,
   },
   props: {
     conversations: {
@@ -163,56 +143,17 @@ export default {
       showLabelActions: false,
       showTeamsList: false,
       popoverPositions: {},
-      showCustomTimeSnoozeModal: false,
     };
   },
-  mounted() {
-    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() {
-    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
-    );
-  },
   methods: {
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomTimeSnoozeModal = true;
-      } else {
-        this.updateConversations('snoozed', findSnoozeTime(snoozeType) || null);
-      }
-    },
-    onCmdReopenConversation() {
-      this.updateConversations('open', null);
-    },
-    onCmdResolveConversation() {
-      this.updateConversations('resolved', null);
-    },
-    customSnoozeTime(customSnoozedTime) {
-      this.showCustomTimeSnoozeModal = false;
-      if (customSnoozedTime) {
-        this.updateConversations('snoozed', getUnixTime(customSnoozedTime));
-      }
-    },
-    hideCustomSnoozeModal() {
-      this.showCustomTimeSnoozeModal = false;
-    },
     selectAll(e) {
       this.$emit('select-all-conversations', e.target.checked);
     },
     submit(agent) {
       this.$emit('assign-agent', agent);
     },
-    updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+    updateConversations(status) {
+      this.$emit('update-conversations', status);
     },
     assignLabels(labels) {
       this.$emit('assign-labels', labels);

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -74,9 +74,11 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 
 export default {
+  mixins: [clickaway],
   data() {
     return {
       query: '',

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -59,8 +59,10 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 export default {
+  mixins: [clickaway],
   data() {
     return {
       query: '',

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -1,98 +1,12 @@
-<script setup>
-import { useI18n } from 'dashboard/composables/useI18n';
-import { ref } from 'vue';
-
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-
-const { t } = useI18n();
-
-const emits = defineEmits(['update', 'close']);
-
-const props = defineProps({
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  conversationCount: {
-    type: Number,
-    default: 0,
-  },
-  showResolve: {
-    type: Boolean,
-    default: true,
-  },
-  showReopen: {
-    type: Boolean,
-    default: true,
-  },
-  showSnooze: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const actions = ref([
-  { icon: 'checkmark', key: 'resolved' },
-  { icon: 'arrow-redo', key: 'open' },
-  { icon: 'send-clock', key: 'snoozed' },
-]);
-
-const updateConversations = key => {
-  if (key === 'snoozed') {
-    // If the user clicks on the snooze option from the bulk action change status dropdown.
-    // Open the snooze option for bulk action in the cmd bar.
-    const ninja = document.querySelector('ninja-keys');
-    ninja?.open({ parent: 'bulk_action_snooze_conversation' });
-  } else {
-    emits('update', key);
-  }
-};
-
-const onClose = () => {
-  emits('close');
-};
-
-const showAction = key => {
-  const actionsMap = {
-    resolved: props.showResolve,
-    open: props.showReopen,
-    snoozed: props.showSnooze,
-  };
-  return actionsMap[key] || false;
-};
-
-const actionLabel = key => {
-  const labelsMap = {
-    resolved: t('CONVERSATION.HEADER.RESOLVE_ACTION'),
-    open: t('CONVERSATION.HEADER.REOPEN_ACTION'),
-    snoozed: t('BULK_ACTION.UPDATE.SNOOZE_UNTIL'),
-  };
-  return labelsMap[key] || '';
-};
-</script>
-
 <template>
-  <div
-    v-on-clickaway="onClose"
-    class="absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md"
-  >
-    <div
-      class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
-    >
+  <div v-on-clickaway="onClose" class="actions-container">
+    <div class="triangle">
       <svg height="12" viewBox="0 0 24 12" width="24">
-        <path
-          d="M20 12l-8-8-12 12"
-          fill-rule="evenodd"
-          stroke-width="1px"
-          class="fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50"
-        />
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="p-2.5 flex gap-1 items-center justify-between">
-      <span class="text-sm font-medium text-slate-600 dark:text-slate-100">
-        {{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}
-      </span>
+    <div class="header flex items-center justify-between">
+      <span>{{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}</span>
       <woot-button
         size="tiny"
         variant="clear"
@@ -101,8 +15,8 @@ const actionLabel = key => {
         @click="onClose"
       />
     </div>
-    <div class="px-2.5 pt-0 pb-2.5">
-      <woot-dropdown-menu class="m-0 list-none">
+    <div class="container">
+      <woot-dropdown-menu>
         <template v-for="action in actions">
           <woot-dropdown-item v-if="showAction(action.key)" :key="action.key">
             <woot-button
@@ -120,3 +34,116 @@ const actionLabel = key => {
     </div>
   </div>
 </template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+
+export default {
+  components: {
+    WootDropdownItem,
+    WootDropdownMenu,
+  },
+  mixins: [clickaway],
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+    showResolve: {
+      type: Boolean,
+      default: true,
+    },
+    showReopen: {
+      type: Boolean,
+      default: true,
+    },
+    showSnooze: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      query: '',
+      selectedAction: null,
+      actions: [
+        {
+          icon: 'checkmark',
+          key: 'resolved',
+        },
+        {
+          icon: 'arrow-redo',
+          key: 'open',
+        },
+        {
+          icon: 'send-clock',
+          key: 'snoozed',
+        },
+      ],
+    };
+  },
+  methods: {
+    updateConversations(key) {
+      this.$emit('update', key);
+    },
+    goBack() {
+      this.selectedAgent = null;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    showAction(key) {
+      const actionsMap = {
+        resolved: this.showResolve,
+        open: this.showReopen,
+        snoozed: this.showSnooze,
+      };
+      return actionsMap[key] || false;
+    },
+    actionLabel(key) {
+      const labelsMap = {
+        resolved: this.$t('CONVERSATION.HEADER.RESOLVE_ACTION'),
+        open: this.$t('CONVERSATION.HEADER.REOPEN_ACTION'),
+        snoozed: this.$t('BULK_ACTION.UPDATE.SNOOZE_UNTIL_NEXT_REPLY'),
+      };
+      return labelsMap[key] || '';
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.actions-container {
+  @apply absolute right-2 top-12 origin-top-right w-auto z-20 bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
+
+  .header {
+    @apply p-2.5;
+
+    span {
+      @apply text-sm font-medium;
+    }
+  }
+  .container {
+    @apply px-2.5 pt-0 pb-2.5;
+  }
+
+  .triangle {
+    right: var(--triangle-position);
+    @apply block z-10 absolute text-left -top-3;
+
+    svg path {
+      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+    }
+  }
+}
+
+ul {
+  @apply m-0 list-none;
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/helpers/SLAHelper.js

@@ -0,0 +1,117 @@
+const calculateThreshold = (timeOffset, threshold) => {
+  // Calculate the time left for the SLA to breach or the time since the SLA has missed
+  if (threshold === null) return null;
+  const currentTime = Math.floor(Date.now() / 1000);
+  return timeOffset + threshold - currentTime;
+};
+
+const findMostUrgentSLAStatus = SLAStatuses => {
+  // Sort the SLAs based on the threshold and return the most urgent SLA
+  SLAStatuses.sort(
+    (sla1, sla2) => Math.abs(sla1.threshold) - Math.abs(sla2.threshold)
+  );
+  return SLAStatuses[0];
+};
+
+const formatSLATime = seconds => {
+  const units = {
+    y: 31536000, // 60 * 60 * 24 * 365
+    mo: 2592000, // 60 * 60 * 24 * 30
+    d: 86400, // 60 * 60 * 24
+    h: 3600, // 60 * 60
+    m: 60,
+  };
+
+  if (seconds < 60) {
+    return '1m';
+  }
+
+  // we will only show two parts, two max granularity's, h-m, y-d, d-h, m, but no seconds
+  const parts = [];
+
+  Object.keys(units).forEach(unit => {
+    const value = Math.floor(seconds / units[unit]);
+    if (seconds < 60 && parts.length > 0) return;
+    if (parts.length === 2) return;
+    if (value > 0) {
+      parts.push(value + unit);
+      seconds -= value * units[unit];
+    }
+  });
+  return parts.join(' ');
+};
+
+const createSLAObject = (
+  type,
+  {
+    sla_first_response_time_threshold: frtThreshold,
+    sla_next_response_time_threshold: nrtThreshold,
+    sla_resolution_time_threshold: rtThreshold,
+    created_at: createdAt,
+  } = {},
+  {
+    first_reply_created_at: firstReplyCreatedAt,
+    waiting_since: waitingSince,
+    status,
+  } = {}
+) => {
+  // Mapping of breach types to their logic
+  const SLATypes = {
+    FRT: {
+      threshold: calculateThreshold(createdAt, frtThreshold),
+      //   Check FRT only if threshold is not null and first reply hasn't been made
+      condition:
+        frtThreshold !== null &&
+        (!firstReplyCreatedAt || firstReplyCreatedAt === 0),
+    },
+    NRT: {
+      threshold: calculateThreshold(waitingSince, nrtThreshold),
+      // Check NRT only if threshold is not null, first reply has been made and we are waiting since
+      condition:
+        nrtThreshold !== null && !!firstReplyCreatedAt && !!waitingSince,
+    },
+    RT: {
+      threshold: calculateThreshold(createdAt, rtThreshold),
+      // Check RT only if the conversation is open and threshold is not null
+      condition: status === 'open' && rtThreshold !== null,
+    },
+  };
+
+  const SLAStatus = SLATypes[type];
+  return SLAStatus ? { ...SLAStatus, type } : null;
+};
+
+const evaluateSLAConditions = (appliedSla, chat) => {
+  // Filter out the SLA based on conditions and update the object with the breach status(icon, isSlaMissed)
+  const SLATypes = ['FRT', 'NRT', 'RT'];
+  return SLATypes.map(type => createSLAObject(type, appliedSla, chat))
+    .filter(SLAStatus => SLAStatus && SLAStatus.condition)
+    .map(SLAStatus => ({
+      ...SLAStatus,
+      icon: SLAStatus.threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: SLAStatus.threshold <= 0,
+    }));
+};
+
+export const evaluateSLAStatus = (appliedSla, chat) => {
+  if (!appliedSla || !chat)
+    return { type: '', threshold: '', icon: '', isSlaMissed: false };
+
+  // Filter out the SLA and create the object for each breach
+  const SLAStatuses = evaluateSLAConditions(appliedSla, chat);
+
+  // Return the most urgent SLA which is latest to breach or has missed
+  const mostUrgent = findMostUrgentSLAStatus(SLAStatuses);
+  return mostUrgent
+    ? {
+        type: mostUrgent.type,
+        threshold: formatSLATime(
+          mostUrgent.threshold <= 0
+            ? -mostUrgent.threshold
+            : mostUrgent.threshold
+        ),
+        icon: mostUrgent.icon,
+        isSlaMissed: mostUrgent.isSlaMissed,
+      }
+    : { type: '', threshold: '', icon: '', isSlaMissed: false };
+};

app/javascript/dashboard/components/widgets/conversation/helpers/specs/SLAHelper.spec.js

@@ -0,0 +1,150 @@
+import { evaluateSLAStatus } from '../SLAHelper';
+
+beforeEach(() => {
+  jest
+    .spyOn(Date, 'now')
+    .mockImplementation(() => new Date('2024-01-01T00:00:00Z').getTime());
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('SLAHelper', () => {
+  describe('evaluateSLAStatus', () => {
+    it('returns an empty object when sla or chat is not present', () => {
+      expect(evaluateSLAStatus(null, null)).toEqual({
+        type: '',
+        threshold: '',
+        icon: '',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when FRT SLA is missed
+    it('correctly identifies a missed FRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066540,
+      };
+      const chatMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when FRT SLA is not missed
+    it('correctly identifies an FRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066660,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when NRT SLA is missed
+    it('correctly identifies a missed NRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704065940,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when NRT SLA is not missed
+    it('correctly identifies an NRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200 - 2000,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704066060,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when RT SLA is missed
+    it('correctly identifies a missed RT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065340,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when RT SLA is not missed
+    it('correctly identifies an RT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065460,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+  });
+});

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -15,7 +15,6 @@
     <span v-if="error" class="message">
       {{ error }}
     </span>
-    <slot name="masked" />
   </label>
 </template>
 

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -1,16 +1,9 @@
 <template>
   <div class="phone-input--wrap relative">
-    <div
-      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
-      :class="
-        error
-          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
-          : 'mb-4 border-slate-200 dark:border-slate-600'
-      "
-    >
+    <div class="phone-input" :class="{ 'has-error': error }">
       <div
         class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
-        @click.prevent="toggleCountryDropdown"
+        @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry" class="mb-0">
           {{ activeCountry.emoji }}
@@ -20,15 +13,14 @@
       </div>
       <span
         v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+        class="flex bg-white dark:bg-slate-900 font-medium text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
       >
         {{ activeDialCode }}
       </span>
       <input
-        ref="phoneNumberInput"
         :value="phoneNumber"
         type="tel"
-        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
+        class="phone-input--field"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -36,36 +28,24 @@
         @blur="onBlur"
       />
     </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="onOutsideClick"
-      tabindex="0"
-      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
-      @keydown.prevent.up="moveUp"
-      @keydown.prevent.down="moveDown"
-      @keydown.prevent.enter="
-        onSelectCountry(filteredCountriesBySearch[selectedIndex])
-      "
-    >
-      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
+    <div v-if="showDropdown" ref="dropdown" class="country-dropdown">
+      <div class="dropdown-search--wrap">
         <input
           ref="searchbar"
           v-model="searchCountry"
           type="text"
           placeholder="Search"
-          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
-          @input="onSearchCountry"
+          class="dropdown-search"
         />
       </div>
       <div
         v-for="(country, index) in filteredCountriesBySearch"
         ref="dropdownItem"
         :key="index"
-        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="country-dropdown--item"
         :class="{
-          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
-          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
+          active: country.id === activeCountryCode,
+          focus: index === selectedIndex,
         }"
         @click="onSelectCountry(country)"
       >
@@ -94,8 +74,15 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import {
+  hasPressedArrowUpKey,
+  hasPressedArrowDownKey,
+  isEnter,
+} from 'shared/helpers/KeyboardHelpers';
 
 export default {
+  mixins: [eventListenerMixins],
   props: {
     value: {
       type: [String, Number],
@@ -120,6 +107,15 @@ export default {
   },
   data() {
     return {
+      countries: [
+        {
+          name: 'Select Country',
+          dial_code: '',
+          emoji: '',
+          id: '',
+        },
+        ...countries,
+      ],
       selectedIndex: -1,
       showDropdown: false,
       searchCountry: '',
@@ -129,20 +125,6 @@ export default {
     };
   },
   computed: {
-    countries() {
-      return [
-        {
-          name: this.dropdownFirstItemName,
-          dial_code: '',
-          emoji: '',
-          id: '',
-        },
-        ...countries,
-      ];
-    },
-    dropdownFirstItemName() {
-      return this.activeCountryCode ? 'Clear selection' : 'Select Country';
-    },
     filteredCountriesBySearch() {
       return this.countries.filter(country => {
         const { name, dial_code, id } = country;
@@ -177,8 +159,12 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('mouseup', this.onOutsideClick);
     this.setActiveCountry();
   },
+  beforeDestroy() {
+    window.removeEventListener('mouseup', this.onOutsideClick);
+  },
   methods: {
     onOutsideClick(e) {
       if (
@@ -196,42 +182,49 @@ export default {
     onBlur(e) {
       this.$emit('blur', e.target.value);
     },
-    onSearchCountry() {
-      // Reset selected index to 0
-      this.selectedIndex = 0;
-    },
-    moveUp() {
-      if (!this.showDropdown) return;
-      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-      this.scrollToSelected();
-    },
-    moveDown() {
-      if (!this.showDropdown) return;
-      this.selectedIndex = Math.min(
-        this.selectedIndex + 1,
-        this.filteredCountriesBySearch.length - 1
+    dropdownItem() {
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll(
+          'div.country-dropdown div.country-dropdown--item'
+        )
       );
-      this.scrollToSelected();
     },
-    scrollToSelected() {
-      this.$nextTick(() => {
-        const dropdown = this.$refs.dropdown;
-        const selectedItem = this.$refs.dropdownItem[this.selectedIndex];
-        const dropdownSearchbarHeight = 40;
-        if (selectedItem) {
-          const selectedItemTop = selectedItem.offsetTop;
-          dropdown.scrollTop = selectedItemTop - dropdownSearchbarHeight;
+    focusedItem() {
+      return Array.from(
+        this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
+      );
+    },
+    focusedItemIndex() {
+      return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
+    },
+    onKeyDownHandler(e) {
+      const { showDropdown, filteredCountriesBySearch, onSelectCountry } = this;
+      const { selectedIndex } = this;
+
+      if (showDropdown) {
+        if (hasPressedArrowDownKey(e)) {
+          e.preventDefault();
+          this.selectedIndex = Math.min(
+            selectedIndex + 1,
+            filteredCountriesBySearch.length - 1
+          );
+          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28;
+        } else if (hasPressedArrowUpKey(e)) {
+          e.preventDefault();
+          this.selectedIndex = Math.max(selectedIndex - 1, 0);
+          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+        } else if (isEnter(e)) {
+          e.preventDefault();
+          onSelectCountry(filteredCountriesBySearch[selectedIndex]);
         }
-      });
+      }
     },
     onSelectCountry(country) {
-      if (!country || !this.showDropdown) return;
       this.activeCountryCode = country.id;
       this.searchCountry = '';
       this.activeDialCode = country.dial_code;
       this.$emit('setCode', country.dial_code);
       this.closeDropdown();
-      this.$refs.phoneNumberInput.focus();
     },
     setActiveCountry() {
       const { phoneNumber } = this;
@@ -258,3 +251,46 @@ export default {
   },
 };
 </script>
+<style scoped lang="scss">
+.phone-input--wrap {
+  .phone-input {
+    @apply flex items-center dark:bg-slate-900 justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
+
+    &.has-error {
+      @apply border border-solid border-red-400 dark:border-red-400;
+    }
+  }
+
+  .phone-input--field {
+    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 text-base px-1.5;
+
+    &::placeholder {
+      @apply font-normal;
+    }
+  }
+
+  .country-dropdown {
+    @apply z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900;
+
+    .dropdown-search--wrap {
+      @apply top-0 sticky bg-white dark:bg-slate-900 p-1;
+
+      .dropdown-search {
+        @apply h-8 mb-0 text-sm border border-solid border-slate-200 dark:border-slate-600;
+      }
+    }
+
+    .country-dropdown--item {
+      @apply flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700;
+
+      &.active {
+        @apply bg-slate-50 dark:bg-slate-700;
+      }
+
+      &.focus {
+        @apply bg-slate-25 dark:bg-slate-800;
+      }
+    }
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -84,7 +84,9 @@ export default {
     },
   },
   methods: {
-    adjustScroll() {},
+    handleKeyboardEvent(e) {
+      this.processKeyDownEvent(e);
+    },
     onHover(index) {
       this.selectedIndex = index;
     },

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

@@ -1,7 +1,12 @@
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 
 export default {
-  mixins: [keyboardEventListenerMixins],
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardEvent);
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardEvent);
+  },
   methods: {
     moveSelectionUp() {
       if (!this.selectedIndex) {
@@ -9,7 +14,6 @@ export default {
       } else {
         this.selectedIndex -= 1;
       }
-      this.adjustScroll();
     },
     moveSelectionDown() {
       if (this.selectedIndex === this.items.length - 1) {
@@ -17,46 +21,19 @@ export default {
       } else {
         this.selectedIndex += 1;
       }
-      this.adjustScroll();
     },
-    getKeyboardEvents() {
-      return {
-        ArrowUp: {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyP': {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        ArrowDown: {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        'Control+KeyN': {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-        Enter: {
-          action: e => {
-            this.onSelect();
-            e.preventDefault();
-          },
-          allowOnFocusedInput: true,
-        },
-      };
+    processKeyDownEvent(e) {
+      const keyPattern = buildHotKeys(e);
+      if (['arrowup', 'ctrl+p'].includes(keyPattern)) {
+        this.moveSelectionUp();
+        e.preventDefault();
+      } else if (['arrowdown', 'ctrl+n'].includes(keyPattern)) {
+        this.moveSelectionDown();
+        e.preventDefault();
+      } else if (keyPattern === 'enter') {
+        this.onSelect();
+        e.preventDefault();
+      }
     },
   },
 };

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

@@ -1,69 +1,64 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-
-const localVue = createLocalVue();
+import mentionSelectionKeyboardMixin from '../mentionSelectionKeyboardMixin';
+import { shallowMount } from '@vue/test-utils';
 
 const buildComponent = ({ data = {}, methods = {} }) => ({
   render() {},
   data() {
-    return { ...data, selectedIndex: 0, items: [1, 2, 3] };
+    return data;
   },
-  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
-  mixins: [keyboardEventListenerMixins],
+  methods,
+  mixins: [mentionSelectionKeyboardMixin],
 });
 
 describe('mentionSelectionKeyboardMixin', () => {
-  let wrapper;
-
-  beforeEach(() => {
+  test('register listeners', () => {
+    jest.spyOn(document, 'addEventListener');
     const Component = buildComponent({});
-    wrapper = shallowMount(Component, { localVue });
+    shallowMount(Component);
+    // undefined expected as the method is not defined in the component
+    expect(document.addEventListener).toHaveBeenCalledWith(
+      'keydown',
+      undefined
+    );
   });
 
-  it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowUp) {
-      keyboardEvents.ArrowUp.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyP']) {
-      keyboardEvents['Control+KeyP'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(0);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
+  test('processKeyDownEvent updates index on arrow up', () => {
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      ctrlKey: true,
+      key: 'p',
+      preventDefault: jest.fn(),
+    });
+    expect(wrapper.vm.selectedIndex).toBe(2);
   });
 
-  it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
-    const preventDefault = jest.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.ArrowDown) {
-      keyboardEvents.ArrowDown.action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(1);
-      expect(preventDefault).toHaveBeenCalled();
-    }
-
-    wrapper.setData({ selectedIndex: 1 });
-    if (keyboardEvents && keyboardEvents['Control+KeyN']) {
-      keyboardEvents['Control+KeyN'].action({ preventDefault });
-      expect(wrapper.vm.selectedIndex).toBe(2);
-      expect(preventDefault).toHaveBeenCalledTimes(2);
-    }
+  test('processKeyDownEvent updates index on arrow down', () => {
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      key: 'ArrowDown',
+      preventDefault: jest.fn(),
+    });
+    expect(wrapper.vm.selectedIndex).toBe(1);
   });
 
-  it('Enter key triggers onSelect method', () => {
-    const preventDefault = jest.fn();
-    const keyboardEvents = wrapper.vm.getKeyboardEvents();
-
-    if (keyboardEvents && keyboardEvents.Enter) {
-      keyboardEvents.Enter.action({ preventDefault });
-      expect(wrapper.vm.onSelect).toHaveBeenCalled();
-      expect(preventDefault).toHaveBeenCalled();
-    }
+  test('processKeyDownEvent calls select methods on Enter Key', () => {
+    const onSelectMockFn = jest.fn();
+    const Component = buildComponent({
+      data: { selectedIndex: 0, items: [1, 2, 3] },
+      methods: { onSelect: () => onSelectMockFn('enterKey pressed') },
+    });
+    const wrapper = shallowMount(Component);
+    wrapper.vm.processKeyDownEvent({
+      key: 'Enter',
+      preventDefault: jest.fn(),
+    });
+    expect(onSelectMockFn).toHaveBeenCalledWith('enterKey pressed');
+    wrapper.vm.onSelect();
   });
 });

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -87,6 +87,7 @@
 </template>
 
 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
 import Hotkey from 'dashboard/components/base/Hotkey.vue';
 
@@ -94,6 +95,7 @@ export default {
   components: {
     Hotkey,
   },
+  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

app/javascript/dashboard/components/widgets/modal/constants.js

@@ -53,6 +53,12 @@ export const SHORTCUT_KEYS = [
     firstKey: 'Alt / ⌥',
     secondKey: 'S',
   },
+  {
+    id: 10,
+    label: 'SWITCH_CONVERSATION_STATUS',
+    firstKey: 'Alt / ⌥',
+    secondKey: 'B',
+  },
   {
     id: 11,
     label: 'SWITCH_TO_PRIVATE_NOTE',

app/javascript/dashboard/composables/index.js

@@ -1,12 +0,0 @@
-import { getCurrentInstance } from 'vue';
-
-export const useTrack = () => {
-  const vm = getCurrentInstance();
-  if (!vm) throw new Error('must be called in setup');
-
-  return vm.proxy.$track;
-};
-
-export function useAlert(message, action) {
-  bus.$emit('newToastMessage', message, action);
-}

app/javascript/dashboard/composables/route.js

@@ -1,30 +0,0 @@
-import { getCurrentInstance, reactive, watchEffect } from 'vue';
-
-/**
- * Returns the current route location. Equivalent to using `$route` inside
- * templates.
- */
-export function useRoute() {
-  const instance = getCurrentInstance();
-  const route = reactive(Object.assign({}, instance.proxy.$root.$route));
-  watchEffect(() => {
-    Object.assign(route, instance.proxy.$root.$route);
-  });
-
-  return route;
-}
-
-/**
- * Returns the router instance. Equivalent to using `$router` inside
- * templates.
- */
-export function useRouter() {
-  const instance = getCurrentInstance();
-  const router = instance.proxy.$root.$router;
-  watchEffect(() => {
-    if (router) {
-      Object.assign(router, instance.proxy.$root.$router);
-    }
-  });
-  return router;
-}

app/javascript/dashboard/composables/store.js

@@ -1,23 +0,0 @@
-import { computed } from 'vue';
-import { getCurrentInstance } from 'vue';
-
-export const useStore = () => {
-  const vm = getCurrentInstance();
-  if (!vm) throw new Error('must be called in setup');
-  return vm.proxy.$store;
-};
-
-export const useStoreGetters = () => {
-  const store = useStore();
-  return Object.fromEntries(
-    Object.keys(store.getters).map(getter => [
-      getter,
-      computed(() => store.getters[getter]),
-    ])
-  );
-};
-
-export const mapGetter = key => {
-  const store = useStore();
-  return computed(() => store.getters[key]);
-};

app/javascript/dashboard/composables/useI18n.js

@@ -1,32 +0,0 @@
-import { computed, getCurrentInstance } from 'vue';
-import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-
-let i18nInstance = VueI18n;
-
-export function useI18n() {
-  if (!i18nInstance) throw new Error('vue-i18n not initialized');
-
-  const i18n = i18nInstance;
-
-  const instance = getCurrentInstance();
-  const vm = instance?.proxy || instance || new Vue({});
-
-  const locale = computed({
-    get() {
-      return i18n.locale;
-    },
-    set(v) {
-      i18n.locale = v;
-    },
-  });
-
-  return {
-    locale,
-    t: vm.$t.bind(vm),
-    tc: vm.$tc.bind(vm),
-    d: vm.$d.bind(vm),
-    te: vm.$te.bind(vm),
-    n: vm.$n.bind(vm),
-  };
-}

app/javascript/dashboard/helper/scriptHelpers.js

@@ -1,4 +1,5 @@
 import AnalyticsHelper from './AnalyticsHelper';
+import LogRocket from 'logrocket';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
@@ -10,6 +11,12 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
+    if (window.logRocketProjectId) {
+      LogRocket.identify(user.id, {
+        email: user.email,
+        name: user.name,
+      });
+    }
   });
 };
 

app/javascript/dashboard/i18n/locale/am/bulkActions.json

@@ -17,7 +17,7 @@
     "AGENT_LIST_LOADING": "Loading agents",
     "UPDATE": {
       "CHANGE_STATUS": "Change status",
-      "SNOOZE_UNTIL": "Snooze",
+      "SNOOZE_UNTIL_NEXT_REPLY": "Snooze until next reply.",
       "UPDATE_SUCCESFUL": "Conversation status updated successfully.",
       "UPDATE_FAILED": "Failed to update conversations. Please try again."
     },

app/javascript/dashboard/i18n/locale/am/contact.json

@@ -48,8 +48,7 @@
     "SIDEBAR_SECTIONS": {
       "CUSTOM_ATTRIBUTES": "Custom Attributes",
       "CONTACT_LABELS": "Contact Labels",
-      "PREVIOUS_CONVERSATIONS": "Previous Conversations",
-      "NO_RECORDS_FOUND": "No attributes found"
+      "PREVIOUS_CONVERSATIONS": "Previous Conversations"
     }
   },
   "EDIT_CONTACT": {
@@ -84,7 +83,6 @@
     "CONFIRM": {
       "TITLE": "Export Contacts",
       "MESSAGE": "Are you sure you want to export all contacts?",
-      "FILTERED_MESSAGE": "Are you sure you want to export all the filtered contacts?",
       "YES": "Yes, Export",
       "NO": "No, Cancel"
     }
@@ -298,8 +296,6 @@
     "BUTTON": "Add custom attribute",
     "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
-    "SHOW_MORE": "Show all attributes",
-    "SHOW_LESS": "Show less attributes",
     "ACTIONS": {
       "COPY": "Copy attribute",
       "DELETE": "Delete attribute",

app/javascript/dashboard/i18n/locale/am/contactFilters.json

@@ -44,8 +44,7 @@
       "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
       "CREATED_AT": "Created At",
       "LAST_ACTIVITY": "Last Activity",
-      "REFERER_LINK": "Referrer link",
-      "BLOCKED": "Blocked"
+      "REFERER_LINK": "Referrer link"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "Standard Filters",

app/javascript/dashboard/i18n/locale/am/conversation.json

@@ -64,14 +64,7 @@
       "SNOOZED_UNTIL": "Snoozed until",
       "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
       "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
-      "SLA_STATUS": {
-        "FRT": "FRT {status}",
-        "NRT": "NRT {status}",
-        "RT": "RT {status}",
-        "MISSED": "missed",
-        "DUE": "due"
-      }
+      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply"
     },
     "RESOLVE_DROPDOWN": {
       "MARK_PENDING": "Mark as pending",
@@ -280,7 +273,6 @@
   },
   "CONVERSATION_CUSTOM_ATTRIBUTES": {
     "ADD_BUTTON_TEXT": "Create attribute",
-    "NO_RECORDS_FOUND": "No attributes found",
     "UPDATE": {
       "SUCCESS": "Attribute updated successfully",
       "ERROR": "Unable to update attribute. Please try again later"

app/javascript/dashboard/i18n/locale/am/datePicker.json

@@ -1,19 +0,0 @@
-{
-  "DATE_PICKER": {
-    "APPLY_BUTTON": "Apply",
-    "CLEAR_BUTTON": "Clear",
-    "DATE_RANGE_INPUT": {
-      "START": "Start Date",
-      "END": "End Date"
-    },
-    "DATE_RANGE_OPTIONS": {
-      "TITLE": "DATE RANGE",
-      "LAST_7_DAYS": "Last 7 days",
-      "LAST_30_DAYS": "Last 30 days",
-      "LAST_3_MONTHS": "Last 3 months",
-      "LAST_6_MONTHS": "Last 6 months",
-      "LAST_YEAR": "Last year",
-      "CUSTOM_RANGE": "Custom date range"
-    }
-  }
-}

app/javascript/dashboard/i18n/locale/am/general.json

@@ -1,5 +0,0 @@
-{
-  "GENERAL": {
-    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
-  }
-}

app/javascript/dashboard/i18n/locale/am/generalSettings.json

@@ -87,10 +87,7 @@
       "conversation_assignment": "Conversation Assigned",
       "assigned_conversation_new_message": "New Message",
       "participating_conversation_new_message": "New Message",
-      "conversation_mention": "Mention",
-      "sla_missed_first_response": "SLA Missed",
-      "sla_missed_next_response": "SLA Missed",
-      "sla_missed_resolution": "SLA Missed"
+      "conversation_mention": "Mention"
     }
   },
   "NETWORK": {
@@ -107,7 +104,6 @@
       "GENERAL": "General",
       "REPORTS": "Reports",
       "CONVERSATION": "Conversation",
-      "BULK_ACTIONS": "Bulk Actions",
       "CHANGE_ASSIGNEE": "Change Assignee",
       "CHANGE_PRIORITY": "Change Priority",
       "CHANGE_TEAM": "Change Team",