feat: use rails_blob_url instead of url_for

.circleci/config.yml

@@ -157,7 +157,7 @@ jobs:
       - run:
           name: Code Climate Test Coverage
           command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"  
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json buildreports/lcov.info    
             
       - persist_to_workspace:
           root: coverage

.env.example

@@ -173,9 +173,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## LogRocket
 # LOG_ROCKET_PROJECT_ID=xxxxx/some-project
 
-# MICROSOFT CLARITY
-# MS_CLARITY_TOKEN=xxxxxxxxx
-
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY

.rubocop.yml

@@ -162,32 +162,40 @@ Rails/RenderInline:
 Performance/CollectionLiteralInLoop:
   Exclude:
     - 'db/migrate/20210315101919_enable_email_channel.rb'
-Rails/ThreeStateBooleanColumn:
-  Exclude:
-    - 'db/migrate/20200509044639_add_hide_input_flag_to_bot_config.rb'
-    - 'db/migrate/20200605130625_agent_away_message_to_auto_reply.rb'
-    - 'db/migrate/20200606132552_create_labels.rb'
-    - 'db/migrate/20201027135006_create_working_hours.rb'
-    - 'db/migrate/20210112174124_add_hmac_token_to_inbox.rb'
-    - 'db/migrate/20210114202310_create_teams.rb'
-    - 'db/migrate/20210212154240_add_request_for_email_on_channel_web_widget.rb'
-    - 'db/migrate/20210428135041_add_campaigns.rb'
-    - 'db/migrate/20210602182058_add_hmac_to_api_channel.rb'
-    - 'db/migrate/20210609133433_add_email_collect_to_inboxes.rb'
-    - 'db/migrate/20210618095823_add_csat_toggle_for_inbox.rb'
-    - 'db/migrate/20210927062350_add_trigger_only_during_business_hours_collect_to_campaigns.rb'
-    - 'db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb'
-    - 'db/migrate/20211109143122_add_tweet_enabled_flag_to_twitter_channel.rb'
-    - 'db/migrate/20211216110209_add_allow_messages_after_resolved_to_inbox.rb'
-    - 'db/migrate/20220116103902_add_open_ssl_verify_mode_to_channel_email.rb'
-    - 'db/migrate/20220216151613_add_open_all_day_to_working_hour.rb'
-    - 'db/migrate/20220511072655_add_archive_column_to_portal.rb'
-    - 'db/migrate/20230503101201_create_sla_policies.rb'
-RSpec/IndexedLet:
-  Enabled: false
 RSpec/NamedSubject:
   Enabled: false
-
+Style/RedundantConstantBase:
+  Enabled: false
+Rails/RootPathnameMethods:
+  Enabled: false
+RSpec/Rails/MinitestAssertions:
+  Enabled: false
+RSpec/Rails/InferredSpecType:
+  Enabled: false
+RSpec/IndexedLet:
+  Enabled: false
+RSpec/MatchArray:
+  Enabled: false
+Rails/ResponseParsedBody:
+  Enabled: false
+RSpec/FactoryBot/ConsistentParenthesesStyle:
+  Enabled: false
+Rails/ThreeStateBooleanColumn:
+  Enabled: false
+Rails/Pluck:
+  Enabled: false
+Rails/TopLevelHashWithIndifferentAccess:
+  Enabled: false
+Rails/ActionOrder:
+  Enabled: false
+Style/ArrayIntersect:
+  Enabled: false
+RSpec/NoExpectationExample:
+  Enabled: false
+Style/RedundantReturn:
+  Enabled: false
+Rails/I18nLocaleTexts:
+  Enabled: false
 
 # we should bring this down
 RSpec/MultipleMemoizedHelpers:

Gemfile.lock

@@ -785,7 +785,6 @@ GEM
 PLATFORMS
   arm64-darwin-20
   arm64-darwin-21
-  arm64-darwin-22
   ruby
   x86_64-darwin-18
   x86_64-darwin-20

VERSION_CW

@@ -1 +1 @@
-2.17.0
+2.2.0

VERSION_CWCTL

@@ -1 +1 @@
-2.3.0
+2.1.0

app/builders/messages/instagram/message_builder.rb

@@ -63,9 +63,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def conversation
-    @conversation ||= Conversation.where(conversation_params).find_by(
-      "additional_attributes ->> 'type' = 'instagram_direct_message'"
-    ) || build_conversation
+    @conversation ||= Conversation.find_by(conversation_params) || build_conversation
   end
 
   def message_content
@@ -96,10 +94,8 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
 
   def build_conversation
     @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
-
     Conversation.create!(conversation_params.merge(
-                           contact_inbox_id: @contact_inbox.id,
-                           additional_attributes: { type: 'instagram_direct_message' }
+                           contact_inbox_id: @contact_inbox.id
                          ))
   end
 
@@ -107,7 +103,10 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     {
       account_id: @inbox.account_id,
       inbox_id: @inbox.id,
-      contact_id: contact.id
+      contact_id: contact.id,
+      additional_attributes: {
+        type: 'instagram_direct_message'
+      }
     }
   end
 

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

@@ -16,9 +16,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
                 end
   end
 
-  def show; end
-  def edit; end
-
   def create
     @article = @portal.articles.create!(article_params)
     @article.associate_root_article(article_params[:associated_article_id])
@@ -26,6 +23,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
     render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
   end
 
+  def edit; end
+
+  def show; end
+
   def update
     @article.update!(article_params) if params[:article].present?
     render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
@@ -44,7 +45,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
       content_type: params[:background_image].content_type
     )
     file_blob.save!
-    render json: { file_url: url_for(file_blob) }
+    render json: { file_url: rails_blob_url(file_blob) }
   end
 
   def reorder

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

@@ -6,8 +6,6 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     @automation_rules = Current.account.automation_rules
   end
 
-  def show; end
-
   def create
     @automation_rule = Current.account.automation_rules.new(automation_rules_permit)
     @automation_rule.actions = params[:actions]
@@ -30,6 +28,8 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     render json: { blob_key: file_blob.key, blob_id: file_blob.id }
   end
 
+  def show; end
+
   def update
     ActiveRecord::Base.transaction do
       automation_rule_update

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

@@ -6,21 +6,21 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
     @campaigns = Current.account.campaigns
   end
 
-  def show; end
-
   def create
     @campaign = Current.account.campaigns.create!(campaign_params)
   end
 
-  def update
-    @campaign.update!(campaign_params)
-  end
-
   def destroy
     @campaign.destroy!
     head :ok
   end
 
+  def show; end
+
+  def update
+    @campaign.update!(campaign_params)
+  end
+
   private
 
   def campaign

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

@@ -9,8 +9,6 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
     @categories = @portal.categories.search(params)
   end
 
-  def show; end
-
   def create
     @category = @portal.categories.create!(category_params)
     @category.related_categories << related_categories_records
@@ -19,6 +17,8 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
     @category.save!
   end
 
+  def show; end
+
   def update
     @category.update!(category_params)
     @category.related_categories = related_categories_records if related_categories_records.any?

app/controllers/api/v1/accounts/contacts/contact_inboxes_controller.rb

@@ -1,13 +1,11 @@
 class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts::Contacts::BaseController
-  include HmacConcern
   before_action :ensure_inbox, only: [:create]
 
   def create
     @contact_inbox = ContactInboxBuilder.new(
       contact: @contact,
       inbox: @inbox,
-      source_id: params[:source_id],
-      hmac_verified: hmac_verified?
+      source_id: params[:source_id]
     ).perform
   end
 

app/controllers/api/v1/accounts/contacts/notes_controller.rb

@@ -5,21 +5,21 @@ class Api::V1::Accounts::Contacts::NotesController < Api::V1::Accounts::Contacts
     @notes = @contact.notes.latest.includes(:user)
   end
 
-  def show; end
-
   def create
     @note = @contact.notes.create!(note_params)
   end
 
-  def update
-    @note.update(note_params)
-  end
-
   def destroy
     @note.destroy!
     head :ok
   end
 
+  def show; end
+
+  def update
+    @note.update(note_params)
+  end
+
   private
 
   def note

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

@@ -1,7 +1,6 @@
 class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseController
   include Events::Types
   include DateRangeHelper
-  include HmacConcern
 
   before_action :conversation, except: [:index, :meta, :search, :create, :filter]
   before_action :inbox, :contact, :contact_inbox, only: [:create]
@@ -23,12 +22,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversations_count = result[:count]
   end
 
-  def attachments
-    @attachments = @conversation.attachments
-  end
-
-  def show; end
-
   def create
     ActiveRecord::Base.transaction do
       @conversation = ConversationBuilder.new(params: params, contact_inbox: @contact_inbox).perform
@@ -36,6 +29,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     end
   end
 
+  def show; end
+
   def filter
     result = ::Conversations::FilterService.new(params.permit!, current_user).perform
     @conversations = result[:conversations]
@@ -105,6 +100,9 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def set_conversation_status
+    # TODO: temporary fallback for the old bot status in conversation, we will remove after couple of releases
+    # commenting this out to see if there are any errors, if not we can remove this in subsequent releases
+    # status = params[:status] == 'bot' ? 'pending' : params[:status]
     @conversation.status = params[:status]
     @conversation.snoozed_until = parse_date_time(params[:snoozed_until].to_s) if params[:snoozed_until]
   end
@@ -150,8 +148,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     ContactInboxBuilder.new(
       contact: @contact,
       inbox: @inbox,
-      source_id: params[:source_id],
-      hmac_verified: hmac_verified?
+      source_id: params[:source_id]
     ).perform
   end
 

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

@@ -34,12 +34,9 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
   end
 
   def set_csat_survey_responses
-    base_query = Current.account.csat_survey_responses.includes([:conversation, :assigned_agent, :contact])
-    @csat_survey_responses = filtrate(base_query).filter_by_created_at(range)
-                                                 .filter_by_assigned_agent_id(params[:user_ids])
-                                                 .filter_by_inbox_id(params[:inbox_id])
-                                                 .filter_by_team_id(params[:team_id])
-                                                 .filter_by_rating(params[:rating])
+    @csat_survey_responses = filtrate(
+      Current.account.csat_survey_responses.includes([:conversation, :assigned_agent, :contact])
+    ).filter_by_created_at(range).filter_by_assigned_agent_id(params[:user_ids])
   end
 
   def set_current_page_surveys

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

@@ -11,7 +11,6 @@ class Api::V1::Accounts::CustomFiltersController < Api::V1::Accounts::BaseContro
     @custom_filter = current_user.custom_filters.create!(
       permitted_payload.merge(account_id: Current.account.id)
     )
-    render json: { error: @custom_filter.errors.messages }, status: :unprocessable_entity and return unless @custom_filter.valid?
   end
 
   def update

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

@@ -2,11 +2,6 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
   before_action :fetch_inbox
   before_action :current_agents_ids, only: [:create, :update]
 
-  def show
-    authorize @inbox, :show?
-    fetch_updated_agents
-  end
-
   def create
     authorize @inbox, :create?
     ActiveRecord::Base.transaction do
@@ -15,6 +10,11 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
     fetch_updated_agents
   end
 
+  def show
+    authorize @inbox, :show?
+    fetch_updated_agents
+  end
+
   def update
     authorize @inbox, :update?
     update_agents_list

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

@@ -44,7 +44,26 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   def update
     @inbox.update!(permitted_params.except(:channel))
     update_inbox_working_hours
-    update_channel if channel_update_required?
+    channel_attributes = get_channel_attributes(@inbox.channel_type)
+
+    # Inbox update doesn't necessarily need channel attributes
+    return if permitted_params(channel_attributes)[:channel].blank?
+
+    if @inbox.inbox_type == 'Email'
+      begin
+        validate_email_channel(channel_attributes)
+      rescue StandardError => e
+        render json: { message: e }, status: :unprocessable_entity and return
+      end
+      @inbox.channel.reauthorized!
+    end
+
+    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
+    update_channel_feature_flags
+  end
+
+  def update_inbox_working_hours
+    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
   end
 
   def agent_bot
@@ -84,35 +103,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     account_channels_method.create!(permitted_params(channel_type_from_params::EDITABLE_ATTRS)[:channel].except(:type))
   end
 
-  def update_inbox_working_hours
-    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
-  end
-
-  def update_channel
-    channel_attributes = get_channel_attributes(@inbox.channel_type)
-    return if permitted_params(channel_attributes)[:channel].blank?
-
-    validate_and_update_email_channel(channel_attributes) if @inbox.inbox_type == 'Email'
-
-    reauthorize_and_update_channel(channel_attributes)
-    update_channel_feature_flags
-  end
-
-  def channel_update_required?
-    permitted_params(get_channel_attributes(@inbox.channel_type))[:channel].present?
-  end
-
-  def validate_and_update_email_channel(channel_attributes)
-    validate_email_channel(channel_attributes)
-  rescue StandardError => e
-    render json: { message: e }, status: :unprocessable_entity and return
-  end
-
-  def reauthorize_and_update_channel(channel_attributes)
-    @inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
-    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
-  end
-
   def update_channel_feature_flags
     return unless @inbox.web_widget?
     return unless permitted_params(Channel::WebWidget::EDITABLE_ATTRS)[:channel].key? :selected_feature_flags

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

@@ -6,10 +6,6 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     @macros = Macro.with_visibility(current_user, params)
   end
 
-  def show
-    head :not_found if @macro.nil?
-  end
-
   def create
     @macro = Current.account.macros.new(macros_with_user.merge(created_by_id: current_user.id))
     @macro.set_visibility(current_user, permitted_params)
@@ -22,16 +18,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     @macro
   end
 
-  def update
-    ActiveRecord::Base.transaction do
-      @macro.update!(macros_with_user)
-      @macro.set_visibility(current_user, permitted_params)
-      process_attachments
-      @macro.save!
-    rescue StandardError => e
-      Rails.logger.error e
-      render json: { error: @macro.errors.messages }.to_json, status: :unprocessable_entity
-    end
+  def show
+    head :not_found if @macro.nil?
   end
 
   def destroy
@@ -49,6 +37,18 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     render json: { blob_key: file_blob.key, blob_id: file_blob.id }
   end
 
+  def update
+    ActiveRecord::Base.transaction do
+      @macro.update!(macros_with_user)
+      @macro.set_visibility(current_user, permitted_params)
+      process_attachments
+      @macro.save!
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @macro.errors.messages }.to_json, status: :unprocessable_entity
+    end
+  end
+
   def execute
     ::MacrosExecutionJob.perform_later(@macro, conversation_ids: params[:conversation_ids], user: Current.user)
 

app/controllers/api/v1/accounts_controller.rb

@@ -14,11 +14,6 @@ class Api::V1::AccountsController < Api::BaseController
               CustomExceptions::Account::UserErrors,
               with: :render_error_response
 
