chore: refactor user active_account_user spec for clarity

## Summary
  - Fix account switching bug where new users couldn't switch accounts properly
  - Update `active_account_user` method to handle NULL `active_at` values correctly using `NULLS LAST` sorting
  - Add comprehensive specs to test the NULL handling behavior

  ## Problem
  When users were added to new accounts, the `active_at` field was NULL. The existing `ORDER BY active_at DESC` had undefined behavior for NULL values, causing:
  - Mobile apps to receive wrong `account_id` from `/profile` API
  - Account switching to fail until multiple attempts "fixed" it temporarily
  - Issue recurring whenever new accounts were added

  ## Solution
  - Updated `active_account_user` method in `UserAttributeHelpers` to use `NULLS LAST` sorting
  - This ensures accounts with actual timestamps are prioritized over NULL values
  - Added specs covering normal sorting, NULL handling, and edge cases

.circleci/config.yml

@@ -1,7 +1,6 @@
 version: 2.1
 orbs:
   node: circleci/node@6.1.0
-  qlty-orb: qltysh/qlty-orb@0.0
 
 defaults: &defaults
   working_directory: ~/build
@@ -90,6 +89,14 @@ jobs:
           command: |
             source ~/.rvm/scripts/rvm
             bundle install
+            # pnpm install
+
+      - run:
+          name: Download cc-test-reporter
+          command: |
+            mkdir -p ~/tmp
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
+            chmod +x ~/tmp/cc-test-reporter
 
       # Swagger verification
       - run:
@@ -101,11 +108,10 @@ jobs:
               echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
               exit 1
             fi
-            mkdir -p ~/tmp
             curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
             java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
 
-      # Configure environment and database
+      # we remove the FRONTED_URL from the .env before running the tests
       - run:
           name: Database Setup and Configure Environment Variables
           command: |
@@ -143,11 +149,17 @@ jobs:
           command: pnpm run eslint
 
       - run:
-          name: Run frontend tests (with coverage)
+          name: Run frontend tests
           command: |
             mkdir -p ~/build/coverage/frontend
+            ~/tmp/cc-test-reporter before-build
             pnpm run test:coverage
 
+      - run:
+          name: Code Climate Test Coverage (Frontend)
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+
       # Run backend tests
       - run:
           name: Run backend tests
@@ -155,18 +167,18 @@ jobs:
             mkdir -p ~/tmp/test-results/rspec
             mkdir -p ~/tmp/test-artifacts
             mkdir -p ~/build/coverage/backend
+            ~/tmp/cc-test-reporter before-build
             TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
-            bundle exec rspec -I ./spec --require coverage_helper --require spec_helper --format progress \
+            bundle exec rspec --format progress \
                               --format RspecJunitFormatter \
                               --out ~/tmp/test-results/rspec.xml \
                               -- ${TESTFILES}
           no_output_timeout: 30m
 
-      # Qlty coverage publish
-      - qlty-orb/coverage_publish:
-          files: |
-            coverage/coverage.json
-            coverage/lcov.info
+      - run:
+          name: Code Climate Test Coverage (Backend)
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
 
       - run:
           name: List coverage directory contents
@@ -177,7 +189,3 @@ jobs:
           root: ~/build
           paths:
             - coverage
-
-      - store_artifacts:
-          path: coverage
-          destination: coverage

.gitignore

@@ -95,7 +95,3 @@ yarn-debug.log*
 .claude/settings.local.json
 .cursor
 CLAUDE.local.md
-
-# Histoire deployment
-.netlify
-.histoire

Gemfile

@@ -81,7 +81,6 @@ gem 'devise_token_auth', '>= 1.2.3'
 # authorization
 gem 'jwt'
 gem 'pundit'
-
 # super admin
 gem 'administrate', '>= 0.20.1'
 gem 'administrate-field-active_storage', '>= 1.0.3'
@@ -172,7 +171,6 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-saml'
 gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
@@ -229,7 +227,6 @@ group :test do
   gem 'webmock'
   # test profiling
   gem 'test-prof'
-  gem 'simplecov_json_formatter', require: false
 end
 
 group :development, :test do
@@ -254,7 +251,7 @@ group :development, :test do
   gem 'rubocop-factory_bot', require: false
   gem 'seed_dump'
   gem 'shoulda-matchers'
-  gem 'simplecov', '>= 0.21', require: false
+  gem 'simplecov', '0.17.1', require: false
   gem 'spring'
   gem 'spring-watcher-listen'
 end

Gemfile.lock

@@ -219,7 +219,7 @@ GEM
     diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
-    docile (1.4.1)
+    docile (1.4.0)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
     dotenv (3.1.2)
@@ -447,7 +447,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.13.2)
+    json (2.12.0)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -589,9 +589,8 @@ GEM
     oj (3.16.10)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
-    omniauth (2.1.3)
+    omniauth (2.1.2)
       hashie (>= 3.4.6)
-      logger
       rack (>= 2.2.3)
       rack-protection
     omniauth-google-oauth2 (1.1.3)
@@ -605,9 +604,6 @@ GEM
     omniauth-rails_csrf_protection (1.0.2)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    omniauth-saml (2.2.4)
-      omniauth (~> 2.1)
-      ruby-saml (~> 1.18)
     opensearch-ruby (3.4.0)
       faraday (>= 1.0, < 3)
       multi_json (>= 1.0)
@@ -777,9 +773,6 @@ GEM
       faraday (>= 1)
       faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
-    ruby-saml (1.18.1)
-      nokogiri (>= 1.13.10)
-      rexml
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
@@ -864,12 +857,11 @@ GEM
       faraday (>= 0.17.5, < 3.a)
       jwt (>= 1.5, < 3.0)
       multi_json (~> 1.10)
-    simplecov (0.22.0)
+    simplecov (0.17.1)
       docile (~> 1.1)
-      simplecov-html (~> 0.11)
-      simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.13.2)
-    simplecov_json_formatter (0.1.4)
+      json (>= 1.8, < 3)
+      simplecov-html (~> 0.10.0)
+    simplecov-html (0.10.2)
     slack-ruby-client (2.5.2)
       faraday (>= 2.0)
       faraday-mashify
@@ -1054,7 +1046,6 @@ DEPENDENCIES
   omniauth-google-oauth2 (>= 1.1.3)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
-  omniauth-saml
   opensearch-ruby
   pg
   pg_search
@@ -1094,8 +1085,7 @@ DEPENDENCIES
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   sidekiq_alive
-  simplecov (>= 0.21)
-  simplecov_json_formatter
+  simplecov (= 0.17.1)
   slack-ruby-client (~> 2.5.2)
   spring
   spring-watcher-listen

Rakefile

@@ -2,8 +2,9 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
 
 require_relative 'config/application'
-# Load Enterprise Edition rake tasks if they exist
-enterprise_tasks_path = Rails.root.join('enterprise/tasks_railtie.rb').to_s
-require enterprise_tasks_path if File.exist?(enterprise_tasks_path)
 
 Rails.application.load_tasks
+
+# Load Enterprise Edition rake tasks if they exist
+enterprise_tasks_path = Rails.root.join('enterprise/lib/tasks.rb').to_s
+require enterprise_tasks_path if File.exist?(enterprise_tasks_path)

app/builders/v2/reports/label_summary_builder.rb

@@ -28,7 +28,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
     {
       conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts,
+      resolved_counts: fetch_resolved_counts(conversation_filter),
       resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
       first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
       reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
@@ -62,21 +62,10 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
     fetch_counts(conversation_filter)
   end
 
-  def fetch_resolved_counts
-    # Count resolution events, not conversations currently in resolved status
-    # Filter by reporting_event.created_at, not conversation.created_at
-    reporting_event_filter = { name: 'conversation_resolved', account_id: account.id }
-    reporting_event_filter[:created_at] = range if range.present?
-
-    ReportingEvent
-      .joins(conversation: { taggings: :tag })
-      .where(
-        reporting_event_filter.merge(
-          taggings: { taggable_type: 'Conversation', context: 'labels' }
-        )
-      )
-      .group('tags.name')
-      .count
+  def fetch_resolved_counts(conversation_filter)
+    # since the base query is ActsAsTaggableOn,
+    # the status :resolved won't automatically be converted to integer status
+    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
   end
 
   def fetch_counts(conversation_filter)
@@ -95,7 +84,9 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def fetch_metrics(conversation_filter, event_name, use_business_hours)
     ReportingEvent
-      .joins(conversation: { taggings: :tag })
+      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
+      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
+      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
       .where(
         conversations: conversation_filter,
         name: event_name,

app/builders/v2/reports/timeseries/count_report_builder.rb

@@ -38,34 +38,27 @@ class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::Bas
   end
 
   def scope_for_resolutions_count
-    scope.reporting_events.where(
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_resolved,
-      account_id: account.id,
-      created_at: range
-    )
+      conversations: { status: :resolved }, created_at: range
+    ).distinct
   end
 
   def scope_for_bot_resolutions_count
-    scope.reporting_events.where(
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_bot_resolved,
-      account_id: account.id,
-      created_at: range
-    )
+      conversations: { status: :resolved }, created_at: range
+    ).distinct
   end
 
   def scope_for_bot_handoffs_count
     scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_bot_handoff,
-      account_id: account.id,
       created_at: range
     ).distinct
   end
 
   def grouped_count
-    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
-    # It converts timestamps to the target timezone before grouping, which means
-    # the same event can fall into different day buckets depending on timezone
-    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
     @grouped_values = object_scope.group_by_period(
       group_by,
       :created_at,

app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb

@@ -1,4 +1,5 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
+  before_action :validate_feature_enabled!
   before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
 
   # POST /api/v1/accounts/:account_id/whatsapp/authorization
@@ -64,6 +65,15 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
     }, status: :unprocessable_entity
   end
 
+  def validate_feature_enabled!
+    return if Current.account.feature_whatsapp_embedded_signup?
+
+    render json: {
+      success: false,
+      error: 'WhatsApp embedded signup is not enabled for this account'
+    }, status: :forbidden
+  end
+
   def validate_embedded_signup_params!
     missing_params = []
     missing_params << 'code' if params[:code].blank?

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

@@ -9,7 +9,7 @@ class Api::V1::Widget::ConfigsController < Api::V1::Widget::BaseController
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
   end
 
   def set_contact

app/controllers/concerns/switch_locale.rb

@@ -4,28 +4,17 @@ module SwitchLocale
   private
 
   def switch_locale(&)
-    # Priority is for locale set in query string (mostly for widget/from js sdk)
+    # priority is for locale set in query string (mostly for widget/from js sdk)
     locale ||= params[:locale]
 
-    # Use the user's locale if available
-    locale ||= locale_from_user
-
-    # Use the locale from a custom domain if applicable
     locale ||= locale_from_custom_domain
-
     # if locale is not set in account, let's use DEFAULT_LOCALE env variable
     locale ||= ENV.fetch('DEFAULT_LOCALE', nil)
-
     set_locale(locale, &)
   end
 
   def switch_locale_using_account_locale(&)
-    # Get the locale from the user first
-    locale = locale_from_user
-
-    # Fallback to the account's locale if the user's locale is not set
-    locale ||= locale_from_account(@current_account)
-
+    locale = locale_from_account(@current_account)
     set_locale(locale, &)
   end
 
@@ -43,12 +32,6 @@ module SwitchLocale
     @portal.default_locale
   end
 
-  def locale_from_user
-    return unless @user
-
-    @user.ui_settings&.dig('locale')
-  end
-
   def set_locale(locale, &)
     safe_locale = validate_and_get_locale(locale)
     # Ensure locale won't bleed into other requests

app/controllers/dashboard_controller.rb

@@ -66,7 +66,7 @@ class DashboardController < ActionController::Base
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
-      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v18.0'),
+      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
       WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
       WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
       IS_ENTERPRISE: ChatwootApp.enterprise?,

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -47,8 +47,10 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   end
 
   def get_resource_from_auth_hash # rubocop:disable Naming/AccessorMethodName
-    email = auth_hash.dig('info', 'email')
-    @resource = resource_class.from_email(email)
+    # find the user with their email instead of UID and token
+    @resource = resource_class.where(
+      email: auth_hash['info']['email']
+    ).first
   end
 
   def validate_signup_email_is_business_domain?
@@ -73,5 +75,3 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
     'user'
   end
 end
-
-DeviseOverrides::OmniauthCallbacksController.prepend_mod_with('DeviseOverrides::OmniauthCallbacksController')

app/controllers/devise_overrides/passwords_controller.rb

@@ -44,5 +44,3 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
     }, status: status
   end
 end
-
-DeviseOverrides::PasswordsController.prepend_mod_with('DeviseOverrides::PasswordsController')

app/controllers/public/api/v1/portals/base_controller.rb

@@ -58,6 +58,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL')
   end
 end

app/controllers/survey/responses_controller.rb

@@ -5,6 +5,6 @@ class Survey::ResponsesController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
   end
 end

app/controllers/widgets_controller.rb

@@ -6,7 +6,6 @@ class WidgetsController < ActionController::Base
   before_action :set_web_widget
   before_action :ensure_account_is_active
   before_action :ensure_location_is_supported
-  before_action :validate_origin_domain
   before_action :set_token
   before_action :set_contact
   before_action :build_contact
@@ -15,7 +14,7 @@ class WidgetsController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
   end
 
   def set_web_widget
@@ -25,75 +24,6 @@ class WidgetsController < ActionController::Base
     render json: { error: 'web widget does not exist' }, status: :not_found
   end
 
-  def validate_origin_domain
-    # Only validate origin if website_url is configured
-    return if @web_widget.website_url.blank?
-
-    origin_domain = extract_domain_from_origin
-    return if domain_allowed?(origin_domain, @web_widget.website_url)
-
-    Rails.logger.warn('Widget access denied.')
-    render json: { error: 'Widget access denied.' }, status: :forbidden
-  end
-
-  def domain_allowed?(origin_domain, website_url)
-    return false if origin_domain.blank?
-
-    # Split website_url by comma to handle multiple domains/wildcards
-    allowed_domains = website_url.split(',').map(&:strip).reject(&:blank?)
-
-    allowed_domains.any? do |allowed_domain|
-      # Extract domain and protocol from the allowed domain
-      allowed_domain_without_protocol = extract_domain_from_url(allowed_domain)
-      allowed_protocol = extract_protocol_from_url(allowed_domain)
-      origin_protocol = extract_protocol_from_origin
-
-      # Check if the extracted domain starts with wildcard
-      if allowed_domain_without_protocol&.start_with?('*.')
-        # Handle wildcard domains (e.g., "*.example.com")
-        wildcard_suffix = allowed_domain_without_protocol[2..-1] # Remove "*.", keep "example.com"
-        origin_domain.end_with?(wildcard_suffix) && origin_protocol == allowed_protocol
-      else
-        # Handle exact domain and protocol match
-        origin_domain == allowed_domain_without_protocol && origin_protocol == allowed_protocol
-      end
-    end
-  end
-
-  def extract_domain_from_origin
-    origin = request.headers['Origin']
-    return nil if origin.blank?
-
-    extract_domain_from_url(origin)
-  end
-
-  def extract_protocol_from_origin
-    origin = request.headers['Origin']
-    return nil if origin.blank?
-
-    extract_protocol_from_url(origin)
-  end
-
-  def extract_domain_from_url(url)
-    return nil if url.blank?
-
-    # Parse the URL and extract the domain
-    uri = URI.parse(url)
-    uri.host&.downcase
-  rescue URI::InvalidURIError
-    nil
-  end
-
-  def extract_protocol_from_url(url)
-    return nil if url.blank?
-
-    # Parse the URL and extract the protocol
-    uri = URI.parse(url)
-    uri.scheme&.downcase
-  rescue URI::InvalidURIError
-    nil
-  end
-
   def set_token
     @token = permitted_params[:cw_conversation]
     @auth_token_params = if @token.present?

app/helpers/portal_helper.rb

@@ -1,5 +1,4 @@
 module PortalHelper
-  include UrlHelper
   def set_og_image_url(portal_name, title)
     cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
     return if cdn_url.blank?
@@ -75,17 +74,6 @@ module PortalHelper
     end
   end
 
-  def generate_portal_brand_url(brand_url, referer)
-    url = URI.parse(brand_url.to_s)
-    query_params = Rack::Utils.parse_query(url.query)
-    query_params['utm_medium'] = 'helpcenter'
-    query_params['utm_campaign'] = 'branding'
-    query_params['utm_source'] = URI.parse(referer).host if url_valid?(referer)
-
-    url.query = query_params.to_query
-    url.to_s
-  end
-
   def render_category_content(content)
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end

app/helpers/report_helper.rb

@@ -53,13 +53,13 @@ module ReportHelper
   end
 
   def resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved,
-                                 created_at: range)
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_resolved,
+                                                                               conversations: { status: :resolved }, created_at: range).distinct
   end
 
   def bot_resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved,
-                                 created_at: range)
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
+                                                                               conversations: { status: :resolved }, created_at: range).distinct
   end
 
   def bot_handoffs

app/helpers/widget_helper.rb

@@ -2,7 +2,6 @@ module WidgetHelper
   def build_contact_inbox_with_token(web_widget, additional_attributes = {})
     contact_inbox = web_widget.create_contact_inbox(additional_attributes)
     payload = { source_id: contact_inbox.source_id, inbox_id: web_widget.inbox.id }
-
     token = ::Widget::TokenService.new(payload: payload).generate_token
 
     [contact_inbox, token]

app/javascript/dashboard/App.vue

@@ -19,7 +19,6 @@ import {
   verifyServiceWorkerExistence,
 } from './helper/pushHelper';
 import ReconnectService from 'dashboard/helper/ReconnectService';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   name: 'App',