-  def show
-    @latest_chatwoot_version = ::Redis::Alfred.get(::Redis::Alfred::LATEST_CHATWOOT_VERSION)
-    render 'api/v1/accounts/show', format: :json
-  end
-
   def create
     @user, @account = AccountBuilder.new(
       account_name: account_params[:account_name],
@@ -40,6 +35,11 @@ class Api::V1::AccountsController < Api::BaseController
     render json: { cache_keys: get_cache_keys }, status: :ok
   end
 
+  def show
+    @latest_chatwoot_version = ::Redis::Alfred.get(::Redis::Alfred::LATEST_CHATWOOT_VERSION)
+    render 'api/v1/accounts/show', format: :json
+  end
+
   def update
     @account.update!(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
   end

app/controllers/api/v1/widget/messages_controller.rb

@@ -48,8 +48,7 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
   def message_finder_params
     {
       filter_internal_messages: true,
-      before: permitted_params[:before],
-      after: permitted_params[:after]
+      before: permitted_params[:before]
     }
   end
 
@@ -63,7 +62,7 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
 
   def permitted_params
     # timestamp parameter is used in create conversation method
-    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id])
+    params.permit(:id, :before, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id])
   end
 
   def set_message

app/controllers/concerns/hmac_concern.rb

@@ -1,5 +0,0 @@
-module HmacConcern
-  def hmac_verified?
-    ActiveModel::Type::Boolean.new.cast(params[:hmac_verified]).present?
-  end
-end

app/controllers/devise_overrides/passwords_controller.rb

@@ -4,16 +4,6 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
   skip_before_action :require_no_authentication, raise: false
   skip_before_action :authenticate_user!, raise: false
 
-  def create
-    @user = User.find_by(email: params[:email])
-    if @user
-      @user.send_reset_password_instructions
-      build_response(I18n.t('messages.reset_password_success'), 200)
-    else
-      build_response(I18n.t('messages.reset_password_failure'), 404)
-    end
-  end
-
   def update
     # params: reset_password_token, password, password_confirmation
     original_token = params[:reset_password_token]
@@ -27,6 +17,16 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
     end
   end
 
+  def create
+    @user = User.find_by(email: params[:email])
+    if @user
+      @user.send_reset_password_instructions
+      build_response(I18n.t('messages.reset_password_success'), 200)
+    else
+      build_response(I18n.t('messages.reset_password_failure'), 404)
+    end
+  end
+
   private
 
   def reset_password_and_confirmation(recoverable)

app/controllers/devise_overrides/sessions_controller.rb

@@ -1,4 +1,4 @@
-class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
+class DeviseOverrides::SessionsController < ::DeviseTokenAuth::SessionsController
   # Prevent session parameter from being passed
   # Unpermitted parameter: session
   wrap_parameters format: []
@@ -37,5 +37,3 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
     @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
   end
 end
-
-DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')

app/controllers/devise_overrides/token_validations_controller.rb

@@ -1,4 +1,4 @@
-class DeviseOverrides::TokenValidationsController < DeviseTokenAuth::TokenValidationsController
+class DeviseOverrides::TokenValidationsController < ::DeviseTokenAuth::TokenValidationsController
   def validate_token
     # @resource will have been set by set_user_by_token concern
     if @resource

app/controllers/platform/api/v1/accounts_controller.rb

@@ -1,12 +1,12 @@
 class Platform::Api::V1::AccountsController < PlatformController
-  def show; end
-
   def create
     @resource = Account.create!(account_params)
     update_resource_features
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 
+  def show; end
+
   def update
     @resource.assign_attributes(account_params)
     update_resource_features

app/controllers/platform/api/v1/agent_bots_controller.rb

@@ -6,14 +6,14 @@ class Platform::Api::V1::AgentBotsController < PlatformController
     @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').all
   end
 
-  def show; end
-
   def create
     @resource = AgentBot.new(agent_bot_params)
     @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 
+  def show; end
+
   def update
     @resource.update!(agent_bot_params)
   end

app/controllers/platform/api/v1/users_controller.rb

@@ -5,8 +5,6 @@ class Platform::Api::V1::UsersController < PlatformController
   before_action(only: [:login]) { set_resource }
   before_action(only: [:login]) { validate_platform_app_permissible }
 
-  def show; end
-
   def create
     @resource = (User.find_by(email: user_params[:email]) || User.new(user_params))
     @resource.skip_confirmation!
@@ -18,6 +16,8 @@ class Platform::Api::V1::UsersController < PlatformController
     render json: { url: @resource.generate_sso_link }
   end
 
+  def show; end
+
   def update
     @resource.assign_attributes(user_update_params)
 

app/controllers/public/api/v1/inboxes/contacts_controller.rb

@@ -2,8 +2,6 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
   before_action :contact_inbox, except: [:create]
   before_action :process_hmac
 
-  def show; end
-
   def create
     source_id = params[:source_id] || SecureRandom.uuid
     @contact_inbox = ::ContactInboxWithContactBuilder.new(
@@ -13,6 +11,8 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
     ).perform
   end
 