@@ -39,14 +38,12 @@ export default {
     const { accountId } = useAccount();
     // Use the font size composable (it automatically sets up the watcher)
     const { currentFontSize } = useFontSize();
-    const { uiSettings } = useUISettings();
 
     return {
       router,
       store,
       currentAccountId: accountId,
       currentFontSize,
-      uiSettings,
     };
   },
   data() {
@@ -91,10 +88,7 @@ export default {
   mounted() {
     this.initializeColorTheme();
     this.listenToThemeChanges();
-    // If user locale is set, use it; otherwise use account locale
-    this.setLocale(
-      this.uiSettings?.locale || window.chatwootConfig.selectedLocale
-    );
+    this.setLocale(window.chatwootConfig.selectedLocale);
   },
   unmounted() {
     if (this.reconnectService) {
@@ -120,8 +114,7 @@ export default {
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
         this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
-      // If user locale is set, use it; otherwise use account locale
-      this.setLocale(this.uiSettings?.locale || locale);
+      this.setLocale(locale);
       this.latestChatwootVersion = latestChatwootVersion;
       vueActionCable.init(this.store, pubsubToken);
       this.reconnectService = new ReconnectService(this.store, this.router);

app/javascript/dashboard/api/agentCapacityPolicies.js

@@ -1,43 +0,0 @@
-/* global axios */
-
-import ApiClient from './ApiClient';
-
-class AgentCapacityPolicies extends ApiClient {
-  constructor() {
-    super('agent_capacity_policies', { accountScoped: true });
-  }
-
-  getUsers(policyId) {
-    return axios.get(`${this.url}/${policyId}/users`);
-  }
-
-  addUser(policyId, userData) {
-    return axios.post(`${this.url}/${policyId}/users`, {
-      user_id: userData.id,
-      capacity: userData.capacity,
-    });
-  }
-
-  removeUser(policyId, userId) {
-    return axios.delete(`${this.url}/${policyId}/users/${userId}`);
-  }
-
-  createInboxLimit(policyId, limitData) {
-    return axios.post(`${this.url}/${policyId}/inbox_limits`, {
-      inbox_id: limitData.inboxId,
-      conversation_limit: limitData.conversationLimit,
-    });
-  }
-
-  updateInboxLimit(policyId, limitId, limitData) {
-    return axios.put(`${this.url}/${policyId}/inbox_limits/${limitId}`, {
-      conversation_limit: limitData.conversationLimit,
-    });
-  }
-
-  deleteInboxLimit(policyId, limitId) {
-    return axios.delete(`${this.url}/${policyId}/inbox_limits/${limitId}`);
-  }
-}
-
-export default new AgentCapacityPolicies();

app/javascript/dashboard/api/assignmentPolicies.js

@@ -1,36 +0,0 @@
-/* global axios */
-
-import ApiClient from './ApiClient';
-
-class AssignmentPolicies extends ApiClient {
-  constructor() {
-    super('assignment_policies', { accountScoped: true });
-  }
-
-  getInboxes(policyId) {
-    return axios.get(`${this.url}/${policyId}/inboxes`);
-  }
-
-  setInboxPolicy(inboxId, policyId) {
-    return axios.post(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`,
-      {
-        assignment_policy_id: policyId,
-      }
-    );
-  }
-
-  getInboxPolicy(inboxId) {
-    return axios.get(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
-    );
-  }
-
-  removeInboxPolicy(inboxId) {
-    return axios.delete(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
-    );
-  }
-}
-
-export default new AssignmentPolicies();

app/javascript/dashboard/api/samlSettings.js

@@ -1,26 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class SamlSettingsAPI extends ApiClient {
-  constructor() {
-    super('saml_settings', { accountScoped: true });
-  }
-
-  get() {
-    return axios.get(this.url);
-  }
-
-  create(data) {
-    return axios.post(this.url, { saml_settings: data });
-  }
-
-  update(data) {
-    return axios.put(this.url, { saml_settings: data });
-  }
-
-  delete() {
-    return axios.delete(this.url);
-  }
-}
-
-export default new SamlSettingsAPI();

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

@@ -1,98 +0,0 @@
-import agentCapacityPolicies from '../agentCapacityPolicies';
-import ApiClient from '../ApiClient';
-
-describe('#AgentCapacityPoliciesAPI', () => {
-  it('creates correct instance', () => {
-    expect(agentCapacityPolicies).toBeInstanceOf(ApiClient);
-    expect(agentCapacityPolicies).toHaveProperty('get');
-    expect(agentCapacityPolicies).toHaveProperty('show');
-    expect(agentCapacityPolicies).toHaveProperty('create');
-    expect(agentCapacityPolicies).toHaveProperty('update');
-    expect(agentCapacityPolicies).toHaveProperty('delete');
-    expect(agentCapacityPolicies).toHaveProperty('getUsers');
-    expect(agentCapacityPolicies).toHaveProperty('addUser');
-    expect(agentCapacityPolicies).toHaveProperty('removeUser');
-    expect(agentCapacityPolicies).toHaveProperty('createInboxLimit');
-    expect(agentCapacityPolicies).toHaveProperty('updateInboxLimit');
-    expect(agentCapacityPolicies).toHaveProperty('deleteInboxLimit');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      get: vi.fn(() => Promise.resolve()),
-      post: vi.fn(() => Promise.resolve()),
-      put: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-      // Mock accountIdFromRoute
-      Object.defineProperty(agentCapacityPolicies, 'accountIdFromRoute', {
-        get: () => '1',
-        configurable: true,
-      });
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#getUsers', () => {
-      agentCapacityPolicies.getUsers(123);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/users'
-      );
-    });
-
-    it('#addUser', () => {
-      const userData = { id: 456, capacity: 20 };
-      agentCapacityPolicies.addUser(123, userData);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/users',
-        {
-          user_id: 456,
-          capacity: 20,
-        }
-      );
-    });
-
-    it('#removeUser', () => {
-      agentCapacityPolicies.removeUser(123, 456);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/users/456'
-      );
-    });
-
-    it('#createInboxLimit', () => {
-      const limitData = { inboxId: 1, conversationLimit: 10 };
-      agentCapacityPolicies.createInboxLimit(123, limitData);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits',
-        {
-          inbox_id: 1,
-          conversation_limit: 10,
-        }
-      );
-    });
-
-    it('#updateInboxLimit', () => {
-      const limitData = { conversationLimit: 15 };
-      agentCapacityPolicies.updateInboxLimit(123, 789, limitData);
-      expect(axiosMock.put).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789',
-        {
-          conversation_limit: 15,
-        }
-      );
-    });
-
-    it('#deleteInboxLimit', () => {
-      agentCapacityPolicies.deleteInboxLimit(123, 789);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789'
-      );
-    });
-  });
-});

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

@@ -1,70 +0,0 @@
-import assignmentPolicies from '../assignmentPolicies';
-import ApiClient from '../ApiClient';
-
-describe('#AssignmentPoliciesAPI', () => {
-  it('creates correct instance', () => {
-    expect(assignmentPolicies).toBeInstanceOf(ApiClient);
-    expect(assignmentPolicies).toHaveProperty('get');
-    expect(assignmentPolicies).toHaveProperty('show');
-    expect(assignmentPolicies).toHaveProperty('create');
-    expect(assignmentPolicies).toHaveProperty('update');
-    expect(assignmentPolicies).toHaveProperty('delete');
-    expect(assignmentPolicies).toHaveProperty('getInboxes');
-    expect(assignmentPolicies).toHaveProperty('setInboxPolicy');
-    expect(assignmentPolicies).toHaveProperty('getInboxPolicy');
-    expect(assignmentPolicies).toHaveProperty('removeInboxPolicy');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      get: vi.fn(() => Promise.resolve()),
-      post: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-      // Mock accountIdFromRoute
-      Object.defineProperty(assignmentPolicies, 'accountIdFromRoute', {
-        get: () => '1',
-        configurable: true,
-      });
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#getInboxes', () => {
-      assignmentPolicies.getInboxes(123);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/assignment_policies/123/inboxes'
-      );
-    });
-
-    it('#setInboxPolicy', () => {
-      assignmentPolicies.setInboxPolicy(456, 123);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy',
-        {
-          assignment_policy_id: 123,
-        }
-      );
-    });
-
-    it('#getInboxPolicy', () => {
-      assignmentPolicies.getInboxPolicy(456);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy'
-      );
-    });
-
-    it('#removeInboxPolicy', () => {
-      assignmentPolicies.removeInboxPolicy(456);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy'
-      );
-    });
-  });
-});

app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.story.vue

@@ -1,116 +0,0 @@
-<script setup>
-import AgentCapacityPolicyCard from './AgentCapacityPolicyCard.vue';
-
-const mockUsers = [
-  {
-    id: 1,
-    name: 'John Smith',
-    email: 'john.smith@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=1',
-  },
-  {
-    id: 2,
-    name: 'Sarah Johnson',
-    email: 'sarah.johnson@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=2',
-  },
-  {
-    id: 3,
-    name: 'Mike Chen',
-    email: 'mike.chen@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=3',
-  },
-  {
-    id: 4,
-    name: 'Emily Davis',
-    email: 'emily.davis@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=4',
-  },
-  {
-    id: 5,
-    name: 'Alex Rodriguez',
-    email: 'alex.rodriguez@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=5',
-  },
-];
-
-const withCount = policy => ({
-  ...policy,
-  assignedAgentCount: policy.users.length,
-});
-
-const policyA = withCount({
-  id: 1,
-  name: 'High Volume Support',
-  description:
-    'Capacity-based policy for handling high conversation volumes with experienced agents',
-  users: [mockUsers[0], mockUsers[1], mockUsers[2]],
-  isFetchingUsers: false,
-});
-
-const policyB = withCount({
-  id: 2,
-  name: 'Specialized Team',
-  description: 'Custom capacity limits for specialized support team members',
-  users: [mockUsers[3], mockUsers[4]],
-  isFetchingUsers: false,
-});
-
-const emptyPolicy = withCount({
-  id: 3,
-  name: 'New Policy',
-  description: 'Recently created policy with no assigned agents yet',
-  users: [],
-  isFetchingUsers: false,
-});
-
-const loadingPolicy = withCount({
-  id: 4,
-  name: 'Loading Policy',
-  description: 'Policy currently loading agent information',
-  users: [],
-  isFetchingUsers: true,
-});
-
-const onEdit = id => console.log('Edit policy:', id);
-const onDelete = id => console.log('Delete policy:', id);
-const onFetchUsers = id => console.log('Fetch users for policy:', id);
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AgentCapacityPolicyCard"
-    :layout="{ type: 'grid', width: '1200px' }"
-  >
-    <Variant title="Multiple Cards (Various States)">
-      <div class="p-4 bg-n-background">
-        <div class="grid grid-cols-1 gap-4">
-          <AgentCapacityPolicyCard
-            v-bind="policyA"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-users="onFetchUsers"
-          />
-          <AgentCapacityPolicyCard
-            v-bind="policyB"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-users="onFetchUsers"
-          />
-          <AgentCapacityPolicyCard
-            v-bind="emptyPolicy"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-users="onFetchUsers"
-          />
-          <AgentCapacityPolicyCard
-            v-bind="loadingPolicy"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-users="onFetchUsers"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AgentCapacityPolicyCard/AgentCapacityPolicyCard.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import CardPopover from '../components/CardPopover.vue';
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  name: { type: String, default: '' },
-  description: { type: String, default: '' },
-  assignedAgentCount: { type: Number, default: 0 },
-  users: { type: Array, default: () => [] },
-  isFetchingUsers: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['edit', 'delete', 'fetchUsers']);
-
-const { t } = useI18n();
-
-const users = computed(() => {
-  return props.users.map(user => {
-    return {
-      name: user.name,
-      key: user.id,
-      email: user.email,
-      avatarUrl: user.avatarUrl,
-    };
-  });
-});
-
-const handleEdit = () => {
-  emit('edit', props.id);
-};
-
-const handleDelete = () => {
-  emit('delete', props.id);
-};
-
-const handleFetchUsers = () => {
-  if (props.users?.length > 0) return;
-  emit('fetchUsers', props.id);
-};
-</script>
-
-<template>
-  <CardLayout class="[&>div]:px-5">
-    <div class="flex flex-col gap-2 relative justify-between w-full">
-      <div class="flex items-center gap-3 justify-between w-full">
-        <div class="flex items-center gap-3">
-          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
-            {{ name }}
-          </h3>
-          <CardPopover
-            :title="
-              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.POPOVER')
-            "
-            icon="i-lucide-users-round"
-            :count="assignedAgentCount"
-            :items="users"
-            :is-fetching="isFetchingUsers"
-            @fetch="handleFetchUsers"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <Button
-            :label="
-              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.EDIT')
-            "
-            sm
-            slate
-            link
-            class="px-2"
-            @click="handleEdit"
-          />
-          <div class="w-px h-2.5 bg-n-slate-5" />
-          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
-        </div>
-      </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
-        {{ description }}
-      </p>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.story.vue

@@ -1,63 +0,0 @@
-<script setup>
-import AssignmentCard from './AssignmentCard.vue';
-
-const agentAssignments = [
-  {
-    id: 1,
-    title: 'Assignment policy',
-    description: 'Manage how conversations get assigned in inboxes.',
-    features: [
-      {
-        icon: 'i-lucide-circle-fading-arrow-up',
-        label: 'Assign by conversations evenly or by available capacity',
-      },
-      {
-        icon: 'i-lucide-scale',
-        label: 'Add fair distribution rules to avoid overloading any agent',
-      },
-      {
-        icon: 'i-lucide-inbox',
-        label: 'Add inboxes to a policy - one policy per inbox',
-      },
-    ],
-  },
-  {
-    id: 2,
-    title: 'Agent capacity policy',
-    description: 'Manage workload for agents.',
-    features: [
-      {
-        icon: 'i-lucide-glass-water',
-        label: 'Define maximum conversations per inbox',
-      },
-      {
-        icon: 'i-lucide-circle-minus',
-        label: 'Create exceptions based on labels and time',
-      },
-      {
-        icon: 'i-lucide-users-round',
-        label: 'Add agents to a policy - one policy per agent',
-      },
-    ],
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AssignmentCard"
-    :layout="{ type: 'grid', width: '1000px' }"
-  >
-    <Variant title="Assignment Card">
-      <div class="px-4 py-4 bg-n-background flex gap-6 justify-between">
-        <AssignmentCard
-          v-for="(item, index) in agentAssignments"
-          :key="index"
-          :title="item.title"
-          :description="item.description"
-          :features="item.features"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue

@@ -1,49 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-
-defineProps({
-  title: { type: String, default: '' },
-  description: { type: String, default: '' },
-  features: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
-    <div class="flex flex-col items-start gap-2">
-      <div class="flex justify-between w-full items-center">
-        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
-        <Button
-          xs
-          slate
-          ghost
-          icon="i-lucide-chevron-right"
-          @click.stop="handleClick"
-        />
-      </div>
-      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
-    </div>
-
-    <ul class="flex flex-col items-start gap-3 mt-3">
-      <li
-        v-for="feature in features"
-        :key="feature.id"
-        class="flex items-center gap-3 text-sm"
-      >
-        <Icon
-          :icon="feature.icon"
-          class="text-n-slate-11 size-4 flex-shrink-0"
-        />
-        {{ feature.label }}
-      </li>
-    </ul>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.story.vue

@@ -1,104 +0,0 @@
-<script setup>
-import AssignmentPolicyCard from './AssignmentPolicyCard.vue';
-
-const mockInboxes = [
-  {
-    id: 1,
-    name: 'Website Support',
-    channel_type: 'Channel::WebWidget',
-    inbox_type: 'Website',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    channel_type: 'Channel::Email',
-    inbox_type: 'Email',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    channel_type: 'Channel::Whatsapp',
-    inbox_type: 'WhatsApp',
-  },
-  {
-    id: 4,
-    name: 'Facebook Messenger',
-    channel_type: 'Channel::FacebookPage',
-    inbox_type: 'Messenger',
-  },
-];
-
-const withCount = policy => ({
-  ...policy,
-  assignedInboxCount: policy.inboxes.length,
-});
-
-const policyA = withCount({
-  id: 1,
-  name: 'Website & Email',
-  description: 'Distributes conversations evenly among available agents',
-  assignmentOrder: 'round_robin',
-  conversationPriority: 'high',
-  enabled: true,
-  inboxes: [mockInboxes[0], mockInboxes[1]],
-  isFetchingInboxes: false,
-});
-
-const policyB = withCount({
-  id: 2,
-  name: 'WhatsApp & Messenger',
-  description: 'Assigns based on capacity and workload',
-  assignmentOrder: 'capacity_based',
-  conversationPriority: 'medium',
-  enabled: true,
-  inboxes: [mockInboxes[2], mockInboxes[3]],
-  isFetchingInboxes: false,
-});
-
-const emptyPolicy = withCount({
-  id: 3,
-  name: 'No Inboxes Yet',
-  description: 'Policy with no assigned inboxes',
-  assignmentOrder: 'manual',
-  conversationPriority: 'low',
-  enabled: false,
-  inboxes: [],
-  isFetchingInboxes: false,
-});
-
-const onEdit = id => console.log('Edit policy:', id);
-const onDelete = id => console.log('Delete policy:', id);
-const onFetch = () => console.log('Fetch inboxes');
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AssignmentPolicyCard"
-    :layout="{ type: 'grid', width: '1200px' }"
-  >
-    <Variant title="Three Cards (Two with inboxes, One empty)">
-      <div class="p-4 bg-n-background">
-        <div class="grid grid-cols-1 gap-4">
-          <AssignmentPolicyCard
-            v-bind="policyA"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-          <AssignmentPolicyCard
-            v-bind="policyB"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-          <AssignmentPolicyCard
-            v-bind="emptyPolicy"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue

@@ -1,133 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { formatToTitleCase } from 'dashboard/helper/commons';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import CardPopover from '../components/CardPopover.vue';
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  name: { type: String, default: '' },
-  description: { type: String, default: '' },
-  assignmentOrder: { type: String, default: '' },
-  conversationPriority: { type: String, default: '' },
-  assignedInboxCount: { type: Number, default: 0 },
-  enabled: { type: Boolean, default: false },
-  inboxes: { type: Array, default: () => [] },
-  isFetchingInboxes: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['edit', 'delete', 'fetchInboxes']);
-
-const { t } = useI18n();
-
-const inboxes = computed(() => {
-  return props.inboxes.map(inbox => {
-    return {
-      name: inbox.name,
-      id: inbox.id,
-      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
-    };
-  });
-});
-
-const order = computed(() => {
-  return formatToTitleCase(props.assignmentOrder);
-});
-
-const priority = computed(() => {
-  return formatToTitleCase(props.conversationPriority);
-});
-
-const handleEdit = () => {
-  emit('edit', props.id);
-};
-
-const handleDelete = () => {
-  emit('delete', props.id);
-};
-
-const handleFetchInboxes = () => {
-  if (props.inboxes?.length > 0) return;
-  emit('fetchInboxes', props.id);
-};
-</script>
-
-<template>
-  <CardLayout class="[&>div]:px-5">
-    <div class="flex flex-col gap-2 relative justify-between w-full">
-      <div class="flex items-center gap-3 justify-between w-full">
-        <div class="flex items-center gap-3">
-          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
-            {{ name }}
-          </h3>
-          <div class="flex items-center gap-2">
-            <div class="flex items-center rounded-md bg-n-alpha-2 h-6 px-2">
-              <span
-                class="text-xs"
-                :class="enabled ? 'text-n-teal-11' : 'text-n-slate-12'"
-              >
-                {{
-                  enabled
-                    ? t(
-                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ACTIVE'
-                      )
-                    : t(
-                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.INACTIVE'
-                      )
-                }}
-              </span>
-            </div>
-            <CardPopover
-              :title="
-                t(
-                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
-                )
-              "
-              icon="i-lucide-inbox"
-              :count="assignedInboxCount"
-              :items="inboxes"
-              :is-fetching="isFetchingInboxes"
-              @fetch="handleFetchInboxes"
-            />
-          </div>
-        </div>
-        <div class="flex items-center gap-2">
-          <Button
-            :label="
-              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.EDIT')
-            "
-            sm
-            slate
-            link
-            class="px-2"
-            @click="handleEdit"
-          />
-          <div v-if="order" class="w-px h-2.5 bg-n-slate-5" />
-          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
-        </div>
-      </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
-        {{ description }}
-      </p>
-      <div class="flex items-center gap-3 py-1.5">
-        <span v-if="order" class="text-n-slate-11 text-sm">
-          {{
-            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
-          }}
-          <span class="text-n-slate-12">{{ order }}</span>
-        </span>
-        <div v-if="order" class="w-px h-3 bg-n-strong" />
-        <span v-if="priority" class="text-n-slate-11 text-sm">
-          {{
-            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
-          }}
-          <span class="text-n-slate-12">{{ priority }}</span>
-        </span>
-      </div>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue

@@ -1,134 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-import { picoSearch } from '@scmmishra/pico-search';
-
-import Avatar from 'next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  searchPlaceholder: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['add']);
-
-const [showPopover, togglePopover] = useToggle();
-
-const searchValue = ref('');
-
-const filteredItems = computed(() => {
-  if (!searchValue.value) return props.items;
-  const query = searchValue.value.toLowerCase();
-
-  return picoSearch(props.items, query, ['name']);
-});
-
-const handleAdd = item => {
-  emit('add', item);
-  togglePopover(false);
-};
-
-const handleClickOutside = () => {
-  if (showPopover.value) {
-    togglePopover(false);
-  }
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="handleClickOutside"
-    class="relative flex items-center group"
-  >
-    <Button
-      slate
-      type="button"
-      icon="i-lucide-plus"
-      sm
-      :label="label"
-      @click="togglePopover(!showPopover)"
-    />
-    <div
-      v-if="showPopover"
-      class="top-full mt-2 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto py-2"
-    >
-      <div class="flex flex-col divide-y divide-n-slate-4 w-full">
-        <Input
-          v-model="searchValue"
-          :placeholder="searchPlaceholder"
-          custom-input-class="bg-transparent !outline-none w-full ltr:!pl-10 rtl:!pr-10 h-10"
-        >
-          <template #prefix>
-            <Icon
-              icon="i-lucide-search"
-              class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-3 rtl:right-3"
-            />
-          </template>
-        </Input>
-
-        <div
-          v-for="item in filteredItems"
-          :key="item.id"
-          class="flex gap-3 min-w-0 w-full py-4 px-3 hover:bg-n-alpha-2 cursor-pointer"
-          :class="{ 'items-center': item.color, 'items-start': !item.color }"
-          @click="handleAdd(item)"
-        >
-          <Icon
-            v-if="item.icon"
-            :icon="item.icon"
-            class="size-2 text-n-slate-12 flex-shrink-0 mt-0.5"
-          />
-          <span
-            v-else-if="item.color"
-            :style="{ backgroundColor: item.color }"
-            class="size-3 rounded-sm"
-          />
-          <Avatar
-            v-else
-            :title="item.name"
-            :src="item.avatarUrl"
-            :name="item.name"
-            :size="20"
-            rounded-full
-          />
-          <div class="flex flex-col items-start gap-2 min-w-0">
-            <div class="flex items-center gap-1 min-w-0">
-              <span
-                :title="item.name || item.title"
-                class="text-sm text-n-slate-12 truncate min-w-0"
-              >
-                {{ item.name || item.title }}
-              </span>
-              <span
-                v-if="item.id"
-                class="text-xs text-n-slate-11 flex-shrink-0"
-              >
-                {{ `#${item.id}` }}
-              </span>
-            </div>
-            <span
-              v-if="item.email || item.phoneNumber"
-              class="text-sm text-n-slate-11 truncate min-w-0"
-            >
-              {{ item.email || item.phoneNumber }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/BaseInfo.vue

@@ -1,127 +0,0 @@
-<script setup>
-import { computed, watch } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-
-import WithLabel from 'v3/components/Form/WithLabel.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Switch from 'dashboard/components-next/switch/Switch.vue';
-
-defineProps({
-  nameLabel: {
-    type: String,
-    default: '',
-  },
-  namePlaceholder: {
-    type: String,
-    default: '',
-  },
-  descriptionLabel: {
-    type: String,
-    default: '',
-  },
-  descriptionPlaceholder: {
-    type: String,
-    default: '',
-  },
-  statusLabel: {
-    type: String,
-    default: '',
-  },
-  statusPlaceholder: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['validationChange']);
-
-const policyName = defineModel('policyName', {
-  type: String,
-  default: '',
-});
-
-const description = defineModel('description', {
-  type: String,
-  default: '',
-});
-
-const enabled = defineModel('enabled', {
-  type: Boolean,
-  default: true,
-});
-
-const validationRules = {
-  policyName: { required, minLength: minLength(1) },
-  description: { required, minLength: minLength(1) },
-};
-
-const v$ = useVuelidate(validationRules, { policyName, description });
-
-const isValid = computed(() => !v$.value.$invalid);
-
-watch(
-  isValid,
-  () => {
-    emit('validationChange', {
-      isValid: isValid.value,
-      section: 'baseInfo',
-    });
-  },
-  { immediate: true }
-);
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 pb-4">
-    <!-- Policy Name Field -->
-    <div class="flex items-center gap-6">
-      <WithLabel
-        :label="nameLabel"
-        name="policyName"
-        class="flex items-center w-full [&>label]:min-w-[120px]"
-      >
-        <div class="flex-1">
-          <Input
-            v-model="policyName"
-            type="text"
-            :placeholder="namePlaceholder"
-          />
-        </div>
-      </WithLabel>
-    </div>
-
-    <!-- Description Field -->
-    <div class="flex items-center gap-6">
-      <WithLabel
-        :label="descriptionLabel"
-        name="description"
-        class="flex items-center w-full [&>label]:min-w-[120px]"
-      >
-        <div class="flex-1">
-          <Input
-            v-model="description"
-            type="text"
-            :placeholder="descriptionPlaceholder"
-          />
-        </div>
-      </WithLabel>
-    </div>
-
-    <!-- Status Field -->
-    <div v-if="statusLabel" class="flex items-center gap-6">
-      <WithLabel
-        :label="statusLabel"
-        name="enabled"
-        class="flex items-center w-full [&>label]:min-w-[120px]"
-      >
-        <div class="flex items-center gap-2">
-          <Switch v-model="enabled" />
-          <span class="text-sm text-n-slate-11">
-            {{ statusPlaceholder }}
-          </span>
-        </div>
-      </WithLabel>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/CardPopover.vue

@@ -1,121 +0,0 @@
-<script setup>
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-
-import Avatar from 'next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-defineProps({
-  count: {
-    type: Number,
-    default: 0,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['fetch']);
-
-const [showPopover, togglePopover] = useToggle();
-
-const handleButtonClick = () => {
-  emit('fetch');
-  togglePopover(!showPopover.value);
-};
-
-const handleClickOutside = () => {
-  if (showPopover.value) {
-    togglePopover(false);
-  }
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="handleClickOutside"
-    class="relative flex items-center group"
-  >
-    <button
-      v-if="count"
-      class="h-6 px-2 rounded-md bg-n-alpha-2 gap-1.5 flex items-center"
-      @click="handleButtonClick()"
-    >
-      <Icon :icon="icon" class="size-3.5 text-n-slate-12" />
-      <span class="text-n-slate-12 text-sm">
-        {{ count }}
-      </span>
-    </button>
-    <div
-      v-if="showPopover"
-      class="top-full mt-1 ltr:left-0 rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak p-3 rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto"
-    >
-      <div class="flex items-center gap-2.5 pb-2">
-        <Icon :icon="icon" class="size-3.5" />
-        <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
-      </div>
-
-      <div
-        v-if="isFetching"
-        class="flex items-center justify-center py-3 w-full text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-
-      <div v-else class="flex flex-col gap-4 w-full">
-        <div
-          v-for="item in items"
-          :key="item.id"
-          class="flex items-center justify-between gap-2 min-w-0 w-full"
-        >
-          <div class="flex items-center gap-2 min-w-0 w-full">
-            <Icon
-              v-if="item.icon"
-              :icon="item.icon"
-              class="size-4 text-n-slate-12 flex-shrink-0"
-            />
-            <Avatar
-              v-else
-              :title="item.name"
-              :src="item.avatarUrl"
-              :name="item.name"
-              :size="20"
-              rounded-full
-            />
-            <div class="flex items-center gap-1 min-w-0 flex-1">
-              <span
-                :title="item.name"
-                class="text-sm text-n-slate-12 truncate min-w-0"
-              >
-                {{ item.name }}
-              </span>
-              <span
-                v-if="item.id"
-                class="text-sm text-n-slate-11 flex-shrink-0"
-              >
-                {{ `#${item.id}` }}
-              </span>
-            </div>
-          </div>
-          <span v-if="item.email" class="text-sm text-n-slate-11 flex-shrink-0">
-            {{ item.email }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/DataTable.vue

@@ -1,90 +0,0 @@
-<script setup>
-import Avatar from 'next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-defineProps({
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-  emptyStateMessage: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['delete']);
-
-const handleDelete = itemId => {
-  emit('delete', itemId);
-};
-</script>
-
-<template>
-  <div
-    v-if="isFetching"
-    class="flex items-center justify-center py-3 w-full text-n-slate-11"
-  >
-    <Spinner />
-  </div>
-  <div
-    v-else-if="items.length === 0 && emptyStateMessage"
-    class="custom-dashed-border flex items-center justify-center py-6 w-full"
-  >
-    <span class="text-sm text-n-slate-11">
-      {{ emptyStateMessage }}
-    </span>
-  </div>
-  <div v-else class="flex flex-col divide-y divide-n-weak">
-    <div
-      v-for="item in items"
-      :key="item.id"
-      class="grid grid-cols-4 items-center gap-3 min-w-0 w-full justify-between h-[3.25rem] ltr:pr-2 rtl:pl-2"
-    >
-      <div class="flex items-center gap-2 col-span-2">
-        <Icon
-          v-if="item.icon"
-          :icon="item.icon"
-          class="size-4 text-n-slate-12 flex-shrink-0"
-        />
-        <Avatar
-          v-else
-          :title="item.name"
-          :src="item.avatarUrl"
-          :name="item.name"
-          :size="20"
-          rounded-full
-        />
-        <span class="text-sm text-n-slate-12 truncate min-w-0">
-          {{ item.name }}
-        </span>
-      </div>
-
-      <div class="flex items-start gap-2 col-span-1">
-        <span
-          :title="item.email || item.phoneNumber"
-          class="text-sm text-n-slate-12 truncate min-w-0"
-        >
-          {{ item.email || item.phoneNumber }}
-        </span>
-      </div>
-
-      <div class="col-span-1 justify-end flex items-center">
-        <Button
-          icon="i-lucide-trash"
-          slate
-          ghost
-          sm
-          type="button"
-          @click="handleDelete(item.id)"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue

@@ -1,149 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
-import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
-import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
-
-const props = defineProps({
-  tagsList: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const excludedLabels = defineModel('excludedLabels', {
-  type: Array,
-  default: () => [],
-});
-
-const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
-  type: Number,
-  default: 10,
-});
-
-// Duration limits: 10 minutes to 999 days (in minutes)
-const MIN_DURATION_MINUTES = 10;
-const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
-
-const { t } = useI18n();
-
-const hoveredLabel = ref(null);
-const windowUnit = ref(DURATION_UNITS.MINUTES);
-
-const addedTags = computed(() =>
-  props.tagsList
-    .filter(label => excludedLabels.value.includes(label.name))
-    .map(label => ({ id: label.id, title: label.name, ...label }))
-);
-
-const filteredTags = computed(() =>
-  props.tagsList.filter(
-    label => !addedTags.value.some(tag => tag.id === label.id)
-  )
-);
-
-const detectUnit = minutes => {
-  const m = Number(minutes) || 0;
-  if (m === 0) return DURATION_UNITS.MINUTES;
-  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
-  if (m % 60 === 0) return DURATION_UNITS.HOURS;
-  return DURATION_UNITS.MINUTES;
-};
-
-const onClickAddTag = tag => {
-  excludedLabels.value = [...excludedLabels.value, tag.name];
-};
-
-const onClickRemoveTag = tag => {
-  excludedLabels.value = excludedLabels.value.filter(
-    name => name !== tag.title
-  );
-};
-
-onMounted(() => {
-  windowUnit.value = detectUnit(excludeOlderThanMinutes.value);
-});
-</script>
-
-<template>
-  <div class="py-4 flex-col flex gap-6">
-    <div class="flex flex-col items-start gap-1 py-1">
-      <label class="text-sm font-medium text-n-slate-12 py-1">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.LABEL'
-          )
-        }}
-      </label>
-      <p class="mb-0 text-n-slate-11 text-sm">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DESCRIPTION'
-          )
-        }}
-      </p>
-    </div>
-
-    <div class="flex flex-col items-start gap-4">
-      <label class="text-sm font-medium text-n-slate-12 py-1">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.LABEL'
-          )
-        }}
-      </label>
-      <div
-        class="flex items-start gap-2 flex-wrap"
-        @mouseleave="hoveredLabel = null"
-      >
-        <LabelItem
-          v-for="tag in addedTags"
-          :key="tag.id"
-          :label="tag"
-          :is-hovered="hoveredLabel === tag.id"
-          class="h-8"
-          @remove="onClickRemoveTag"
-          @hover="hoveredLabel = tag.id"
-        />
-        <AddDataDropdown
-          :label="
-            t(
-              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.ADD_TAG'
-            )
-          "
-          :search-placeholder="
-            t(
-              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.DROPDOWN.SEARCH_PLACEHOLDER'
-            )
-          "
-          :items="filteredTags"
-          class="[&>button]:!text-n-blue-text"
-          @add="onClickAddTag"
-        />
-      </div>
-    </div>
-
-    <div class="flex flex-col items-start gap-4">
-      <label class="text-sm font-medium text-n-slate-12 py-1">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DURATION.LABEL'
-          )
-        }}
-      </label>
-      <div
-        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
-      >
-        <!-- allow 10 mins to 999 days -->
-        <DurationInput
-          v-model:unit="windowUnit"
-          v-model:model-value="excludeOlderThanMinutes"
-          :min="MIN_DURATION_MINUTES"
-          :max="MAX_DURATION_MINUTES"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/FairDistribution.vue