+  def show; end
+
   def update
     contact_identify_action = ContactIdentifyAction.new(
       contact: @contact_inbox.contact,

app/controllers/super_admin/accounts_controller.rb

@@ -45,24 +45,13 @@ class SuperAdmin::AccountsController < SuperAdmin::ApplicationController
 
   def seed
     Internal::SeedAccountJob.perform_later(requested_resource)
-    # rubocop:disable Rails/I18nLocaleTexts
     redirect_back(fallback_location: [namespace, requested_resource], notice: 'Account seeding triggered')
-    # rubocop:enable Rails/I18nLocaleTexts
-  end
-
-  def reset_cache
-    requested_resource.reset_cache_keys
-    # rubocop:disable Rails/I18nLocaleTexts
-    redirect_back(fallback_location: [namespace, requested_resource], notice: 'Cache keys cleared')
-    # rubocop:enable Rails/I18nLocaleTexts
   end
 
   def destroy
     account = Account.find(params[:id])
 
     DeleteObjectJob.perform_later(account) if account.present?
-    # rubocop:disable Rails/I18nLocaleTexts
     redirect_back(fallback_location: [namespace, requested_resource], notice: 'Account deletion is in progress.')
-    # rubocop:enable Rails/I18nLocaleTexts
   end
 end

app/controllers/swagger_controller.rb

@@ -1,7 +1,7 @@
 class SwaggerController < ApplicationController
   def respond
     if Rails.env.development? || Rails.env.test?
-      render inline: Rails.root.join('swagger', derived_path).read
+      render inline: File.read(Rails.root.join('swagger', derived_path))
     else
       head :not_found
     end

app/finders/conversation_finder.rb

@@ -54,10 +54,9 @@ class ConversationFinder
 
     find_all_conversations
     filter_by_status unless params[:q]
-    filter_by_team
-    filter_by_labels
-    filter_by_query
-    filter_by_source_id
+    filter_by_team if @team
+    filter_by_labels if params[:labels]
+    filter_by_query if params[:q]
   end
 
   def set_inboxes
@@ -108,8 +107,6 @@ class ConversationFinder
   end
 
   def filter_by_query
-    return unless params[:q]
-
     allowed_message_types = [Message.message_types[:incoming], Message.message_types[:outgoing]]
     @conversations = conversations.joins(:messages).where('messages.content ILIKE :search', search: "%#{params[:q]}%")
                                   .where(messages: { message_type: allowed_message_types }).includes(:messages)
@@ -124,24 +121,13 @@ class ConversationFinder
   end
 
   def filter_by_team
-    return unless @team
-
     @conversations = @conversations.where(team: @team)
   end
 
   def filter_by_labels
-    return unless params[:labels]
-
     @conversations = @conversations.tagged_with(params[:labels], any: true)
   end
 
-  def filter_by_source_id
-    return unless params[:source_id]
-
-    @conversations = @conversations.joins(:contact_inbox)
-    @conversations = @conversations.where(contact_inboxes: { source_id: params[:source_id] })
-  end
-
   def set_count_for_all_conversations
     [
       @conversations.assigned_to(current_user).count,

app/javascript/dashboard/api/csatReports.js

@@ -6,7 +6,7 @@ class CSATReportsAPI extends ApiClient {
     super('csat_survey_responses', { accountScoped: true });
   }
 
-  get({ page, from, to, user_ids, inbox_id, team_id, rating } = {}) {
+  get({ page, from, to, user_ids } = {}) {
     return axios.get(this.url, {
       params: {
         page,
@@ -14,31 +14,24 @@ class CSATReportsAPI extends ApiClient {
         until: to,
         sort: '-created_at',
         user_ids,
-        inbox_id,
-        team_id,
-        rating,
       },
     });
   }
 
-  download({ from, to, user_ids, inbox_id, team_id, rating } = {}) {
+  download({ from, to, user_ids } = {}) {
     return axios.get(`${this.url}/download`, {
       params: {
         since: from,
         until: to,
         sort: '-created_at',
         user_ids,
-        inbox_id,
-        team_id,
-        rating,
       },
     });
   }
 
-  getMetrics({ from, to, user_ids, inbox_id, team_id, rating } = {}) {
-    // no ratings for metrics
+  getMetrics({ from, to, user_ids } = {}) {
     return axios.get(`${this.url}/metrics`, {
-      params: { since: from, until: to, user_ids, inbox_id, team_id, rating },
+      params: { since: from, until: to, user_ids },
     });
   }
 }

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -5,22 +5,14 @@
 }
 
 .date-picker {
-  &.no-margin {
-    .mx-input {
-      margin-bottom: 0;
-    }
-  }
-
-  &:not(.auto-width) {
-    .mx-datepicker-range {
-      width: 320px;
-    }
-  }
-
   .mx-datepicker {
     width: 100%;
   }
 
+  .mx-datepicker-range {
+    width: 320px;
+  }
+
   .mx-input {
     border: 1px solid var(--s-200);
     border-radius: var(--border-radius-normal);

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -261,12 +261,6 @@
       }
     }
 
-    // Basic filter dropdown
-    .basic-filter {
-      left: 0;
-      right: unset;
-    }
-
     // Card label
     .label-container {
       .label {

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -13,9 +13,7 @@
 }
 
 .multiselect {
-  &:not(.no-margin) {
-    margin-bottom: var(--space-normal);
-  }
+  margin-bottom: var(--space-normal);
 
   &.multiselect--disabled {
     opacity: 0.8;

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

@@ -74,7 +74,6 @@ import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import OpenAPI from 'dashboard/api/integrations/openapi';
 import alertMixin from 'shared/mixins/alertMixin';
-import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
   mixins: [alertMixin, clickaway],
@@ -145,15 +144,6 @@ export default {
     closeDropdown() {
       this.showDropdown = false;
     },
-    async recordAnalytics({ type, tone }) {
-      const event = OPEN_AI_EVENTS[type.toUpperCase()];
-      if (event) {
-        this.$track(event, {
-          type,
-          tone,
-        });
-      }
-    },
     async processEvent(type = 'rephrase') {
       this.uiFlags[type] = true;
       try {
@@ -169,7 +159,6 @@ export default {
         } = result;
         this.$emit('replace-text', generatedMessage || this.message);
         this.closeDropdown();
-        this.recordAnalytics({ type, tone: this.activeTone });
       } catch (error) {
         this.showAlert(this.$t('INTEGRATION_SETTINGS.OPEN_AI.GENERATE_ERROR'));
       } finally {

app/javascript/dashboard/components/widgets/chart/HorizontalBarChart.js

@@ -45,14 +45,6 @@ export default {
       default: () => {},
     },
   },
-  watch: {
-    collection() {
-      this.renderChart(this.collection, {
-        ...chartOptions,
-        ...this.chartOptions,
-      });
-    },
-  },
   mounted() {
     this.renderChart(this.collection, {
       ...chartOptions,

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

@@ -9,7 +9,7 @@
     }"
     @mouseenter="onCardHover"
     @mouseleave="onCardLeave"
-    @click="onCardClick"
+    @click="cardClick(chat)"
     @contextmenu="openContextMenu($event)"
   >
     <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
@@ -313,33 +313,21 @@ export default {
     },
   },
   methods: {
-    onCardClick(e) {
-      const { activeInbox, chat } = this;
-      const path = frontendURL(
-        conversationUrl({
-          accountId: this.accountId,
-          activeInbox,
-          id: chat.id,
-          label: this.activeLabel,
-          teamId: this.teamId,
-          foldersId: this.foldersId,
-          conversationType: this.conversationType,
-        })
-      );
-
-      if (e.metaKey || e.ctrlKey) {
-        window.open(
-          window.chatwootConfig.hostURL + path,
-          '_blank',
-          'noopener noreferrer nofollow'
-        );
-        return;
-      }
+    cardClick(chat) {
+      const { activeInbox } = this;
+      const path = conversationUrl({
+        accountId: this.accountId,
+        activeInbox,
+        id: chat.id,
+        label: this.activeLabel,
+        teamId: this.teamId,
+        foldersId: this.foldersId,
+        conversationType: this.conversationType,
+      });
       if (this.isActiveChat) {
         return;
       }
-
-      router.push({ path });
+      router.push({ path: frontendURL(path) });
     },
     onCardHover() {
       this.hovered = !this.hideThumbnail;

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

@@ -25,14 +25,10 @@
         <blockquote v-if="storyReply" class="story-reply-quote">
           <span>{{ $t('CONVERSATION.REPLIED_TO_STORY') }}</span>
           <bubble-image
-            v-if="!hasImgStoryError && storyUrl"
+            v-if="!hasStoryError"
             :url="storyUrl"
             @error="onStoryLoadError"
           />
-          <bubble-video
-            v-else-if="hasImgStoryError && storyUrl"
-            :url="storyUrl"
-          />
         </blockquote>
         <bubble-text
           v-if="data.content"
@@ -63,7 +59,7 @@
               controls
               class="skip-context-menu"
             >
-              <source :src="`${attachment.data_url}?t=${Date.now()}`" />
+              <source :src="attachment.data_url" />
             </audio>
             <bubble-video
               v-else-if="attachment.file_type === 'video'"
@@ -204,7 +200,7 @@ export default {
       hasImageError: false,
       contextMenuPosition: {},
       showBackgroundHighlight: false,
-      hasImgStoryError: false,
+      hasStoryError: false,
     };
   },
   computed: {
@@ -433,12 +429,12 @@ export default {
   watch: {
     data() {
       this.hasImageError = false;
-      this.hasImgStoryError = false;
+      this.hasStoryError = false;
     },
   },
   mounted() {
     this.hasImageError = false;
-    this.hasImgStoryError = false;
+    this.hasStoryError = false;
     bus.$on(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL, this.closeContextMenu);
     this.setupHighlightTimer();
   },
@@ -468,7 +464,7 @@ export default {
       this.hasImageError = true;
     },
     onStoryLoadError() {
-      this.hasImgStoryError = true;
+      this.hasStoryError = true;
     },
     openContextMenu(e) {
       const shouldSkipContextMenu =

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

@@ -36,7 +36,6 @@
         v-for="message in getReadMessages"
         :key="message.id"
         class="message--read ph-no-capture"
-        data-clarity-mask="True"
         :data="message"
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -57,7 +56,6 @@
         v-for="message in getUnReadMessages"
         :key="message.id"
         class="message--unread ph-no-capture"
-        data-clarity-mask="True"
         :data="message"
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"

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

@@ -501,7 +501,7 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (this.isAWhatsAppChannel || this.isAPIInbox) {
+      if (this.isAWhatsAppChannel) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;

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

@@ -79,7 +79,6 @@ import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import snoozeTimesMixin from 'dashboard/mixins/conversation/snoozeTimesMixin';
-import agentMixin from 'dashboard/mixins/agentMixin';
 import { mapGetters } from 'vuex';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
 export default {
@@ -88,7 +87,7 @@ export default {
     MenuItemWithSubmenu,
     AgentLoadingPlaceholder,
   },
-  mixins: [snoozeTimesMixin, agentMixin],
+  mixins: [snoozeTimesMixin],
   props: {
     status: {
       type: String,
@@ -203,16 +202,6 @@ export default {
       teams: 'teams/getTeams',
       assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
     }),
-    filteredAgentOnAvailability() {
-      const agents = this.$store.getters[
-        'inboxAssignableAgents/getAssignableAgents'
-      ](this.inboxId);
-      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
-      const filteredAgents = this.sortedAgentsByAvailability(
-        agentsByUpdatedPresence
-      );
-      return filteredAgents;
-    },
     assignableAgents() {
       return [
         {
@@ -223,7 +212,9 @@ export default {
           account_id: 0,
           email: 'None',
         },
-        ...this.filteredAgentOnAvailability,
+        ...this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
+          this.inboxId
+        ),
       ];
     },
   },
@@ -255,7 +246,6 @@ export default {
         ...(type === 'icon' && { icon: option.icon }),
         ...(type === 'label' && { color: option.color }),
         ...(type === 'agent' && { thumbnail: option.thumbnail }),
-        ...(type === 'agent' && { status: option.availability_status }),
         ...(type === 'text' && { label: option.label }),
         ...(type === 'label' && { label: option.title }),
         ...(type === 'agent' && { label: option.name }),

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -15,7 +15,6 @@
       v-if="variant === 'agent'"
       :username="option.label"
       :src="option.thumbnail"
-      :status="option.status"
       size="20px"
       class="agent-thumbnail"
     />

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

@@ -76,9 +76,3 @@ export const PORTALS_EVENTS = Object.freeze({
   DELETE_ARTICLE: 'Deleted an article',
   PREVIEW_ARTICLE: 'Previewed article',
 });
-
-export const OPEN_AI_EVENTS = Object.freeze({
-  SUMMARIZE: 'OpenAI: Used summarize',
-  REPLY_SUGGESTION: 'OpenAI: Used reply suggestion',
-  REPHRASE: 'OpenAI: Used rephrase',
-});

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

@@ -49,10 +49,6 @@ export class AnalyticsHelper {
       avatar: this.user.avatar_url,
     });
 
-    if (window.clarity) {
-      window.clarity('identify', this.user.email);
-    }
-
     const { accounts, account_id: accountId } = this.user;
     const [currentAccount] = accounts.filter(
       account => account.id === accountId

app/javascript/dashboard/i18n/index.js

@@ -9,7 +9,6 @@ import es from './locale/es';
 import fa from './locale/fa';
 import fi from './locale/fi';
 import fr from './locale/fr';
-import he from './locale/he';
 import hi from './locale/hi';
 import hu from './locale/hu';
 import id from './locale/id';
@@ -48,7 +47,6 @@ export default {
   fa,
   fi,
   fr,
-  he,
   hi,
   hu,
   id,

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

@@ -10,22 +10,15 @@
       "TITLE": "Manage Audit Logs",
       "DESC": "Audit Logs are trails for events and actions in a Chatwoot System.",
       "TABLE_HEADER": [
-        "Activity",
-        "Time",
-        "IP Address"
+        "User",
+        "Action",
+        "IP Address",
+        "Time"
       ]
     },
     "API": {
       "SUCCESS_MESSAGE": "AuditLogs retrieved successfully",
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
-    },
-    "ACTION": {
-      "ADD": "created",
-      "EDIT": "updated",
-      "DELETE": "deleted",
-      "SIGN_IN": "signed in",
-      "SIGN_OUT": "signed out",
-      "SYSTEM": "System"
     }
   }
 }

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

@@ -34,7 +34,7 @@
       },
       "API": {
         "SUCCESS_MESSAGE": "Canned Response added successfully",
-        "ERROR_MESSAGE": "Could not create canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
     "EDIT": {
@@ -56,14 +56,14 @@
       "BUTTON_TEXT": "Edit",
       "API": {
         "SUCCESS_MESSAGE": "Canned Response updated successfully",
-        "ERROR_MESSAGE": "Could not update canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       }
     },
     "DELETE": {
       "BUTTON_TEXT": "Delete",
       "API": {
         "SUCCESS_MESSAGE": "Canned response deleted successfully",
-        "ERROR_MESSAGE": "Could not delete canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
       },
       "CONFIRM": {
         "TITLE": "Confirm Deletion",

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

@@ -1,13 +1,6 @@
 {
   "CSAT": {
     "TITLE": "Rate your conversation",
-    "PLACEHOLDER": "Tell us more...",
-    "RATINGS": {
-      "POOR": "😞 Poor",
-      "FAIR": "😑 Fair",
-      "AVERAGE": "😐 Average",
-      "GOOD": "😀 Good",
-      "EXCELLENT": "😍 Excellent"
-    }
+    "PLACEHOLDER": "Tell us more..."
   }
 }

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

@@ -74,14 +74,6 @@
         "DELETE": "Delete article"
       }
     },
-    "ARTICLE_SEARCH_RESULT": {
-      "UNCATEGORIZED": "Uncategorized",
-      "INSERT_ARTICLE": "Insert",
-      "NO_RESULT": "No articles found",
-      "COPY_LINK": "Copy article link to clipboard",
-      "OPEN_LINK": "Open article in new tab",
-      "PREVIEW_LINK": "Preview article"
-    },
     "PORTAL": {
       "HEADER": "Portals",
       "DEFAULT": "Default",

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

@@ -83,7 +83,7 @@
         },
         "CHANNEL_GREETING_TOGGLE": {
           "LABEL": "Enable channel greeting",
-          "HELP_TEXT": "Auto-send greeting messages when customers start a conversation and send their first message.",
+          "HELP_TEXT": "Automatically send a greeting message when a new conversation is created.",
           "ENABLED": "Enabled",
           "DISABLED": "Disabled"
         },

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

@@ -4,8 +4,6 @@
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
-    "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
-    "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",
@@ -36,14 +34,6 @@
         "DESC": "( Total )"
       }
     },
-    "DATE_RANGE_OPTIONS": {
-      "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_DATE_RANGE": "Custom date range"
-    },
     "DATE_RANGE": [
       {
         "id": 0,
@@ -76,12 +66,6 @@
     },
     "GROUP_BY_FILTER_DROPDOWN_LABEL": "Group By",
     "DURATION_FILTER_LABEL": "Duration",
-    "GROUPING_OPTIONS": {
-      "DAY": "Day",
-      "WEEK": "Week",
-      "MONTH": "Month",
-      "YEAR": "Year"
-    },
     "GROUP_BY_DAY_OPTIONS": [{ "id": 1, "groupBy": "Day" }],
     "GROUP_BY_WEEK_OPTIONS": [
       { "id": 1, "groupBy": "Day" },
@@ -372,7 +356,6 @@
     "HEADER": "CSAT Reports",
     "NO_RECORDS": "There are no CSAT survey responses available.",
     "DOWNLOAD": "Download CSAT Reports",
-    "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
     "FILTERS": {
       "AGENTS": {
         "PLACEHOLDER": "Choose Agents"

app/javascript/dashboard/mixins/agentMixin.js

@@ -2,68 +2,39 @@ import { mapGetters } from 'vuex';
 
 export default {
   computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      currentAccountId: 'getCurrentAccountId',
-    }),
     assignableAgents() {
       return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
         this.inboxId
       );
     },
+    ...mapGetters({ currentUser: 'getCurrentUser' }),
     isAgentSelected() {
       return this.currentChat?.meta?.assignee;
     },
-    createNoneAgent() {
-      return {
-        confirmed: true,
-        name: 'None',
-        id: 0,
-        role: 'agent',
-        account_id: 0,
-        email: 'None',
-      };
-    },
     agentsList() {
       const agents = this.assignableAgents || [];
-      const agentsByUpdatedPresence = this.getAgentsByUpdatedPresence(agents);
-      const none = this.createNoneAgent;
-      const filteredAgentsByAvailability = this.sortedAgentsByAvailability(
-        agentsByUpdatedPresence
-      );
-      const filteredAgents = [
-        ...(this.isAgentSelected ? [none] : []),
-        ...filteredAgentsByAvailability,
-      ];
-      return filteredAgents;
-    },
-  },
-  methods: {
-    getAgentsByAvailability(agents, availability) {
-      return agents
-        .filter(agent => agent.availability_status === availability)
-        .sort((a, b) => a.name.localeCompare(b.name));
-    },
-    sortedAgentsByAvailability(agents) {
-      const onlineAgents = this.getAgentsByAvailability(agents, 'online');
-      const busyAgents = this.getAgentsByAvailability(agents, 'busy');
-      const offlineAgents = this.getAgentsByAvailability(agents, 'offline');
-      const filteredAgents = [...onlineAgents, ...busyAgents, ...offlineAgents];
-      return filteredAgents;
-    },
-    getAgentsByUpdatedPresence(agents) {
-      // Here we are updating the availability status of the current user dynamically (live) based on the current account availability status
-      const agentsWithDynamicPresenceUpdate = agents.map(item =>
+      return [
+        ...(this.isAgentSelected
+          ? [
+              {
+                confirmed: true,
+                name: 'None',
+                id: 0,
+                role: 'agent',
+                account_id: 0,
+                email: 'None',
+              },
+            ]
+          : []),
+        ...agents,
+      ].map(item =>
         item.id === this.currentUser.id
           ? {
               ...item,
-              availability_status: this.currentUser.accounts.find(
-                account => account.id === this.currentAccountId
-              ).availability_status,
+              availability_status: this.currentUser.availability_status,
             }
           : item
       );
-      return agentsWithDynamicPresenceUpdate;
     },
   },
 };

app/javascript/dashboard/mixins/specs/agentFixtures.js

@@ -20,36 +20,6 @@ export default {
       name: 'Samuel Keta',
       role: 'agent',
     },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
   ],
   formattedAgents: [
     {
@@ -62,17 +32,7 @@ export default {
     },
     {
       account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
+      availability_status: 'busy',
       available_name: 'John K',
       confirmed: true,
       email: 'john@chatwoot.com',
@@ -80,16 +40,6 @@ export default {
       name: 'John Kennady',
       role: 'administrator',
     },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
     {
       account_id: 1,
       availability_status: 'busy',
@@ -100,147 +50,5 @@ export default {
       name: 'Samuel Keta',
       role: 'agent',
     },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  onlineAgents: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-  ],
-  busyAgents: [
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-  ],
-  offlineAgents: [
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  sortedByAvailability: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abraham@chatwoot.com',
-      id: 5,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'John K',
-      confirmed: true,
-      email: 'john@chatwoot.com',
-      id: 1,
-      name: 'John Kennady',
-      role: 'administrator',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Honey',
-      confirmed: true,
-      email: 'bee@chatwoot.com',
-      id: 4,
-      name: 'Honey Bee',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'busy',
-      available_name: 'Samuel K',
-      confirmed: true,
-      email: 'samuel@chatwoot.com',
-      id: 2,
-      name: 'Samuel Keta',
-      role: 'agent',
-    },
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'James K',
-      confirmed: true,
-      email: 'james@chatwoot.com',
-      id: 3,
-      name: 'James Koti',
-      role: 'agent',
-    },
-  ],
-  formattedAgentsByPresenceOnline: [
-    {
-      account_id: 1,
-      availability_status: 'online',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abr@chatwoot.com',
-      id: 1,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
-  ],
-  formattedAgentsByPresenceOffline: [
-    {
-      account_id: 1,
-      availability_status: 'offline',
-      available_name: 'Abraham',
-      confirmed: true,
-      email: 'abr@chatwoot.com',
-      id: 1,
-      name: 'Abraham Keta',
-      role: 'agent',
-    },
   ],
 };

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

@@ -12,71 +12,12 @@ describe('agentMixin', () => {
     getters = {
       getCurrentUser: () => ({
         id: 1,
-        accounts: [
-          {
-            id: 1,
-            availability_status: 'online',
-            auto_offline: false,
-          },
-        ],
+        availability_status: 'busy',
       }),
-      getCurrentAccountId: () => 1,
     };
     store = new Vuex.Store({ getters });
   });
 
-  it('return agents by availability', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'online')
-    ).toEqual(agentFixtures.onlineAgents);
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'busy')
-    ).toEqual(agentFixtures.busyAgents);
-    expect(
-      wrapper.vm.getAgentsByAvailability(agentFixtures.allAgents, 'offline')
-    ).toEqual(agentFixtures.offlineAgents);
-  });
-
-  it('return sorted agents by availability', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.sortedAgentsByAvailability(agentFixtures.allAgents)
-    ).toEqual(agentFixtures.sortedByAvailability);
-  });
-
   it('return formatted agents', () => {
     const Component = {
       render() {},
@@ -97,44 +38,4 @@ describe('agentMixin', () => {
     const wrapper = shallowMount(Component, { store, localVue });
     expect(wrapper.vm.agentsList).toEqual(agentFixtures.formattedAgents);
   });
-
-  it('return formatted agents by presence', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [agentMixin],
-      data() {
-        return {
-          inboxId: 1,
-          currentChat: { meta: { assignee: { name: 'John' } } },
-        };
-      },
-      computed: {
-        currentUser() {
-          return {
-            id: 1,
-            accounts: [
-              {
-                id: 1,
-                availability_status: 'offline',
-                auto_offline: false,
-              },
-            ],
-          };
-        },
-        currentAccountId() {
-          return 1;
-        },
-        assignableAgents() {
-          return agentFixtures.allAgents;
-        },
-      },
-    };
-    const wrapper = shallowMount(Component, { store, localVue });
-    expect(
-      wrapper.vm.getAgentsByUpdatedPresence(
-        agentFixtures.formattedAgentsByPresenceOnline
-      )
-    ).toEqual(agentFixtures.formattedAgentsByPresenceOffline);
-  });
 });

app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue

@@ -98,7 +98,7 @@ export default {
         const errorMessage = error?.message;
         this.alertMessage =
           errorMessage || this.filterType === 0
-            ? errorMessage
+            ? this.$t('FILTER.CUSTOM_VIEWS.ADD.API_FOLDERS.ERROR_MESSAGE')
             : this.$t('FILTER.CUSTOM_VIEWS.ADD.API_SEGMENTS.ERROR_MESSAGE');
       } finally {
         this.showAlert(this.alertMessage);

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

@@ -1,130 +0,0 @@
-<template>
-  <div class="article-item">
-    <h4 class="text-block-title margin-bottom-0">{{ title }}</h4>
-    <p class="margin-bottom-0 text-truncate">{{ body }}</p>
-    <div class="footer">
-      <p class="text-small meta">
-        {{ locale }}
-        {{ ` / ` }}
-        {{
-          category ||
-            $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.ARTICLE_SEARCH_RESULT')
-        }}
-      </p>
-      <div class="action-buttons">
-        <woot-button
-          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="copy"
-          @click="handleCopy"
-        />
-
-        <a
-          :href="url"
-          class="button hollow button--only-icon tiny secondary"
-          rel="noopener noreferrer nofollow"
-          target="_blank"
-          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.OPEN_LINK')"
-        >
-          <fluent-icon size="12" icon="arrow-up-right" />
-          <span class="show-for-sr">{{ url }}</span>
-        </a>
-        <woot-button
-          variant="hollow"
-          color-scheme="secondary"
-          size="tiny"
-          icon="preview-link"
-          :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.PREVIEW_LINK')"
-          @click="handlePreview"
-        />
-        <woot-button
-          class="insert-button"
-          variant="smooth"
-          color-scheme="secondary"
-          size="tiny"
-          @click="handleClick"
-        >
-          {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
-        </woot-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-
-export default {
-  name: 'ArticleSearchResultItem',
-  props: {
-    title: {
-      type: String,
-      default: 'Untitled',
-    },
-    body: {
-      type: String,
-      default: '',
-    },
-    url: {
-      type: String,
-      default: '',
-    },
-    category: {
-      type: String,
-      default: '',
-    },
-    locale: {
-      type: String,
-      default: 'en-US',
-    },
-  },
-  methods: {
-    handleClick() {
-      this.$emit('click');
-    },
-    handlePreview() {
-      this.$emit('preview');
-    },
-    async handleCopy() {
-      await copyTextToClipboard(this.url);
-      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.article-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-micro);
-}
-
-.footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: var(--space-micro);
-}
-
-.meta {
-  color: var(--s-600);
-  margin-bottom: 0;
-}
-
-.action-buttons {
-  display: flex;
-  gap: var(--space-micro);
-}
-.action-buttons .button:not(.insert-button) {
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.1s ease-in;
-}
-
-.article-item:hover .action-buttons .button:not(.insert-button) {
-  visibility: visible;
-  opacity: 1;
-}
-</style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js

@@ -1,56 +0,0 @@
-import ArticleSearchResultItem from '../ArticleSearchResultItem.vue';
-
-export default {
-  title: 'Components/Help Center/ArticleSearchResultItem',
-  component: ArticleSearchResultItem,
-  argTypes: {
-    title: {
-      defaultValue: 'Setup your account',
-      control: {
-        type: 'text',
-      },
-    },
-    body: {
-      defaultValue:
-        'You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.',
-      control: {
-        type: 'text',
-      },
-    },
-    category: {
-      defaultValue: 'Getting started',
-      control: {
-        type: 'text',
-      },
-    },
-    locale: {
-      defaultValue: 'en-US',
-      control: {
-        type: 'text',
-      },
-    },
-    url: {
-      defaultValue: '/app/accounts/1/conversations/23842',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchResultItem },
-  template:
-    '<ArticleSearchResultItem v-bind="$props" ></ArticleSearchResultItem>',
-});
-
-export const ArticleSearchResultItemStory = Template.bind({});
-ArticleSearchResultItemStory.args = {
-  title: 'Setup your account',
-  body: `You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.
-
-You can manage your conversations and collaborate with your team on the go with Chatwoot mobile apps (available for Android and iOS).
-
-In this user guide, we’ve explained the features, capabilities, modes of operation, and step-by-step procedures for easily using the Chatwoot platform.`,
-};

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -37,7 +37,7 @@
             </div>
             <div>
               <thumbnail
-                v-if="hasAssignee(notificationItem)"
+                v-if="notificationItem.primary_actor.meta.assignee"
                 :src="notificationItem.primary_actor.meta.assignee.thumbnail"
                 size="16px"
                 :username="notificationItem.primary_actor.meta.assignee.name"
@@ -127,9 +127,6 @@ export default {
         });
       }
     },
-    hasAssignee(notification) {
-      return notification.primary_actor.meta?.assignee;
-    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="column content-box audit-log--settings">
+  <div class="column content-box">
     <!-- List Audit Logs -->
-    <div>
-      <div>
+    <div class="row">
+      <div class="small-8 columns with-right-space ">
         <p
           v-if="!uiFlags.fetchingList && !records.length"
           class="no-items-error-message"
@@ -16,13 +16,8 @@
 
         <table
           v-if="!uiFlags.fetchingList && records.length"
-          class="woot-table width-100"
+          class="woot-table"
         >
-          <colgroup>
-            <col class="column-activity" />
-            <col />
-            <col />
-          </colgroup>
           <thead>
             <!-- Header -->
             <th
@@ -34,20 +29,16 @@
           </thead>
           <tbody>
             <tr v-for="auditLogItem in records" :key="auditLogItem.id">
+              <td class="wrap-break-words">{{ auditLogItem.username }}</td>
               <td class="wrap-break-words">
-                {{ generateLogText(auditLogItem) }}
-              </td>
-              <td class="wrap-break-words">
-                {{
-                  messageTimestamp(
-                    auditLogItem.created_at,
-                    'MMM dd, yyyy hh:mm a'
-                  )
-                }}
+                {{ auditLogItem.auditable_type }}.{{ auditLogItem.action }}
               </td>
               <td class="remote-address">
                 {{ auditLogItem.remote_address }}
               </td>
+              <td class="wrap-break-words">
+                {{ dynamicTime(auditLogItem.created_at) }}
+              </td>
             </tr>
           </tbody>
         </table>
@@ -85,48 +76,13 @@ export default {
       records: 'auditlogs/getAuditLogs',
       uiFlags: 'auditlogs/getUIFlags',
       meta: 'auditlogs/getMeta',
-      agentList: 'agents/getAgents',
     }),
   },
   mounted() {
     // Fetch API Call
     this.$store.dispatch('auditlogs/fetch', { page: 1 });
-    this.$store.dispatch('agents/get');
   },
   methods: {
-    getAgentName(email) {
-      if (email === null) {
-        return this.$t('AUDIT_LOGS.ACTION.SYSTEM');
-      }
-      const agentName = this.agentList.find(agent => agent.email === email)
-        ?.name;
-      // If agent does not exist(removed/deleted), return email from audit log
-      return agentName || email;
-    },
-    generateLogText(auditLogItem) {
-      const username = this.getAgentName(auditLogItem.username);
-      const auditableType = auditLogItem.auditable_type.toLowerCase();
-      const action = auditLogItem.action.toLowerCase();
-
-      const logActions = {
-        create: this.$t('AUDIT_LOGS.ACTION.ADD'),
-        destroy: this.$t('AUDIT_LOGS.ACTION.DELETE'),
-        update: this.$t('AUDIT_LOGS.ACTION.EDIT'),
-        sign_in: this.$t('AUDIT_LOGS.ACTION.SIGN_IN'),
-        sign_out: this.$t('AUDIT_LOGS.ACTION.SIGN_OUT'),
-      };
-
-      // detect if the action is custom user action, which involves
-      // only the user, such as signing in, signing out etc.
-      // if it is, then do not show the auditable type
-      const userActions = this.getUserActions(action);
-      return `${username} ${logActions[action] || action} ${
-        userActions ? '' : auditableType
-      }`;
-    },
-    getUserActions(action) {
-      return ['sign_in', 'sign_out'].includes(action);
-    },
     onPageChange(page) {
       window.history.pushState({}, null, `${this.$route.path}?page=${page}`);
       try {
@@ -140,24 +96,12 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.audit-log--settings {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-
-  .remote-address {
-    width: 14rem;
-  }
-
-  .wrap-break-words {
-    word-break: break-all;
-    white-space: normal;
-  }
-
-  .column-activity {
-    width: 60%;
-  }
+<style scoped>
+.remote-address {
+  width: 14rem;
+}
+.wrap-break-words {
+  word-break: break-all;
+  white-space: normal;
 }
 </style>

app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue

@@ -5,7 +5,7 @@
         :header-title="$t('CANNED_MGMT.ADD.TITLE')"
         :header-content="$t('CANNED_MGMT.ADD.DESC')"
       />
-      <form class="row" @submit.prevent="addCannedResponse()">
+      <form class="row" @submit.prevent="addAgent()">
         <div class="medium-12 columns">
           <label :class="{ error: $v.shortCode.$error }">
             {{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
@@ -107,7 +107,7 @@ export default {
       this.$v.shortCode.$reset();
       this.$v.content.$reset();
     },
-    addCannedResponse() {
+    addAgent() {
       // Show loading on button
       this.addCanned.showLoading = true;
       // Make API Calls
@@ -123,11 +123,9 @@ export default {
           this.resetForm();
           this.onClose();
         })
-        .catch(error => {
+        .catch(() => {
           this.addCanned.showLoading = false;
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+          this.showAlert(this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE'));
         });
     },
   },

app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue

@@ -57,7 +57,6 @@
 import { required, minLength } from 'vuelidate/lib/validators';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
-import alertMixin from 'shared/mixins/alertMixin';
 import Modal from '../../../../components/Modal';
 
 export default {
@@ -66,7 +65,6 @@ export default {
     Modal,
     WootMessageEditor,
   },
-  mixins: [alertMixin],
   props: {
     id: { type: Number, default: null },
     edcontent: { type: String, default: '' },
@@ -78,6 +76,7 @@ export default {
       editCanned: {
         showAlert: false,
         showLoading: false,
+        message: '',
       },
       shortCode: this.edshortCode,
       content: this.edcontent,
@@ -103,6 +102,9 @@ export default {
       this.$v.content.$touch();
       this.content = name;
     },
+    showAlert() {
+      bus.$emit('newToastMessage', this.editCanned.message);
+    },
     resetForm() {
       this.shortCode = '';
       this.content = '';
@@ -122,17 +124,21 @@ export default {
         .then(() => {
           // Reset Form, Show success message
           this.editCanned.showLoading = false;
-          this.showAlert(this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+          this.editCanned.message = this.$t(
+            'CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'
+          );
+          this.showAlert();
           this.resetForm();
           setTimeout(() => {
             this.onClose();
           }, 10);
         })
-        .catch(error => {
+        .catch(() => {
           this.editCanned.showLoading = false;
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.EDIT.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+          this.editCanned.message = this.$t(
+            'CANNED_MGMT.EDIT.API.ERROR_MESSAGE'
+          );
+          this.showAlert();
         });
     },
   },

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -198,10 +198,8 @@ export default {
         .then(() => {
           this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
         })
-        .catch(error => {
-          const errorMessage =
-            error?.message || this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE');
-          this.showAlert(errorMessage);
+        .catch(() => {
+          this.showAlert(this.$t('CANNED_MGMT.DELETE.API.ERROR_MESSAGE'));
         });
     },
   },

app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="column content-box">
     <report-filter-selector
-      :show-agents-filter="true"
-      :show-inbox-filter="true"
-      :show-rating-filter="true"
-      :show-team-filter="isTeamsEnabled"
+      agents-filter
+      :agents-filter-items-list="agentList"
       :show-business-hours-switch="false"
-      @filter-change="onFilterChange"
+      @date-range-change="onDateRangeChange"
+      @agents-filter-change="onAgentsFilterChange"
     />
     <woot-button
       color-scheme="success"
@@ -16,7 +15,7 @@
     >
       {{ $t('CSAT_REPORTS.DOWNLOAD') }}
     </woot-button>
-    <csat-metrics :filters="requestPayload" />
+    <csat-metrics />
     <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
 </template>
@@ -24,11 +23,9 @@
 import CsatMetrics from './components/CsatMetrics';
 import CsatTable from './components/CsatTable';
 import ReportFilterSelector from './components/FilterSelector';
+import { mapGetters } from 'vuex';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
-import { mapGetters } from 'vuex';
-import { FEATURE_FLAGS } from '../../../../featureFlags';
-import alertMixin from '../../../../../shared/mixins/alertMixin';
 
 export default {
   name: 'CsatResponses',
@@ -37,78 +34,39 @@ export default {
     CsatTable,
     ReportFilterSelector,
   },
-  mixins: [alertMixin],
   data() {
-    return {
-      pageIndex: 1,
-      from: 0,
-      to: 0,
-      userIds: [],
-      inbox: null,
-      team: null,
-      rating: null,
-    };
+    return { pageIndex: 1, from: 0, to: 0, userIds: [] };
   },
   computed: {
     ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      isFeatureEnabledOnAccount: 'accounts/isFeatureEnabledonAccount',
+      agentList: 'agents/getAgents',
     }),
-    requestPayload() {
-      return {
-        from: this.from,
-        to: this.to,
-        user_ids: this.userIds,
-        inbox_id: this.inbox,
-        team_id: this.team,
-        rating: this.rating,
-      };
-    },
-    isTeamsEnabled() {
-      return this.isFeatureEnabledOnAccount(
-        this.accountId,
-        FEATURE_FLAGS.TEAM_MANAGEMENT
-      );
-    },
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
   },
   methods: {
     getAllData() {
-      try {
-        this.$store.dispatch('csat/getMetrics', this.requestPayload);
-        this.getResponses();
-      } catch {
-        this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
-      }
+      this.$store.dispatch('csat/getMetrics', {
+        from: this.from,
+        to: this.to,
+        user_ids: this.userIds,
+      });
+      this.getResponses();
     },
     getResponses() {
       this.$store.dispatch('csat/get', {
         page: this.pageIndex,
-        ...this.requestPayload,
+        from: this.from,
+        to: this.to,
+        user_ids: this.userIds,
       });
     },
-    downloadReports() {
-      const type = 'csat';
-      try {
-        this.$store.dispatch('csat/downloadCSATReports', {
-          fileName: generateFileName({ type, to: this.to }),
-          ...this.requestPayload,
-        });
-      } catch (error) {
-        this.showAlert(this.$t('REPORT.CSAT_REPORTS.DOWNLOAD_FAILED'));
-      }
-    },
     onPageNumberChange(pageIndex) {
       this.pageIndex = pageIndex;
       this.getResponses();
     },
-    onFilterChange({
-      from,
-      to,
-      selectedAgents,
-      selectedInbox,
-      selectedTeam,
-      selectedRating,
-    }) {
+    onDateRangeChange({ from, to }) {
       // do not track filter change on inital load
       if (this.from !== 0 && this.to !== 0) {
         this.$track(REPORTS_EVENTS.FILTER_REPORT, {
@@ -116,16 +74,27 @@ export default {
           reportType: 'csat',
         });
       }
-
       this.from = from;
       this.to = to;
-      this.userIds = selectedAgents.map(el => el.id);
-      this.inbox = selectedInbox?.id;
-      this.team = selectedTeam?.id;
-      this.rating = selectedRating?.value;
-
       this.getAllData();
     },
+    onAgentsFilterChange(agents) {
+      this.userIds = agents.map(el => el.id);
+      this.getAllData();
+      this.$track(REPORTS_EVENTS.FILTER_REPORT, {
+        filterType: 'agent',
+        reportType: 'csat',
+      });
+    },
+    downloadReports() {
+      const type = 'csat';
+      this.$store.dispatch('csat/downloadCSATReports', {
+        from: this.from,
+        to: this.to,
+        user_ids: this.userIds,
+        fileName: generateFileName({ type, to: this.to }),
+      });
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -9,9 +9,12 @@
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
     </woot-button>
     <report-filter-selector
-      :show-agents-filter="false"
-      :show-group-by-filter="true"
+      group-by-filter
+      :selected-group-by-filter="selectedGroupByFilter"
+      :filter-items-list="filterItemsList"
+      @date-range-change="onDateRangeChange"
       @filter-change="onFilterChange"
+      @business-hours-toggle="onBusinessHoursToggle"
     />
     <div class="row">
       <woot-report-stats-card
@@ -52,8 +55,7 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import ReportFilterSelector from './components/FilterSelector';
 import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
-import reportMixin from 'dashboard/mixins/reportMixin';
-import alertMixin from 'shared/mixins/alertMixin';
+import reportMixin from '../../../../mixins/reportMixin';
 import { formatTime } from '@chatwoot/utils';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 
@@ -71,13 +73,15 @@ export default {
   components: {
     ReportFilterSelector,
   },
-  mixins: [reportMixin, alertMixin],
+  mixins: [reportMixin],
   data() {
     return {
       from: 0,
       to: 0,
       currentSelection: 0,
       groupBy: GROUP_BY_FILTER[1],
+      filterItemsList: this.$t('REPORT.GROUP_BY_DAY_OPTIONS'),
+      selectedGroupByFilter: {},
       businessHours: false,
     };
   },
@@ -92,7 +96,7 @@ export default {
       }
       if (!this.accountReport.data.length) return {};
       const labels = this.accountReport.data.map(element => {
-        if (this.groupBy?.period === GROUP_BY_FILTER[2].period) {
+        if (this.groupBy.period === GROUP_BY_FILTER[2].period) {
           let week_date = new Date(fromUnixTime(element.timestamp));
           const first_day = week_date.getDate() - week_date.getDay();
           const last_day = first_day + 6;
@@ -105,10 +109,10 @@ export default {
             'dd/MM/yy'
           )}`;
         }
-        if (this.groupBy?.period === GROUP_BY_FILTER[3].period) {
+        if (this.groupBy.period === GROUP_BY_FILTER[3].period) {
           return format(fromUnixTime(element.timestamp), 'MMM-yyyy');
         }
-        if (this.groupBy?.period === GROUP_BY_FILTER[4].period) {
+        if (this.groupBy.period === GROUP_BY_FILTER[4].period) {
           return format(fromUnixTime(element.timestamp), 'yyyy');
         }
         return format(fromUnixTime(element.timestamp), 'dd-MMM-yyyy');
@@ -187,35 +191,24 @@ export default {
   },
   methods: {
     fetchAllData() {
-      this.fetchAccountSummary();
-      this.fetchChartData();
-    },
-    fetchAccountSummary() {
-      try {
-        this.$store.dispatch('fetchAccountSummary', this.getRequestPayload());
-      } catch {
-        this.showAlert(this.$t('REPORT.SUMMARY_FETCHING_FAILED'));
-      }
-    },
-    fetchChartData() {
-      try {
-        this.$store.dispatch('fetchAccountReport', {
-          metric: this.metrics[this.currentSelection].KEY,
-          ...this.getRequestPayload(),
-        });
-      } catch {
-        this.showAlert(this.$t('REPORT.DATA_FETCHING_FAILED'));
-      }
-    },
-    getRequestPayload() {
       const { from, to, groupBy, businessHours } = this;
-
-      return {
+      this.$store.dispatch('fetchAccountSummary', {
         from,
         to,
-        groupBy: groupBy?.period,
+        groupBy: groupBy.period,
         businessHours,
-      };
+      });
+      this.fetchChartData();
+    },
+    fetchChartData() {
+      const { from, to, groupBy, businessHours } = this;
+      this.$store.dispatch('fetchAccountReport', {
+        metric: this.metrics[this.currentSelection].KEY,
+        from,
+        to,
+        groupBy: groupBy.period,
+        businessHours,
+      });
     },
     downloadAgentReports() {
       const { from, to } = this;
@@ -229,15 +222,57 @@ export default {
       this.currentSelection = index;
       this.fetchChartData();
     },
-    onFilterChange({ from, to, groupBy, businessHours }) {
+    onDateRangeChange({ from, to, groupBy }) {
+      // do not track filter change on inital load
+      if (this.from !== 0 && this.to !== 0) {
+        this.$track(REPORTS_EVENTS.FILTER_REPORT, {
+          filterType: 'date',
+          reportType: 'conversations',
+        });
+      }
       this.from = from;
       this.to = to;
-      this.groupBy = groupBy;
-      this.businessHours = businessHours;
+      this.filterItemsList = this.fetchFilterItems(groupBy);
+      const filterItems = this.filterItemsList.filter(
+        item => item.id === this.groupBy.id
+      );
+      if (filterItems.length > 0) {
+        this.selectedGroupByFilter = filterItems[0];
+      } else {
+        this.selectedGroupByFilter = this.filterItemsList[0];
+        this.groupBy = GROUP_BY_FILTER[this.selectedGroupByFilter.id];
+      }
+      this.fetchAllData();
+    },
+    onFilterChange(payload) {
+      this.groupBy = GROUP_BY_FILTER[payload.id];
       this.fetchAllData();
 
       this.$track(REPORTS_EVENTS.FILTER_REPORT, {
-        filterValue: { from, to, groupBy, businessHours },
+        filterType: 'groupBy',
+        filterValue: this.groupBy?.period,
+        reportType: 'conversations',
+      });
+    },
+    fetchFilterItems(groupBy) {
+      switch (groupBy) {
+        case GROUP_BY_FILTER[2].period:
+          return this.$t('REPORT.GROUP_BY_WEEK_OPTIONS');
+        case GROUP_BY_FILTER[3].period:
+          return this.$t('REPORT.GROUP_BY_MONTH_OPTIONS');
+        case GROUP_BY_FILTER[4].period:
+          return this.$t('REPORT.GROUP_BY_YEAR_OPTIONS');
+        default:
+          return this.$t('REPORT.GROUP_BY_DAY_OPTIONS');
+      }
+    },
+    onBusinessHoursToggle(value) {
+      this.businessHours = value;
+      this.fetchAllData();
+
+      this.$track(REPORTS_EVENTS.FILTER_REPORT, {
+        filterType: 'businessHours',
+        filterValue: value,
         reportType: 'conversations',
       });
     },

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue

@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="medium-2 small-6 csat--metric-card"
-    :class="{
-      disabled: disabled,
-    }"
-  >
+  <div class="medium-2 small-6 csat--metric-card">
     <h3 class="heading">
       <span>{{ label }}</span>
       <fluent-icon
@@ -34,10 +29,6 @@ export default {
       type: String,
       required: true,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 };
 </script>
@@ -46,13 +37,6 @@ export default {
   margin: 0;
   padding: var(--space-normal);
 
-  &.disabled {
-    // grayscale everything
-    filter: grayscale(100%);
-    opacity: 0.3;
-    pointer-events: none;
-  }
-
   .heading {
     align-items: center;
     color: var(--color-heading);

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue

@@ -6,20 +6,16 @@
       :value="responseCount"
     />
     <csat-metric-card
-      :disabled="ratingFilterEnabled"
       :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
+      :value="formatToPercent(satisfactionScore)"
     />
     <csat-metric-card
       :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
       :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
       :value="formatToPercent(responseRate)"
     />
-    <div
-      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      class="medium-6 report-card"
-    >
+    <div v-if="metrics.totalResponseCount" class="medium-6 report-card">
       <h3 class="heading">
         <div class="emoji--distribution">
           <div
@@ -28,7 +24,7 @@
             class="emoji--distribution-item"
           >
             <span class="emoji--distribution-key">{{
-              ratingToEmoji(key)
+              csatRatings[key - 1].emoji
             }}</span>
             <span>{{ formatToPercent(rating) }}</span>
           </div>
@@ -49,12 +45,6 @@ export default {
   components: {
     CsatMetricCard,
   },
-  props: {
-    filters: {
-      type: Object,
-      required: true,
-    },
-  },
   data() {
     return {
       csatRatings: CSAT_RATINGS,
@@ -67,15 +57,12 @@ export default {
       satisfactionScore: 'csat/getSatisfactionScore',
       responseRate: 'csat/getResponseRate',
     }),
-    ratingFilterEnabled() {
-      return Boolean(this.filters.rating);
-    },
     chartData() {
       return {
         labels: ['Rating'],
-        datasets: CSAT_RATINGS.map(rating => ({
+        datasets: CSAT_RATINGS.map((rating, index) => ({
           label: rating.emoji,
-          data: [this.ratingPercentage[rating.value]],
+          data: [this.ratingPercentage[index + 1]],
           backgroundColor: rating.color,
         })),
       };
@@ -90,9 +77,6 @@ export default {
     formatToPercent(value) {
       return value ? `${value}%` : '--';
     },
-    ratingToEmoji(value) {
-      return CSAT_RATINGS.find(rating => rating.value === Number(value)).emoji;
-    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -1,43 +1,72 @@
 <template>
-  <div class="filter-container">
-    <reports-filters-date-range @on-range-change="onDateRangeChange" />
+  <div class="flex-container flex-dir-column medium-flex-dir-row">
+    <div class="small-12 medium-3 pull-right multiselect-wrap--small">
+      <multiselect
+        v-model="currentDateRangeSelection"
+        track-by="name"
+        label="name"
+        :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :options="dateRange"
+        :searchable="false"
+        :allow-empty="false"
+        @select="changeDateSelection"
+      />
+    </div>
     <woot-date-range-picker
       v-if="isDateRangeSelected"
+      class="margin-left-1"
       show-range
-      class="no-margin auto-width"
       :value="customDateRange"
       :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
       :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-      @change="onCustomDateRangeChange"
+      @change="onChange"
     />
-    <reports-filters-date-group-by
-      v-if="showGroupByFilter && isGroupByPossible"
-      :valid-group-options="validGroupOptions"
-      :selected-option="selectedGroupByFilter"
-      @on-grouping-change="onGroupingChange"
-    />
-    <reports-filters-agents
-      v-if="showAgentsFilter"
-      @agents-filter-selection="handleAgentsFilterSelection"
-    />
-    <reports-filters-labels
-      v-if="showLabelsFilter"
-      @labels-filter-selection="handleLabelsFilterSelection"
-    />
-    <reports-filters-teams
-      v-if="showTeamFilter"
-      @team-filter-selection="handleTeamFilterSelection"
-    />
-    <reports-filters-inboxes
-      v-if="showInboxFilter"
-      @inbox-filter-selection="handleInboxFilterSelection"
-    />
-    <reports-filters-ratings
-      v-if="showRatingFilter"
-      @rating-filter-selection="handleRatingFilterSelection"
-    />
-    <div v-if="showBusinessHoursSwitch" class="business-hours">
-      <span class="business-hours-text ">
+    <div
+      v-if="notLast7Days && groupByFilter"
+      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
+    >
+      <p aria-hidden="true" class="hide">
+        {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
+      </p>
+      <multiselect
+        v-model="currentSelectedFilter"
+        track-by="id"
+        label="groupBy"
+        :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
+        :options="filterItemsList"
+        :allow-empty="false"
+        :show-labels="false"
+        @input="changeFilterSelection"
+      />
+    </div>
+    <div
+      v-if="agentsFilter"
+      class="small-12 medium-3 pull-right margin-left-1 margin-right-1 multiselect-wrap--small"
+    >
+      <multiselect
+        v-model="selectedAgents"
+        :options="agentsFilterItemsList"
+        track-by="id"
+        label="name"
+        :multiple="true"
+        :close-on-select="false"
+        :clear-on-select="false"
+        :hide-selected="true"
+        :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+        @input="handleAgentsFilterSelection"
+      />
+    </div>
+    <div
+      v-if="showBusinessHoursSwitch"
+      class="small-12 medium-3 business-hours"
+    >
+      <span class="business-hours-text margin-right-1">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
@@ -48,54 +77,36 @@
 </template>
 <script>
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-import ReportsFiltersDateRange from './Filters/DateRange.vue';
-import ReportsFiltersDateGroupBy from './Filters/DateGroupBy.vue';
-import ReportsFiltersAgents from './Filters/Agents.vue';
-import ReportsFiltersLabels from './Filters/Labels.vue';
-import ReportsFiltersInboxes from './Filters/Inboxes.vue';
-import ReportsFiltersTeams from './Filters/Teams.vue';
-import ReportsFiltersRatings from './Filters/Ratings.vue';
 import subDays from 'date-fns/subDays';
-import { DATE_RANGE_OPTIONS } from '../constants';
-import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+import startOfDay from 'date-fns/startOfDay';
+import getUnixTime from 'date-fns/getUnixTime';
+import { GROUP_BY_FILTER } from '../constants';
+import endOfDay from 'date-fns/endOfDay';
+
+const CUSTOM_DATE_RANGE_ID = 5;
 
 export default {
   components: {
     WootDateRangePicker,
-    ReportsFiltersDateRange,
-    ReportsFiltersDateGroupBy,
-    ReportsFiltersAgents,
-    ReportsFiltersLabels,
-    ReportsFiltersInboxes,
-    ReportsFiltersTeams,
-    ReportsFiltersRatings,
   },
   props: {
     filterItemsList: {
       type: Array,
       default: () => [],
     },
-    showGroupByFilter: {
+    agentsFilterItemsList: {
+      type: Array,
+      default: () => [],
+    },
+    selectedGroupByFilter: {
+      type: Object,
+      default: () => {},
+    },
+    groupByFilter: {
       type: Boolean,
       default: false,
     },
-    showAgentsFilter: {
-      type: Boolean,
-      default: false,
-    },
-    showLabelsFilter: {
-      type: Boolean,
-      default: false,
-    },
-    showInboxFilter: {
-      type: Boolean,
-      default: false,
-    },
-    showRatingFilter: {
-      type: Boolean,
-      default: false,
-    },
-    showTeamFilter: {
+    agentsFilter: {
       type: Boolean,
       default: false,
     },
@@ -106,134 +117,95 @@ export default {
   },
   data() {
     return {
-      // default value, need not be translated
-      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
-      selectedGroupByFilter: null,
-      selectedLabel: null,
-      selectedInbox: null,
-      selectedTeam: null,
-      selectedRating: null,
-      selectedAgents: [],
+      currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
+      dateRange: this.$t('REPORT.DATE_RANGE'),
       customDateRange: [new Date(), new Date()],
+      currentSelectedFilter: null,
+      selectedAgents: [],
       businessHoursSelected: false,
     };
   },
   computed: {
     isDateRangeSelected() {
-      return (
-        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
-      );
-    },
-    isGroupByPossible() {
-      return this.selectedDateRange.id !== DATE_RANGE_OPTIONS.LAST_7_DAYS.id;
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
     },
     to() {
       if (this.isDateRangeSelected) {
-        return getUnixEndOfDay(this.customDateRange[1]);
+        return this.toCustomDate(this.customDateRange[1]);
       }
-      return getUnixEndOfDay(new Date());
+      return this.toCustomDate(new Date());
     },
     from() {
       if (this.isDateRangeSelected) {
-        return getUnixStartOfDay(this.customDateRange[0]);
+        return this.fromCustomDate(this.customDateRange[0]);
       }
-
-      const { offset } = this.selectedDateRange;
-      const fromDate = subDays(new Date(), offset);
-      return getUnixStartOfDay(fromDate);
+      const dateRange = {
+        0: 6,
+        1: 29,
+        2: 89,
+        3: 179,
+        4: 364,
+      };
+      const diff = dateRange[this.currentDateRangeSelection.id];
+      const fromDate = subDays(new Date(), diff);
+      return this.fromCustomDate(fromDate);
     },
-    validGroupOptions() {
-      return this.selectedDateRange.groupByOptions;
+    groupBy() {
+      if (this.isDateRangeSelected) {
+        return GROUP_BY_FILTER[4].period;
+      }
+      const groupRange = {
+        0: GROUP_BY_FILTER[1].period,
+        1: GROUP_BY_FILTER[2].period,
+        2: GROUP_BY_FILTER[3].period,
+        3: GROUP_BY_FILTER[3].period,
+        4: GROUP_BY_FILTER[3].period,
+      };
+      return groupRange[this.currentDateRangeSelection.id];
     },
-    validGroupBy() {
-      if (!this.selectedGroupByFilter) {
-        return this.validGroupOptions[0];
-      }
-
-      const validIds = this.validGroupOptions.map(opt => opt.id);
-      if (validIds.includes(this.selectedGroupByFilter.id)) {
-        return this.selectedGroupByFilter;
-      }
-      return this.validGroupOptions[0];
+    notLast7Days() {
+      return this.groupBy !== GROUP_BY_FILTER[1].period;
     },
   },
   watch: {
+    filterItemsList() {
+      this.currentSelectedFilter = this.selectedGroupByFilter;
+    },
     businessHoursSelected() {
-      this.emitChange();
+      this.$emit('business-hours-toggle', this.businessHoursSelected);
     },
   },
   mounted() {
-    this.emitChange();
+    this.onDateRangeChange();
   },
   methods: {
-    emitChange() {
-      const {
-        from,
-        to,
-        selectedGroupByFilter: groupBy,
-        businessHoursSelected: businessHours,
-        selectedAgents,
-        selectedLabel,
-        selectedInbox,
-        selectedTeam,
-        selectedRating,
-      } = this;
-      this.$emit('filter-change', {
-        from,
-        to,
-        groupBy,
-        businessHours,
-        selectedAgents,
-        selectedLabel,
-        selectedInbox,
-        selectedTeam,
-        selectedRating,
+    onDateRangeChange() {
+      this.$emit('date-range-change', {
+        from: this.from,
+        to: this.to,
+        groupBy: this.groupBy,
       });
     },
-    onDateRangeChange(selectedRange) {
-      this.selectedDateRange = selectedRange;
-      this.selectedGroupByFilter = this.validGroupBy;
-      this.emitChange();
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
     },
-    onCustomDateRangeChange(value) {
+    toCustomDate(date) {
+      return getUnixTime(endOfDay(date));
+    },
+    changeDateSelection(selectedRange) {
+      this.currentDateRangeSelection = selectedRange;
+      this.onDateRangeChange();
+    },
+    onChange(value) {
       this.customDateRange = value;
-      this.selectedGroupByFilter = this.validGroupBy;
-      this.emitChange();
+      this.onDateRangeChange();
     },
-    onGroupingChange(payload) {
-      this.selectedGroupByFilter = payload;
-      this.emitChange();
+    changeFilterSelection() {
+      this.$emit('filter-change', this.currentSelectedFilter);
     },
-    handleAgentsFilterSelection(selectedAgents) {
-      this.selectedAgents = selectedAgents;
-      this.emitChange();
-    },
-    handleLabelsFilterSelection(selectedLabel) {
-      this.selectedLabel = selectedLabel;
-      this.emitChange();
-    },
-    handleInboxFilterSelection(selectedInbox) {
-      this.selectedInbox = selectedInbox;
-      this.emitChange();
-    },
-    handleTeamFilterSelection(selectedTeam) {
-      this.selectedTeam = selectedTeam;
-      this.emitChange();
-    },
-    handleRatingFilterSelection(selectedRating) {
-      this.selectedRating = selectedRating;
-      this.emitChange();
+    handleAgentsFilterSelection() {
+      this.$emit('agents-filter-change', this.selectedAgents);
     },
   },
 };
 </script>
-
-<style scoped>
-.filter-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  grid-gap: var(--space-slab);
-
-  margin-bottom: var(--space-normal);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOptions"
-      class="no-margin"
-      :options="options"
-      track-by="id"
-      label="name"
-      :multiple="true"
-      :close-on-select="false"
-      :clear-on-select="false"
-      :hide-selected="true"
-      :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-      @input="handleInput"
-    />
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersAgents',
-  data() {
-    return {
-      selectedOptions: [],
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'agents/getAgents',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('agents-filter-selection', this.selectedOptions);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateGroupBy.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <p aria-hidden="true" class="hide">
-      {{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
-    </p>
-    <multiselect
-      v-model="currentSelectedFilter"
-      class="no-margin"
-      track-by="id"
-      label="groupBy"
-      :placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
-      :options="translatedOptions"
-      :allow-empty="false"
-      :show-labels="false"
-      @select="changeFilterSelection"
-    />
-  </div>
-</template>
-
-<script>
-import { GROUP_BY_OPTIONS } from '../../constants';
-
-const EVENT_NAME = 'on-grouping-change';
-
-export default {
-  name: 'ReportsFiltersDateGroupBy',
-  props: {
-    validGroupOptions: {
-      type: Array,
-      default: () => [GROUP_BY_OPTIONS.DAY],
-    },
-    selectedOption: {
-      type: Object,
-      default: () => GROUP_BY_OPTIONS.DAY,
-    },
-  },
-  data() {
-    return {
-      currentSelectedFilter: null,
-    };
-  },
-  computed: {
-    translatedOptions() {
-      return this.validGroupOptions.map(option => ({
-        ...option,
-        groupBy: this.$t(option.translationKey),
-      }));
-    },
-  },
-  watch: {
-    selectedOption: {
-      handler() {
-        this.currentSelectedFilter = {
-          ...this.selectedOption,
-          groupBy: this.$t(this.selectedOption.translationKey),
-        };
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    changeFilterSelection(selectedFilter) {
-      this.groupByOptions = this.$emit(EVENT_NAME, selectedFilter);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/DateRange.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      track-by="name"
-      label="name"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      selected-label
-      :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-      deselect-label=""
-      :options="options"
-      :searchable="false"
-      :allow-empty="false"
-      @select="updateRange"
-    />
-  </div>
-</template>
-
-<script>
-import { DATE_RANGE_OPTIONS } from '../../constants';
-
-const EVENT_NAME = 'on-range-change';
-
-export default {
-  name: 'ReportFiltersDateRange',
-  data() {
-    const translatedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: this.$t(option.translationKey),
-    }));
-
-    return {
-      // relies on translations, need to move it to constants
-      selectedOption: translatedOptions[0],
-      options: translatedOptions,
-    };
-  },
-  methods: {
-    updateRange(selectedRange) {
-      this.selectedOption = selectedRange;
-      this.$emit(EVENT_NAME, selectedRange);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersInboxes',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'inboxes/getInboxes',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('inboxes/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('inbox-filter-selection', this.selectedOption);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue

@@ -1,71 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="title"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    >
-      <template slot="singleLabel" slot-scope="props">
-        <div class="reports-option__wrap">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="reports-option__rounded--item"
-          />
-          <span class="reports-option__desc">
-            <span class="reports-option__title">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-      <template slot="option" slot-scope="props">
-        <div class="reports-option__wrap">
-          <div
-            :style="{ backgroundColor: props.option.color }"
-            class="
-                reports-option__rounded--item
-                reports-option__item
-                reports-option__label--swatch
-              "
-          />
-          <span class="reports-option__desc">
-            <span class="reports-option__title">
-              {{ props.option.title }}
-            </span>
-          </span>
-        </div>
-      </template>
-    </multiselect>
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersLabels',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'labels/getLabels',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('labels/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('labels-filter-selection', this.selectedOption);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Ratings.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :option-height="24"
-      :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-      :options="options"
-      :show-labels="false"
-      track-by="value"
-      label="label"
-      @input="handleInput"
-    />
-  </div>
-</template>
-
-<script>
-import { CSAT_RATINGS } from 'shared/constants/messages';
-
-export default {
-  name: 'ReportFiltersRatings',
-  data() {
-    const translatedOptions = CSAT_RATINGS.reverse().map(option => ({
-      ...option,
-      label: this.$t(option.translationKey),
-    }));
-
-    return {
-      selectedOption: null,
-      options: translatedOptions,
-    };
-  },
-  methods: {
-    handleInput(selectedRating) {
-      this.$emit('rating-filter-selection', selectedRating);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Teams.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="multiselect-wrap--small">
-    <multiselect
-      v-model="selectedOption"
-      class="no-margin"
-      :placeholder="$t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL')"
-      label="name"
-      track-by="id"
-      :options="options"
-      :option-height="24"
-      :show-labels="false"
-      @input="handleInput"
-    />
-  </div>
-</template>
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  name: 'ReportsFiltersTeams',
-  data() {
-    return {
-      selectedOption: null,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      options: 'teams/getTeams',
-    }),
-  },
-  mounted() {
-    this.$store.dispatch('teams/get');
-  },
-  methods: {
-    handleInput() {
-      this.$emit('team-filter-selection', this.selectedOption);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js

@@ -1,64 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import CsatMetrics from '../CsatMetrics.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['csat-metric-card', 'woot-horizontal-bar'],
-};
-
-describe('CsatMetrics.vue', () => {
-  let getters;
-  let store;
-  let wrapper;
-  const filters = { rating: 3 };
-
-  beforeEach(() => {
-    getters = {
-      'csat/getMetrics': () => ({ totalResponseCount: 100 }),
-      'csat/getRatingPercentage': () => ({ 1: 10, 2: 20, 3: 30, 4: 30, 5: 10 }),
-      'csat/getSatisfactionScore': () => 85,
-      'csat/getResponseRate': () => 90,
-    };
-
-    store = new Vuex.Store({
-      getters,
-    });
-
-    wrapper = shallowMount(CsatMetrics, {
-      store,
-      localVue,
-      propsData: { filters },
-      ...mountParams,
-    });
-  });
-
-  it('computes response count correctly', () => {
-    expect(wrapper.vm.responseCount).toBe('100');
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('formats values to percent correctly', () => {
-    expect(wrapper.vm.formatToPercent(85)).toBe('85%');
-    expect(wrapper.vm.formatToPercent(null)).toBe('--');
-  });
-
-  it('maps rating value to emoji correctly', () => {
-    const rating = wrapper.vm.csatRatings[0]; // assuming this is { value: 1, emoji: '😡' }
-    expect(wrapper.vm.ratingToEmoji(rating.value)).toBe(rating.emoji);
-  });
-
-  it('hides report card if rating filter is enabled', () => {
-    expect(wrapper.find('.report-card').exists()).toBe(false);
-  });
-
-  it('shows report card if rating filter is not enabled', async () => {
-    await wrapper.setProps({ filters: {} });
-    expect(wrapper.find('.report-card').exists()).toBe(true);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CsatMetricCard.spec.js

@@ -1,46 +0,0 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import CsatMetricCard from '../CsatMetricCard.vue';
-
-import VTooltip from 'v-tooltip';
-
-const localVue = createLocalVue();
-localVue.use(VTooltip);
-
-describe('CsatMetricCard.vue', () => {
-  it('renders props correctly', () => {
-    const label = 'Total Responses';
-    const value = '100';
-    const infoText = 'Total number of responses';
-    const wrapper = shallowMount(CsatMetricCard, {
-      propsData: { label, value, infoText },
-      localVue,
-      stubs: ['fluent-icon'],
-    });
-
-    expect(wrapper.find('.heading span').text()).toMatch(label);
-    expect(wrapper.find('.metric').text()).toMatch(value);
-    expect(wrapper.find('.csat--icon').classes()).toContain('has-tooltip');
-  });
-
-  it('adds disabled class when disabled prop is true', () => {
-    const wrapper = shallowMount(CsatMetricCard, {
-      propsData: { label: '', value: '', infoText: '', disabled: true },
-      localVue,
-      stubs: ['fluent-icon'],
-    });
-
-    expect(wrapper.find('.csat--metric-card').classes()).toContain('disabled');
-  });
-
-  it('does not add disabled class when disabled prop is false', () => {
-    const wrapper = shallowMount(CsatMetricCard, {
-      propsData: { label: '', value: '', infoText: '', disabled: false },
-      localVue,
-      stubs: ['fluent-icon'],
-    });
-
-    expect(wrapper.find('.csat--metric-card').classes()).not.toContain(
-      'disabled'
-    );
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersAgents.spec.js

@@ -1,59 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import ReportsFiltersAgents from '../../Filters/Agents';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const mockStore = new Vuex.Store({
-  modules: {
-    agents: {
-      namespaced: true,
-      state: {
-        agents: [],
-      },
-      getters: {
-        getAgents: state => state.agents,
-      },
-      actions: {
-        get: jest.fn(),
-      },
-    },
-  },
-});
-
-const mountParams = {
-  localVue,
-  store: mockStore,
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportsFiltersAgents.vue', () => {
-  it('emits "agents-filter-selection" event when handleInput is called', () => {
-    const wrapper = shallowMount(ReportsFiltersAgents, mountParams);
-
-    const selectedAgents = [
-      { id: 1, name: 'Agent 1' },
-      { id: 2, name: 'Agent 2' },
-    ];
-    wrapper.setData({ selectedOptions: selectedAgents });
-
-    wrapper.vm.handleInput();
-
-    expect(wrapper.emitted('agents-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('agents-filter-selection')[0]).toEqual([
-      selectedAgents,
-    ]);
-  });
-
-  it('dispatches the "agents/get" action when the component is mounted', () => {
-    const dispatchSpy = jest.spyOn(mockStore, 'dispatch');
-
-    shallowMount(ReportsFiltersAgents, mountParams);
-
-    expect(dispatchSpy).toHaveBeenCalledWith('agents/get');
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateGroupBy.spec.js

@@ -1,45 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import ReportsFiltersDateGroupBy from '../../Filters/DateGroupBy';
-import { GROUP_BY_OPTIONS } from '../../../constants';
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportsFiltersDateGroupBy.vue', () => {
-  it('emits "on-grouping-change" event when changeFilterSelection is called', () => {
-    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
-
-    const selectedFilter = GROUP_BY_OPTIONS.DAY;
-    wrapper.vm.changeFilterSelection(selectedFilter);
-
-    expect(wrapper.emitted('on-grouping-change')).toBeTruthy();
-    expect(wrapper.emitted('on-grouping-change')[0]).toEqual([selectedFilter]);
-  });
-
-  it('updates currentSelectedFilter when selectedOption is changed', async () => {
-    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
-
-    const newSelectedOption = GROUP_BY_OPTIONS.MONTH;
-    await wrapper.setProps({ selectedOption: newSelectedOption });
-
-    expect(wrapper.vm.currentSelectedFilter).toEqual({
-      ...newSelectedOption,
-      groupBy: newSelectedOption.translationKey,
-    });
-  });
-
-  it('initializes translatedOptions correctly', () => {
-    const wrapper = shallowMount(ReportsFiltersDateGroupBy, mountParams);
-
-    const expectedOptions = wrapper.vm.validGroupOptions.map(option => ({
-      ...option,
-      groupBy: option.translationKey,
-    }));
-
-    expect(wrapper.vm.translatedOptions).toEqual(expectedOptions);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersDateRange.spec.js

@@ -1,42 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import ReportFiltersDateRange from '../../Filters/DateRange';
-import { DATE_RANGE_OPTIONS } from '../../../constants';
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportFiltersDateRange.vue', () => {
-  it('emits "on-range-change" event when updateRange is called', () => {
-    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-
-    const selectedRange = DATE_RANGE_OPTIONS.LAST_7_DAYS;
-    wrapper.vm.updateRange(selectedRange);
-
-    expect(wrapper.emitted('on-range-change')).toBeTruthy();
-    expect(wrapper.emitted('on-range-change')[0]).toEqual([selectedRange]);
-  });
-
-  it('initializes options correctly', () => {
-    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-
-    const expectedOptions = Object.values(DATE_RANGE_OPTIONS).map(option => ({
-      ...option,
-      name: option.translationKey,
-    }));
-
-    expect(wrapper.vm.options).toEqual(expectedOptions);
-  });
-
-  it('initializes selectedOption correctly', () => {
-    const wrapper = shallowMount(ReportFiltersDateRange, mountParams);
-    const expectedSelectedOption = Object.values(DATE_RANGE_OPTIONS)[0];
-    expect(wrapper.vm.selectedOption).toEqual({
-      ...expectedSelectedOption,
-      name: expectedSelectedOption.translationKey,
-    });
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersInboxes.spec.js

@@ -1,66 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import ReportsFiltersInboxes from '../../Filters/Inboxes';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportsFiltersInboxes.vue', () => {
-  let store;
-  let inboxesModule;
-
-  beforeEach(() => {
-    inboxesModule = {
-      namespaced: true,
-      getters: {
-        getInboxes: () => () => [
-          { id: 1, name: 'Inbox 1' },
-          { id: 2, name: 'Inbox 2' },
-        ],
-      },
-      actions: {
-        get: jest.fn(),
-      },
-    };
-
-    store = new Vuex.Store({
-      modules: {
-        inboxes: inboxesModule,
-      },
-    });
-  });
-
-  it('dispatches "inboxes/get" action when component is mounted', () => {
-    shallowMount(ReportsFiltersInboxes, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-    expect(inboxesModule.actions.get).toHaveBeenCalled();
-  });
-
-  it('emits "inbox-filter-selection" event when handleInput is called', () => {
-    const wrapper = shallowMount(ReportsFiltersInboxes, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-
-    const selectedInbox = { id: 1, name: 'Inbox 1' };
-    wrapper.setData({ selectedOption: selectedInbox });
-
-    wrapper.vm.handleInput();
-
-    expect(wrapper.emitted('inbox-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('inbox-filter-selection')[0]).toEqual([
-      selectedInbox,
-    ]);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersLabels.spec.js

@@ -1,66 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import ReportsFiltersLabels from '../../Filters/Labels';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportsFiltersLabels.vue', () => {
-  let store;
-  let labelsModule;
-
-  beforeEach(() => {
-    labelsModule = {
-      namespaced: true,
-      getters: {
-        getLabels: () => () => [
-          { id: 1, title: 'Label 1', color: 'red' },
-          { id: 2, title: 'Label 2', color: 'blue' },
-        ],
-      },
-      actions: {
-        get: jest.fn(),
-      },
-    };
-
-    store = new Vuex.Store({
-      modules: {
-        labels: labelsModule,
-      },
-    });
-  });
-
-  it('dispatches "labels/get" action when component is mounted', () => {
-    shallowMount(ReportsFiltersLabels, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-    expect(labelsModule.actions.get).toHaveBeenCalled();
-  });
-
-  it('emits "labels-filter-selection" event when handleInput is called', () => {
-    const wrapper = shallowMount(ReportsFiltersLabels, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-
-    const selectedLabel = { id: 1, title: 'Label 1', color: 'red' };
-    wrapper.setData({ selectedOption: selectedLabel });
-
-    wrapper.vm.handleInput();
-
-    expect(wrapper.emitted('labels-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('labels-filter-selection')[0]).toEqual([
-      selectedLabel,
-    ]);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersRatings.spec.js

@@ -1,45 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import ReportFiltersRatings from '../../Filters/Ratings';
-import { CSAT_RATINGS } from 'shared/constants/messages';
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-const localVue = createLocalVue();
-
-describe('ReportFiltersRatings.vue', () => {
-  it('emits "rating-filter-selection" event when handleInput is called', () => {
-    const wrapper = shallowMount(ReportFiltersRatings, {
-      localVue,
-      ...mountParams,
-    });
-
-    const selectedRating = { value: 1, label: 'Rating 1' };
-    wrapper.setData({ selectedOption: selectedRating });
-
-    wrapper.vm.handleInput(selectedRating);
-
-    expect(wrapper.emitted('rating-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('rating-filter-selection')[0]).toEqual([
-      selectedRating,
-    ]);
-  });
-
-  it('initializes options correctly', () => {
-    const wrapper = shallowMount(ReportFiltersRatings, {
-      localVue,
-      ...mountParams,
-    });
-
-    const expectedOptions = CSAT_RATINGS.map(option => ({
-      ...option,
-      label: option.translationKey,
-    }));
-
-    expect(wrapper.vm.options).toEqual(expectedOptions);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/Filters/FiltersTeams.spec.js

@@ -1,62 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import ReportsFiltersTeams from '../../Filters/Teams.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const mountParams = {
-  mocks: {
-    $t: msg => msg,
-  },
-  stubs: ['multiselect'],
-};
-
-describe('ReportsFiltersTeams.vue', () => {
-  let store;
-  let teamsModule;
-
-  beforeEach(() => {
-    teamsModule = {
-      namespaced: true,
-      getters: {
-        getTeams: () => () => [
-          { id: 1, name: 'Team 1' },
-          { id: 2, name: 'Team 2' },
-        ],
-      },
-      actions: {
-        get: jest.fn(),
-      },
-    };
-
-    store = new Vuex.Store({
-      modules: {
-        teams: teamsModule,
-      },
-    });
-  });
-
-  it('dispatches "teams/get" action when component is mounted', () => {
-    shallowMount(ReportsFiltersTeams, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-    expect(teamsModule.actions.get).toHaveBeenCalled();
-  });
-
-  it('emits "team-filter-selection" event when handleInput is called', () => {
-    const wrapper = shallowMount(ReportsFiltersTeams, {
-      store,
-      localVue,
-      ...mountParams,
-    });
-    wrapper.setData({ selectedOption: { id: 1, name: 'Team 1' } });
-    wrapper.vm.handleInput();
-    expect(wrapper.emitted('team-filter-selection')).toBeTruthy();
-    expect(wrapper.emitted('team-filter-selection')[0]).toEqual([
-      { id: 1, name: 'Team 1' },
-    ]);
-  });
-});

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CsatMetrics.vue computes response count correctly 1`] = `
-<div class="row csat--metrics-container">
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" value="100" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" value="--" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" value="90%" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP"></csat-metric-card-stub>
-  <!---->
-</div>
-`;

app/javascript/dashboard/routes/dashboard/settings/reports/constants.js

@@ -7,85 +7,6 @@ export const GROUP_BY_FILTER = {
   4: { id: 4, period: 'year' },
 };
 
-export const GROUP_BY_OPTIONS = {
-  DAY: {
-    id: 'DAY',
-    period: 'day',
-    translationKey: 'REPORT.GROUPING_OPTIONS.DAY',
-  },
-  WEEK: {
-    id: 'WEEK',
-    period: 'week',
-    translationKey: 'REPORT.GROUPING_OPTIONS.WEEK',
-  },
-  MONTH: {
-    id: 'MONTH',
-    period: 'month',
-    translationKey: 'REPORT.GROUPING_OPTIONS.MONTH',
-  },
-  YEAR: {
-    id: 'YEAR',
-    period: 'year',
-    translationKey: 'REPORT.GROUPING_OPTIONS.YEAR',
-  },
-};
-
-export const DATE_RANGE_OPTIONS = {
-  LAST_7_DAYS: {
-    id: 'LAST_7_DAYS',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.LAST_7_DAYS',
-    offset: 6,
-    groupByOptions: [GROUP_BY_OPTIONS.DAY],
-  },
-  LAST_30_DAYS: {
-    id: 'LAST_30_DAYS',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.LAST_30_DAYS',
-    offset: 29,
-    groupByOptions: [GROUP_BY_OPTIONS.DAY, GROUP_BY_OPTIONS.WEEK],
-  },
-  LAST_3_MONTHS: {
-    id: 'LAST_3_MONTHS',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
-    offset: 89,
-    groupByOptions: [
-      GROUP_BY_OPTIONS.DAY,
-      GROUP_BY_OPTIONS.WEEK,
-      GROUP_BY_OPTIONS.MONTH,
-    ],
-  },
-  LAST_6_MONTHS: {
-    id: 'LAST_6_MONTHS',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
-    offset: 179,
-    groupByOptions: [
-      GROUP_BY_OPTIONS.DAY,
-      GROUP_BY_OPTIONS.WEEK,
-      GROUP_BY_OPTIONS.MONTH,
-    ],
-  },
-  LAST_YEAR: {
-    id: 'LAST_YEAR',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.LAST_YEAR',
-    offset: 364,
-    groupByOptions: [
-      GROUP_BY_OPTIONS.DAY,
-      GROUP_BY_OPTIONS.WEEK,
-      GROUP_BY_OPTIONS.MONTH,
-    ],
-  },
-  CUSTOM_DATE_RANGE: {
-    id: 'CUSTOM_DATE_RANGE',
-    translationKey: 'REPORT.DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE',
-    offset: null,
-    groupByOptions: [
-      GROUP_BY_OPTIONS.DAY,
-      GROUP_BY_OPTIONS.WEEK,
-      GROUP_BY_OPTIONS.MONTH,
-      GROUP_BY_OPTIONS.YEAR,
-    ],
-  },
-};
-
 export const CHART_FONT_FAMILY =
   '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
 

app/javascript/dashboard/store/modules/cannedResponse.js

@@ -1,4 +1,3 @@
-import { throwErrorMessage } from 'dashboard/store/utils/api';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import CannedResponseAPI from '../../api/cannedResponse';
@@ -47,10 +46,8 @@ const actions = {
       const response = await CannedResponseAPI.create(cannedObj);
       commit(types.default.ADD_CANNED, response.data);
       commit(types.default.SET_CANNED_UI_FLAG, { creatingItem: false });
-      return response.data;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { creatingItem: false });
-      return throwErrorMessage(error);
     }
   },
 
@@ -63,10 +60,8 @@ const actions = {
       const response = await CannedResponseAPI.update(id, updateObj);
       commit(types.default.EDIT_CANNED, response.data);
       commit(types.default.SET_CANNED_UI_FLAG, { updatingItem: false });
-      return response.data;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { updatingItem: false });
-      return throwErrorMessage(error);
     }
   },
 
@@ -76,10 +71,8 @@ const actions = {
       await CannedResponseAPI.delete(id);
       commit(types.default.DELETE_CANNED, id);
       commit(types.default.SET_CANNED_UI_FLAG, { deletingItem: true });
-      return id;
     } catch (error) {
       commit(types.default.SET_CANNED_UI_FLAG, { deletingItem: true });
-      return throwErrorMessage(error);
     }
   },
 };

app/javascript/dashboard/store/modules/csat.js

@@ -85,10 +85,13 @@ export const getters = {
 };
 
 export const actions = {
-  get: async function getResponses({ commit }, params) {
+  get: async function getResponses(
+    { commit },
+    { page = 1, from, to, user_ids } = {}
+  ) {
     commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: true });
     try {
-      const response = await CSATReports.get(params);
+      const response = await CSATReports.get({ page, from, to, user_ids });
       commit(types.SET_CSAT_RESPONSE, response.data);
     } catch (error) {
       // Ignore error
@@ -96,10 +99,10 @@ export const actions = {
       commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetching: false });
     }
   },
-  getMetrics: async function getMetrics({ commit }, params) {
+  getMetrics: async function getMetrics({ commit }, { from, to, user_ids }) {
     commit(types.SET_CSAT_RESPONSE_UI_FLAG, { isFetchingMetrics: true });
     try {
-      const response = await CSATReports.getMetrics(params);
+      const response = await CSATReports.getMetrics({ from, to, user_ids });
       commit(types.SET_CSAT_RESPONSE_METRICS, response.data);
     } catch (error) {
       // Ignore error

app/javascript/packs/portal.js

@@ -1,9 +1,35 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so that it will be compiled.
+
+import Vue from 'vue';
 import Rails from '@rails/ujs';
 import Turbolinks from 'turbolinks';
+import PublicArticleSearch from '../portal/components/PublicArticleSearch.vue';
+
+import { navigateToLocalePage } from '../portal/portalHelpers';
+
 import '../portal/application.scss';
-import { InitializationHelpers } from '../portal/portalHelpers';
 
 Rails.start();
 Turbolinks.start();
 
-document.addEventListener('turbolinks:load', InitializationHelpers.onLoad);
+const initPageSetUp = () => {
+  navigateToLocalePage();
+  const isSearchContainerAvailable = document.querySelector('#search-wrap');
+  if (isSearchContainerAvailable) {
+    new Vue({
+      components: { PublicArticleSearch },
+      template: '<PublicArticleSearch />',
+    }).$mount('#search-wrap');
+  }
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  initPageSetUp();
+});
+
+document.addEventListener('turbolinks:load', () => {
+  initPageSetUp();
+});

app/javascript/packs/sdk.js

@@ -146,12 +146,6 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
     },
 
-    setColorScheme(darkMode = 'light') {
-      IFrameHelper.sendMessage('set-color-scheme', {
-        darkMode: getDarkMode(darkMode),
-      });
-    },
-
     reset() {
       if (window.$chatwoot.isOpen) {
         IFrameHelper.events.toggleBubble();

app/javascript/portal/application.scss

@@ -16,25 +16,3 @@ body {
   -webkit-font-smoothing: antialiased;
   height: 100%;
 }
-
-
-// Taking these utils from tailwind 3.x.x, need to remove once we upgrade
-.scroll-mt-24 {
-  scroll-margin-top: 6rem;
-}
-
-.top-24 {
-  top: 6rem;
-}
-
-.heading {
-  .permalink {
-    visibility: hidden;
-  }
-
-  &:hover {
-    .permalink {
-      visibility: visible;
-    }
-  }
-}

app/javascript/portal/components/TableOfContents.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="hidden lg:block flex-1 scroll-mt-24 pl-4">
-    <div v-if="rows.length > 0" class="sticky top-24 py-12 overflow-auto">
-      <nav class="max-w-2xl">
-        <h2
-          id="on-this-page-title"
-          class="text-slate-800 font-semibold tracking-wide border-b mb-3 leading-7"
-        >
-          {{ tocHeader }}
-        </h2>
-        <ol role="list" class="mt-4 space-y-3 text-base">
-          <li v-for="element in rows" :key="element.slug" class="leading-6">
-            <p :class="getClassName(element)">
-              <a
-                :href="`#${element.slug}`"
-                data-turbolinks="false"
-                class="text-base text-slate-800 cursor-pointer"
-              >
-                {{ element.title }}
-              </a>
-            </p>
-          </li>
-        </ol>
-      </nav>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    tocHeader() {
-      return window.portalConfig.tocHeader;
-    },
-    h1Count() {
-      return this.rows.filter(el => el.tag === 'h1').length;
-    },
-    h2Count() {
-      return this.rows.filter(el => el.tag === 'h2').length;
-    },
-  },
-  methods: {
-    getClassName(el) {
-      if (el.tag === 'h1') {
-        return '';
-      }
-      if (el.tag === 'h2') {
-        if (this.h1Count > 0) {
-          return 'ml-2';
-        }
-        return '';
-      }
-
-      if (el.tag === 'h3') {
-        if (!this.h1Count && !this.h2Count) {
-          return '';
-        }
-        return 'ml-8';
-      }
-
-      return '';
-    },
-  },
-};
-</script>

app/javascript/portal/portalHelpers.js

@@ -1,79 +1,13 @@
-import slugifyWithCounter from '@sindresorhus/slugify';
-import Vue from 'vue';
+export const navigateToLocalePage = () => {
+  const allLocaleSwitcher = document.querySelector('.locale-switcher');
 
-import PublicArticleSearch from './components/PublicArticleSearch.vue';
-import TableOfContents from './components/TableOfContents.vue';
-
-export const getHeadingsfromTheArticle = () => {
-  const rows = [];
-  const articleElement = document.getElementById('cw-article-content');
-  articleElement.querySelectorAll('h1, h2, h3').forEach(element => {
-    const slug = slugifyWithCounter(element.innerText);
-    element.id = slug;
-    element.className = 'scroll-mt-24 heading';
-    element.innerHTML += `<a class="permalink text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbolinks="false">#</a>`;
-    rows.push({
-      slug,
-      title: element.innerText,
-      tag: element.tagName.toLowerCase(),
-    });
-  });
-  return rows;
-};
-
-export const InitializationHelpers = {
-  navigateToLocalePage: () => {
-    const allLocaleSwitcher = document.querySelector('.locale-switcher');
-
-    if (!allLocaleSwitcher) {
-      return false;
-    }
-
-    const { portalSlug } = allLocaleSwitcher.dataset;
-    allLocaleSwitcher.addEventListener('change', event => {
-      window.location = `/hc/${portalSlug}/${event.target.value}/`;
-    });
+  if (!allLocaleSwitcher) {
     return false;
-  },
+  }
 
-  initalizeSearch: () => {
-    const isSearchContainerAvailable = document.querySelector('#search-wrap');
-    if (isSearchContainerAvailable) {
-      new Vue({
-        components: { PublicArticleSearch },
-        template: '<PublicArticleSearch />',
-      }).$mount('#search-wrap');
-    }
-  },
-
-  initializeTableOfContents: () => {
-    const isOnArticlePage = document.querySelector('#cw-hc-toc');
-    if (isOnArticlePage) {
-      new Vue({
-        components: { TableOfContents },
-        data: { rows: getHeadingsfromTheArticle() },
-        template: '<table-of-contents :rows="rows" />',
-      }).$mount('#cw-hc-toc');
-    }
-  },
-
-  initialize: () => {
-    InitializationHelpers.navigateToLocalePage();
-    InitializationHelpers.initalizeSearch();
-    InitializationHelpers.initializeTableOfContents();
-  },
-
-  onLoad: () => {
-    InitializationHelpers.initialize();
-    if (window.location.hash) {
-      if ('scrollRestoration' in window.history) {
-        window.history.scrollRestoration = 'manual';
-      }
-
-      const a = document.createElement('a');
-      a.href = window.location.hash;
-      a['data-turbolinks'] = false;
-      a.click();
-    }
-  },
+  const { portalSlug } = allLocaleSwitcher.dataset;
+  allLocaleSwitcher.addEventListener('change', event => {
+    window.location = `/hc/${portalSlug}/${event.target.value}/`;
+  });
+  return false;
 };

app/javascript/portal/specs/portal.spec.js

@@ -1,4 +1,4 @@
-import { InitializationHelpers } from '../portalHelpers';
+import { navigateToLocalePage } from '../portalHelpers';
 
 describe('#navigateToLocalePage', () => {
   it('returns correct cookie name', () => {
@@ -14,7 +14,7 @@ describe('#navigateToLocalePage', () => {
         callback({ target: { value: 1 } });
       });
 
-    InitializationHelpers.navigateToLocalePage();
+    navigateToLocalePage();
     expect(allLocaleSwitcher.addEventListener).toBeCalledWith(
       'change',
       expect.any(Function)

app/javascript/sdk/constants.js

@@ -1,3 +1,3 @@
 export const BUBBLE_DESIGN = ['standard', 'expanded_bubble'];
 export const WIDGET_DESIGN = ['standard', 'flat'];
-export const DARK_MODE = ['light', 'auto', 'dark'];
+export const DARK_MODE = ['light', 'auto'];

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -196,10 +196,6 @@
     "M5 18C5 17.4477 5.44772 17 6 17H10C10.5523 17 11 17.4477 11 18V21C11 21.5523 10.5523 22 10 22H6C5.44772 22 5 21.5523 5 21V18Z",
     "M13 18C13 17.4477 13.4477 17 14 17H18C18.5523 17 19 17.4477 19 18V21C19 21.5523 18.5523 22 18 22H14C13.4477 22 13 21.5523 13 21V18Z"
   ],
-  "preview-link-outline": [
-    "M4.524 6.25a.75.75 0 0 1 .75-.75H18.73a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-.75.75H5.274a.75.75 0 0 1-.75-.75v-3.5Zm1.5.75v2H17.98V7H6.024ZM14.23 11.979a.75.75 0 0 0-.75.75v4.5c0 .414.335.75.75.75h4.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-4.5Zm.75 4.5v-3h3v3h-3ZM4.524 13.25a.75.75 0 0 1 .75-.75h5.976a.75.75 0 0 1 0 1.5H5.274a.75.75 0 0 1-.75-.75ZM5.274 16a.75.75 0 0 0 0 1.5h5.976a.75.75 0 0 0 0-1.5H5.274Z",
-    "M2 5.75A2.75 2.75 0 0 1 4.75 3h14.5A2.75 2.75 0 0 1 22 5.75v12.5A2.75 2.75 0 0 1 19.25 21H4.75A2.75 2.75 0 0 1 2 18.25V5.75ZM4.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25h14.5c.69 0 1.25-.56 1.25-1.25V5.75c0-.69-.56-1.25-1.25-1.25H4.75Z"
-  ],
   "priority-urgent-outline": [
     "M2.33325 2.91667C2.33325 2.27233 2.85559 1.75 3.49992 1.75C4.14425 1.75 4.66659 2.27233 4.66659 2.91667V8.16667C4.66659 8.811 4.14425 9.33333 3.49992 9.33333C2.85559 9.33333 2.33325 8.811 2.33325 8.16667V2.91667Z",
     "M2.33325 11.0833C2.33325 10.439 2.85559 9.91667 3.49992 9.91667C4.14425 9.91667 4.66659 10.439 4.66659 11.0833C4.66659 11.7277 4.14425 12.25 3.49992 12.25C2.85559 12.25 2.33325 11.7277 2.33325 11.0833Z",

app/javascript/shared/constants/messages.js

@@ -59,28 +59,24 @@ export const ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP =
 export const CSAT_RATINGS = [
   {
     key: 'disappointed',
-    translationKey: 'CSAT.RATINGS.POOR',
     emoji: '😞',
     value: 1,
     color: '#FDAD2A',
   },
   {
     key: 'expressionless',
-    translationKey: 'CSAT.RATINGS.FAIR',
     emoji: '😑',
     value: 2,
     color: '#FFC532',
   },
   {
     key: 'neutral',
-    translationKey: 'CSAT.RATINGS.AVERAGE',
     emoji: '😐',
     value: 3,
     color: '#FCEC56',
   },
   {
     key: 'grinning',
-    translationKey: 'CSAT.RATINGS.GOOD',
     emoji: '😀',
     value: 4,
     color: '#6FD86F',
@@ -88,7 +84,6 @@ export const CSAT_RATINGS = [
   {
     key: 'smiling',
     emoji: '😍',
-    translationKey: 'CSAT.RATINGS.EXCELLENT',
     value: 5,
     color: '#44CE4B',
   },

app/javascript/shared/helpers/DateHelper.js

@@ -2,7 +2,6 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
 import isToday from 'date-fns/isToday';
 import isYesterday from 'date-fns/isYesterday';
-import { endOfDay, getUnixTime, startOfDay } from 'date-fns';
 
 export const formatUnixDate = (date, dateFormat = 'MMM dd, yyyy') => {
   const unixDate = fromUnixTime(date);
@@ -31,17 +30,3 @@ export const isTimeAfter = (h1, m1, h2, m2) => {
 
   return true;
 };
-
-/** Get start of day as a UNIX timestamp */
-export const getUnixStartOfDay = date => getUnixTime(startOfDay(date));
-
-/** Get end of day as a UNIX timestamp */
-export const getUnixEndOfDay = date => getUnixTime(endOfDay(date));
-
-export const generateRelativeTime = (value, unit, languageCode) => {
-  const code = languageCode?.replace(/_/g, '-'); // Hacky fix we need to handle it from source
-  const rtf = new Intl.RelativeTimeFormat(code, {
-    numeric: 'auto',
-  });
-  return rtf.format(value, unit);
-};

app/javascript/shared/helpers/specs/DateHelper.spec.js

@@ -3,7 +3,6 @@ import {
   formatUnixDate,
   formatDigitToString,
   isTimeAfter,
-  generateRelativeTime,
 } from '../DateHelper';
 
 describe('#DateHelper', () => {
@@ -63,60 +62,3 @@ describe('#isTimeAfter', () => {
     expect(isTimeAfter(11, 59, 12, 0)).toEqual(false);
   });
 });
-
-describe('generateRelativeTime', () => {
-  it('should return a string with the relative time', () => {
-    const value = 1;
-    const unit = 'second';
-    const languageCode = 'en-US';
-    const expectedResult = 'in 1 second';
-
-    const actualResult = generateRelativeTime(value, unit, languageCode);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-
-  it('should return a string with the relative time in a different language', () => {
-    const value = 10;
-    const unit = 'minute';
-    const languageCode = 'de-DE';
-    const expectedResult = 'in 10 Minuten';
-
-    const actualResult = generateRelativeTime(value, unit, languageCode);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-
-  it('should return a string with the relative time for a different unit', () => {
-    const value = 1;
-    const unit = 'hour';
-    const languageCode = 'en-US';
-    const expectedResult = 'in 1 hour';
-
-    const actualResult = generateRelativeTime(value, unit, languageCode);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-
-  it('should throw an error if the value is not a number', () => {
-    const value = 1;
-    const unit = 'day';
-    const languageCode = 'en_US';
-    const expectedResult = 'tomorrow';
-
-    const actualResult = generateRelativeTime(value, unit, languageCode);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-
-  it('should throw an error if the value is not a number', () => {
-    const value = 1;
-    const unit = 'day';
-    const languageCode = 'en-US';
-    const expectedResult = 'tomorrow';
-
-    const actualResult = generateRelativeTime(value, unit, languageCode);
-
-    expect(actualResult).toBe(expectedResult);
-  });
-});