@@ -1,86 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Input from 'dashboard/components-next/input/Input.vue';
-import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
-import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
-
-const { t } = useI18n();
-
-const fairDistributionLimit = defineModel('fairDistributionLimit', {
-  type: Number,
-  default: 100,
-  set(value) {
-    return Number(value) || 0;
-  },
-});
-
-const fairDistributionWindow = defineModel('fairDistributionWindow', {
-  type: Number,
-  default: 3600,
-  set(value) {
-    return Number(value) || 0;
-  },
-});
-
-const windowUnit = ref(DURATION_UNITS.MINUTES);
-
-const detectUnit = minutes => {
-  const m = Number(minutes) || 0;
-  if (m === 0) return DURATION_UNITS.MINUTES;
-  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
-  if (m % 60 === 0) return DURATION_UNITS.HOURS;
-  return DURATION_UNITS.MINUTES;
-};
-
-onMounted(() => {
-  windowUnit.value = detectUnit(fairDistributionWindow.value);
-});
-</script>
-
-<template>
-  <div
-    class="flex items-start xl:items-center flex-col md:flex-row gap-4 lg:gap-3 bg-n-solid-1 p-4 outline outline-1 outline-n-weak rounded-xl"
-  >
-    <div class="flex items-center gap-3">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.INPUT_MAX'
-          )
-        }}
-      </label>
-      <div class="flex-1">
-        <Input
-          v-model="fairDistributionLimit"
-          type="number"
-          placeholder="100"
-          max="100000"
-          class="w-full"
-        />
-      </div>
-    </div>
-
-    <div class="flex sm:flex-row flex-col items-start sm:items-center gap-4">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{
-          t(
-            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.DURATION'
-          )
-        }}
-      </label>
-
-      <div
-        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
-      >
-        <!-- allow 10 mins to 999 days -->
-        <DurationInput
-          v-model:model-value="fairDistributionWindow"
-          v-model:unit="windowUnit"
-          :min="10"
-          :max="1438560"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue

@@ -1,163 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-
-const props = defineProps({
-  inboxList: {
-    type: Array,
-    default: () => [],
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['delete', 'add', 'update']);
-
-const inboxCapacityLimits = defineModel('inboxCapacityLimits', {
-  type: Array,
-  default: () => [],
-});
-
-const { t } = useI18n();
-
-const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
-const DEFAULT_CONVERSATION_LIMIT = 10;
-const MIN_CONVERSATION_LIMIT = 1;
-const MAX_CONVERSATION_LIMIT = 100000;
-
-const selectedInboxIds = computed(
-  () => new Set(inboxCapacityLimits.value.map(limit => limit.inboxId))
-);
-
-const availableInboxes = computed(() =>
-  props.inboxList.filter(
-    inbox => inbox && !selectedInboxIds.value.has(inbox.id)
-  )
-);
-
-const isLimitValid = limit => {
-  return (
-    limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
-    limit.conversationLimit <= MAX_CONVERSATION_LIMIT
-  );
-};
-
-const inboxMap = computed(
-  () => new Map(props.inboxList.map(inbox => [inbox.id, inbox]))
-);
-
-const handleAddInbox = inbox => {
-  emit('add', {
-    inboxId: inbox.id,
-    conversationLimit: DEFAULT_CONVERSATION_LIMIT,
-  });
-};
-
-const handleRemoveLimit = limitId => {
-  emit('delete', limitId);
-};
-
-const handleLimitChange = limit => {
-  if (isLimitValid(limit)) {
-    emit('update', limit);
-  }
-};
-
-const getInboxName = inboxId => {
-  return inboxMap.value.get(inboxId)?.name || '';
-};
-</script>
-
-<template>
-  <div class="py-4 flex-col flex gap-3">
-    <div class="flex items-center w-full gap-8 justify-between pt-1 pb-3">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.LABEL`) }}
-      </label>
-
-      <AddDataDropdown
-        :label="t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.ADD_BUTTON`)"
-        :search-placeholder="
-          t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SELECT_INBOX`)
-        "
-        :items="availableInboxes"
-        @add="handleAddInbox"
-      />
-    </div>
-
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-3 w-full text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-
-    <div
-      v-else-if="!inboxCapacityLimits.length"
-      class="custom-dashed-border flex items-center justify-center py-6 w-full"
-    >
-      <span class="text-sm text-n-slate-11">
-        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.EMPTY_STATE`) }}
-      </span>
-    </div>
-
-    <div v-else class="flex-col flex gap-3">
-      <div
-        v-for="(limit, index) in inboxCapacityLimits"
-        :key="limit.id || `temp-${index}`"
-        class="flex items-center gap-3"
-      >
-        <div
-          class="flex items-start rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full"
-        >
-          {{ getInboxName(limit.inboxId) }}
-        </div>
-
-        <div
-          class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-shrink-0 flex items-center"
-          :class="[
-            !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
-          ]"
-        >
-          <label class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2">
-            {{
-              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`)
-            }}
-          </label>
-
-          <div class="h-5 w-px bg-n-weak" />
-
-          <input
-            v-model.number="limit.conversationLimit"
-            type="number"
-            :min="MIN_CONVERSATION_LIMIT"
-            :max="MAX_CONVERSATION_LIMIT"
-            class="reset-base bg-transparent focus:outline-none max-w-20 text-sm"
-            :class="[
-              !isLimitValid(limit)
-                ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
-                : 'placeholder:text-n-slate-10 text-n-slate-12',
-            ]"
-            :placeholder="
-              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
-            "
-            @blur="handleLimitChange(limit)"
-          />
-        </div>
-
-        <Button
-          type="button"
-          slate
-          icon="i-lucide-trash"
-          class="flex-shrink-0"
-          @click="handleRemoveLimit(limit.id)"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/RadioCard.vue

@@ -1,60 +0,0 @@
-<script setup>
-const props = defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  isActive: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const handleChange = () => {
-  if (!props.isActive) {
-    emit('select', props.id);
-  }
-};
-</script>
-
-<template>
-  <div
-    class="relative cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
-    :class="[
-      isActive ? 'outline-n-blue-9' : 'outline-n-weak hover:outline-n-strong',
-    ]"
-    @click="handleChange"
-  >
-    <div class="absolute top-4 right-4">
-      <input
-        :id="`${id}`"
-        :checked="isActive"
-        :value="id"
-        :name="id"
-        type="radio"
-        class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
-        @change="handleChange"
-      />
-    </div>
-
-    <!-- Content -->
-    <div class="flex flex-col gap-3 items-start">
-      <h3 class="text-sm font-medium text-n-slate-12">
-        {{ label }}
-      </h3>
-      <p class="text-sm text-n-slate-11">
-        {{ description }}
-      </p>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/AddDataDropdown.story.vue

@@ -1,92 +0,0 @@
-<script setup>
-import AddDataDropdown from '../AddDataDropdown.vue';
-
-const mockInboxes = [
-  {
-    id: 1,
-    name: 'Website Support',
-    email: 'support@company.com',
-    icon: 'i-lucide-globe',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    email: 'help@company.com',
-    icon: 'i-lucide-mail',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    phoneNumber: '+1 555-0123',
-    icon: 'i-lucide-message-circle',
-  },
-  {
-    id: 4,
-    name: 'Facebook Messenger',
-    email: 'messenger@company.com',
-    icon: 'i-lucide-facebook',
-  },
-  {
-    id: 5,
-    name: 'Twitter DM',
-    email: 'twitter@company.com',
-    icon: 'i-lucide-twitter',
-  },
-];
-
-const mockTags = [
-  {
-    id: 1,
-    name: 'urgent',
-    color: '#ff4757',
-  },
-  {
-    id: 2,
-    name: 'bug',
-    color: '#ff6b6b',
-  },
-  {
-    id: 3,
-    name: 'feature-request',
-    color: '#4834d4',
-  },
-  {
-    id: 4,
-    name: 'documentation',
-    color: '#26de81',
-  },
-];
-
-const handleAdd = item => {
-  console.log('Add item:', item);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AddDataDropdown"
-    :layout="{ type: 'grid', width: '500px' }"
-  >
-    <Variant title="Basic Usage - Inboxes">
-      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
-        <AddDataDropdown
-          label="Add Inbox"
-          search-placeholder="Search inboxes..."
-          :items="mockInboxes"
-          @add="handleAdd"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Basic Usage - Tags">
-      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
-        <AddDataDropdown
-          label="Add Tag"
-          search-placeholder="Search tags..."
-          :items="mockTags"
-          @add="handleAdd"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/BaseInfo.story.vue

@@ -1,33 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import BaseInfo from '../BaseInfo.vue';
-
-const policyName = ref('Round Robin Policy');
-const description = ref(
-  'Distributes conversations evenly among available agents'
-);
-const enabled = ref(true);
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/BaseInfo"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background">
-        <BaseInfo
-          v-model:policy-name="policyName"
-          v-model:description="description"
-          v-model:enabled="enabled"
-          name-label="Policy Name"
-          name-placeholder="Enter policy name"
-          description-label="Description"
-          description-placeholder="Enter policy description"
-          status-label="Status"
-          status-placeholder="Active"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/CardPopover.story.vue

@@ -1,89 +0,0 @@
-<script setup>
-import CardPopover from '../CardPopover.vue';
-
-const mockItems = [
-  {
-    id: 1,
-    name: 'Website Support',
-    icon: 'i-lucide-globe',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    icon: 'i-lucide-mail',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    icon: 'i-lucide-message-circle',
-  },
-  {
-    id: 4,
-    name: 'Facebook Messenger',
-    icon: 'i-lucide-facebook',
-  },
-];
-
-const mockUsers = [
-  {
-    id: 1,
-    name: 'John Smith',
-    email: 'john.smith@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=1',
-  },
-  {
-    id: 2,
-    name: 'Sarah Johnson',
-    email: 'sarah.johnson@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=2',
-  },
-  {
-    id: 3,
-    name: 'Mike Chen',
-    email: 'mike.chen@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=3',
-  },
-  {
-    id: 4,
-    name: 'Emily Davis',
-    email: 'emily.davis@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=4',
-  },
-  {
-    id: 5,
-    name: 'Alex Rodriguez',
-    email: 'alex.rodriguez@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=5',
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/CardPopover"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
-        <CardPopover
-          :count="3"
-          title="Added Inboxes"
-          icon="i-lucide-inbox"
-          :items="mockItems.slice(0, 3)"
-          @fetch="() => console.log('Fetch triggered')"
-        />
-      </div>
-    </Variant>
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
-        <CardPopover
-          :count="3"
-          title="Added Agents"
-          icon="i-lucide-users-round"
-          :items="mockUsers.slice(0, 3)"
-          @fetch="() => console.log('Fetch triggered')"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/DataTable.story.vue

@@ -1,87 +0,0 @@
-<script setup>
-import DataTable from '../DataTable.vue';
-
-const mockItems = [
-  {
-    id: 1,
-    name: 'Website Support',
-    email: 'support@company.com',
-    icon: 'i-lucide-globe',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    email: 'help@company.com',
-    icon: 'i-lucide-mail',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    phoneNumber: '+1 555-0123',
-    icon: 'i-lucide-message-circle',
-  },
-];
-
-const mockAgentList = [
-  {
-    id: 1,
-    name: 'John Doe',
-    email: 'john.doe@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=1',
-  },
-  {
-    id: 2,
-    name: 'Jane Smith',
-    email: 'jane.smith@example.com',
-    avatarUrl: 'https://i.pravatar.cc/150?img=2',
-  },
-];
-
-const handleDelete = itemId => {
-  console.log('Delete item:', itemId);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/DataTable"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="With Data">
-      <div class="p-8 bg-n-background">
-        <DataTable
-          :items="mockItems"
-          :is-fetching="false"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Agents">
-      <div class="p-8 bg-n-background">
-        <DataTable
-          :items="mockAgentList"
-          :is-fetching="false"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div class="p-8 bg-n-background">
-        <DataTable :items="[]" is-fetching @delete="handleDelete" />
-      </div>
-    </Variant>
-
-    <Variant title="Empty State">
-      <div class="p-8 bg-n-background">
-        <DataTable
-          :items="[]"
-          :is-fetching="false"
-          empty-state-message="No items found"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/ExclusionRules.story.vue

@@ -1,67 +0,0 @@
-<script setup>
-import ExclusionRules from '../ExclusionRules.vue';
-import { ref } from 'vue';
-
-const mockTagsList = [
-  {
-    id: 1,
-    name: 'urgent',
-    color: '#ff4757',
-  },
-  {
-    id: 2,
-    name: 'bug',
-    color: '#ff6b6b',
-  },
-  {
-    id: 3,
-    name: 'feature-request',
-    color: '#4834d4',
-  },
-  {
-    id: 4,
-    name: 'documentation',
-    color: '#26de81',
-  },
-  {
-    id: 5,
-    name: 'enhancement',
-    color: '#2ed573',
-  },
-  {
-    id: 6,
-    name: 'question',
-    color: '#ffa502',
-  },
-  {
-    id: 7,
-    name: 'duplicate',
-    color: '#747d8c',
-  },
-  {
-    id: 8,
-    name: 'wontfix',
-    color: '#57606f',
-  },
-];
-
-const excludedLabelsBasic = ref([]);
-const excludeOlderThanHoursBasic = ref(10);
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/ExclusionRules"
-    :layout="{ type: 'grid', width: '1200px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background h-[600px]">
-        <ExclusionRules
-          v-model:excluded-labels="excludedLabelsBasic"
-          v-model:exclude-older-than-minutes="excludeOlderThanHoursBasic"
-          :tags-list="mockTagsList"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/FairDistribution.story.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import FairDistribution from '../FairDistribution.vue';
-
-const fairDistributionLimit = ref(100);
-const fairDistributionWindow = ref(3600);
-const windowUnit = ref('minutes');
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/FairDistribution"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background">
-        <FairDistribution
-          v-model:fair-distribution-limit="fairDistributionLimit"
-          v-model:fair-distribution-window="fairDistributionWindow"
-          v-model:window-unit="windowUnit"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/InboxCapacityLimits.story.vue

@@ -1,108 +0,0 @@
-<script setup>
-import InboxCapacityLimits from '../InboxCapacityLimits.vue';
-import { ref } from 'vue';
-
-const mockInboxList = [
-  {
-    value: 1,
-    label: 'Website Support',
-    icon: 'i-lucide-globe',
-  },
-  {
-    value: 2,
-    label: 'Email Support',
-    icon: 'i-lucide-mail',
-  },
-  {
-    value: 3,
-    label: 'WhatsApp Business',
-    icon: 'i-lucide-message-circle',
-  },
-  {
-    value: 4,
-    label: 'Facebook Messenger',
-    icon: 'i-lucide-facebook',
-  },
-  {
-    value: 5,
-    label: 'Twitter DM',
-    icon: 'i-lucide-twitter',
-  },
-  {
-    value: 6,
-    label: 'Telegram',
-    icon: 'i-lucide-send',
-  },
-];
-
-const inboxCapacityLimitsEmpty = ref([]);
-const inboxCapacityLimitsNew = ref([
-  { id: 1, inboxId: 1, conversationLimit: 5 },
-  { inboxId: null, conversationLimit: null },
-]);
-
-const handleDelete = id => {
-  console.log('Delete capacity limit:', id);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/InboxCapacityLimits"
-    :layout="{ type: 'grid', width: '900px' }"
-  >
-    <Variant title="Empty State">
-      <div class="p-8 bg-n-background">
-        <InboxCapacityLimits
-          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
-          :inbox-list="mockInboxList"
-          :is-fetching="false"
-          :is-updating="false"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div class="p-8 bg-n-background">
-        <InboxCapacityLimits
-          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
-          :inbox-list="mockInboxList"
-          is-fetching
-          :is-updating="false"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With New Row and existing data">
-      <div class="p-8 bg-n-background">
-        <InboxCapacityLimits
-          v-model:inbox-capacity-limits="inboxCapacityLimitsNew"
-          :inbox-list="mockInboxList"
-          :is-fetching="false"
-          :is-updating="false"
-          @delete="handleDelete"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Interactive Demo">
-      <div class="p-8 bg-n-background">
-        <InboxCapacityLimits
-          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
-          :inbox-list="mockInboxList"
-          :is-fetching="false"
-          :is-updating="false"
-          @delete="handleDelete"
-        />
-        <div class="mt-4 p-4 bg-n-alpha-2 rounded-lg">
-          <h4 class="text-sm font-medium mb-2">Current Limits:</h4>
-          <pre class="text-xs">{{
-            JSON.stringify(inboxCapacityLimitsEmpty, null, 2)
-          }}</pre>
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/RadioCard.story.vue

@@ -1,61 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import RadioCard from '../RadioCard.vue';
-
-const selectedOption = ref('round_robin');
-
-const handleSelect = value => {
-  selectedOption.value = value;
-  console.log('Selected:', value);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/RadioCard"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background space-y-4">
-        <RadioCard
-          id="round_robin"
-          label="Round Robin"
-          description="Distributes conversations evenly among all available agents in a rotating manner"
-          :is-active="selectedOption === 'round_robin'"
-          @select="handleSelect"
-        />
-        <RadioCard
-          id="balanced"
-          label="Balanced Assignment"
-          description="Assigns conversations based on agent workload to maintain balance"
-          :is-active="selectedOption === 'balanced'"
-          @select="handleSelect"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Active State">
-      <div class="p-8 bg-n-background">
-        <RadioCard
-          id="active_option"
-          label="Active Option"
-          description="This option is currently selected and active"
-          is-active
-          @select="handleSelect"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Inactive State">
-      <div class="p-8 bg-n-background">
-        <RadioCard
-          id="inactive_option"
-          label="Inactive Option"
-          description="This option is not selected and can be clicked to activate"
-          is-active
-          @select="handleSelect"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue

@@ -86,8 +86,8 @@ const handleLabelAction = async ({ value }) => {
   }
 };
 
-const handleRemoveLabel = label => {
-  return handleLabelAction({ value: label.id });
+const handleRemoveLabel = labelId => {
+  return handleLabelAction({ value: labelId });
 };
 
 watch(

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -62,7 +62,6 @@ const segmentsQuery = ref({});
 
 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
 const contactAttributes = useMapGetter('attributes/getContactAttributes');
-const labels = useMapGetter('labels/getLabels');
 const hasActiveSegments = computed(
   () => props.activeSegment && props.segmentsId !== 0
 );
@@ -216,7 +215,6 @@ const setParamsForEditSegmentModal = () => {
     countries,
     filterTypes: contactFilterItems,
     allCustomAttributes: useSnakeCase(contactAttributes.value),
-    labels: labels.value || [],
   };
 };
 

app/javascript/dashboard/components-next/Label/LabelItem.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 const emit = defineEmits(['remove', 'hover']);
 
 const handleRemoveLabel = () => {
-  emit('remove', props.label);
+  emit('remove', props.label?.id);
 };
 
 const handleMouseEnter = () => {
@@ -45,7 +45,6 @@ const handleMouseEnter = () => {
       <Button
         class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
         :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
-        type="button"
         slate
         xs
         faded

app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue

@@ -4,10 +4,6 @@ import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
-import {
-  isPdfDocument,
-  formatDocumentLink,
-} from 'shared/helpers/documentHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
@@ -67,11 +63,6 @@ const menuItems = computed(() => {
 
 const createdAt = computed(() => dynamicTime(props.createdAt));
 
-const displayLink = computed(() => formatDocumentLink(props.externalLink));
-const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
-);
-
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
@@ -80,14 +71,14 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <div class="flex gap-1 justify-between w-full">
+    <div class="flex justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ name }}
       </span>
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <div
           v-on-clickaway="() => toggleDropdown(false)"
-          class="flex relative items-center group"
+          class="relative flex items-center group"
         >
           <Button
             icon="i-lucide-ellipsis-vertical"
@@ -99,26 +90,26 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showActionsDropdown"
             :menu-items="menuItems"
-            class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
             @action="handleAction($event)"
           />
         </div>
       </div>
     </div>
-    <div class="flex gap-4 justify-between items-center w-full">
+    <div class="flex items-center justify-between w-full gap-4">
       <span
-        class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
+        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
       >
         <i class="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
       <span
-        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
+        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
       >
-        <i :class="linkIcon" class="shrink-0" />
-        <span class="truncate">{{ displayLink }}</span>
+        <i class="i-ph-link-simple shrink-0" />
+        <span class="truncate">{{ externalLink }}</span>
       </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
         {{ createdAt }}
       </div>
     </div>

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
@@ -13,6 +12,7 @@ const { t } = useI18n();
 const store = useStore();
 
 const dialogRef = ref(null);
+const documentForm = ref(null);
 
 const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 
@@ -23,7 +23,7 @@ const handleSubmit = async newDocument => {
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      parseAPIErrorResponse(error) || t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
     useAlert(errorMessage);
   }
 };
@@ -48,7 +48,11 @@ defineExpose({ dialogRef });
     :show-confirm-button="false"
     @close="handleClose"
   >
-    <DocumentForm @submit="handleSubmit" @cancel="handleCancel" />
+    <DocumentForm
+      ref="documentForm"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
     <template #footer />
   </Dialog>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { reactive, computed, ref, nextTick } from 'vue';
+import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, requiredIf, url } from '@vuelidate/validators';
+import { required, minLength, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -12,8 +11,6 @@ import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
 const { t } = useI18n();
 
 const formState = {
@@ -23,25 +20,14 @@ const formState = {
 
 const initialState = {
   name: '',
-  url: '',
   assistantId: null,
-  documentType: 'url',
-  pdfFile: null,
 };
 
 const state = reactive({ ...initialState });
-const fileInputRef = ref(null);
 
 const validationRules = {
-  url: {
-    required: requiredIf(() => state.documentType === 'url'),
-    url: requiredIf(() => state.documentType === 'url' && url),
-    minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
-  },
+  url: { required, url, minLength: minLength(1) },
   assistantId: { required },
-  pdfFile: {
-    required: requiredIf(() => state.documentType === 'pdf'),
-  },
 };
 
 const assistantList = computed(() =>
@@ -51,17 +37,10 @@ const assistantList = computed(() =>
   }))
 );
 
-const documentTypeOptions = [
-  { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
-  { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
-];
-
 const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
 
-const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
-
 const getErrorMessage = (field, errorKey) => {
   return v$.value[field].$error
     ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
@@ -71,57 +50,14 @@ const getErrorMessage = (field, errorKey) => {
 const formErrors = computed(() => ({
   url: getErrorMessage('url', 'URL'),
   assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
-  pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const handleFileChange = event => {
-  const file = event.target.files[0];
-  if (file) {
-    if (file.type !== 'application/pdf') {
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
-      event.target.value = '';
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      // 10MB
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
-      event.target.value = '';
-      return;
-    }
-    state.pdfFile = file;
-    state.name = file.name.replace(/\.pdf$/i, '');
-  }
-};
-
-const openFileDialog = () => {
-  // Use nextTick to ensure the ref is available
-  nextTick(() => {
-    if (fileInputRef.value) {
-      fileInputRef.value.click();
-    }
-  });
-};
-
-const prepareDocumentDetails = () => {
-  const formData = new FormData();
-  formData.append('document[assistant_id]', state.assistantId);
-
-  if (state.documentType === 'url') {
-    formData.append('document[external_link]', state.url);
-    formData.append('document[name]', state.name || state.url);
-  } else {
-    formData.append('document[pdf_file]', state.pdfFile);
-    formData.append(
-      'document[name]',
-      state.name || state.pdfFile.name.replace('.pdf', '')
-    );
-    // No need to send external_link for PDF - it's auto-generated in the backend
-  }
-
-  return formData;
-};
+const prepareDocumentDetails = () => ({
+  external_link: state.url,
+  assistant_id: state.assistantId,
+});
 
 const handleSubmit = async () => {
   const isFormValid = await v$.value.$validate();
@@ -135,89 +71,13 @@ const handleSubmit = async () => {
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-1">
-      <label
-        for="documentType"
-        class="mb-0.5 text-sm font-medium text-n-slate-12"
-      >
-        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
-      </label>
-      <ComboBox
-        id="documentType"
-        v-model="state.documentType"
-        :options="documentTypeOptions"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
     <Input
-      v-if="state.documentType === 'url'"
       v-model="state.url"
       :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
       :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
       :message="formErrors.url"
       :message-type="formErrors.url ? 'error' : 'info'"
     />
-
-    <div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
-      </label>
-      <div class="relative">
-        <input
-          ref="fileInputRef"
-          type="file"
-          accept=".pdf"
-          class="hidden"
-          @change="handleFileChange"
-        />
-        <Button
-          type="button"
-          :color="hasPdfFileError ? 'ruby' : 'slate'"
-          :variant="hasPdfFileError ? 'outline' : 'solid'"
-          class="!w-full !h-auto !justify-between !py-4"
-          @click="openFileDialog"
-        >
-          <template #default>
-            <div class="flex gap-2 items-center">
-              <div
-                class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
-              >
-                <i class="text-xl i-ph-file-pdf text-n-slate-11" />
-              </div>
-              <div class="flex flex-col flex-1 gap-1 items-start">
-                <p class="m-0 text-sm font-medium text-n-slate-12">
-                  {{
-                    state.pdfFile
-                      ? state.pdfFile.name
-                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
-                  }}
-                </p>
-                <p class="m-0 text-xs text-n-slate-11">
-                  {{
-                    state.pdfFile
-                      ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
-                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
-                  }}
-                </p>
-              </div>
-            </div>
-
-            <i class="i-lucide-upload text-n-slate-11" />
-          </template>
-        </Button>
-      </div>
-      <p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
-        {{ formErrors.pdfFile }}
-      </p>
-    </div>
-
-    <Input
-      v-model="state.name"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
-    />
-
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
         {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
@@ -228,12 +88,12 @@ const handleSubmit = async () => {
         :options="assistantList"
         :has-error="!!formErrors.assistantId"
         :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
         :message="formErrors.assistantId"
       />
     </div>
 
-    <div class="flex gap-3 justify-between items-center w-full">
+    <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"
         variant="faded"

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -96,12 +96,8 @@ watch(
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 focus:outline-n-brand"
-        :class="{
-          focused: open,
-          '[&:not(.focused)]:dark:outline-n-weak [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6':
-            !hasError,
-        }"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
+        :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
       />

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue

@@ -15,7 +15,7 @@ defineProps({
     >
       {{ title }}
     </div>
-    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
+    <ul class="gap-2 grid reset-base list-none px-2">
       <slot />
     </ul>
   </div>

app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

@@ -34,17 +34,14 @@ const formatOperatorLabel = operator => {
 };
 
 const formatFilterValue = value => {
-  // Case 1: null, undefined, empty string
   if (!value) return '';
-
-  // Case 2: array → map each item, use name if present, else the item itself
   if (Array.isArray(value)) {
-    return value.map(item => item?.name ?? item).join(', ');
+    return value.join(', ');
   }
-
-  // Case 3: object with a "name" property → return name
-  // Case 4: primitive (string, number, etc.) → return as is
-  return value?.name ?? value;
+  if (typeof value === 'object' && value.name) {
+    return value.name;
+  }
+  return value;
 };
 </script>
 
@@ -69,7 +66,6 @@ const formatFilterValue = value => {
           </span>
           <span
             v-if="filter.values"
-            :title="formatFilterValue(filter.values)"
             class="lowercase truncate text-n-slate-12"
             :class="{
               'first-letter:capitalize': shouldCapitalizeFirstLetter(

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -103,12 +103,6 @@ const validationError = computed(() => {
   );
 });
 
-const inputFieldType = computed(() => {
-  if (inputType.value === 'date') return 'date';
-  if (inputType.value === 'number') return 'number';
-  return 'text';
-});
-
 const resetModelOnAttributeKeyChange = newAttributeKey => {
   /**
    * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -188,7 +182,7 @@ defineExpose({ validate });
         <Input
           v-else
           v-model="values"
-          :type="inputFieldType"
+          :type="inputType === 'date' ? 'date' : 'text'"
           class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
           :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
         />

app/javascript/dashboard/components-next/filter/contactProvider.js

@@ -50,7 +50,6 @@ export function useContactFilterContext() {
   const { t } = useI18n();
 
   const contactAttributes = useMapGetter('attributes/getContactAttributes');
-  const labels = useMapGetter('labels/getLabels');
 
   const {
     equalityOperators,
@@ -185,20 +184,6 @@ export function useContactFilterContext() {
       filterOperators: equalityOperators.value,
       attributeModel: 'standard',
     },
-    {
-      attributeKey: CONTACT_ATTRIBUTES.LABELS,
-      value: CONTACT_ATTRIBUTES.LABELS,
-      attributeName: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
-      label: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
-      inputType: 'multiSelect',
-      options: labels.value?.map(label => ({
-        id: label.title,
-        name: label.title,
-      })),
-      dataType: 'text',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'standard',
-    },
     ...customFilterTypes.value,
   ]);
 

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -28,7 +28,6 @@ export const CONTACT_ATTRIBUTES = {
   LAST_ACTIVITY_AT: 'last_activity_at',
   REFERER: 'referer',
   BLOCKED: 'blocked',
-  LABELS: 'labels',
 };
 
 /**

app/javascript/dashboard/components-next/filter/provider.js

@@ -164,8 +164,8 @@ export function useConversationFilterContext() {
       value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
       attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
       label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
-      inputType: 'number',
-      dataType: 'number',
+      inputType: 'plainText',
+      datatype: 'number',
       filterOperators: containmentOperators.value,
       attributeModel: 'standard',
     },
@@ -179,7 +179,7 @@ export function useConversationFilterContext() {
         id: campaign.id,
         name: campaign.title,
       })),
-      dataType: 'number',
+      datatype: 'number',
       filterOperators: presenceOperators.value,
       attributeModel: 'standard',
     },

app/javascript/dashboard/components-next/icon/provider.js

@@ -2,23 +2,23 @@ import { computed } from 'vue';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
-    'Channel::Api': 'i-woot-api',
-    'Channel::Email': 'i-woot-mail',
-    'Channel::FacebookPage': 'i-woot-messenger',
-    'Channel::Line': 'i-woot-line',
-    'Channel::Sms': 'i-woot-sms',
-    'Channel::Telegram': 'i-woot-telegram',
-    'Channel::TwilioSms': 'i-woot-sms',
+    'Channel::Api': 'i-ri-cloudy-fill',
+    'Channel::Email': 'i-ri-mail-fill',
+    'Channel::FacebookPage': 'i-ri-messenger-fill',
+    'Channel::Line': 'i-ri-line-fill',
+    'Channel::Sms': 'i-ri-chat-1-fill',
+    'Channel::Telegram': 'i-ri-telegram-fill',
+    'Channel::TwilioSms': 'i-ri-chat-1-fill',
     'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-    'Channel::WebWidget': 'i-woot-website',
-    'Channel::Whatsapp': 'i-woot-whatsapp',
-    'Channel::Instagram': 'i-woot-instagram',
+    'Channel::WebWidget': 'i-ri-global-fill',
+    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+    'Channel::Instagram': 'i-ri-instagram-fill',
     'Channel::Voice': 'i-ri-phone-fill',
   };
 
   const providerIconMap = {
-    microsoft: 'i-woot-outlook',
-    google: 'i-woot-gmail',
+    microsoft: 'i-ri-microsoft-fill',
+    google: 'i-ri-google-fill',
   };
 
   const channelIcon = computed(() => {
@@ -34,7 +34,7 @@ export function useChannelIcon(inbox) {
 
     // Special case for Twilio whatsapp
     if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-woot-whatsapp';
+      icon = 'i-ri-whatsapp-fill';
     }
 
     return icon ?? 'i-ri-global-fill';

app/javascript/dashboard/components-next/icon/specs/provider.spec.js

@@ -4,19 +4,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for API channel', () => {
     const inbox = { channel_type: 'Channel::Api' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-api');
+    expect(icon).toBe('i-ri-cloudy-fill');
   });
 
   it('returns correct icon for Facebook channel', () => {
     const inbox = { channel_type: 'Channel::FacebookPage' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-messenger');
+    expect(icon).toBe('i-ri-messenger-fill');
   });
 
   it('returns correct icon for WhatsApp channel', () => {
     const inbox = { channel_type: 'Channel::Whatsapp' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-whatsapp');
+    expect(icon).toBe('i-ri-whatsapp-fill');
   });
 
   it('returns correct icon for Voice channel', () => {
@@ -28,19 +28,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Line channel', () => {
     const inbox = { channel_type: 'Channel::Line' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-line');
+    expect(icon).toBe('i-ri-line-fill');
   });
 
   it('returns correct icon for SMS channel', () => {
     const inbox = { channel_type: 'Channel::Sms' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-sms');
+    expect(icon).toBe('i-ri-chat-1-fill');
   });
 
   it('returns correct icon for Telegram channel', () => {
     const inbox = { channel_type: 'Channel::Telegram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-telegram');
+    expect(icon).toBe('i-ri-telegram-fill');
   });
 
   it('returns correct icon for Twitter channel', () => {
@@ -52,20 +52,20 @@ describe('useChannelIcon', () => {
   it('returns correct icon for WebWidget channel', () => {
     const inbox = { channel_type: 'Channel::WebWidget' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-website');
+    expect(icon).toBe('i-ri-global-fill');
   });
 
   it('returns correct icon for Instagram channel', () => {
     const inbox = { channel_type: 'Channel::Instagram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-instagram');
+    expect(icon).toBe('i-ri-instagram-fill');
   });
 
   describe('TwilioSms channel', () => {
     it('returns chat icon for regular Twilio SMS channel', () => {
       const inbox = { channel_type: 'Channel::TwilioSms' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
 
     it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
@@ -74,7 +74,7 @@ describe('useChannelIcon', () => {
         medium: 'whatsapp',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-whatsapp');
+      expect(icon).toBe('i-ri-whatsapp-fill');
     });
 
     it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
@@ -83,7 +83,7 @@ describe('useChannelIcon', () => {
         medium: 'sms',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
 
     it('returns chat icon for Twilio SMS with undefined medium', () => {
@@ -92,7 +92,7 @@ describe('useChannelIcon', () => {
         medium: undefined,
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
   });
 
@@ -100,7 +100,7 @@ describe('useChannelIcon', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-mail');
+      expect(icon).toBe('i-ri-mail-fill');
     });
 
     it('returns Microsoft icon for Microsoft email provider', () => {
@@ -109,7 +109,7 @@ describe('useChannelIcon', () => {
         provider: 'microsoft',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-outlook');
+      expect(icon).toBe('i-ri-microsoft-fill');
     });
 
     it('returns Google icon for Google email provider', () => {
@@ -118,7 +118,7 @@ describe('useChannelIcon', () => {
         provider: 'google',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-gmail');
+      expect(icon).toBe('i-ri-google-fill');
     });
   });
 

app/javascript/dashboard/components-next/input/DurationInput.vue

@@ -78,8 +78,6 @@ watch(unit, () => {
     <option :value="DURATION_UNITS.HOURS">
       {{ t('DURATION_INPUT.HOURS') }}
     </option>
-    <option :value="DURATION_UNITS.DAYS">
-      {{ t('DURATION_INPUT.DAYS') }}
-    </option>
+    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
   </select>
 </template>

app/javascript/dashboard/components-next/input/Input.vue

@@ -15,7 +15,6 @@ const props = defineProps({
     validator: value => ['info', 'error', 'success'].includes(value),
   },
   min: { type: String, default: '' },
-  max: { type: String, default: '' },
   autofocus: { type: Boolean, default: false },
 });
 
@@ -55,12 +54,7 @@ const inputOutlineClass = computed(() => {
 });
 
 const handleInput = event => {
-  let value = event.target.value;
-  // Convert to number if type is number and value is not empty
-  if (props.type === 'number' && value !== '') {
-    value = Number(value);
-  }
-  emit('update:modelValue', value);
+  emit('update:modelValue', event.target.value);
   emit('input', event);
 };
 
@@ -114,12 +108,7 @@ onMounted(() => {
       :placeholder="placeholder"
       :disabled="disabled"
       :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      :max="
-        ['date', 'datetime-local', 'time', 'number'].includes(type)
-          ? max
-          : undefined
-      "
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"

app/javascript/dashboard/components-next/message/Message.vue

@@ -36,7 +36,6 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
-import VoiceCallBubble from './bubbles/VoiceCall.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -281,10 +280,6 @@ const componentToRender = computed(() => {
     return FormBubble;
   }
 
-  if (props.contentType === CONTENT_TYPES.VOICE_CALL) {
-    return VoiceCallBubble;
-  }
-
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -10,10 +10,6 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
-const props = defineProps({
-  hideMeta: { type: Boolean, default: false },
-});
-
 const { variant, orientation, inReplyTo, shouldGroupWithNext } =
   useMessageContext();
 const { t } = useI18n();
@@ -68,13 +64,6 @@ const scrollToMessage = () => {
   });
 };
 
-const shouldShowMeta = computed(
-  () =>
-    !props.hideMeta &&
-    !shouldGroupWithNext.value &&
-    variant.value !== MESSAGE_VARIANTS.ACTIVITY
-);
-
 const replyToPreview = computed(() => {
   if (!inReplyTo) return '';
 
@@ -104,16 +93,16 @@ const replyToPreview = computed(() => {
   >
     <div
       v-if="inReplyTo"
-      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
+      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
       @click="scrollToMessage"
     >
-      <span class="break-all line-clamp-2">
+      <span class="line-clamp-2 break-all">
         {{ replyToPreview }}
       </span>
     </div>
     <slot />
     <MessageMeta
-      v-if="shouldShowMeta"
+      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
       :class="[
         flexOrientationClass,
         variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
-import { sanitizeTextForRender } from '@chatwoot/utils';
 import { allowedCssProperties } from 'lettersanitizer';
 
 import Icon from 'next/icon/Icon.vue';
@@ -38,13 +37,11 @@ const { hasTranslations, translationContent } =
 const originalEmailText = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return sanitizeTextForRender(text);
+  return text?.replace(/\n/g, '<br>');
 });
 
 const originalEmailHtml = computed(
-  () =>
-    contentAttributes?.value?.email?.htmlContent?.full ||
-    originalEmailText.value
+  () => contentAttributes?.value?.email?.htmlContent?.full || ''
 );
 
 const messageContent = computed(() => {

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import BaseBubble from 'next/message/bubbles/Base.vue';
-import { useMessageContext } from '../provider.js';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
-
-const { contentAttributes } = useMessageContext();
-
-const data = computed(() => contentAttributes.value?.data);
-
-const status = computed(() => data.value?.status);
-const direction = computed(() => data.value?.call_direction);
-
-const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
-  useVoiceCallStatus(status, direction);
-
-const containerRingClass = computed(() => {
-  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
-});
-</script>
-
-<template>
-  <BaseBubble class="p-0 border-none" hide-meta>
-    <div
-      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
-      :class="containerRingClass"
-    >
-      <div class="flex gap-3 items-center p-3 w-full">
-        <div
-          class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bubbleIconBg"
-        >
-          <span class="text-xl" :class="bubbleIconName" />
-        </div>
-
-        <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
-          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
-        </div>
-      </div>
-    </div>
-  </BaseBubble>
-</template>

app/javascript/dashboard/components-next/message/constants.js

@@ -64,7 +64,6 @@ export const CONTENT_TYPES = {
   INPUT_CSAT: 'input_csat',
   INTEGRATIONS: 'integrations',
   STICKER: 'sticker',
-  VOICE_CALL: 'voice_call',
 };
 
 export const MEDIA_TYPES = [

app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue

@@ -25,7 +25,7 @@ const reauthorizationRequired = computed(() => {
 
 <template>
   <span
-    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
+    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
     <ChannelIcon :inbox="inbox" class="size-3" />

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -128,7 +128,7 @@ const menuItems = computed(() => {
       to: accountScopedRoute('inbox_view'),
       activeOn: ['inbox_view', 'inbox_view_conversation'],
       getterKeys: {
-        count: 'notifications/getUnreadCount',
+        badge: 'notifications/getHasUnreadNotifications',
       },
     },
     {
@@ -422,12 +422,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-users',
           to: accountScopedRoute('settings_teams_list'),
         },
-        {
-          name: 'Settings Agent Assignment',
-          label: t('SIDEBAR.AGENT_ASSIGNMENT'),
-          icon: 'i-lucide-user-cog',
-          to: accountScopedRoute('assignment_policy_index'),
-        },
         {
           name: 'Settings Inboxes',
           label: t('SIDEBAR.INBOXES'),
@@ -494,12 +488,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-clock-alert',
           to: accountScopedRoute('sla_list'),
         },
-        {
-          name: 'Settings Security',
-          label: t('SIDEBAR.SECURITY'),
-          icon: 'i-lucide-shield',
-          to: accountScopedRoute('security_settings_index'),
-        },
         {
           name: 'Settings Billing',
           label: t('SIDEBAR.BILLING'),

app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';
 
@@ -17,16 +16,12 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);
 
 const showBadge = useMapGetter(props.getterKeys.badge);
-const dynamicCount = useMapGetter(props.getterKeys.count);
-const count = computed(() =>
-  dynamicCount.value > 99 ? '99+' : dynamicCount.value
-);
 </script>
 
 <template>
   <component
     :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
     role="button"
     draggable="false"
     :to="to"
@@ -45,21 +40,9 @@ const count = computed(() =>
         class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
       />
     </div>
-    <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
-        {{ label }}
-      </span>
-      <span
-        v-if="dynamicCount && !expandable"
-        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
-        :class="{
-          'text-n-blue-text outline-n-slate-6': isActive,
-          'text-n-slate-11 outline-n-strong': !isActive,
-        }"
-      >
-        {{ count }}
-      </span>
-    </div>
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
     <span
       v-if="expandable"
       v-show="isExpanded"

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,57 +1,50 @@
-<script setup>
-import Icon from 'next/icon/Icon.vue';
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+    isComingSoon: {
+      type: Boolean,
+      default: false,
+    },
   },
-  description: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    required: true,
-  },
-  isComingSoon: {
-    type: Boolean,
-    default: false,
-  },
-});
+};
 </script>
 
 <template>
   <button
-    class="relative bg-n-solid-1 gap-6 cursor-pointer rounded-2xl flex flex-col justify-start transition-all duration-200 ease-in -m-px py-6 px-5 items-start border border-solid border-n-weak"
-    :class="{
-      'hover:enabled:border-n-blue-9 hover:enabled:shadow-md disabled:opacity-60 disabled:cursor-not-allowed':
-        !isComingSoon,
-      'cursor-not-allowed disabled:opacity-80': isComingSoon,
-    }"
+    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
   >
-    <div
-      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-    >
-      <Icon :icon="icon" class="text-n-slate-10 size-6" />
-    </div>
-
-    <div class="flex flex-col items-start gap-1.5">
-      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
-        {{ title }}
-      </h3>
-      <p class="text-n-slate-11 text-start text-sm">
-        {{ description }}
-      </p>
-    </div>
+    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
+    <h3 class="text-n-slate-12 text-base text-center capitalize">
+      {{ title }}
+    </h3>
 
     <div
       v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
     >
-      <span class="text-n-slate-12 font-medium text-sm">
+      <span class="text-n-slate-12 font-medium text-base">
         {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
       </span>
     </div>
   </button>
 </template>
+
+<style scoped lang="scss">
+.inactive {
+  img {
+    filter: grayscale(100%);
+  }
+
+  &:hover {
+    @apply border-n-strong shadow-none cursor-not-allowed;
+  }
+}
+</style>

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

@@ -1,81 +1,97 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import Icon from 'next/icon/Icon.vue';
-
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
   },
-});
-
-const route = useRoute();
-
-const activeIndex = computed(() => {
-  const index = props.items.findIndex(i => i.route === route.name);
-  return index === -1 ? 0 : index;
-});
-
-const steps = computed(() =>
-  props.items.map((item, index) => {
-    const isActive = index === activeIndex.value;
-    const isOver = index < activeIndex.value;
-    return {
-      ...item,
-      index,
-      isActive,
-      isOver,
-    };
-  })
-);
+  computed: {
+    classObject() {
+      return 'w-full';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
 </script>
 
 <template>
-  <transition-group tag="div">
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
     <div
-      v-for="step in steps"
-      :key="step.route"
-      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
     >
-      <!-- Circle -->
-      <div
-        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
-        :class="{
-          'bg-n-slate-3': step.isActive || step.isOver,
-          'bg-n-background': !step.isActive && !step.isOver,
-        }"
-      >
-        <span
-          v-if="!step.isOver"
-          :key="'num-' + step.index"
-          class="text-xs font-bold transition-colors duration-300"
-          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
+      <div class="flex items-center">
+        <h3
+          class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
         >
-          {{ step.index + 1 }}
+          {{ item.title }}
+        </h3>
+        <span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
+          <fluent-icon icon="checkmark" />
         </span>
-        <Icon
-          v-else
-          :key="'check-' + step.index"
-          icon="i-lucide-check"
-          class="text-n-slate-11 size-4"
-        />
-      </div>
-
-      <!-- Content -->
-      <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
-        <div class="flex items-center">
-          <h3
-            class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
-            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
-          >
-            {{ step.title }}
-          </h3>
-        </div>
-        <p class="m-0 mt-1.5 text-sm text-n-slate-11">
-          {{ step.body }}
-        </p>
       </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
+        {{ item.body }}
+      </p>
     </div>
   </transition-group>
 </template>
+
+<style lang="scss" scoped>
+.wizard-box {
+  .item {
+    @apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
+
+    &.active {
+      h3 {
+        @apply text-n-blue-text dark:text-n-blue-text;
+      }
+
+      .step {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+    }
+
+    &.over {
+      &::after {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+
+      .step {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+
+      & + .item {
+        &::before {
+          @apply bg-n-brand dark:bg-n-brand;
+        }
+      }
+    }
+
+    .step {
+      @apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
+    }
+  }
+}
+</style>

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

@@ -1,87 +1,91 @@
-<script setup>
-import { computed } from 'vue';
+<script>
 import ChannelSelector from '../ChannelSelector.vue';
-
-const props = defineProps({
-  channel: {
-    type: Object,
-    required: true,
+export default {
+  components: { ChannelSelector },
+  props: {
+    channel: {
+      type: Object,
+      required: true,
+    },
+    enabledFeatures: {
+      type: Object,
+      required: true,
+    },
   },
-  enabledFeatures: {
-    type: Object,
-    required: true,
+  emits: ['channelItemClick'],
+  computed: {
+    hasFbConfigured() {
+      return window.chatwootConfig?.fbAppId;
+    },
+    hasInstagramConfigured() {
+      return window.chatwootConfig?.instagramAppId;
+    },
+    isActive() {
+      const { key } = this.channel;
+      if (Object.keys(this.enabledFeatures).length === 0) {
+        return false;
+      }
+      if (key === 'website') {
+        return this.enabledFeatures.channel_website;
+      }
+      if (key === 'facebook') {
+        return this.enabledFeatures.channel_facebook && this.hasFbConfigured;
+      }
+      if (key === 'email') {
+        return this.enabledFeatures.channel_email;
+      }
+
+      if (key === 'instagram') {
+        return (
+          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
+        );
+      }
+
+      if (key === 'voice') {
+        return this.enabledFeatures.channel_voice;
+      }
+
+      return [
+        'website',
+        'twilio',
+        'api',
+        'whatsapp',
+        'sms',
+        'telegram',
+        'line',
+        'instagram',
+        'voice',
+      ].includes(key);
+    },
+    isComingSoon() {
+      const { key } = this.channel;
+      // Show "Coming Soon" only if the channel is marked as coming soon
+      // and the corresponding feature flag is not enabled yet.
+      return ['voice'].includes(key) && !this.isActive;
+    },
+  },
+  methods: {
+    getChannelThumbnail() {
+      if (this.channel.key === 'api' && this.channel.thumbnail) {
+        return this.channel.thumbnail;
+      }
+      return `/assets/images/dashboard/channels/${this.channel.key}.png`;
+    },
+    onItemClick() {
+      if (this.isActive) {
+        this.$emit('channelItemClick', this.channel.key);
+      }
+    },
   },
-});
-
-const emit = defineEmits(['channelItemClick']);
-
-const hasFbConfigured = computed(() => {
-  return window.chatwootConfig?.fbAppId;
-});
-
-const hasInstagramConfigured = computed(() => {
-  return window.chatwootConfig?.instagramAppId;
-});
-
-const isActive = computed(() => {
-  const { key } = props.channel;
-  if (Object.keys(props.enabledFeatures).length === 0) {
-    return false;
-  }
-  if (key === 'website') {
-    return props.enabledFeatures.channel_website;
-  }
-  if (key === 'facebook') {
-    return props.enabledFeatures.channel_facebook && hasFbConfigured.value;
-  }
-  if (key === 'email') {
-    return props.enabledFeatures.channel_email;
-  }
-
-  if (key === 'instagram') {
-    return (
-      props.enabledFeatures.channel_instagram && hasInstagramConfigured.value
-    );
-  }
-
-  if (key === 'voice') {
-    return props.enabledFeatures.channel_voice;
-  }
-
-  return [
-    'website',
-    'twilio',
-    'api',
-    'whatsapp',
-    'sms',
-    'telegram',
-    'line',
-    'instagram',
-    'voice',
-  ].includes(key);
-});
-
-const isComingSoon = computed(() => {
-  const { key } = props.channel;
-  // Show "Coming Soon" only if the channel is marked as coming soon
-  // and the corresponding feature flag is not enabled yet.
-  return ['voice'].includes(key) && !isActive.value;
-});
-
-const onItemClick = () => {
-  if (isActive.value) {
-    emit('channelItemClick', props.channel.key);
-  }
 };
 </script>
 
 <template>
   <ChannelSelector
-    :title="channel.title"
-    :description="channel.description"
-    :icon="channel.icon"
+    :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
     :is-coming-soon="isComingSoon"
-    :disabled="!isActive"
     @click="onItemClick"
   />
 </template>

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

@@ -13,7 +13,7 @@ defineProps({
   <div class="flex items-center text-n-slate-11 text-xs min-w-0">
     <ChannelIcon
       :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
+      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
     />
     <span class="truncate">
       {{ inbox.name }}

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

@@ -8,10 +8,6 @@ const props = defineProps({
     type: String,
     default: REPLY_EDITOR_MODES.REPLY,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 defineEmits(['toggleMode']);
@@ -24,12 +20,9 @@ const privateModeSize = useElementSize(wootEditorPrivateMode);
 
 /**
  * Computed boolean indicating if the editor is in private note mode
- * When disabled, always show NOTE mode regardless of actual mode prop
  * @type {ComputedRef<boolean>}
  */
-const isPrivate = computed(() => {
-  return props.disabled || props.mode === REPLY_EDITOR_MODES.NOTE;
-});
+const isPrivate = computed(() => props.mode === REPLY_EDITOR_MODES.NOTE);
 
 /**
  * Computes the width of the sliding background chip in pixels
@@ -60,10 +53,6 @@ const translateValue = computed(() => {
 <template>
   <button
     class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
-    :disabled="disabled"
-    :class="{
-      'cursor-not-allowed': disabled,
-    }"
     @click="$emit('toggleMode')"
   >
     <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -73,10 +62,7 @@ const translateValue = computed(() => {
       {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
     </div>
     <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
-      :class="{
-        'transition-all duration-300': !disabled,
-      }"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,

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

@@ -10,6 +10,7 @@ import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
+import { REPLY_EDITOR_MODES } from './constants';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { mapGetters } from 'vuex';
 import NextButton from 'dashboard/components-next/button/Button.vue';
@@ -19,9 +20,9 @@ export default {
   components: { NextButton, FileUpload, VideoCallButton, AIAssistanceButton },
   mixins: [inboxMixin],
   props: {
-    isNote: {
-      type: Boolean,
-      default: false,
+    mode: {
+      type: String,
+      default: REPLY_EDITOR_MODES.REPLY,
     },
     onSend: {
       type: Function,
@@ -167,6 +168,9 @@ export default {
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       uiFlags: 'integrations/getUIFlags',
     }),
+    isNote() {
+      return this.mode === REPLY_EDITOR_MODES.NOTE;
+    },
     wrapClass() {
       return {
         'is-note-mode': this.isNote,

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

@@ -15,10 +15,6 @@ export default {
       type: String,
       default: REPLY_EDITOR_MODES.REPLY,
     },
-    isReplyRestricted: {
-      type: Boolean,
-      default: false,
-    },
     isMessageLengthReachingThreshold: {
       type: Boolean,
       default: () => false,
@@ -34,7 +30,6 @@ export default {
       emit('setReplyMode', mode);
     };
     const handleReplyClick = () => {
-      if (props.isReplyRestricted) return;
       setReplyMode(REPLY_EDITOR_MODES.REPLY);
     };
     const handleNoteClick = () => {
@@ -93,7 +88,6 @@ export default {
   <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
     <EditorModeToggle
       :mode="mode"
-      :disabled="isReplyRestricted"
       class="mt-3"
       @toggle-mode="handleModeToggle"
     />

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

@@ -3,7 +3,6 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
@@ -83,16 +82,6 @@ const isInboxNameVisible = computed(() => !activeInbox.value);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const callStatus = computed(
-  () => props.chat.additional_attributes?.call_status
-);
-const callDirection = computed(
-  () => props.chat.additional_attributes?.call_direction
-);
-
-const { labelKey: voiceLabelKey, listIconColor: voiceIconColor } =
-  useVoiceCallStatus(callStatus, callDirection);
-
 const inboxId = computed(() => props.chat.inbox_id);
 
 const inbox = computed(() => {
@@ -261,6 +250,7 @@ const deleteConversation = () => {
         :src="currentContact.thumbnail"
         :size="32"
         :status="currentContact.availability_status"
+        :inbox="inbox"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
         hide-offline-status
         rounded-full
@@ -317,30 +307,14 @@ const deleteConversation = () => {
       >
         {{ currentContact.name }}
       </h4>
-      <div
-        v-if="callStatus"
-        key="voice-status-row"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
-      >
-        <span
-          class="inline-block -mt-0.5 align-middle text-[16px] i-ph-phone-incoming"
-          :class="[voiceIconColor]"
-        />
-        <span class="mx-1">
-          {{ $t(voiceLabelKey) }}
-        </span>
-      </div>
       <MessagePreview
-        v-else-if="lastMessageInChat"
-        key="message-preview"
+        v-if="lastMessageInChat"
         :message="lastMessageInChat"
         class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
         :class="messagePreviewClass"
       />
       <p
         v-else
-        key="no-messages"
         class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
         :class="messagePreviewClass"
       >

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

@@ -15,7 +15,7 @@ import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
 import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
-import ReplyBoxBanner from './ReplyBoxBanner.vue';
+import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import AudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
@@ -53,8 +53,8 @@ export default {
     ArticleSearchPopover,
     AttachmentPreview,
     AudioRecorder,
+    Banner,
     CannedResponse,
-    ReplyBoxBanner,
     EmojiInput,
     MessageSignatureMissingAlert,
     ReplyBottomPanel,
@@ -158,6 +158,35 @@ export default {
 
       return false;
     },
+    assignedAgent: {
+      get() {
+        return this.currentChat.meta.assignee;
+      },
+      set(agent) {
+        const agentId = agent ? agent.id : 0;
+        this.$store.dispatch('setCurrentChatAssignee', agent);
+        this.$store
+          .dispatch('assignAgent', {
+            conversationId: this.currentChat.id,
+            agentId,
+          })
+          .then(() => {
+            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+          });
+      },
+    },
+    showSelfAssignBanner() {
+      if (this.message !== '' && !this.isOnPrivateNote) {
+        if (!this.assignedAgent) {
+          return true;
+        }
+        if (this.assignedAgent.id !== this.currentUser.id) {
+          return true;
+        }
+      }
+
+      return false;
+    },
     showWhatsappTemplates() {
       return this.isAWhatsAppCloudChannel && !this.isPrivate;
     },
@@ -170,9 +199,6 @@ export default {
       }
       return true;
     },
-    isReplyRestricted() {
-      return !this.currentChat?.can_reply && !this.isAWhatsAppChannel;
-    },
     inboxId() {
       return this.currentChat.inbox_id;
     },
@@ -645,6 +671,29 @@ export default {
     hideContentTemplatesModal() {
       this.showContentTemplatesModal = false;
     },
+    onClickSelfAssign() {
+      const {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        avatar_url,
+      } = this.currentUser;
+      const selfAssign = {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        thumbnail: avatar_url,
+      };
+      this.assignedAgent = selfAssign;
+    },
     confirmOnSendReply() {
       if (this.isReplyButtonDisabled) {
         return;
@@ -1069,11 +1118,19 @@ export default {
 </script>
 
 <template>
-  <ReplyBoxBanner :message="message" :is-on-private-note="isOnPrivateNote" />
+  <Banner
+    v-if="showSelfAssignBanner"
+    action-button-variant="ghost"
+    color-scheme="secondary"
+    class="mx-2 mb-2 rounded-lg banner--self-assign"
+    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+    has-action-button
+    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+    @primary-action="onClickSelfAssign"
+  />
   <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
     <ReplyTopPanel
       :mode="replyType"
-      :is-reply-restricted="isReplyRestricted"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :popout-reply-box="popOutReplyBox"
@@ -1184,7 +1241,7 @@ export default {
       :is-on-private-note="isOnPrivateNote"
       :is-recording-audio="isRecordingAudio"
       :is-send-disabled="isReplyButtonDisabled"
-      :is-note="isPrivate"
+      :mode="replyType"
       :on-file-upload="onFileUpload"
       :on-send="onSendReply"
       :conversation-type="conversationType"
@@ -1236,6 +1293,10 @@ export default {
   @apply mb-0;
 }
 
+.banner--self-assign {
+  @apply py-2;
+}
+
 .attachment-preview-box {
   @apply bg-transparent py-0 px-4;
 }

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

@@ -1,129 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import wootConstants from 'dashboard/constants/globals';
-
-import Banner from 'dashboard/components/ui/Banner.vue';
-
-const props = defineProps({
-  message: {
-    type: String,
-    default: '',
-  },
-  isOnPrivateNote: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const store = useStore();
-const { t } = useI18n();
-
-const currentChat = useMapGetter('getSelectedChat');
-const currentUser = useMapGetter('getCurrentUser');
-
-const assignedAgent = computed({
-  get() {
-    return currentChat.value?.meta?.assignee;
-  },
-  set(agent) {
-    const agentId = agent ? agent.id : 0;
-    store.dispatch('setCurrentChatAssignee', agent);
-    store.dispatch('assignAgent', {
-      conversationId: currentChat.value?.id,
-      agentId,
-    });
-  },
-});
-
-const isUserTyping = computed(
-  () => props.message !== '' && !props.isOnPrivateNote
-);
-const isUnassigned = computed(() => !assignedAgent.value);
-const isAssignedToOtherAgent = computed(
-  () => assignedAgent.value?.id !== currentUser.value?.id
-);
-
-const showSelfAssignBanner = computed(() => {
-  return (
-    isUserTyping.value && (isUnassigned.value || isAssignedToOtherAgent.value)
-  );
-});
-
-const showBotHandoffBanner = computed(
-  () =>
-    isUserTyping.value &&
-    currentChat.value?.status === wootConstants.STATUS_TYPE.PENDING
-);
-
-const botHandoffActionLabel = computed(() => {
-  return assignedAgent.value?.id === currentUser.value?.id
-    ? t('CONVERSATION.BOT_HANDOFF_REOPEN_ACTION')
-    : t('CONVERSATION.BOT_HANDOFF_ACTION');
-});
-
-const selfAssignConversation = async () => {
-  const { avatar_url, ...rest } = currentUser.value || {};
-  assignedAgent.value = { ...rest, thumbnail: avatar_url };
-};
-
-const needsAssignmentToCurrentUser = computed(() => {
-  return isUnassigned.value || isAssignedToOtherAgent.value;
-});
-
-const onClickSelfAssign = async () => {
-  try {
-    await selfAssignConversation();
-    useAlert(t('CONVERSATION.CHANGE_AGENT'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.CHANGE_AGENT_FAILED'));
-  }
-};
-
-const reopenConversation = async () => {
-  await store.dispatch('toggleStatus', {
-    conversationId: currentChat.value?.id,
-    status: wootConstants.STATUS_TYPE.OPEN,
-  });
-};
-
-const onClickBotHandoff = async () => {
-  try {
-    await reopenConversation();
-
-    if (needsAssignmentToCurrentUser.value) {
-      await selfAssignConversation();
-    }
-
-    useAlert(t('CONVERSATION.BOT_HANDOFF_SUCCESS'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.BOT_HANDOFF_ERROR'));
-  }
-};
-</script>
-
-<template>
-  <Banner
-    v-if="showSelfAssignBanner && !showBotHandoffBanner"
-    action-button-variant="ghost"
-    color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg !py-2"
-    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-    has-action-button
-    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-    @primary-action="onClickSelfAssign"
-  />
-  <Banner
-    v-if="showBotHandoffBanner"
-    action-button-variant="ghost"
-    color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg !py-2"
-    :banner-message="$t('CONVERSATION.BOT_HANDOFF_MESSAGE')"
-    has-action-button
-    :action-button-label="botHandoffActionLabel"
-    @primary-action="onClickBotHandoff"
-  />
-</template>

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

@@ -43,22 +43,18 @@ describe('useFontSize', () => {
 
   it('returns fontSizeOptions with correct structure', () => {
     const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions.value).toHaveLength(5);
-    expect(fontSizeOptions.value[0]).toHaveProperty('value');
-    expect(fontSizeOptions.value[0]).toHaveProperty('label');
+    expect(fontSizeOptions).toHaveLength(5);
+    expect(fontSizeOptions[0]).toHaveProperty('value');
+    expect(fontSizeOptions[0]).toHaveProperty('label');
 
     // Check specific options
-    expect(
-      fontSizeOptions.value.find(option => option.value === '16px')
-    ).toEqual({
+    expect(fontSizeOptions.find(option => option.value === '16px')).toEqual({
       value: '16px',
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT',
     });
 
-    expect(
-      fontSizeOptions.value.find(option => option.value === '14px')
-    ).toEqual({
+    expect(fontSizeOptions.find(option => option.value === '14px')).toEqual({
       value: '14px',
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
@@ -147,12 +143,12 @@ describe('useFontSize', () => {
     const { fontSizeOptions } = useFontSize();
 
     // Check that translation is applied
-    expect(
-      fontSizeOptions.value.find(option => option.value === '14px').label
-    ).toBe('Smaller');
-    expect(
-      fontSizeOptions.value.find(option => option.value === '16px').label
-    ).toBe('Default');
+    expect(fontSizeOptions.find(option => option.value === '14px').label).toBe(
+      'Smaller'
+    );
+    expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
+      'Default'
+    );
 
     // Verify translation function was called with correct keys
     expect(mockTranslate).toHaveBeenCalledWith(

app/javascript/dashboard/composables/useFontSize.js

@@ -77,8 +77,8 @@ export const useFontSize = () => {
    * Font size options for select dropdown
    * @type {Array<{value: string, label: string}>}
    */
-  const fontSizeOptions = computed(() =>
-    FONT_SIZE_NAMES.map(name => createFontSizeOption(t, name))
+  const fontSizeOptions = FONT_SIZE_NAMES.map(name =>
+    createFontSizeOption(t, name)
   );
 
   /**

app/javascript/dashboard/composables/useVoiceCallStatus.js

@@ -1,161 +0,0 @@
-import { computed, unref } from 'vue';
-
-const CALL_STATUSES = {
-  IN_PROGRESS: 'in-progress',
-  RINGING: 'ringing',
-  NO_ANSWER: 'no-answer',
-  BUSY: 'busy',
-  FAILED: 'failed',
-  COMPLETED: 'completed',
-  CANCELED: 'canceled',
-};
-
-const CALL_DIRECTIONS = {
-  INBOUND: 'inbound',
-  OUTBOUND: 'outbound',
-};
-
-/**
- * Composable for handling voice call status display logic
- * @param {Ref|string} statusRef - Call status (ringing, in-progress, etc.)
- * @param {Ref|string} directionRef - Call direction (inbound, outbound)
- * @returns {Object} UI properties for displaying call status
- */
-export function useVoiceCallStatus(statusRef, directionRef) {
-  const status = computed(() => unref(statusRef)?.toString());
-  const direction = computed(() => unref(directionRef)?.toString());
-
-  // Status group helpers
-  const isFailedStatus = computed(() =>
-    [
-      CALL_STATUSES.NO_ANSWER,
-      CALL_STATUSES.BUSY,
-      CALL_STATUSES.FAILED,
-    ].includes(status.value)
-  );
-  const isEndedStatus = computed(() =>
-    [CALL_STATUSES.COMPLETED, CALL_STATUSES.CANCELED].includes(status.value)
-  );
-  const isOutbound = computed(
-    () => direction.value === CALL_DIRECTIONS.OUTBOUND
-  );
-
-  const labelKey = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-        : 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS';
-    }
-
-    if (s === CALL_STATUSES.RINGING) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
-        : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
-    }
-
-    if (s === CALL_STATUSES.NO_ANSWER) {
-      return 'CONVERSATION.VOICE_CALL.MISSED_CALL';
-    }
-
-    if (isFailedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
-    }
-
-    if (isEndedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
-    }
-
-    return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
-  });
-
-  const subtextKey = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.RINGING) {
-      return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
-    }
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
-        : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
-    }
-
-    if (isFailedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.NO_ANSWER';
-    }
-
-    if (isEndedStatus.value) {
-      return 'CONVERSATION.VOICE_CALL.CALL_ENDED';
-    }
-
-    return 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
-  });
-
-  const bubbleIconName = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return isOutbound.value
-        ? 'i-ph-phone-outgoing-fill'
-        : 'i-ph-phone-incoming-fill';
-    }
-
-    if (isFailedStatus.value) {
-      return 'i-ph-phone-x-fill';
-    }
-
-    // For ringing/completed/canceled show direction when possible
-    return isOutbound.value
-      ? 'i-ph-phone-outgoing-fill'
-      : 'i-ph-phone-incoming-fill';
-  });
-
-  const bubbleIconBg = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS) {
-      return 'bg-n-teal-9';
-    }
-
-    if (isFailedStatus.value) {
-      return 'bg-n-ruby-9';
-    }
-
-    if (isEndedStatus.value) {
-      return 'bg-n-slate-11';
-    }
-
-    // default (e.g., ringing)
-    return 'bg-n-teal-9 animate-pulse';
-  });
-
-  const listIconColor = computed(() => {
-    const s = status.value;
-
-    if (s === CALL_STATUSES.IN_PROGRESS || s === CALL_STATUSES.RINGING) {
-      return 'text-n-teal-9';
-    }
-
-    if (isFailedStatus.value) {
-      return 'text-n-ruby-9';
-    }
-
-    if (isEndedStatus.value) {
-      return 'text-n-slate-11';
-    }
-
-    return 'text-n-teal-9';
-  });
-
-  return {
-    status,
-    labelKey,
-    subtextKey,
-    bubbleIconName,
-    bubbleIconBg,
-    listIconColor,
-  };
-}

app/javascript/dashboard/constants/globals.js

@@ -35,8 +35,6 @@ export default {
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
   TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
-  WHATSAPP_EMBEDDED_SIGNUP_DOCS_URL:
-    'https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations',
   SMALL_SCREEN_BREAKPOINT: 768,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {

app/javascript/dashboard/featureFlags.js

@@ -1,7 +1,6 @@
 export const FEATURE_FLAGS = {
   AGENT_BOTS: 'agent_bots',
   AGENT_MANAGEMENT: 'agent_management',
-  ASSIGNMENT_V2: 'assignment_v2',
   AUTO_RESOLVE_CONVERSATIONS: 'auto_resolve_conversations',
   AUTOMATIONS: 'automations',
   CAMPAIGNS: 'campaigns',
@@ -38,8 +37,8 @@ export const FEATURE_FLAGS = {
   REPORT_V4: 'report_v4',
   CHANNEL_INSTAGRAM: 'channel_instagram',
   CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
+  WHATSAPP_EMBEDDED_SIGNUP: 'whatsapp_embedded_signup',
   CAPTAIN_V2: 'captain_integration_v2',
-  SAML: 'saml',
 };
 
 export const PREMIUM_FEATURES = [

app/javascript/dashboard/helper/commons.js

@@ -96,18 +96,3 @@ export const sanitizeVariableSearchKey = (searchKey = '') => {
     .replace(/,/g, '') // remove commas
     .trim();
 };
-
-/**
- * Convert underscore-separated string to title case.
- * Eg. "round_robin" => "Round Robin"
- * @param {string} str
- * @returns {string}
- */
-export const formatToTitleCase = str => {
-  return (
-    str
-      ?.replace(/_/g, ' ')
-      .replace(/\b\w/g, l => l.toUpperCase())
-      .trim() || ''
-  );
-};

app/javascript/dashboard/helper/featureHelper.js

@@ -19,7 +19,6 @@ const FEATURE_HELP_URLS = {
   team_management: 'https://chwt.app/hc/teams',
   webhook: 'https://chwt.app/hc/webhooks',
   billing: 'https://chwt.app/pricing',
-  saml: 'https://chwt.app/hc/saml',
 };
 
 export function getHelpUrlForFeature(featureName) {

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

@@ -5,7 +5,6 @@ import {
   convertToCategorySlug,
   convertToPortalSlug,
   sanitizeVariableSearchKey,
-  formatToTitleCase,
 } from '../commons';
 
 describe('#getTypingUsersText', () => {
@@ -143,51 +142,3 @@ describe('sanitizeVariableSearchKey', () => {
     expect(sanitizeVariableSearchKey()).toBe('');
   });
 });
-
-describe('formatToTitleCase', () => {
-  it('converts underscore-separated string to title case', () => {
-    expect(formatToTitleCase('round_robin')).toBe('Round Robin');
-  });
-
-  it('converts single word to title case', () => {
-    expect(formatToTitleCase('priority')).toBe('Priority');
-  });
-
-  it('converts multiple underscores to title case', () => {
-    expect(formatToTitleCase('auto_assignment_policy')).toBe(
-      'Auto Assignment Policy'
-    );
-  });
-
-  it('handles already capitalized words', () => {
-    expect(formatToTitleCase('HIGH_PRIORITY')).toBe('HIGH PRIORITY');
-  });
-
-  it('handles mixed case with underscores', () => {
-    expect(formatToTitleCase('first_Name_last')).toBe('First Name Last');
-  });
-
-  it('handles empty string', () => {
-    expect(formatToTitleCase('')).toBe('');
-  });
-
-  it('handles null input', () => {
-    expect(formatToTitleCase(null)).toBe('');
-  });
-
-  it('handles undefined input', () => {
-    expect(formatToTitleCase(undefined)).toBe('');
-  });
-
-  it('handles string without underscores', () => {
-    expect(formatToTitleCase('hello')).toBe('Hello');
-  });
-
-  it('handles string with numbers', () => {
-    expect(formatToTitleCase('priority_1_high')).toBe('Priority 1 High');
-  });
-
-  it('handles leading and trailing underscores', () => {
-    expect(formatToTitleCase('_leading_trailing_')).toBe('Leading Trailing');
-  });
-});

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

@@ -610,15 +610,6 @@
           "SEND_MESSAGE": "Send message"
         }
       },
-      "TWILIO_OPTIONS": {
-        "LABEL": "Select template",
-        "SEARCH_PLACEHOLDER": "Search templates",
-        "EMPTY_STATE": "No templates found",
-        "TEMPLATE_PARSER": {
-          "BACK": "Go back",
-          "SEND_MESSAGE": "Send message"
-        }
-      },
       "ACTION_BUTTONS": {
         "DISCARD": "Discard",
         "SEND": "Send ({keyCode})"

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

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

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

@@ -1,51 +0,0 @@
-{
-  "CONTENT_TEMPLATES": {
-    "MODAL": {
-      "TITLE": "Twilio Templates",
-      "SUBTITLE": "Select the Twilio template you want to send",
-      "TEMPLATE_SELECTED_SUBTITLE": "Configure template: {templateName}"
-    },
-    "PICKER": {
-      "SEARCH_PLACEHOLDER": "Search Templates",
-      "NO_TEMPLATES_FOUND": "No templates found for",
-      "NO_CONTENT": "No content",
-      "HEADER": "Header",
-      "BODY": "Body",
-      "FOOTER": "Footer",
-      "BUTTONS": "Buttons",
-      "CATEGORY": "Category",
-      "MEDIA_CONTENT": "Media Content",
-      "MEDIA_CONTENT_FALLBACK": "media content",
-      "NO_TEMPLATES_AVAILABLE": "No Twilio templates available. Click refresh to sync templates from Twilio.",
-      "REFRESH_BUTTON": "Refresh templates",
-      "REFRESH_SUCCESS": "Templates refresh initiated. It may take a couple of minutes to update.",
-      "REFRESH_ERROR": "Failed to refresh templates. Please try again.",
-      "LABELS": {
-        "LANGUAGE": "Language",
-        "TEMPLATE_BODY": "Template Body",
-        "CATEGORY": "Category"
-      },
-      "TYPES": {
-        "MEDIA": "Media",
-        "QUICK_REPLY": "Quick Reply",
-        "TEXT": "Text"
-      }
-    },
-    "PARSER": {
-      "VARIABLES_LABEL": "Variables",
-      "LANGUAGE": "Language",
-      "CATEGORY": "Category",
-      "VARIABLE_PLACEHOLDER": "Enter {variable} value",
-      "GO_BACK_LABEL": "Go Back",
-      "SEND_MESSAGE_LABEL": "Send Message",
-      "FORM_ERROR_MESSAGE": "Please fill all variables before sending",
-      "MEDIA_HEADER_LABEL": "{type} Header",
-      "MEDIA_URL_LABEL": "Enter full media URL",
-      "MEDIA_URL_PLACEHOLDER": "https://example.com/image.jpg"
-    },
-    "FORM": {
-      "BACK_BUTTON": "Back",
-      "SEND_MESSAGE_BUTTON": "Send Message"
-    }
-  }
-}

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

@@ -35,11 +35,6 @@
     "API_HOURS_WINDOW": "ለዚህ ውይይት መመለስ በ{hours} ሰአታት ውስጥ ብቻ ይቻላል",
     "NOT_ASSIGNED_TO_YOU": "This conversation is not assigned to you. Would you like to assign this conversation to yourself?",
     "ASSIGN_TO_ME": "Assign to me",
-    "BOT_HANDOFF_MESSAGE": "You are responding to a conversation which is currently handled by an assistant or a bot.",
-    "BOT_HANDOFF_ACTION": "Mark open and assign to you",
-    "BOT_HANDOFF_REOPEN_ACTION": "Mark conversation open",
-    "BOT_HANDOFF_SUCCESS": "Conversation has been handed over to you",
-    "BOT_HANDOFF_ERROR": "Failed to take over the conversation. Please try again.",
     "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
     "OLD_INSTAGRAM_INBOX_REPLY_BANNER": "ይህ የInstagram መለያ ወደ አዲሱ የInstagram ቻናል ገቢ ሳጥን ተዛውሯል። ሁሉም አዲስ መልዕክቶች በዚያ ይታያሉ። ከአሁን ጀምሮ ከዚህ ውይይት መልዕክቶች መላክ አትችሉም።",
@@ -71,17 +66,6 @@
       "SHOW_LABELS": "Show labels",
       "HIDE_LABELS": "Hide labels"
     },
-    "VOICE_CALL": {
-      "INCOMING_CALL": "Incoming call",
-      "OUTGOING_CALL": "Outgoing call",
-      "CALL_IN_PROGRESS": "Call in progress",
-      "NO_ANSWER": "No answer",
-      "MISSED_CALL": "Missed call",
-      "CALL_ENDED": "Call ended",
-      "NOT_ANSWERED_YET": "Not answered yet",
-      "THEY_ANSWERED": "They answered",
-      "YOU_ANSWERED": "You answered"
-    },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",

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

@@ -807,58 +807,6 @@
           "ERROR_MESSAGE": "Unable to update portal"
         }
       }
-    },
-    "PDF_UPLOAD": {
-      "TITLE": "Upload PDF Document",
-      "DESCRIPTION": "Upload a PDF document to automatically generate FAQs using AI",
-      "DRAG_DROP_TEXT": "Drag and drop your PDF file here, or click to select",
-      "SELECT_FILE": "Select PDF File",
-      "ADDITIONAL_CONTEXT_LABEL": "Additional Context (Optional)",
-      "ADDITIONAL_CONTEXT_PLACEHOLDER": "Provide any additional context or instructions for FAQ generation...",
-      "UPLOADING": "Uploading...",
-      "UPLOAD": "Upload & Process",
-      "CANCEL": "Cancel",
-      "ERROR_INVALID_TYPE": "Please select a valid PDF file",
-      "ERROR_FILE_TOO_LARGE": "File size must be less than 512MB",
-      "ERROR_UPLOAD_FAILED": "Failed to upload PDF. Please try again."
-    },
-    "PDF_DOCUMENTS": {
-      "TITLE": "PDF Documents",
-      "DESCRIPTION": "Manage uploaded PDF documents and generate FAQs from them",
-      "UPLOAD_PDF": "Upload PDF",
-      "UPLOAD_FIRST_PDF": "Upload your first PDF",
-      "UPLOADED_BY": "Uploaded by",
-      "GENERATE_FAQS": "Generate FAQs",
-      "GENERATING": "Generating...",
-      "CONFIRM_DELETE": "Are you sure you want to delete {filename}?",
-      "EMPTY_STATE": {
-        "TITLE": "No PDF documents yet",
-        "DESCRIPTION": "Upload PDF documents to automatically generate FAQs using AI"
-      },
-      "STATUS": {
-        "UPLOADED": "Ready",
-        "PROCESSING": "Processing",
-        "PROCESSED": "Completed",
-        "FAILED": "Failed"
-      }
-    },
-    "CONTENT_GENERATION": {
-      "TITLE": "Content Generation",
-      "DESCRIPTION": "Upload PDF documents to automatically generate FAQ content using AI",
-      "UPLOAD_TITLE": "Upload PDF Document",
-      "DRAG_DROP": "Drag and drop your PDF file here, or click to select",
-      "SELECT_FILE": "Select PDF File",
-      "UPLOADING": "Processing document...",
-      "UPLOAD_SUCCESS": "Document processed successfully!",
-      "UPLOAD_ERROR": "Failed to upload document. Please try again.",
-      "INVALID_FILE_TYPE": "Please select a valid PDF file",
-      "FILE_TOO_LARGE": "File size must be less than 512MB",
-      "GENERATED_CONTENT": "Generated FAQ Content",
-      "PUBLISH_SELECTED": "Publish Selected",
-      "PUBLISHING": "Publishing...",
-      "FROM_DOCUMENT": "From document",
-      "NO_CONTENT": "No generated content available. Upload a PDF document to get started.",
-      "LOADING": "Loading generated content..."
     }
   }
 }

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

@@ -424,51 +424,7 @@
       },
       "AUTH": {
         "TITLE": "Choose a channel",
-        "DESC": "Chatwoot supports live-chat widgets, Facebook Messenger, WhatsApp, Emails, etc., as channels. If you want to build a custom channel, you can create it using the API channel. To get started, choose one of the channels below.",
-        "TITLE_NEXT": "Complete the setup",
-        "TITLE_FINISH": "Voilà!",
-        "CHANNEL": {
-          "WEBSITE": {
-            "TITLE": "Website",
-            "DESCRIPTION": "Create a live-chat widget"
-          },
-          "FACEBOOK": {
-            "TITLE": "Facebook",
-            "DESCRIPTION": "Connect your Facebook page"
-          },
-          "WHATSAPP": {
-            "TITLE": "WhatsApp",
-            "DESCRIPTION": "Support your customers on WhatsApp"
-          },
-          "EMAIL": {
-            "TITLE": "Email",
-            "DESCRIPTION": "Connect with Gmail, Outlook, or other providers"
-          },
-          "SMS": {
-            "TITLE": "SMS",
-            "DESCRIPTION": "Integrate SMS channel with Twilio or bandwidth"
-          },
-          "API": {
-            "TITLE": "API",
-            "DESCRIPTION": "Make a custom channel using our API"
-          },
-          "TELEGRAM": {
-            "TITLE": "Telegram",
-            "DESCRIPTION": "Configure Telegram channel using Bot token"
-          },
-          "LINE": {
-            "TITLE": "Line",
-            "DESCRIPTION": "Integrate your Line channel"
-          },
-          "INSTAGRAM": {
-            "TITLE": "Instagram",
-            "DESCRIPTION": "Connect your instagram account"
-          },
-          "VOICE": {
-            "TITLE": "Voice",
-            "DESCRIPTION": "Integrate with Twilio Voice"
-          }
-        }
+        "DESC": "Chatwoot supports live-chat widgets, Facebook Messenger, WhatsApp, Emails, etc., as channels. If you want to build a custom channel, you can create it using the API channel. To get started, choose one of the channels below."
       },
       "AGENTS": {
         "TITLE": "Agents",
@@ -522,10 +478,7 @@
       "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting",
       "BUTTON_TEXT": "Take me there",
       "MORE_SETTINGS": "More settings",
-      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox.",
-      "WHATSAPP_QR_INSTRUCTION": "Scan the QR code above to quickly test your WhatsApp inbox",
-      "MESSENGER_QR_INSTRUCTION": "Scan the QR code above to quickly test your Facebook Messenger inbox",
-      "TELEGRAM_QR_INSTRUCTION": "Scan the QR code above to quickly test your Telegram inbox"
+      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox."
     },
     "REAUTH": "Reauthorize",
     "VIEW": "View",
@@ -915,18 +868,9 @@
       "SCRIPT_SETTINGS": "\n      window.chatwootSettings = {options};"
     },
     "EMAIL_PROVIDERS": {
-      "MICROSOFT": {
-        "TITLE": "Microsoft",
-        "DESCRIPTION": "Connect with Microsoft"
-      },
-      "GOOGLE": {
-        "TITLE": "Google",
-        "DESCRIPTION": "Connect with Google"
-      },
-      "OTHER_PROVIDERS": {
-        "TITLE": "Other Providers",
-        "DESCRIPTION": "Connect with Other Providers"
-      }
+      "MICROSOFT": "Microsoft",
+      "GOOGLE": "Google",
+      "OTHER_PROVIDERS": "Other Providers"
     },
     "CHANNELS": {
       "MESSENGER": "Messenger",

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

@@ -704,28 +704,11 @@
         "ERROR_MESSAGE": "There was an error creating the document, please try again."
       },
       "FORM": {
-        "TYPE": {
-          "LABEL": "Document Type",
-          "URL": "URL",
-          "PDF": "PDF File"
-        },
         "URL": {
           "LABEL": "URL",
           "PLACEHOLDER": "Enter the URL of the document",
           "ERROR": "Please provide a valid URL for the document"
         },
-        "PDF_FILE": {
-          "LABEL": "PDF File",
-          "CHOOSE_FILE": "Choose PDF file",
-          "ERROR": "Please select a PDF file",
-          "HELP_TEXT": "Maximum file size: 10MB",
-          "INVALID_TYPE": "Please select a valid PDF file",
-          "TOO_LARGE": "File size exceeds 10MB limit"
-        },
-        "NAME": {
-          "LABEL": "Document Name (Optional)",
-          "PLACEHOLDER": "Enter a name for the document"
-        },
         "ASSISTANT": {
           "LABEL": "Assistant",
           "PLACEHOLDER": "Select the assistant",

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

@@ -51,13 +51,6 @@
             "LARGER": "Larger",
             "EXTRA_LARGE": "Extra Large"
           }
-        },
-        "LANGUAGE": {
-          "TITLE": "Preferred Language",
-          "NOTE": "Choose the language you want to use.",
-          "UPDATE_SUCCESS": "Your Language settings have been updated successfully",
-          "UPDATE_ERROR": "There is an error while updating the language settings, please try again",
-          "USE_ACCOUNT_DEFAULT": "Use account default"
         }
       },
       "MESSAGE_SIGNATURE_SECTION": {
@@ -337,7 +330,6 @@
     "REPORTS_LABEL": "Labels",
     "REPORTS_INBOX": "Inbox",
     "REPORTS_TEAM": "Team",
-    "AGENT_ASSIGNMENT": "Agent Assignment",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
     "SET_YOUR_AVAILABILITY": "Set your availability",
     "SLA": "SLA",
@@ -426,255 +418,5 @@
       "SWITCH_TO_REPLY": "Switch to Reply",
       "TOGGLE_SNOOZE_DROPDOWN": "Toggle snooze dropdown"
     }
-  },
-  "ASSIGNMENT_POLICY": {
-    "INDEX": {
-      "HEADER": {
-        "TITLE": "Agent assignment",
-        "DESCRIPTION": "Define policies to effectively manage workload and route conversations based on the needs of inboxes and agents. Learn more here"
-      },
-      "ASSIGNMENT_POLICY": {
-        "TITLE": "Assignment policy",
-        "DESCRIPTION": "Manage how conversations get assigned in inboxes.",
-        "FEATURES": [
-          "Assign by conversations evenly or by available capacity",
-          "Add fair distribution rules to avoid overloading any agent",
-          "Add inboxes to a policy - one policy per inbox"
-        ]
-      },
-      "AGENT_CAPACITY_POLICY": {
-        "TITLE": "Agent capacity policy",
-        "DESCRIPTION": "Manage workload for agents.",
-        "FEATURES": [
-          "Define maximum conversations per inbox",
-          "Create exceptions based on labels and time",
-          "Add agents to a policy - one policy per agent"
-        ]
-      }
-    },
-    "AGENT_ASSIGNMENT_POLICY": {
-      "INDEX": {
-        "HEADER": {
-          "TITLE": "Assignment policy",
-          "CREATE_POLICY": "New policy"
-        },
-        "CARD": {
-          "ORDER": "Order",
-          "PRIORITY": "Priority",
-          "ACTIVE": "Active",
-          "INACTIVE": "Inactive",
-          "POPOVER": "Added inboxes",
-          "EDIT": "Edit"
-        },
-        "NO_RECORDS_FOUND": "No assignment policies found"
-      },
-      "CREATE": {
-        "HEADER": {
-          "TITLE": "Create assignment policy"
-        },
-        "CREATE_BUTTON": "Create policy",
-        "API": {
-          "SUCCESS_MESSAGE": "Assignment policy created successfully",
-          "ERROR_MESSAGE": "Failed to create assignment policy"
-        }
-      },
-      "EDIT": {
-        "HEADER": {
-          "TITLE": "Edit assignment policy"
-        },
-        "EDIT_BUTTON": "Update policy",
-        "CONFIRM_ADD_INBOX_DIALOG": {
-          "TITLE": "Add inbox",
-          "DESCRIPTION": "{inboxName} inbox is already linked to another policy. Are you sure you want to link it to this policy? It will be unlinked from the other policy.",
-          "CONFIRM_BUTTON_LABEL": "Continue",
-          "CANCEL_BUTTON_LABEL": "Cancel"
-        },
-        "API": {
-          "SUCCESS_MESSAGE": "Assignment policy updated successfully",
-          "ERROR_MESSAGE": "Failed to update assignment policy"
-        },
-        "INBOX_API": {
-          "ADD": {
-            "SUCCESS_MESSAGE": "Inbox added to policy successfully",
-            "ERROR_MESSAGE": "Failed to add inbox to policy"
-          },
-          "REMOVE": {
-            "SUCCESS_MESSAGE": "Inbox removed from policy successfully",
-            "ERROR_MESSAGE": "Failed to remove inbox from policy"
-          }
-        }
-      },
-      "FORM": {
-        "NAME": {
-          "LABEL": "Policy name:",
-          "PLACEHOLDER": "Enter policy name"
-        },
-        "DESCRIPTION": {
-          "LABEL": "Description:",
-          "PLACEHOLDER": "Enter description"
-        },
-        "STATUS": {
-          "LABEL": "Status:",
-          "PLACEHOLDER": "Select status",
-          "ACTIVE": "Policy is active",
-          "INACTIVE": "Policy is inactive"
-        },
-        "ASSIGNMENT_ORDER": {
-          "LABEL": "Assignment order",
-          "ROUND_ROBIN": {
-            "LABEL": "Round robin",
-            "DESCRIPTION": "Assign conversations evenly among agents."
-          },
-          "BALANCED": {
-            "LABEL": "Balanced",
-            "DESCRIPTION": "Assign conversations based on available capacity."
-          }
-        },
-        "ASSIGNMENT_PRIORITY": {
-          "LABEL": "Assignment priority",
-          "EARLIEST_CREATED": {
-            "LABEL": "Earliest created",
-            "DESCRIPTION": "The conversation that was created first gets assigned first."
-          },
-          "LONGEST_WAITING": {
-            "LABEL": "Longest waiting",
-            "DESCRIPTION": "The conversation waiting the longest gets assigned first."
-          }
-        },
-        "FAIR_DISTRIBUTION": {
-          "LABEL": "Fair distribution policy",
-          "DESCRIPTION": "Set the maximum number of conversations that can be assigned per agent within a time window to avoid overloading any one agent. This required field defaults to 100 conversations per hour.",
-          "INPUT_MAX": "Assign max",
-          "DURATION": "Conversations per agent in every"
-        },
-        "INBOXES": {
-          "LABEL": "Added inboxes",
-          "DESCRIPTION": "Add inboxes for which this policy will be applicable.",
-          "ADD_BUTTON": "Add inbox",
-          "DROPDOWN": {
-            "SEARCH_PLACEHOLDER": "Search and select inboxes to add",
-            "ADD_BUTTON": "Add"
-          },
-          "EMPTY_STATE": "No inboxes added to this policy, add an inbox to get started",
-          "API": {
-            "SUCCESS_MESSAGE": "Inbox successfully added to policy",
-            "ERROR_MESSAGE": "Failed to add inbox to policy"
-          }
-        }
-      },
-      "DELETE_POLICY": {
-        "SUCCESS_MESSAGE": "Assignment policy deleted successfully",
-        "ERROR_MESSAGE": "Failed to delete assignment policy"
-      }
-    },
-    "AGENT_CAPACITY_POLICY": {
-      "INDEX": {
-        "HEADER": {
-          "TITLE": "Agent capacity",
-          "CREATE_POLICY": "New policy"
-        },
-        "CARD": {
-          "POPOVER": "Added agents",
-          "EDIT": "Edit"
-        },
-        "NO_RECORDS_FOUND": "No agent capacity policies found"
-      },
-      "CREATE": {
-        "HEADER": {
-          "TITLE": "Create agent capacity policy"
-        },
-        "CREATE_BUTTON": "Create policy",
-        "API": {
-          "SUCCESS_MESSAGE": "Agent capacity policy created successfully",
-          "ERROR_MESSAGE": "Failed to create agent capacity policy"
-        }
-      },
-      "EDIT": {
-        "HEADER": {
-          "TITLE": "Edit agent capacity policy"
-        },
-        "EDIT_BUTTON": "Update policy",
-        "CONFIRM_ADD_AGENT_DIALOG": {
-          "TITLE": "Add agent",
-          "DESCRIPTION": "{agentName} is already linked to another policy. Are you sure you want to link it to this policy? It will be unlinked from the other policy.",
-          "CONFIRM_BUTTON_LABEL": "Continue",
-          "CANCEL_BUTTON_LABEL": "Cancel"
-        },
-        "API": {
-          "SUCCESS_MESSAGE": "Agent capacity policy updated successfully",
-          "ERROR_MESSAGE": "Failed to update agent capacity policy"
-        },
-        "AGENT_API": {
-          "ADD": {
-            "SUCCESS_MESSAGE": "Agent added to policy successfully",
-            "ERROR_MESSAGE": "Failed to add agent to policy"
-          },
-          "REMOVE": {
-            "SUCCESS_MESSAGE": "Agent removed from policy successfully",
-            "ERROR_MESSAGE": "Failed to remove agent from policy"
-          }
-        }
-      },
-      "FORM": {
-        "NAME": {
-          "LABEL": "Policy name:",
-          "PLACEHOLDER": "Enter policy name"
-        },
-        "DESCRIPTION": {
-          "LABEL": "Description:",
-          "PLACEHOLDER": "Enter description"
-        },
-        "INBOX_CAPACITY_LIMIT": {
-          "LABEL": "Inbox capacity limits",
-          "ADD_BUTTON": "Add inbox",
-          "FIELD": {
-            "SELECT_INBOX": "Select inbox",
-            "MAX_CONVERSATIONS": "Max conversations",
-            "SET_LIMIT": "Set limit"
-          },
-          "EMPTY_STATE": "No inbox limit set"
-        },
-        "EXCLUSION_RULES": {
-          "LABEL": "Exclusion rules",
-          "DESCRIPTION": "Conversations that satisfy the following conditions would not count towards agent capacity",
-          "TAGS": {
-            "LABEL": "Exclude conversations tagged with specific labels",
-            "ADD_TAG": "add tag",
-            "DROPDOWN": {
-              "SEARCH_PLACEHOLDER": "Search and select tags to add"
-            },
-            "EMPTY_STATE": "No tags added to this policy."
-          },
-          "DURATION": {
-            "LABEL": "Exclude conversations older than a specified duration",
-            "PLACEHOLDER": "Set time"
-          }
-        },
-        "USERS": {
-          "LABEL": "Assigned agents",
-          "DESCRIPTION": "Add agents for which this policy will be applicable.",
-          "ADD_BUTTON": "Add agent",
-          "DROPDOWN": {
-            "SEARCH_PLACEHOLDER": "Search and select agents to add",
-            "ADD_BUTTON": "Add"
-          },
-          "EMPTY_STATE": "No agents added",
-          "API": {
-            "SUCCESS_MESSAGE": "Agent successfully added to policy",
-            "ERROR_MESSAGE": "Failed to add agent to policy"
-          }
-        }
-      },
-      "DELETE_POLICY": {
-        "SUCCESS_MESSAGE": "Agent capacity policy deleted successfully",
-        "ERROR_MESSAGE": "Failed to delete agent capacity policy"
-      }
-    },
-    "DELETE_POLICY": {
-      "TITLE": "Delete policy",
-      "DESCRIPTION": "Are you sure you want to delete this policy? This action cannot be undone.",
-      "CONFIRM_BUTTON_LABEL": "Delete",
-      "CANCEL_BUTTON_LABEL": "Cancel"
-    }
   }
 }

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

@@ -610,15 +610,6 @@
           "SEND_MESSAGE": "إرسال الرسالة"
         }
       },
-      "TWILIO_OPTIONS": {
-        "LABEL": "Select template",
-        "SEARCH_PLACEHOLDER": "Search templates",
-        "EMPTY_STATE": "No templates found",
-        "TEMPLATE_PARSER": {
-          "BACK": "العودة للخلف",
-          "SEND_MESSAGE": "إرسال الرسالة"
-        }
-      },
       "ACTION_BUTTONS": {
         "DISCARD": "Discard",
         "SEND": "Send ({keyCode})"

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

@@ -48,8 +48,7 @@
       "CREATED_AT": "تم إنشاؤها في",
       "LAST_ACTIVITY": "آخر نشاط",
       "REFERER_LINK": "رابط المرجع",
-      "BLOCKED": "محظور",
-      "LABELS": "الوسوم"
+      "BLOCKED": "محظور"
     },
     "GROUPS": {
       "STANDARD_FILTERS": "الفلاتر القياسية",