Remove pnpm install

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: '23.7'
+          node-version: '20.12'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm

.devcontainer/docker-compose.yml

@@ -5,30 +5,30 @@
 version: '3'
 
 services:
-  base:
+  base: 
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile.base
       args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.3.3'
+        VARIANT: "ubuntu-22.04"
+        NODE_VERSION: "20.9.0"
+        RUBY_VERSION: "3.3.3"
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
+        USER_UID: "1000"
+        USER_GID: "1000"
     image: base:latest
-
+        
   app:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile
       args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.3.3'
+        VARIANT: "ubuntu-22.04"
+        NODE_VERSION: "20.9.0"
+        RUBY_VERSION: "3.3.3"
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
+        USER_UID: "1000"
+        USER_GID: "1000"
 
     volumes:
       - ..:/workspace:cached

.eslintrc.js

@@ -4,8 +4,6 @@ module.exports = {
     'prettier',
     'plugin:vue/vue3-recommended',
     'plugin:vitest-globals/recommended',
-    // use recommended-legacy when upgrading the plugin to v4
-    'plugin:@intlify/vue-i18n/recommended',
   ],
   overrides: [
     {
@@ -231,18 +229,6 @@ module.exports = {
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
     'no-console': 'error',
-    '@intlify/vue-i18n/no-dynamic-keys': 'warn',
-    '@intlify/vue-i18n/no-unused-keys': [
-      'warn',
-      {
-        extensions: ['.js', '.vue'],
-      },
-    ],
-  },
-  settings: {
-    'vue-i18n': {
-      localeDir: './app/javascript/*/i18n/**.json',
-    },
   },
   env: {
     browser: true,

.github/workflows/frontend-fe.yml

@@ -23,10 +23,12 @@ jobs:
           bundler-cache: true
 
       - uses: pnpm/action-setup@v4
+        with:
+          version: 9.3.0
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/nightly_installer.yml

@@ -16,7 +16,7 @@ on:
 
 jobs:
   nightly:
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-20.04
     steps:
 
     - name: get installer

.github/workflows/publish_ee_docker.yml

@@ -1,140 +0,0 @@
-# #
-# # This action will publish Chatwoot EE docker image.
-# # This is set to run against merges to develop, master
-# # and when tags are created.
-# #
-
-name: Publish Chatwoot EE docker images
-
-on:
-  push:
-    branches:
-      - develop
-      - master
-    tags:
-      - v*
-  workflow_dispatch:
-
-env:
-  DOCKER_REPO: chatwoot/chatwoot
-
-jobs:
-  build:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-22.04-arm
-    runs-on: ${{ matrix.runner }}
-    env:
-      GIT_REF: ${{ github.head_ref || github.ref_name }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Prepare
-        run: |
-          platform=${{ matrix.platform }}
-          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
-
-      - name: Set Chatwoot edition
-        run: |
-          echo -en '\nENV CW_EDITION="ee"' >> docker/Dockerfile
-
-      - name: Set Docker Tags
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            echo "DOCKER_TAG=${DOCKER_REPO}:latest" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${DOCKER_REPO}:${SANITIZED_REF}" >> $GITHUB_ENV
-          fi
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to DockerHub
-        if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: docker/Dockerfile
-          platforms: ${{ matrix.platform }}
-          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
-          outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-${{ env.PLATFORM_PAIR }}
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    runs-on: ubuntu-latest
-    needs:
-      - build
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        env:
-          GIT_REF: ${{ github.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}"
-          fi
-          
-          docker buildx imagetools create -t $TAG \
-            $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
-
-      - name: Inspect image
-        env:
-          GIT_REF: ${{ github.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}"
-          fi
-          
-          docker buildx imagetools inspect $TAG

.github/workflows/run_foss_spec.yml

@@ -38,6 +38,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
         with:
+          version: 9
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
 
@@ -47,7 +48,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/size-limit.yml

@@ -19,11 +19,13 @@ jobs:
         with:
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.3.0
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 23
+          node-version: 20
           cache: 'pnpm'
 
       - name: pnpm
@@ -37,7 +39,7 @@ jobs:
       - name: setup env
         run: |
           cp .env.example .env
-
+ 
       - name: Run asset compile
         run: bundle exec rake assets:precompile
         env:
@@ -45,3 +47,5 @@ jobs:
 
       - name: Size Check
         run: pnpm run size
+
+

.github/workflows/test_docker_build.yml

@@ -1,40 +0,0 @@
-name: Test Docker Build
-
-on:
-  pull_request:
-    branches:
-      - develop
-      - master
-  workflow_dispatch:
-
-jobs:
-  test-build:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-22.04-arm
-    runs-on: ${{ matrix.runner }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Build Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: docker/Dockerfile
-          platforms: ${{ matrix.platform }}
-          push: false
-          load: false
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

.gitignore

@@ -73,7 +73,6 @@ test/cypress/videos/*
 
 #ignore files under .vscode directory
 .vscode
-.cursor
 
 # yalc for local testing
 .yalc

.husky/pre-commit

@@ -1,11 +1,11 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# #!/bin/sh
+# . "$(dirname "$0")/_/husky.sh"
 
-# lint js and vue files
-npx --no-install lint-staged
+# # lint js and vue files
+# npx --no-install lint-staged
 
-# lint only staged ruby files
-git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+# # lint only staged ruby files
+# git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
 
-# stage rubocop changes to files
-git diff --name-only --cached | xargs git add
+# # stage rubocop changes to files
+# git diff --name-only --cached | xargs git add

.scss-lint.yml

@@ -283,4 +283,3 @@ exclude:
   - 'app/javascript/widget/assets/scss/sdk.css'
   - 'app/assets/stylesheets/administrate/reset/_normalize.scss'
   - 'app/javascript/shared/assets/stylesheets/*.scss'
-  - 'app/javascript/dashboard/assets/scss/_woot.scss'

Gemfile

@@ -94,7 +94,7 @@ gem 'twitty', '~> 0.1.5'
 # facebook client
 gem 'koala'
 # slack client
-gem 'slack-ruby-client', '~> 2.5.2'
+gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
 gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
 gem 'grpc'
@@ -138,7 +138,9 @@ gem 'procore-sift'
 # parse email
 gem 'email_reply_trimmer'
 
-gem 'html2text'
+# TODO: we might have to fork this gem since 0.3.1 has hard depency on nokogir 1.10.
+# and this gem hasn't been updated for a while.
+gem 'html2text', git: 'https://github.com/chatwoot/html2text_ruby', branch: 'chatwoot'
 
 # to calculate working hours
 gem 'working_hours'
@@ -175,8 +177,6 @@ gem 'reverse_markdown'
 
 gem 'ruby-openai'
 
-gem 'shopify_api'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -22,6 +22,14 @@ GIT
       devise (>= 4.0.0, < 5.0.0)
       railties (>= 5.0.0, < 8.0.0)
 
+GIT
+  remote: https://github.com/chatwoot/html2text_ruby
+  revision: cdbdbbbf898d846d0136d69d688a003c6b26074b
+  branch: chatwoot
+  specs:
+    html2text (0.3.1)
+      nokogiri (>= 1.13.6)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -178,7 +186,7 @@ GEM
     database_cleaner-core (2.0.1)
     datadog-ci (0.8.3)
       msgpack
-    date (3.4.1)
+    date (3.3.4)
     ddtrace (1.23.2)
       datadog-ci (~> 0.8.1)
       debase-ruby_core_source (= 3.3.1)
@@ -272,8 +280,7 @@ GEM
       googleauth (~> 1.0)
       grpc (~> 1.36)
     geocoder (1.8.1)
-    gli (2.22.2)
-      ostruct
+    gli (2.21.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
@@ -352,11 +359,8 @@ GEM
       ruby2ruby (~> 2.4)
       ruby_parser (~> 3.10)
     hana (1.3.7)
-    hash_diff (1.1.1)
     hashdiff (1.1.0)
     hashie (5.0.0)
-    html2text (0.4.0)
-      nokogiri (>= 1.0, < 2.0)
     http (5.1.1)
       addressable (~> 2.8)
       http-cookie (~> 1.0)
@@ -483,7 +487,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.19)
+    net-imap (0.4.17)
       date
       net-protocol
     net-pop (0.1.2)
@@ -499,14 +503,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.3)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.3-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-linux-gnu)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -521,9 +525,6 @@ GEM
       rack (>= 1.2, < 4)
       snaky_hash (~> 2.0)
       version_gem (~> 1.1)
-    oj (3.16.10)
-      bigdecimal (>= 3.0)
-      ostruct (>= 0.2)
     omniauth (2.1.2)
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
@@ -542,7 +543,6 @@ GEM
     openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.1)
     parallel (1.23.0)
     parser (3.2.2.1)
       ast (~> 2.4.1)
@@ -565,7 +565,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (2.2.13)
+    rack (2.2.10)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -715,7 +715,6 @@ GEM
       parser
     scss_lint (0.60.0)
       sass (~> 3.5, >= 3.5.5)
-    securerandom (0.4.1)
     seed_dump (3.3.1)
       activerecord (>= 4)
       activesupport (>= 4)
@@ -730,17 +729,6 @@ GEM
       sentry-ruby (~> 5.19.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
-    shopify_api (14.8.0)
-      activesupport
-      concurrent-ruby
-      hash_diff
-      httparty
-      jwt
-      oj
-      openssl
-      securerandom
-      sorbet-runtime
-      zeitwerk (~> 2.5)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
     sidekiq (7.3.1)
@@ -763,17 +751,15 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    slack-ruby-client (2.5.2)
+    slack-ruby-client (2.2.0)
       faraday (>= 2.0)
       faraday-mashify
       faraday-multipart
       gli
       hashie
-      logger
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
-    sorbet-runtime (0.5.11934)
     spring (4.1.1)
     spring-watcher-listen (2.1.0)
       listen (>= 2.7, < 4.0)
@@ -796,7 +782,7 @@ GEM
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.3)
+    timeout (0.4.1)
     trailblazer-option (0.1.2)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
@@ -816,7 +802,7 @@ GEM
     unf_ext (0.0.8.2)
     unicode-display_width (2.4.2)
     uniform_notifier (1.16.0)
-    uri (1.0.3)
+    uri (0.13.0)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
@@ -911,7 +897,7 @@ DEPENDENCIES
   haikunator
   hairtrigger
   hashie
-  html2text
+  html2text!
   image_processing
   jbuilder
   json_refs
@@ -967,12 +953,11 @@ DEPENDENCIES
   sentry-rails (>= 5.19.0)
   sentry-ruby
   sentry-sidekiq (>= 5.19.0)
-  shopify_api
   shoulda-matchers
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
-  slack-ruby-client (~> 2.5.2)
+  slack-ruby-client (~> 2.2.0)
   spring
   spring-watcher-listen
   squasher

VERSION_CWCTL

@@ -1 +1 @@
-3.2.0
+3.1.0

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -1,15 +1,15 @@
-button:not(.reset-base),
-input[type='button']:not(.reset-base),
-input[type='reset']:not(.reset-base),
-input[type='submit']:not(.reset-base),
-.button:not(.reset-base) {
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+.button {
   appearance: none;
   background-color: $color-woot;
   border: 0;
   border-radius: $base-border-radius;
   color: $white;
   cursor: pointer;
-  display: inline-flex;
+  display: inline-block;
   font-size: $font-size-small;
   -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-medium;

app/assets/stylesheets/administrate/custom_styles.scss

@@ -10,6 +10,7 @@
 
   .icon-container {
     margin-right: 2px;
+
   }
 
   .value-container {

app/channels/room_channel.rb

@@ -2,9 +2,10 @@ class RoomChannel < ApplicationCable::Channel
   def subscribed
     # TODO: should we only do ensure stream  if current account is present?
     # for now going ahead with guard clauses in update_subscription and broadcast_presence
+
+    ensure_stream
     current_user
     current_account
-    ensure_stream
     update_subscription
     broadcast_presence
   end
@@ -21,12 +22,12 @@ class RoomChannel < ApplicationCable::Channel
 
     data = { account_id: @current_account.id, users: ::OnlineStatusTracker.get_available_users(@current_account.id) }
     data[:contacts] = ::OnlineStatusTracker.get_available_contacts(@current_account.id) if @current_user.is_a? User
-    ActionCable.server.broadcast(pubsub_token, { event: 'presence.update', data: data })
+    ActionCable.server.broadcast(@pubsub_token, { event: 'presence.update', data: data })
   end
 
   def ensure_stream
-    stream_from pubsub_token
-    stream_from "account_#{@current_account.id}" if @current_account.present? && @current_user.is_a?(User)
+    @pubsub_token = params[:pubsub_token]
+    stream_from @pubsub_token
   end
 
   def update_subscription
@@ -35,15 +36,11 @@ class RoomChannel < ApplicationCable::Channel
     ::OnlineStatusTracker.update_presence(@current_account.id, @current_user.class.name, @current_user.id)
   end
 
-  def pubsub_token
-    @pubsub_token ||= params[:pubsub_token]
-  end
-
   def current_user
     @current_user ||= if params[:user_id].blank?
-                        ContactInbox.find_by!(pubsub_token: pubsub_token).contact
+                        ContactInbox.find_by!(pubsub_token: @pubsub_token).contact
                       else
-                        User.find_by!(pubsub_token: pubsub_token, id: params[:user_id])
+                        User.find_by!(pubsub_token: @pubsub_token, id: params[:user_id])
                       end
   end
 

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

@@ -2,7 +2,7 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
   def index
     @conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(last_activity_at: :desc).limit(20)
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(id: :desc).limit(20)
   end
 
   private

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

@@ -6,8 +6,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   before_action :conversation, except: [:index, :meta, :search, :create, :filter]
   before_action :inbox, :contact, :contact_inbox, only: [:create]
 
-  ATTACHMENT_RESULTS_PER_PAGE = 100
-
   def index
     result = conversation_finder.perform
     @conversations = result[:conversations]
@@ -26,12 +24,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def attachments
-    @attachments_count = @conversation.attachments.count
     @attachments = @conversation.attachments
-                                .includes(:message)
-                                .order(created_at: :desc)
-                                .page(attachment_params[:page])
-                                .per(ATTACHMENT_RESULTS_PER_PAGE)
   end
 
   def show; end
@@ -131,10 +124,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     params.permit(:priority)
   end
 
-  def attachment_params
-    params.permit(:page)
-  end
-
   def update_last_seen_on_conversation(last_seen_at, update_assignee)
     # rubocop:disable Rails/SkipsModelValidations
     @conversation.update_column(:agent_last_seen_at, last_seen_at)

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

@@ -10,7 +10,7 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
   def create
     authorize @inbox, :create?
     ActiveRecord::Base.transaction do
-      @inbox.add_members(agents_to_be_added_ids)
+      agents_to_be_added_ids.map { |user_id| @inbox.add_member(user_id) }
     end
     fetch_updated_agents
   end
@@ -24,7 +24,7 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
   def destroy
     authorize @inbox, :destroy?
     ActiveRecord::Base.transaction do
-      @inbox.remove_members(params[:user_ids])
+      params[:user_ids].map { |user_id| @inbox.remove_member(user_id) }
     end
     head :ok
   end
@@ -41,8 +41,8 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
     # the missing ones are the agents which are to be deleted from the inbox
     # the new ones are the agents which are to be added to the inbox
     ActiveRecord::Base.transaction do
-      @inbox.add_members(agents_to_be_added_ids)
-      @inbox.remove_members(agents_to_be_removed_ids)
+      agents_to_be_added_ids.each { |user_id| @inbox.add_member(user_id) }
+      agents_to_be_removed_ids.each { |user_id| @inbox.remove_member(user_id) }
     end
   end
 

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -1,11 +1,5 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
   before_action :fetch_conversation, only: [:link_issue, :linked_issues]
-  before_action :fetch_hook, only: [:destroy]
-
-  def destroy
-    @hook.destroy!
-    head :ok
-  end
 
   def teams
     teams = linear_processor_service.teams
@@ -96,8 +90,4 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   def permitted_params
     params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
   end
-
-  def fetch_hook
-    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'linear')
-  end
 end

app/controllers/api/v1/accounts/integrations/shopify_controller.rb

@@ -1,111 +0,0 @@
-class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::BaseController
-  include Shopify::IntegrationHelper
-  before_action :setup_shopify_context, only: [:orders]
-  before_action :fetch_hook, except: [:auth]
-  before_action :validate_contact, only: [:orders]
-
-  def auth
-    shop_domain = params[:shop_domain]
-    return render json: { error: 'Shop domain is required' }, status: :unprocessable_entity if shop_domain.blank?
-
-    state = generate_shopify_token(Current.account.id)
-
-    auth_url = "https://#{shop_domain}/admin/oauth/authorize?"
-    auth_url += URI.encode_www_form(
-      client_id: client_id,
-      scope: REQUIRED_SCOPES.join(','),
-      redirect_uri: redirect_uri,
-      state: state
-    )
-
-    render json: { redirect_url: auth_url }
-  end
-
-  def orders
-    customers = fetch_customers
-    return render json: { orders: [] } if customers.empty?
-
-    orders = fetch_orders(customers.first['id'])
-    render json: { orders: orders }
-  rescue ShopifyAPI::Errors::HttpResponseError => e
-    render json: { error: e.message }, status: :unprocessable_entity
-  end
-
-  def destroy
-    @hook.destroy!
-    head :ok
-  rescue StandardError => e
-    render json: { error: e.message }, status: :unprocessable_entity
-  end
-
-  private
-
-  def redirect_uri
-    "#{ENV.fetch('FRONTEND_URL', '')}/shopify/callback"
-  end
-
-  def contact
-    @contact ||= Current.account.contacts.find_by(id: params[:contact_id])
-  end
-
-  def fetch_hook
-    @hook = Integrations::Hook.find_by!(account: Current.account, app_id: 'shopify')
-  end
-
-  def fetch_customers
-    query = []
-    query << "email:#{contact.email}" if contact.email.present?
-    query << "phone:#{contact.phone_number}" if contact.phone_number.present?
-
-    shopify_client.get(
-      path: 'customers/search.json',
-      query: {
-        query: query.join(' OR '),
-        fields: 'id,email,phone'
-      }
-    ).body['customers'] || []
-  end
-
-  def fetch_orders(customer_id)
-    orders = shopify_client.get(
-      path: 'orders.json',
-      query: {
-        customer_id: customer_id,
-        status: 'any',
-        fields: 'id,email,created_at,total_price,currency,fulfillment_status,financial_status'
-      }
-    ).body['orders'] || []
-
-    orders.map do |order|
-      order.merge('admin_url' => "https://#{@hook.reference_id}/admin/orders/#{order['id']}")
-    end
-  end
-
-  def setup_shopify_context
-    return if client_id.blank? || client_secret.blank?
-
-    ShopifyAPI::Context.setup(
-      api_key: client_id,
-      api_secret_key: client_secret,
-      api_version: '2025-01'.freeze,
-      scope: REQUIRED_SCOPES.join(','),
-      is_embedded: true,
-      is_private: false
-    )
-  end
-
-  def shopify_session
-    ShopifyAPI::Auth::Session.new(shop: @hook.reference_id, access_token: @hook.access_token)
-  end
-
-  def shopify_client
-    @shopify_client ||= ShopifyAPI::Clients::Rest::Admin.new(session: shopify_session)
-  end
-
-  def validate_contact
-    return unless contact.blank? || (contact.email.blank? && contact.phone_number.blank?)
-
-    render json: { error: 'Contact information missing' },
-           status: :unprocessable_entity
-  end
-end

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

@@ -9,14 +9,14 @@ class Api::V1::Accounts::TeamMembersController < Api::V1::Accounts::BaseControll
 
   def create
     ActiveRecord::Base.transaction do
-      @team_members = @team.add_members(members_to_be_added_ids)
+      @team_members = members_to_be_added_ids.map { |user_id| @team.add_member(user_id) }
     end
   end
 
   def update
     ActiveRecord::Base.transaction do
-      @team.add_members(members_to_be_added_ids)
-      @team.remove_members(members_to_be_removed_ids)
+      members_to_be_added_ids.each { |user_id| @team.add_member(user_id) }
+      members_to_be_removed_ids.each { |user_id| @team.remove_member(user_id) }
     end
     @team_members = @team.members
     render action: 'create'
@@ -24,7 +24,7 @@ class Api::V1::Accounts::TeamMembersController < Api::V1::Accounts::BaseControll
 
   def destroy
     ActiveRecord::Base.transaction do
-      @team.remove_members(params[:user_ids])
+      params[:user_ids].map { |user_id| @team.remove_member(user_id) }
     end
     head :ok
   end

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

@@ -2,10 +2,6 @@ class Api::V1::Widget::CampaignsController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    @campaigns = @web_widget
-                 .inbox
-                 .campaigns
-                 .where(enabled: true, account_id: @web_widget.inbox.account_id)
-                 .includes(:sender)
+    @campaigns = @web_widget.inbox.campaigns.where(enabled: true)
   end
 end

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

@@ -2,6 +2,6 @@ class Api::V1::Widget::InboxMembersController < Api::V1::Widget::BaseController
   skip_before_action :set_contact
 
   def index
-    @inbox_members = @web_widget.inbox.inbox_members.includes(user: { avatar_attachment: :blob })
+    @inbox_members = @web_widget.inbox.inbox_members.includes(:user)
   end
 end

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

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

app/controllers/concerns/database/connection_diagnostics.rb

@@ -1,51 +0,0 @@
-module Database::ConnectionDiagnostics
-  extend ActiveSupport::Concern
-  include Database::QueryInspection
-  include Database::QueryLogging
-
-  private
-
-  def log_connection_pool_stats(connection_pool)
-    {
-      pool_size: connection_pool.size,
-      active_connections: connection_pool.connections.count(&:in_use?),
-      total_connections: connection_pool.connections.count,
-      waiting_threads: connection_pool.num_waiting_in_queue,
-      checkout_timeout: connection_pool.checkout_timeout
-    }
-  end
-
-  def connection_status_sql
-    <<~SQL.squish
-      SELECT count(*) as connection_count, state#{' '}
-      FROM pg_stat_activity#{' '}
-      GROUP BY state;
-    SQL
-  end
-
-  def fetch_connection_diagnostics
-    {
-      active_queries: fetch_active_queries,
-      locked_queries: fetch_locked_queries,
-      connection_status: ActiveRecord::Base.connection.execute(connection_status_sql).to_a
-    }
-  rescue StandardError => e
-    Rails.logger.error "Error fetching active query data: #{e.message}"
-    { active_queries: [], locked_queries: [] }
-  end
-
-  def caller_info(exception)
-    {
-      process_id: Process.pid,
-      thread_id: Thread.current.object_id,
-      backtrace: exception.backtrace&.first(15) || []
-    }
-  end
-
-  def log_timeout_error(exception, connection_info)
-    Rails.logger.error "ActiveRecord::ConnectionTimeoutError: #{exception.message}"
-    Rails.logger.error "Connection Pool Stats: #{connection_info.except(:active_queries, :locked_queries).inspect}"
-    log_active_queries(connection_info[:active_queries])
-    log_locked_queries(connection_info[:locked_queries])
-  end
-end

app/controllers/concerns/database/query_inspection.rb

@@ -1,91 +0,0 @@
-module Database::QueryInspection
-  extend ActiveSupport::Concern
-
-  private
-
-  def active_queries_sql
-    <<~SQL.squish
-      SELECT pid,#{' '}
-             now() - pg_stat_activity.query_start AS duration,
-             query,
-             state,
-             wait_event_type,
-             wait_event,
-             backend_type,
-             application_name,
-             client_addr,
-             usename
-      FROM pg_stat_activity#{' '}
-      WHERE state <> 'idle'
-        AND query NOT ILIKE '%pg_stat_activity%'
-      ORDER BY duration DESC;
-    SQL
-  end
-
-  def process_active_query_row(row)
-    {
-      pid: row['pid'],
-      duration: row['duration'].to_s,
-      state: row['state'],
-      query: row['query'],
-      wait_event_type: row['wait_event_type'],
-      wait_event: row['wait_event'],
-      backend_type: row['backend_type'],
-      application_name: row['application_name'],
-      client_addr: row['client_addr'],
-      username: row['usename']
-    }
-  end
-
-  def fetch_active_queries
-    query_data = ActiveRecord::Base.connection.execute(active_queries_sql)
-    query_data.map { |row| process_active_query_row(row) }
-  end
-
-  def locked_queries_sql
-    <<~SQL.squish
-      SELECT blocked_locks.pid AS blocked_pid,
-             blocked_activity.usename AS blocked_user,
-             blocking_locks.pid AS blocking_pid,
-             blocking_activity.usename AS blocking_user,
-             blocked_activity.query AS blocked_statement,
-             blocking_activity.query AS blocking_statement,
-             now() - blocking_activity.query_start AS blocking_duration
-      FROM pg_catalog.pg_locks blocked_locks
-      JOIN pg_catalog.pg_stat_activity blocked_activity ON blocked_activity.pid = blocked_locks.pid
-      JOIN pg_catalog.pg_locks blocking_locks#{' '}
-          ON blocking_locks.locktype = blocked_locks.locktype
-          AND blocking_locks.DATABASE IS NOT DISTINCT FROM blocked_locks.DATABASE
-          AND blocking_locks.relation IS NOT DISTINCT FROM blocked_locks.relation
-          AND blocking_locks.page IS NOT DISTINCT FROM blocked_locks.page
-          AND blocking_locks.tuple IS NOT DISTINCT FROM blocked_locks.tuple
-          AND blocking_locks.virtualxid IS NOT DISTINCT FROM blocked_locks.virtualxid
-          AND blocking_locks.transactionid IS NOT DISTINCT FROM blocked_locks.transactionid
-          AND blocking_locks.classid IS NOT DISTINCT FROM blocked_locks.classid
-          AND blocking_locks.objid IS NOT DISTINCT FROM blocked_locks.objid
-          AND blocking_locks.objsubid IS NOT DISTINCT FROM blocked_locks.objsubid
-          AND blocking_locks.pid != blocked_locks.pid
-      JOIN pg_catalog.pg_stat_activity blocking_activity ON blocking_activity.pid = blocking_locks.pid
-      WHERE NOT blocked_locks.granted;
-    SQL
-  end
-
-  def process_lock_row(row)
-    {
-      blocked_pid: row['blocked_pid'],
-      blocked_user: row['blocked_user'],
-      blocking_pid: row['blocking_pid'],
-      blocking_user: row['blocking_user'],
-      blocked_statement: row['blocked_statement'],
-      blocking_statement: row['blocking_statement'],
-      blocking_duration: row['blocking_duration'].to_s
-    }
-  end
-
-  def fetch_locked_queries
-    lock_data = ActiveRecord::Base.connection.execute(locked_queries_sql)
-    return [] if lock_data.count.zero?
-
-    lock_data.map { |row| process_lock_row(row) }
-  end
-end

app/controllers/concerns/database/query_logging.rb

@@ -1,33 +0,0 @@
-module Database::QueryLogging
-  extend ActiveSupport::Concern
-
-  private
-
-  def log_query_details(query_info, index)
-    Rails.logger.error "Query ##{index + 1} [PID: #{query_info[:pid]}] [Duration: #{query_info[:duration]}] [State: #{query_info[:state]}]:"
-    Rails.logger.error "App: #{query_info[:application_name]} User: #{query_info[:username]} Client: #{query_info[:client_addr]}"
-    Rails.logger.error "Waiting: #{query_info[:wait_event_type]} / #{query_info[:wait_event]}" if query_info[:wait_event_type].present?
-    Rails.logger.error query_info[:query]
-  end
-
-  def log_active_queries(active_queries)
-    if active_queries.any?
-      Rails.logger.error "Active Database Queries (#{active_queries.count}):"
-      active_queries.each_with_index { |query_info, index| log_query_details(query_info, index) }
-    else
-      Rails.logger.error 'No active queries found or unable to retrieve query information'
-    end
-  end
-
-  def log_locked_queries(locked_queries)
-    return if locked_queries.blank?
-
-    Rails.logger.error "Locked Queries (#{locked_queries.count}):"
-    locked_queries.each_with_index do |lock_info, index|
-      Rails.logger.error "Lock ##{index + 1}: PID #{lock_info[:blocked_pid]} blocked by PID #{lock_info[:blocking_pid]}"
-      Rails.logger.error "Duration: #{lock_info[:blocking_duration]}"
-      Rails.logger.error "Blocked query: #{lock_info[:blocked_statement]}"
-      Rails.logger.error "Blocking query: #{lock_info[:blocking_statement]}"
-    end
-  end
-end

app/controllers/concerns/request_exception_handler.rb

@@ -1,10 +1,8 @@
 module RequestExceptionHandler
   extend ActiveSupport::Concern
-  include Database::ConnectionDiagnostics
 
   included do
     rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
-    rescue_from ActiveRecord::ConnectionTimeoutError, with: :handle_connection_timeout
   end
 
   private
@@ -20,36 +18,11 @@ module RequestExceptionHandler
   rescue ActionController::ParameterMissing => e
     log_handled_error(e)
     render_could_not_create_error(e.message)
-  rescue ActiveRecord::ConnectionTimeoutError => e
-    handle_connection_timeout(e)
   ensure
     # to address the thread variable leak issues in Puma/Thin webserver
     Current.reset
   end
 
-  def handle_connection_timeout(exception)
-    connection_pool = ActiveRecord::Base.connection_pool
-    connection_info = log_connection_pool_stats(connection_pool)
-
-    # Gather diagnostic info
-    diagnostics = fetch_connection_diagnostics
-    connection_info.merge!(diagnostics)
-    connection_info[:caller_info] = caller_info(exception)
-
-    # Log error details
-    log_timeout_error(exception, connection_info)
-
-    # Report to exception tracker
-    ChatwootExceptionTracker.new(
-      exception,
-      user: Current.user,
-      account: Current.account,
-      additional_context: { connection_info: connection_info }
-    ).capture_exception
-
-    render_service_unavailable('Database connection timeout. Please try again later.')
-  end
-
   def render_unauthorized(message)
     render json: { error: message }, status: :unauthorized
   end
@@ -70,10 +43,6 @@ module RequestExceptionHandler
     render json: { error: message }, status: :internal_server_error
   end
 
-  def render_service_unavailable(message)
-    render json: { error: message }, status: :service_unavailable
-  end
-
   def render_record_invalid(exception)
     log_handled_error(exception)
     render json: {

app/controllers/concerns/switch_locale.rb

@@ -5,11 +5,10 @@ module SwitchLocale
 
   def switch_locale(&)
     # priority is for locale set in query string (mostly for widget/from js sdk)
-    locale ||= params[:locale]
-
+    locale ||= locale_from_params
     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)
+    locale ||= locale_from_env_variable
     set_locale(locale, &)
   end
 
@@ -33,30 +32,26 @@ module SwitchLocale
   end
 
   def set_locale(locale, &)
-    safe_locale = validate_and_get_locale(locale)
+    # if locale is empty, use default_locale
+    locale ||= I18n.default_locale
     # Ensure locale won't bleed into other requests
     # https://guides.rubyonrails.org/i18n.html#managing-the-locale-across-requests
-    I18n.with_locale(safe_locale, &)
+    I18n.with_locale(locale, &)
   end
 
-  def validate_and_get_locale(locale)
-    return I18n.default_locale.to_s if locale.blank?
-
-    available_locales = I18n.available_locales.map(&:to_s)
-    locale_without_variant = locale.split('_')[0]
-
-    if available_locales.include?(locale)
-      locale
-    elsif available_locales.include?(locale_without_variant)
-      locale_without_variant
-    else
-      I18n.default_locale.to_s
-    end
+  def locale_from_params
+    I18n.available_locales.map(&:to_s).include?(params[:locale]) ? params[:locale] : nil
   end
 
   def locale_from_account(account)
     return unless account
 
-    account.locale
+    I18n.available_locales.map(&:to_s).include?(account.locale) ? account.locale : nil
+  end
+
+  def locale_from_env_variable
+    return unless ENV.fetch('DEFAULT_LOCALE', nil)
+
+    I18n.available_locales.map(&:to_s).include?(ENV.fetch('DEFAULT_LOCALE')) ? ENV.fetch('DEFAULT_LOCALE') : nil
   end
 end

app/controllers/dashboard_controller.rb

@@ -7,17 +7,13 @@ class DashboardController < ActionController::Base
   around_action :switch_locale
   before_action :ensure_installation_onboarding, only: [:index]
   before_action :render_hc_if_custom_domain, only: [:index]
-  before_action :ensure_html_format
+
   layout 'vueapp'
 
   def index; end
 
   private
 
-  def ensure_html_format
-    head :not_acceptable unless request.format.html?
-  end
-
   def set_global_config
     @global_config = GlobalConfig.get(
       'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
@@ -36,7 +32,7 @@ class DashboardController < ActionController::Base
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
       'DEPLOYMENT_ENV',
-      'CSML_EDITOR_HOST', 'INSTALLATION_PRICING_PLAN'
+      'CSML_EDITOR_HOST'
     ).merge(app_config)
   end
 

app/controllers/linear/callbacks_controller.rb

@@ -1,73 +0,0 @@
-class Linear::CallbacksController < ApplicationController
-  include Linear::IntegrationHelper
-
-  def show
-    @response = oauth_client.auth_code.get_token(
-      params[:code],
-      redirect_uri: "#{base_url}/linear/callback"
-    )
-
-    handle_response
-  rescue StandardError => e
-    Rails.logger.error("Linear callback error: #{e.message}")
-    redirect_to linear_redirect_uri
-  end
-
-  private
-
-  def oauth_client
-    app_id = GlobalConfigService.load('LINEAR_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
-
-    OAuth2::Client.new(
-      app_id,
-      app_secret,
-      {
-        site: 'https://api.linear.app',
-        token_url: '/oauth/token',
-        authorize_url: '/oauth/authorize'
-      }
-    )
-  end
-
-  def handle_response
-    hook = account.hooks.new(
-      access_token: parsed_body['access_token'],
-      status: 'enabled',
-      app_id: 'linear',
-      settings: {
-        token_type: parsed_body['token_type'],
-        expires_in: parsed_body['expires_in'],
-        scope: parsed_body['scope']
-      }
-    )
-    # You may wonder why we're not handling the refresh token update, since the token will expire only after 10 years, https://github.com/linear/linear/issues/251
-    hook.save!
-    redirect_to linear_redirect_uri
-  rescue StandardError => e
-    Rails.logger.error("Linear callback error: #{e.message}")
-    redirect_to linear_redirect_uri
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  def account_id
-    return unless params[:state]
-
-    verify_linear_token(params[:state])
-  end
-
-  def linear_redirect_uri
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/linear"
-  end
-
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end

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

@@ -6,25 +6,17 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   layout 'portal'
 
   def index
-    @articles = @portal.articles.published.includes(:category, :author)
+    @articles = @portal.articles.published
     @articles_count = @articles.count
     search_articles
     order_by_sort_param
-    limit_results
+    @articles = @articles.page(list_params[:page]) if list_params[:page].present?
   end
 
   def show; end
 
   private
 
-  def limit_results
-    return if list_params[:per_page].blank?
-
-    per_page = [list_params[:per_page].to_i, 100].min
-    per_page = 25 if per_page < 1
-    @articles = @articles.page(list_params[:page]).per(per_page)
-  end
-
   def search_articles
     @articles = @articles.search(list_params) if list_params.present?
   end
@@ -53,7 +45,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort, :status, :page, :per_page)
+    params.permit(:query, :locale, :sort, :status, :page)
   end
 
   def permitted_params

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

@@ -1,6 +1,4 @@
 class Public::Api::V1::Portals::BaseController < PublicController
-  include SwitchLocale
-
   before_action :show_plain_layout
   before_action :set_color_scheme
   before_action :set_global_config
@@ -29,7 +27,14 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def switch_locale_with_portal(&)
-    @locale = validate_and_get_locale(params[:locale])
+    locale_without_variant = params[:locale].split('_')[0]
+    is_locale_available = I18n.available_locales.map(&:to_s).include?(params[:locale])
+    is_locale_variant_available = I18n.available_locales.map(&:to_s).include?(locale_without_variant)
+    if is_locale_available
+      @locale = params[:locale]
+    elsif is_locale_variant_available
+      @locale = locale_without_variant
+    end
 
     I18n.with_locale(@locale, &)
   end
@@ -39,12 +44,12 @@ class Public::Api::V1::Portals::BaseController < PublicController
     Rails.logger.info "Article: not found for slug: #{params[:article_slug]}"
     render_404 && return if article.blank?
 
-    article_locale = if article.category.present?
-                       article.category.locale
-                     else
-                       article.portal.default_locale
-                     end
-    @locale = validate_and_get_locale(article_locale)
+    @locale = if article.category.present?
+                article.category.locale
+              else
+                article.portal.default_locale
+              end
+
     I18n.with_locale(@locale, &)
   end
 

app/controllers/shopify/callbacks_controller.rb

@@ -1,72 +0,0 @@
-class Shopify::CallbacksController < ApplicationController
-  include Shopify::IntegrationHelper
-
-  def show
-    verify_account!
-
-    @response = oauth_client.auth_code.get_token(
-      params[:code],
-      redirect_uri: '/shopify/callback'
-    )
-
-    handle_response
-  rescue StandardError => e
-    Rails.logger.error("Shopify callback error: #{e.message}")
-    redirect_to "#{redirect_uri}?error=true"
-  end
-
-  private
-
-  def verify_account!
-    @account_id = verify_shopify_token(params[:state])
-    raise StandardError, 'Invalid state parameter' if account.blank?
-  end
-
-  def handle_response
-    account.hooks.create!(
-      app_id: 'shopify',
-      access_token: parsed_body['access_token'],
-      status: 'enabled',
-      reference_id: params[:shop],
-      settings: {
-        scope: parsed_body['scope']
-      }
-    )
-
-    redirect_to shopify_integration_url
-  end
-
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def oauth_client
-    OAuth2::Client.new(
-      client_id,
-      client_secret,
-      {
-        site: "https://#{params[:shop]}",
-        authorize_url: '/admin/oauth/authorize',
-        token_url: '/admin/oauth/access_token'
-      }
-    )
-  end
-
-  def account
-    @account ||= Account.find(@account_id)
-  end
-
-  def account_id
-    @account_id ||= params[:state].split('_').first
-  end
-
-  def shopify_integration_url
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/shopify"
-  end
-
-  def redirect_uri
-    return shopify_integration_url if account
-
-    ENV.fetch('FRONTEND_URL', nil)
-  end
-end

app/controllers/super_admin/app_configs_controller.rb

@@ -35,14 +35,10 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
     @allowed_configs = case @config
                        when 'facebook'
                          %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-                       when 'shopify'
-                         %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET]
                        when 'microsoft'
                          %w[AZURE_APP_ID AZURE_APP_SECRET]
                        when 'email'
                          ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       when 'linear'
-                         %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
                        else
                          %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                        end

app/controllers/twilio/callback_controller.rb

@@ -1,6 +1,6 @@
 class Twilio::CallbackController < ApplicationController
   def create
-    Webhooks::TwilioEventsJob.perform_later(permitted_params.to_unsafe_hash)
+    ::Twilio::IncomingMessageService.new(params: permitted_params).perform
 
     head :no_content
   end

app/controllers/twilio/delivery_status_controller.rb

@@ -1,6 +1,6 @@
 class Twilio::DeliveryStatusController < ApplicationController
   def create
-    Webhooks::TwilioDeliveryStatusJob.perform_later(permitted_params.to_unsafe_hash)
+    ::Twilio::DeliveryStatusService.new(params: permitted_params).perform
 
     head :no_content
   end

app/controllers/webhooks/whatsapp_controller.rb

@@ -2,12 +2,6 @@ class Webhooks::WhatsappController < ActionController::API
   include MetaTokenVerifyConcern
 
   def process_payload
-    if inactive_whatsapp_number?
-      Rails.logger.warn("Rejected webhook for inactive WhatsApp number: #{params[:phone_number]}")
-      render json: { error: 'Inactive WhatsApp number' }, status: :unprocessable_entity
-      return
-    end
-
     Webhooks::WhatsappEventsJob.perform_later(params.to_unsafe_hash)
     head :ok
   end
@@ -19,15 +13,4 @@ class Webhooks::WhatsappController < ActionController::API
     whatsapp_webhook_verify_token = channel.provider_config['webhook_verify_token'] if channel.present?
     token == whatsapp_webhook_verify_token if whatsapp_webhook_verify_token.present?
   end
-
-  def inactive_whatsapp_number?
-    phone_number = params[:phone_number]
-    return false if phone_number.blank?
-
-    inactive_numbers = GlobalConfig.get_value('INACTIVE_WHATSAPP_NUMBERS').to_s
-    return false if inactive_numbers.blank?
-
-    inactive_numbers_array = inactive_numbers.split(',').map(&:strip)
-    inactive_numbers_array.include?(phone_number)
-  end
 end

app/dashboards/account_dashboard.rb

@@ -78,11 +78,7 @@ class AccountDashboard < Administrate::BaseDashboard
   #   COLLECTION_FILTERS = {
   #     open: ->(resources) { resources.where(open: true) }
   #   }.freeze
-  COLLECTION_FILTERS = {
-    active: ->(resources) { resources.where(status: :active) },
-    suspended: ->(resources) { resources.where(status: :suspended) },
-    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
-  }.freeze
+  COLLECTION_FILTERS = {}.freeze
 
   # Overwrite this method to customize how accounts are displayed
   # across all pages of the admin dashboard.

app/dashboards/user_dashboard.rb

@@ -94,12 +94,7 @@ class UserDashboard < Administrate::BaseDashboard
   #   COLLECTION_FILTERS = {
   #     open: ->(resources) { resources.where(open: true) }
   #   }.freeze
-  COLLECTION_FILTERS = {
-    super_admin: ->(resources) { resources.where(type: 'SuperAdmin') },
-    confirmed: ->(resources) { resources.where.not(confirmed_at: nil) },
-    unconfirmed: ->(resources) { resources.where(confirmed_at: nil) },
-    recent: ->(resources) { resources.where('created_at > ?', 30.days.ago) }
-  }.freeze
+  COLLECTION_FILTERS = {}.freeze
 
   # Overwrite this method to customize how users are displayed
   # across all pages of the admin dashboard.

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

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

app/helpers/filter_helper.rb

@@ -1,4 +1,4 @@
-module Filters::FilterHelper
+module FilterHelper
   def build_condition_query(model_filters, query_hash, current_index)
     current_filter = model_filters[query_hash['attribute_key']]
 
@@ -89,18 +89,4 @@ module Filters::FilterHelper
     operator = condition['query_operator'].upcase
     raise CustomExceptions::CustomFilter::InvalidQueryOperator.new({}) unless %w[AND OR].include?(operator)
   end
-
-  def conversation_status_values(values)
-    return Conversation.statuses.values if values.include?('all')
-
-    values.map { |x| Conversation.statuses[x.to_sym] }
-  end
-
-  def conversation_priority_values(values)
-    values.map { |x| Conversation.priorities[x.to_sym] }
-  end
-
-  def message_type_values(values)
-    values.map { |x| Message.message_types[x.to_sym] }
-  end
 end

app/helpers/linear/integration_helper.rb

@@ -1,47 +0,0 @@
-module Linear::IntegrationHelper
-  # Generates a signed JWT token for Linear integration
-  #
-  # @param account_id [Integer] The account ID to encode in the token
-  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_linear_token(account_id)
-    return if client_secret.blank?
-
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
-  rescue StandardError => e
-    Rails.logger.error("Failed to generate Linear token: #{e.message}")
-    nil
-  end
-
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
-  end
-
-  # Verifies and decodes a Linear JWT token
-  #
-  # @param token [String] The JWT token to verify
-  # @return [Integer, nil] The account ID from the token or nil if invalid
-  def verify_linear_token(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)
-  end
-
-  private
-
-  def client_secret
-    @client_secret ||= GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
-  end
-
-  def decode_token(token, secret)
-    JWT.decode(token, secret, true, {
-                 algorithm: 'HS256',
-                 verify_expiration: true
-               }).first['sub']
-  rescue StandardError => e
-    Rails.logger.error("Unexpected error verifying Linear token: #{e.message}")
-    nil
-  end
-end

app/helpers/portal_helper.rb

@@ -5,7 +5,8 @@ module PortalHelper
   end
 
   def generate_portal_bg(portal_color, theme)
-    generate_portal_bg_color(portal_color, theme)
+    bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
+    "url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
   end
 
   def generate_gradient_to_bottom(theme)

app/helpers/shopify/integration_helper.rb

@@ -1,58 +0,0 @@
-module Shopify::IntegrationHelper
-  REQUIRED_SCOPES = %w[read_customers read_orders read_fulfillments].freeze
-
-  # Generates a signed JWT token for Shopify integration
-  #
-  # @param account_id [Integer] The account ID to encode in the token
-  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_shopify_token(account_id)
-    return if client_secret.blank?
-
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
-  rescue StandardError => e
-    Rails.logger.error("Failed to generate Shopify token: #{e.message}")
-    nil
-  end
-
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
-  end
-
-  # Verifies and decodes a Shopify JWT token
-  #
-  # @param token [String] The JWT token to verify
-  # @return [Integer, nil] The account ID from the token or nil if invalid
-  def verify_shopify_token(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)
-  end
-
-  private
-
-  def client_id
-    @client_id ||= GlobalConfigService.load('SHOPIFY_CLIENT_ID', nil)
-  end
-
-  def client_secret
-    @client_secret ||= GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
-  end
-
-  def decode_token(token, secret)
-    JWT.decode(
-      token,
-      secret,
-      true,
-      {
-        algorithm: 'HS256',
-        verify_expiration: true
-      }
-    ).first['sub']
-  rescue StandardError => e
-    Rails.logger.error("Unexpected error verifying Shopify token: #{e.message}")
-    nil
-  end
-end

app/helpers/super_admin/account_features_helper.rb

@@ -6,47 +6,4 @@ module SuperAdmin::AccountFeaturesHelper
   def self.account_premium_features
     account_features.filter { |feature| feature['premium'] }.pluck('name')
   end
-
-  # Returns a hash mapping feature names to their display names
-  def self.feature_display_names
-    account_features.each_with_object({}) do |feature, hash|
-      hash[feature['name']] = feature['display_name']
-    end
-  end
-
-  def self.filter_internal_features(features)
-    return features if GlobalConfig.get_value('DEPLOYMENT_ENV') == 'cloud'
-
-    internal_features = account_features.select { |f| f['chatwoot_internal'] }.pluck('name')
-    features.except(*internal_features)
-  end
-
-  def self.filter_deprecated_features(features)
-    deprecated_features = account_features.select { |f| f['deprecated'] }.pluck('name')
-    features.except(*deprecated_features)
-  end
-
-  def self.sort_and_transform_features(features, display_names)
-    features.sort_by { |key, _| display_names[key] || key }
-            .to_h
-            .transform_keys { |key| [key, display_names[key]] }
-  end
-
-  def self.partition_features(features)
-    filtered = filter_internal_features(features)
-    filtered = filter_deprecated_features(filtered)
-    display_names = feature_display_names
-
-    regular, premium = filtered.partition { |key, _value| account_premium_features.exclude?(key) }
-
-    [
-      sort_and_transform_features(regular, display_names),
-      sort_and_transform_features(premium, display_names)
-    ]
-  end
-
-  def self.filtered_features(features)
-    regular, premium = partition_features(features)
-    regular.merge(premium)
-  end
 end

app/javascript/dashboard/App.vue

@@ -14,7 +14,6 @@ import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
-import { useFontSize } from 'dashboard/composables/useFontSize';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -38,15 +37,8 @@ export default {
     const router = useRouter();
     const store = useStore();
     const { accountId } = useAccount();
-    // Use the font size composable (it automatically sets up the watcher)
-    const { currentFontSize } = useFontSize();
 
-    return {
-      router,
-      store,
-      currentAccountId: accountId,
-      currentFontSize,
-    };
+    return { router, store, currentAccountId: accountId };
   },
   data() {
     return {

app/javascript/dashboard/api/captain/bulkActions.js

@@ -1,9 +0,0 @@
-import ApiClient from '../ApiClient';
-
-class CaptainBulkActionsAPI extends ApiClient {
-  constructor() {
-    super('captain/bulk_actions', { accountScoped: true });
-  }
-}
-
-export default new CaptainBulkActionsAPI();

app/javascript/dashboard/api/inbox/conversation.js

@@ -137,10 +137,6 @@ class ConversationApi extends ApiClient {
   requestCopilot(conversationId, body) {
     return axios.post(`${this.url}/${conversationId}/copilot`, body);
   }
-
-  getInboxAssistant(conversationId) {
-    return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
-  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/integrations.js

@@ -32,12 +32,6 @@ class IntegrationsAPI extends ApiClient {
   deleteHook(hookId) {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
-
-  connectShopify({ shopDomain }) {
-    return axios.post(`${this.baseUrl()}/integrations/shopify/auth`, {
-      shop_domain: shopDomain,
-    });
-  }
 }
 
 export default new IntegrationsAPI();

app/javascript/dashboard/api/integrations/shopify.js

@@ -1,17 +0,0 @@
-/* global axios */
-
-import ApiClient from '../ApiClient';
-
-class ShopifyAPI extends ApiClient {
-  constructor() {
-    super('integrations/shopify', { accountScoped: true });
-  }
-
-  getOrders(contactId) {
-    return axios.get(`${this.url}/orders`, {
-      params: { contact_id: contactId },
-    });
-  }
-}
-
-export default new ShopifyAPI();

app/javascript/dashboard/api/liveReports.js

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

app/javascript/dashboard/api/reports.js

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

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

@@ -10,7 +10,7 @@
 
   &.no-margin {
     .mx-input {
-      margin-bottom: 0 !important;
+      @apply mb-0;
     }
   }
 

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -1,208 +0,0 @@
-// scss-lint:disable PropertySortOrder
-@layer base {
-  // NEXT COLORS START
-  :root {
-    // slate
-    --slate-1: 252 252 253;
-    --slate-2: 249 249 251;
-    --slate-3: 240 240 243;
-    --slate-4: 232 232 236;
-    --slate-5: 224 225 230;
-    --slate-6: 217 217 224;
-    --slate-7: 205 206 214;
-    --slate-8: 185 187 198;
-    --slate-9: 139 141 152;
-    --slate-10: 128 131 141;
-    --slate-11: 96 100 108;
-    --slate-12: 28 32 36;
-
-    --iris-1: 253 253 255;
-    --iris-2: 248 248 255;
-    --iris-3: 240 241 254;
-    --iris-4: 230 231 255;
-    --iris-5: 218 220 255;
-    --iris-6: 203 205 255;
-    --iris-7: 184 186 248;
-    --iris-8: 155 158 240;
-    --iris-9: 91 91 214;
-    --iris-10: 81 81 205;
-    --iris-11: 87 83 198;
-    --iris-12: 39 41 98;
-
-    --ruby-1: 255 252 253;
-    --ruby-2: 255 247 248;
-    --ruby-3: 254 234 237;
-    --ruby-4: 255 220 225;
-    --ruby-5: 255 206 214;
-    --ruby-6: 248 191 200;
-    --ruby-7: 239 172 184;
-    --ruby-8: 229 146 163;
-    --ruby-9: 229 70 102;
-    --ruby-10: 220 59 93;
-    --ruby-11: 202 36 77;
-    --ruby-12: 100 23 43;
-
-    --amber-1: 254 253 251;
-    --amber-2: 254 251 233;
-    --amber-3: 255 247 194;
-    --amber-4: 255 238 156;
-    --amber-5: 251 229 119;
-    --amber-6: 243 214 115;
-    --amber-7: 233 193 98;
-    --amber-8: 226 163 54;
-    --amber-9: 255 197 61;
-    --amber-10: 255 186 24;
-    --amber-11: 171 100 0;
-    --amber-12: 79 52 34;
-
-    --teal-1: 250 254 253;
-    --teal-2: 243 251 249;
-    --teal-3: 224 248 243;
-    --teal-4: 204 243 234;
-    --teal-5: 184 234 224;
-    --teal-6: 161 222 210;
-    --teal-7: 131 205 193;
-    --teal-8: 83 185 171;
-    --teal-9: 18 165 148;
-    --teal-10: 13 155 138;
-    --teal-11: 0 133 115;
-    --teal-12: 13 61 56;
-
-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
-    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
-    --border-weak: 234 234 234;
-    --solid-1: 255 255 255;
-    --solid-2: 255 255 255;
-    --solid-3: 255 255 255;
-    --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
-    --solid-blue: 218 236 255;
-    --solid-iris: 230 231 255;
-
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
-    --alpha-3: 255, 255, 255, 0.96;
-    --black-alpha-1: 0, 0, 0, 0.12;
-    --black-alpha-2: 0, 0, 0, 0.04;
-    --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.8;
-  }
-
-  .dark {
-    // slate
-    --slate-1: 17 17 19;
-    --slate-2: 24 25 27;
-    --slate-3: 33 34 37;
-    --slate-4: 39 42 45;
-    --slate-5: 46 49 53;
-    --slate-6: 54 58 63;
-    --slate-7: 67 72 78;
-    --slate-8: 90 97 105;
-    --slate-9: 105 110 119;
-    --slate-10: 119 123 132;
-    --slate-11: 176 180 186;
-    --slate-12: 237 238 240;
-
-    --iris-1: 19 19 30;
-    --iris-2: 23 22 37;
-    --iris-3: 32 34 72;
-    --iris-4: 38 42 101;
-    --iris-5: 48 51 116;
-    --iris-6: 61 62 130;
-    --iris-7: 74 74 149;
-    --iris-8: 89 88 177;
-    --iris-9: 91 91 214;
-    --iris-10: 84 114 228;
-    --iris-11: 158 177 255;
-    --iris-12: 224 223 254;
-
-    --ruby-1: 25 17 19;
-    --ruby-2: 30 21 23;
-    --ruby-3: 58 20 30;
-    --ruby-4: 78 19 37;
-    --ruby-5: 94 26 46;
-    --ruby-6: 111 37 57;
-    --ruby-7: 136 52 71;
-    --ruby-8: 179 68 90;
-    --ruby-9: 229 70 102;
-    --ruby-10: 236 90 114;
-    --ruby-11: 255 148 157;
-    --ruby-12: 254 210 225;
-
-    --amber-1: 22 18 12;
-    --amber-2: 29 24 15;
-    --amber-3: 48 32 8;
-    --amber-4: 63 39 0;
-    --amber-5: 77 48 0;
-    --amber-6: 92 61 5;
-    --amber-7: 113 79 25;
-    --amber-8: 143 100 36;
-    --amber-9: 255 197 61;
-    --amber-10: 255 214 10;
-    --amber-11: 255 202 22;
-    --amber-12: 255 231 179;
-
-    --teal-1: 13 21 20;
-    --teal-2: 17 28 27;
-    --teal-3: 13 45 42;
-    --teal-4: 2 59 55;
-    --teal-5: 8 72 67;
-    --teal-6: 20 87 80;
-    --teal-7: 28 105 97;
-    --teal-8: 32 126 115;
-    --teal-9: 18 165 148;
-    --teal-10: 14 179 158;
-    --teal-11: 11 216 182;
-    --teal-12: 173 240 221;
-
-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
-    --solid-1: 23 23 26;
-    --solid-2: 29 30 36;
-    --solid-3: 44 45 54;
-    --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
-    --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
-
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
-    --black-alpha-1: 0, 0, 0, 0.3;
-    --black-alpha-2: 0, 0, 0, 0.2;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
-  }
-}
-// NEXT COLORS END

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

@@ -5,9 +5,6 @@
 @import 'shared/assets/fonts/InterDisplay/inter-display';
 @import 'shared/assets/fonts/inter';
 
-// Next Colors
-@import 'next-colors';
-
 @import 'shared/assets/stylesheets/animations';
 @import 'shared/assets/stylesheets/colors';
 @import 'shared/assets/stylesheets/spacing';
@@ -57,19 +54,214 @@
   @apply text-n-blue-text;
 }
 
-.custom-dashed-border {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.dark .custom-dashed-border {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
-}
-
 // scss-lint:disable PropertySortOrder
 @layer base {
+  /* NEXT COLORS START */
+  :root {
+    /* slate */
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --solid-active: 255 255 255;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
+
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
+    --white-alpha: 255, 255, 255, 0.8;
+  }
+
+  .dark {
+    /* slate */
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
+    --text-blue: 126 182 255;
+
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+  /* NEXT COLORS END */
+
   :root {
     --color-amber-25: 254 253 251;
     --color-amber-50: 255 249 237;

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

@@ -1,13 +1,13 @@
 @mixin label-multiselect-hover {
   &::after {
-    @apply text-n-brand;
+    @apply text-woot-600 dark:text-woot-600;
   }
 
   &:hover {
-    @apply bg-n-slate-3;
+    @apply bg-slate-50 dark:bg-slate-700;
 
     &::after {
-      @apply text-n-blue-text;
+      @apply text-woot-500 dark:text-woot-500;
     }
   }
 }
@@ -18,16 +18,20 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
+    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
 
     .multiselect__select {
-      @apply cursor-not-allowed bg-transparent rounded-lg;
+      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
+    }
+
+    .multiselect__tags {
+      @apply border-0;
     }
   }
 
   .multiselect--active {
     > .multiselect__tags {
-      @apply outline-n-blue-border;
+      @apply border-woot-500 dark:border-woot-500;
     }
   }
 
@@ -40,7 +44,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
   }
 
   .multiselect__content {
@@ -57,19 +61,15 @@
         @apply mb-0;
       }
 
-      &::after {
-        @apply bottom-0 flex items-center justify-center text-center;
-      }
-
       &.multiselect__option--highlight {
-        @apply bg-n-alpha-black2 text-n-slate-12;
+        @apply bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-100;
       }
 
       &.multiselect__option--highlight:hover {
-        @apply bg-n-brand/10 text-n-slate-12;
+        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
 
         &::after {
-          @apply bg-transparent text-center text-n-slate-12;
+          @apply bg-woot-50 dark:bg-woot-600 text-slate-600 dark:text-slate-200;
         }
       }
 
@@ -78,17 +78,17 @@
       }
 
       &.multiselect__option--selected {
-        @apply bg-n-brand/20 text-n-slate-12;
-
-        &::after {
-          @apply bg-transparent;
-        }
+        @apply bg-woot-50 dark:bg-woot-600 text-slate-800 dark:text-slate-100;
 
         &.multiselect__option--highlight:hover {
-          @apply bg-transparent;
+          @apply bg-woot-75 dark:bg-woot-600;
+
+          &::after {
+            @apply bg-transparent;
+          }
 
           &::after:hover {
-            @apply text-n-slate-12 bg-transparent;
+            @apply text-slate-800 dark:text-slate-100;
           }
         }
       }
@@ -96,27 +96,23 @@
   }
 
   .multiselect__tags {
-    @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
 
     input {
-      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
+      @apply border-0 border-none;
     }
   }
 
-  .multiselect__spinner {
-    background-color: transparent;
-  }
-
   .multiselect__tags-wrap {
     @apply inline-block leading-none mt-1;
   }
 
   .multiselect__placeholder {
-    @apply text-n-slate-10 font-normal pt-3;
+    @apply text-slate-400 dark:text-slate-400 font-normal pt-3;
   }
 
   .multiselect__tag {
-    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
+    @apply bg-slate-50 dark:bg-slate-800 mt-1 text-slate-800 dark:text-slate-100 pr-6 pl-2.5 py-1.5;
   }
 
   .multiselect__tag-icon {
@@ -129,7 +125,7 @@
   }
 
   .multiselect__single {
-    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
   }
 }
 
@@ -147,11 +143,11 @@
     }
 
     > .multiselect__tags {
-      @apply outline-transparent;
+      @apply border-transparent;
     }
 
     &.multiselect--active > .multiselect__tags {
-      @apply outline-n-blue-border;
+      @apply border-woot-500 dark:border-woot-500;
     }
   }
 }
@@ -183,7 +179,7 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
   }
 
   .multiselect__input {
@@ -191,7 +187,7 @@
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
   }
 
   .multiselect__placeholder {
@@ -212,24 +208,6 @@
   }
 }
 
-.multiselect--disabled {
-  background-color: rgba(var(--black-alpha-2)) !important;
-
-  .multiselect__tags {
-    @apply hover:outline-n-weak;
-  }
-}
-
-.multiselect--active {
-  .multiselect__select::before {
-    @apply top-[62%];
-  }
-}
-
-.multiselect__select::before {
-  top: 60% !important;
-}
-
 .multiselect-wrap--medium {
   .multiselect__tags,
   .multiselect__input {
@@ -239,16 +217,16 @@
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 text-sm h-12 min-h-[3rem];
   }
 
   .multiselect__input {
     @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0 !important;
+    margin-bottom: 0px !important;
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
+    @apply items-center flex m-0 text-sm py-1 px-0.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900;
   }
 
   .multiselect__placeholder {

app/javascript/dashboard/assets/scss/super_admin/index.scss

@@ -6,209 +6,3 @@
 body {
   font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
-
-@layer base {
-  // FIXME: Use a common color file for all packs
-  // scss-lint:disable PropertySortOrder
-  :root {
-    --slate-1: 252 252 253;
-    --slate-2: 249 249 251;
-    --slate-3: 240 240 243;
-    --slate-4: 232 232 236;
-    --slate-5: 224 225 230;
-    --slate-6: 217 217 224;
-    --slate-7: 205 206 214;
-    --slate-8: 185 187 198;
-    --slate-9: 139 141 152;
-    --slate-10: 128 131 141;
-    --slate-11: 96 100 108;
-    --slate-12: 28 32 36;
-
-    --iris-1: 253 253 255;
-    --iris-2: 248 248 255;
-    --iris-3: 240 241 254;
-    --iris-4: 230 231 255;
-    --iris-5: 218 220 255;
-    --iris-6: 203 205 255;
-    --iris-7: 184 186 248;
-    --iris-8: 155 158 240;
-    --iris-9: 91 91 214;
-    --iris-10: 81 81 205;
-    --iris-11: 87 83 198;
-    --iris-12: 39 41 98;
-
-    --ruby-1: 255 252 253;
-    --ruby-2: 255 247 248;
-    --ruby-3: 254 234 237;
-    --ruby-4: 255 220 225;
-    --ruby-5: 255 206 214;
-    --ruby-6: 248 191 200;
-    --ruby-7: 239 172 184;
-    --ruby-8: 229 146 163;
-    --ruby-9: 229 70 102;
-    --ruby-10: 220 59 93;
-    --ruby-11: 202 36 77;
-    --ruby-12: 100 23 43;
-
-    --amber-1: 254 253 251;
-    --amber-2: 254 251 233;
-    --amber-3: 255 247 194;
-    --amber-4: 255 238 156;
-    --amber-5: 251 229 119;
-    --amber-6: 243 214 115;
-    --amber-7: 233 193 98;
-    --amber-8: 226 163 54;
-    --amber-9: 255 197 61;
-    --amber-10: 255 186 24;
-    --amber-11: 171 100 0;
-    --amber-12: 79 52 34;
-
-    --teal-1: 250 254 253;
-    --teal-2: 243 251 249;
-    --teal-3: 224 248 243;
-    --teal-4: 204 243 234;
-    --teal-5: 184 234 224;
-    --teal-6: 161 222 210;
-    --teal-7: 131 205 193;
-    --teal-8: 83 185 171;
-    --teal-9: 18 165 148;
-    --teal-10: 13 155 138;
-    --teal-11: 0 133 115;
-    --teal-12: 13 61 56;
-
-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
-    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
-    --border-weak: 234 234 234;
-    --solid-1: 255 255 255;
-    --solid-2: 255 255 255;
-    --solid-3: 255 255 255;
-    --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
-    --solid-blue: 218 236 255;
-    --solid-iris: 230 231 255;
-
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
-    --alpha-3: 255, 255, 255, 0.96;
-    --black-alpha-1: 0, 0, 0, 0.12;
-    --black-alpha-2: 0, 0, 0, 0.04;
-    --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.8;
-  }
-
-  .dark {
-    --slate-1: 17 17 19;
-    --slate-2: 24 25 27;
-    --slate-3: 33 34 37;
-    --slate-4: 39 42 45;
-    --slate-5: 46 49 53;
-    --slate-6: 54 58 63;
-    --slate-7: 67 72 78;
-    --slate-8: 90 97 105;
-    --slate-9: 105 110 119;
-    --slate-10: 119 123 132;
-    --slate-11: 176 180 186;
-    --slate-12: 237 238 240;
-
-    --iris-1: 19 19 30;
-    --iris-2: 23 22 37;
-    --iris-3: 32 34 72;
-    --iris-4: 38 42 101;
-    --iris-5: 48 51 116;
-    --iris-6: 61 62 130;
-    --iris-7: 74 74 149;
-    --iris-8: 89 88 177;
-    --iris-9: 91 91 214;
-    --iris-10: 84 114 228;
-    --iris-11: 158 177 255;
-    --iris-12: 224 223 254;
-
-    --ruby-1: 25 17 19;
-    --ruby-2: 30 21 23;
-    --ruby-3: 58 20 30;
-    --ruby-4: 78 19 37;
-    --ruby-5: 94 26 46;
-    --ruby-6: 111 37 57;
-    --ruby-7: 136 52 71;
-    --ruby-8: 179 68 90;
-    --ruby-9: 229 70 102;
-    --ruby-10: 236 90 114;
-    --ruby-11: 255 148 157;
-    --ruby-12: 254 210 225;
-
-    --amber-1: 22 18 12;
-    --amber-2: 29 24 15;
-    --amber-3: 48 32 8;
-    --amber-4: 63 39 0;
-    --amber-5: 77 48 0;
-    --amber-6: 92 61 5;
-    --amber-7: 113 79 25;
-    --amber-8: 143 100 36;
-    --amber-9: 255 197 61;
-    --amber-10: 255 214 10;
-    --amber-11: 255 202 22;
-    --amber-12: 255 231 179;
-
-    --teal-1: 13 21 20;
-    --teal-2: 17 28 27;
-    --teal-3: 13 45 42;
-    --teal-4: 2 59 55;
-    --teal-5: 8 72 67;
-    --teal-6: 20 87 80;
-    --teal-7: 28 105 97;
-    --teal-8: 32 126 115;
-    --teal-9: 18 165 148;
-    --teal-10: 14 179 158;
-    --teal-11: 11 216 182;
-    --teal-12: 173 240 221;
-
-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
-    --solid-1: 23 23 26;
-    --solid-2: 29 30 36;
-    --solid-3: 44 45 54;
-    --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
-    --solid-iris: 38 42 101;
-    --text-blue: 126 182 255;
-
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
-    --black-alpha-1: 0, 0, 0, 0.3;
-    --black-alpha-2: 0, 0, 0, 0.2;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
-  }
-}

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

@@ -1,22 +1,22 @@
 // scss-lint:disable QualifyingElement
 
 // Base typography
-// -------------------------
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  @apply font-medium text-n-slate-12;
+  @apply font-medium text-slate-800 dark:text-slate-50;
 }
 
 p {
   text-rendering: optimizeLegibility;
+
   @apply mb-2 leading-[1.65] text-sm;
 
   a {
-    @apply text-n-brand dark:text-n-brand cursor-pointer;
+    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
   }
 }
 
@@ -41,82 +41,64 @@ dl:not(.reset-base) {
 }
 
 // Form elements
-// -------------------------
 label {
-  @apply text-n-slate-12 block m-0 leading-7 text-sm font-medium;
+  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
+
+  &.error {
+    input {
+      @apply mb-1;
+    }
+  }
 }
 
 .input-wrap,
 .help-text {
-  @apply text-n-slate-11 text-sm font-medium;
+  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
+
+  .help-text {
+    @apply font-normal text-slate-600 dark:text-slate-400;
+  }
 }
 
 // Focus outline removal
 .button,
-textarea {
+textarea,
+input:focus {
   outline: none;
 }
 
-// Field base styles (Input, TextArea, Select)
-@layer components {
-  .field-base {
-    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
-  }
-
-  .field-disabled {
-    @apply opacity-50 outline-n-weak dark:outline-n-weak cursor-not-allowed;
-  }
-
-  .field-error {
-    @apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
-  }
-}
-
-$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";
-
-#{$form-input-selector} {
-  @apply field-base h-10;
+// Inputs
+input[type='text']:not(.reset-base),
+input[type='number']:not(.reset-base),
+input[type='password']:not(.reset-base),
+input[type='date']:not(.reset-base),
+input[type='email']:not(.reset-base),
+input[type='url']:not(.reset-base) {
+  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 
   &[disabled] {
-    @apply field-disabled;
-  }
-
-  &.error {
-    @apply field-error mb-1;
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
   }
 }
 
-input[type='file']:not(.multiselect__input) {
-  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
+input[type='file'] {
+  @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4;
 }
 
 // Select
 select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-position: right -1rem center;
   background-size: 9px 6px;
-
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
-
-  &[disabled] {
-    @apply field-disabled;
-  }
+  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 }
 
 // Textarea
 textarea {
-  @apply field-base h-16;
+  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-16 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 
   &[disabled] {
-    @apply field-disabled;
-  }
-}
-
-// Add mb-1 when .help-text exists within the same label container
-label:has(.help-text) {
-  input,
-  textarea,
-  select {
-    margin-bottom: 0.25rem !important;
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
   }
 }
 
@@ -127,41 +109,18 @@ label:has(.help-text) {
   }
 }
 
-// FormKit support
-.formkit-outer[data-invalid='true'] {
-  #{$form-input-selector},
-  textarea,
-  select {
-    @apply field-error;
-  }
-
-  .formkit-message {
-    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
-  }
-}
-
 .error {
-  #{$form-input-selector},
+  input,
   input:not([type]),
   textarea,
   select,
   .multiselect > .multiselect__tags,
   .multiselect:not(.no-margin) {
-    @apply field-error;
-  }
-
-  // Only add mb-1 when .message exists within the same .error container
-  // And exclude no-margin from the margin-bottom
-  &:has(.message) {
-    input:not(.no-margin),
-    textarea,
-    select {
-      margin-bottom: 0.25rem !important;
-    }
+    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
   }
 
   .message {
-    @apply text-n-ruby-9 dark:text-n-ruby-9 block text-sm mb-2.5 w-full;
+    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
   }
 }
 
@@ -171,7 +130,7 @@ label:has(.help-text) {
   }
 
   .error {
-    @apply text-n-ruby-9 dark:text-n-ruby-9;
+    @apply border-red-400 dark:border-red-400;
   }
 }
 
@@ -182,16 +141,11 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12 rounded-lg p-5;
+    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
-      @apply text-n-ruby-9 dark:text-n-ruby-9;
-    }
-
-    .hljs-name,
-    .hljs-tag {
-      @apply text-n-slate-11;
+      @apply text-red-800 dark:text-red-400;
     }
   }
 }

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

@@ -42,7 +42,7 @@ button {
     }
   }
 
-  &:hover:not(:disabled):not(.success):not(.alert):not(.warning):not(
+  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
       .clear
     ):not(.smooth):not(.hollow) {
     @apply bg-n-brand/80 dark:bg-n-brand/80;
@@ -117,63 +117,63 @@ button {
   }
 
   &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:enabled:bg-n-brand/20;
+    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
 
     &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:enabled:bg-n-slate-5;
+      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:enabled:bg-n-teal-5;
+      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:enabled:bg-n-ruby-5;
+      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:enabled:bg-n-amber-5;
+      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:enabled:bg-n-brand/20 dark:hover:enabled:bg-n-brand/40;
+    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
 
     &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:enabled:text-n-slate-11 hover:enabled:bg-n-slate-5;
+      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
     }
 
     &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:enabled:text-n-teal-11 hover:enabled:bg-n-teal-5;
+      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
     }
 
     &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-5;
+      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
     }
 
     &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:enabled:text-n-amber-11 hover:enabled:bg-n-amber-5;
+      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
     }
   }
 
   &.clear {
-    @apply text-n-blue-text hover:enabled:bg-n-brand/10 dark:hover:enabled:bg-n-brand/30;
+    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
 
     &.secondary {
-      @apply text-n-slate-12 hover:enabled:bg-n-slate-4;
+      @apply text-n-slate-12 hover:bg-n-slate-4;
     }
 
     &.success {
-      @apply text-n-teal-10 hover:enabled:bg-n-teal-4;
+      @apply text-n-teal-10 hover:bg-n-teal-4;
     }
 
     &.alert {
-      @apply text-n-ruby-11 hover:enabled:bg-n-ruby-4;
+      @apply text-n-ruby-11 hover:bg-n-ruby-4;
     }
 
     &.warning {
-      @apply text-n-amber-11 hover:enabled:bg-n-amber-4;
+      @apply text-n-amber-11 hover:bg-n-amber-4;
     }
 
     &:active {

app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue

@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+      <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue

@@ -21,11 +21,11 @@ const addCampaign = async campaignDetails => {
       type: CAMPAIGN_TYPES.ONGOING,
     });
 
-    useAlert(t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.SUCCESS_MESSAGE'));
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
   } catch (error) {
     const errorMessage =
       error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE');
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
     useAlert(errorMessage);
   }
 };
@@ -40,7 +40,7 @@ const handleSubmit = campaignDetails => {
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue

@@ -39,7 +39,7 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}

app/javascript/dashboard/components-next/CardLayout.vue

@@ -4,10 +4,6 @@ defineProps({
     type: String,
     default: 'col',
   },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['click']);
@@ -22,11 +18,10 @@ const handleClick = () => {
     class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
     <div
-      class="flex w-full gap-3 py-5"
-      :class="[
-        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center',
-        selectable ? 'px-10 py-6' : 'px-6',
-      ]"
+      class="flex w-full gap-3 px-6 py-5"
+      :class="
+        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
+      "
       @click="handleClick"
     >
       <slot />

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

@@ -8,17 +8,17 @@ import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 const props = defineProps({
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
   selectedContact: {
     type: Object,
     default: () => ({}),
   },
-  isUpdating: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['goToContactsList', 'toggleBlock']);
+const emit = defineEmits(['goToContactsList']);
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -45,17 +45,9 @@ const breadcrumbItems = computed(() => {
   return items;
 });
 
-const isContactBlocked = computed(() => {
-  return props.selectedContact?.blocked;
-});
-
 const handleBreadcrumbClick = () => {
   emit('goToContactsList');
 };
-
-const toggleBlock = () => {
-  emit('toggleBlock', isContactBlocked.value);
-};
 </script>
 
 <template>
@@ -65,41 +57,23 @@ const toggleBlock = () => {
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
     >
-      <header class="sticky top-0 z-10 px-6 3xl:px-0">
-        <div class="w-full mx-auto max-w-[40.625rem]">
+      <header class="sticky top-0 z-10 px-6 xl:px-0">
+        <div class="w-full mx-auto max-w-[650px]">
           <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <div class="flex items-center gap-2">
-              <Button
-                :label="
-                  !isContactBlocked
-                    ? $t('CONTACTS_LAYOUT.HEADER.BLOCK_CONTACT')
-                    : $t('CONTACTS_LAYOUT.HEADER.UNBLOCK_CONTACT')
-                "
-                size="sm"
-                slate
-                :is-loading="isUpdating"
-                :disabled="isUpdating"
-                @click="toggleBlock"
-              />
-              <ComposeConversation :contact-id="contactId">
-                <template #trigger="{ toggle }">
-                  <Button
-                    :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
-                    size="sm"
-                    @click="toggle"
-                  />
-                </template>
-              </ComposeConversation>
-            </div>
+            <ComposeConversation :contact-id="contactId">
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
           </div>
         </div>
       </header>
-      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
+      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[650px]">
           <slot name="default" />
         </div>
       </main>
@@ -107,7 +81,7 @@ const toggleBlock = () => {
 
     <div
       v-if="slots.sidebar"
-      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactMergeForm.vue

@@ -50,7 +50,6 @@ const { t } = useI18n();
       </div>
       <ComboBox
         id="inbox"
-        use-api-results
         :model-value="primaryContactId"
         :options="primaryContactList"
         :empty-state="

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

@@ -247,9 +247,10 @@ defineExpose({
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"
             :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
                 !isDetailsView,
-              '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
+              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
+                isDetailsView,
             }"
             @update:model-value="handleCountrySelection"
           />
@@ -265,9 +266,7 @@ defineExpose({
             :placeholder="item.placeholder"
             :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView
-                ? '[&:not(.error,.focus)]:!outline-transparent'
-                : ''
+              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
             }`"
             class="w-full"
             @input="
@@ -304,7 +303,7 @@ defineExpose({
             v-model="
               state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
             "
-            class="w-auto min-w-[100px] text-sm bg-transparent outline-none reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
             :placeholder="item.placeholder"
             :size="item.placeholder.length"
             @input="emit('update', state)"

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

@@ -60,7 +60,7 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}

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

@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     :show-clear-button="!hasActiveSegments"
-    class="max-w-[60rem] px-6"
+    class="max-w-[960px] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />

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

@@ -72,7 +72,7 @@ const openFilter = () => {
         @clear-filters="emit('clearFilters')"
       />
       <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+        <div class="w-full mx-auto max-w-[960px]">
           <ContactsActiveFiltersPreview
             v-if="
               (hasAppliedFilters || !isNotSegmentView) &&

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -135,7 +135,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
           :placeholder="
             t('CONTACTS_LAYOUT.SIDEBAR.ATTRIBUTES.SEARCH_PLACEHOLDER')
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -22,7 +22,7 @@ defineProps({
     class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
-      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
     >
       <div
         class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto lg:px-6">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -96,7 +96,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto py-3 lg:px-6">
         <slot name="content" />
       </div>
     </main>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue

@@ -52,7 +52,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
   >
     <div class="flex items-center justify-between">
       <h3>
@@ -75,7 +75,7 @@ onMounted(() => {
       <div>
         <div class="flex justify-between w-full gap-4 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-n-slate-12"
+            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
           >
             {{
               t(
@@ -90,9 +90,9 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
               )
             "
-            class="w-[13.75rem]"
+            class="w-[220px]"
             custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[9.375rem]"
+            custom-text-area-class="max-h-[150px]"
             auto-height
             min-height="3rem"
           />
@@ -108,12 +108,12 @@ onMounted(() => {
             :label="
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
             "
-            custom-label-class="min-w-[7.5rem]"
+            custom-label-class="min-w-[120px]"
           />
         </div>
         <div class="flex justify-between w-full gap-3 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-n-slate-12"
+            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >
             {{
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
@@ -126,7 +126,7 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
               )
             "
-            class="w-[14rem]"
+            class="w-[224px]"
           />
         </div>
       </div>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue

@@ -90,7 +90,7 @@ const handleCategory = async formData => {
 
 <template>
   <div
-    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -201,7 +201,7 @@ defineExpose({ state, isSubmitDisabled });
                 color="slate"
                 size="sm"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue

@@ -95,7 +95,7 @@ defineExpose({ dialogRef });
         :placeholder="
           t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.COMBOBOX.PLACEHOLDER')
         "
-        class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
+        class="[&>div>button]:!border-n-slate-5 [&>div>button]:dark:!border-n-slate-5"
       />
     </div>
   </Dialog>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -303,7 +303,7 @@ const handleAvatarDelete = () => {
           :message="
             t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
           "
-          class="[&>div>button:not(.focused)]:!outline-n-weak"
+          class="[&>div>button]:!outline-n-weak"
         />
       </div>
       <div class="flex items-start justify-between w-full gap-2">

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -74,7 +74,7 @@ const handleDeletePortal = () => {
       </div>
       <div
         v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
+        class="flex flex-col w-full gap-4 max-w-[640px] pb-8"
       >
         <PortalBaseSettings
           :active-portal="activePortal"

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue

@@ -92,7 +92,7 @@ const redirectToPortalHomePage = () => {
 
 <template>
   <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
     <div
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -13,7 +13,6 @@ import {
   createNewContact,
   fetchContactableInboxes,
   processContactableInboxes,
-  mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
@@ -27,14 +26,8 @@ const props = defineProps({
     type: String,
     default: null,
   },
-  isModal: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['close']);
-
 const store = useStore();
 const { t } = useI18n();
 
@@ -54,7 +47,6 @@ const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const messageSignature = useMapGetter('getMessageSignature');
-const inboxesList = useMapGetter('inboxes/getInboxes');
 
 const sendWithSignature = computed(() =>
   fetchSignatureFlagFromUISettings(targetInbox.value?.channelType)
@@ -67,8 +59,6 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
-  if (props.isModal) return '';
-
   return props.alignPosition === 'right'
     ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
     : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
@@ -114,12 +104,7 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
     isFetchingInboxes.value = true;
     try {
       const contactableInboxes = await fetchContactableInboxes(contact.id);
-      // Merge the processed contactableInboxes with the inboxesList
-      selectedContact.value.contactInboxes = mergeInboxDetails(
-        contactableInboxes,
-        inboxesList.value
-      );
-
+      selectedContact.value.contactInboxes = contactableInboxes;
       isFetchingInboxes.value = false;
     } catch (error) {
       isFetchingInboxes.value = false;
@@ -139,14 +124,9 @@ const clearSelectedContact = () => {
 
 const closeCompose = () => {
   showComposeNewConversation.value = false;
-  if (!props.contactId) {
-    // If contactId is passed as prop
-    // Then don't allow to remove the selected contact
-    selectedContact.value = null;
-  }
+  selectedContact.value = null;
   targetInbox.value = null;
   resetContacts();
-  emit('close');
 };
 
 const createConversation = async ({ payload, isFromWhatsApp }) => {
@@ -182,12 +162,9 @@ watch(
   () => {
     if (activeContact.value && props.contactId) {
       const contactInboxes = activeContact.value?.contactInboxes || [];
-      // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(contactInboxes);
-      // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
         ...activeContact.value,
-        contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
+        contactInboxes: processContactableInboxes(contactInboxes),
       };
     }
   },
@@ -195,15 +172,7 @@ watch(
 );
 
 const handleClickOutside = () => {
-  if (!showComposeNewConversation.value) return;
-
   showComposeNewConversation.value = false;
-  emit('close');
-};
-
-const onModalBackdropClick = () => {
-  if (!props.isModal) return;
-  handleClickOutside();
 };
 
 onMounted(() => resetContacts());
@@ -226,7 +195,7 @@ useKeyboardEvents(keyboardEvents);
     v-on-click-outside="[
       handleClickOutside,
       // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open
+      // This will prevent closing the compose conversation modal when the editor Create link popup is open.
       { ignore: ['div.ProseMirror-prompt'] },
     ]"
     class="relative"
@@ -239,37 +208,29 @@ useKeyboardEvents(keyboardEvents);
       :is-open="showComposeNewConversation"
       :toggle="toggle"
     />
-    <div
+    <ComposeNewConversationForm
       v-if="showComposeNewConversation"
-      :class="{
-        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          isModal,
-      }"
-      @click.self="onModalBackdropClick"
-    >
-      <ComposeNewConversationForm
-        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
-        :contacts="contacts"
-        :contact-id="contactId"
-        :is-loading="isSearching"
-        :current-user="currentUser"
-        :selected-contact="selectedContact"
-        :target-inbox="targetInbox"
-        :is-creating-contact="isCreatingContact"
-        :is-fetching-inboxes="isFetchingInboxes"
-        :is-direct-uploads-enabled="directUploadsEnabled"
-        :contact-conversations-ui-flags="uiFlags"
-        :contacts-ui-flags="contactsUiFlags"
-        :message-signature="messageSignature"
-        :send-with-signature="sendWithSignature"
-        @search-contacts="onContactSearch"
-        @reset-contact-search="resetContacts"
-        @update-selected-contact="handleSelectedContact"
-        @update-target-inbox="handleTargetInbox"
-        @clear-selected-contact="clearSelectedContact"
-        @create-conversation="createConversation"
-        @discard="closeCompose"
-      />
-    </div>
+      :contacts="contacts"
+      :contact-id="contactId"
+      :is-loading="isSearching"
+      :current-user="currentUser"
+      :selected-contact="selectedContact"
+      :target-inbox="targetInbox"
+      :is-creating-contact="isCreatingContact"
+      :is-fetching-inboxes="isFetchingInboxes"
+      :is-direct-uploads-enabled="directUploadsEnabled"
+      :contact-conversations-ui-flags="uiFlags"
+      :contacts-ui-flags="contactsUiFlags"
+      :class="composePopoverClass"
+      :message-signature="messageSignature"
+      :send-with-signature="sendWithSignature"
+      @search-contacts="onContactSearch"
+      @reset-contact-search="resetContacts"
+      @update-selected-contact="handleSelectedContact"
+      @update-target-inbox="handleTargetInbox"
+      @clear-selected-contact="clearSelectedContact"
+      @create-conversation="createConversation"
+      @discard="closeCompose"
+    />
   </div>
 </template>

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -77,7 +77,7 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
-// Added this watch to dynamically set signature on target inbox change.
+// Added this watch to dynamically set signature.
 // Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
 // Set the signature only if the inbox based flag is true
 watch(
@@ -86,8 +86,7 @@ watch(
     nextTick(() => {
       if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
     });
-  },
-  { immediate: true }
+  }
 );
 
 const onClickInsertEmoji = emoji => {
@@ -148,7 +147,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
+    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
   >
     <div class="flex items-center gap-2">
       <WhatsAppOptions
@@ -232,20 +231,4 @@ useKeyboardEvents(keyboardEvents);
 .emoji-dialog::before {
   @apply hidden;
 }
-
-// The <label> tag inside the file-upload component overlaps the button due to its position.
-// This causes the button's hover state to not work, as it's positioned below the label (z-index).
-// Increasing the button's z-index would break the file upload functionality.
-// This style ensures the label remains clickable while preserving the button's hover effect.
-:deep() {
-  .file-uploads.file-uploads-html5 {
-    label {
-      @apply hover:cursor-pointer;
-    }
-
-    &:hover button {
-      @apply dark:bg-n-solid-2 bg-n-alpha-2;
-    }
-  }
-}
 </style>

app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue

@@ -47,10 +47,10 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredImageAttachments"
         :key="attachment.id"
-        class="relative group/image w-[4.5rem] h-[4.5rem]"
+        class="relative group/image w-[72px] h-[72px]"
       >
         <img
-          class="object-cover w-[4.5rem] h-[4.5rem] rounded-lg"
+          class="object-cover w-[72px] h-[72px] rounded-lg"
           :src="attachment.thumb"
         />
         <Button
@@ -69,7 +69,7 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredNonImageAttachments"
         :key="attachment.id"
-        class="max-w-[18.75rem] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
       >
         <span class="text-sm font-medium text-n-slate-11">
           {{ fileNameWithEllipsis(attachment.resource) }}

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"

app/javascript/dashboard/components-next/NewConversation/components/ContactSelector.vue

@@ -113,8 +113,7 @@ const handleInput = value => {
       </div>
       <div
         v-else-if="selectedContact"
-        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 min-h-7 min-w-0"
-        :class="!contactId ? 'ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1' : 'px-3'"
+        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-3 min-h-7 min-w-0"
       >
         <span class="text-sm truncate text-n-slate-12">
           {{
@@ -124,7 +123,6 @@ const handleInput = value => {
           }}
         </span>
         <Button
-          v-if="!contactId"
           variant="ghost"
           icon="i-lucide-x"
           color="slate"

app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue

@@ -52,7 +52,7 @@ const targetInboxLabel = computed(() => {
     </label>
     <div
       v-if="targetInbox"
-      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 h-7 min-w-0"
+      class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate px-3 h-7 min-w-0"
     >
       <span class="text-sm truncate text-n-slate-12">
         {{ targetInboxLabel }}

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -84,7 +84,7 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[350px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
         <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
@@ -96,7 +96,7 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue

@@ -106,7 +106,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    class="absolute top-full mt-1.5 max-h-[500px] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[460px] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
   >
     <span class="text-sm text-n-slate-12">
       {{

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -87,21 +87,6 @@ export const processContactableInboxes = inboxes => {
   }));
 };
 
-export const mergeInboxDetails = (inboxesData, inboxesList = []) => {
-  if (!inboxesData || !inboxesData.length) {
-    return [];
-  }
-
-  return inboxesData.map(inboxData => {
-    const matchingInbox =
-      inboxesList.find(inbox => inbox.id === inboxData.id) || {};
-    return {
-      ...camelcaseKeys(matchingInbox, { deep: true }),
-      ...inboxData,
-    };
-  });
-};
-
 export const prepareAttachmentPayload = (
   attachedFiles,
   directUploadsEnabled

app/javascript/dashboard/components-next/NewConversation/helpers/specs/composeConversationHelper.spec.js

@@ -110,153 +110,6 @@ describe('composeConversationHelper', () => {
     });
   });
 
-  describe('mergeInboxDetails', () => {
-    it('returns empty array if inboxesData is empty or null', () => {
-      expect(helpers.mergeInboxDetails(null)).toEqual([]);
-      expect(helpers.mergeInboxDetails([])).toEqual([]);
-      expect(helpers.mergeInboxDetails(undefined)).toEqual([]);
-    });
-
-    it('merges inbox data with matching inboxes from the list', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1' },
-        { id: 2, sourceId: 'source2' },
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-          channel_id: 10,
-          phone_number: null,
-        },
-        {
-          id: 2,
-          name: 'Inbox 2',
-          channel_type: 'Channel::Whatsapp',
-          channel_id: 20,
-          phone_number: '+1234567890',
-        },
-        {
-          id: 3,
-          name: 'Inbox 3',
-          channel_type: 'Channel::Api',
-          channel_id: 30,
-          phone_number: null,
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result.length).toBe(2);
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-        channelId: 10,
-        phoneNumber: null,
-      });
-
-      expect(result[1]).toMatchObject({
-        id: 2,
-        sourceId: 'source2',
-        name: 'Inbox 2',
-        channelType: 'Channel::Whatsapp',
-        channelId: 20,
-        phoneNumber: '+1234567890',
-      });
-    });
-
-    it('handles inboxes not found in the list', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1' },
-        { id: 99, sourceId: 'source99' }, // This doesn't exist in inboxesList
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result.length).toBe(2);
-
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-      });
-
-      expect(result[1]).toMatchObject({
-        id: 99,
-        sourceId: 'source99',
-      });
-
-      expect(result[1].name).toBeUndefined();
-      expect(result[1].channelType).toBeUndefined();
-    });
-
-    it('camelcases properties from inboxesList', () => {
-      const inboxesData = [{ id: 1, sourceId: 'source1' }];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-          avatar_url: 'https://example.com/avatar.png',
-          working_hours: [
-            {
-              day_of_week: 1,
-              closed_all_day: false,
-            },
-          ],
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-        avatarUrl: 'https://example.com/avatar.png',
-      });
-
-      expect(result[0].workingHours[0]).toMatchObject({
-        dayOfWeek: 1,
-        closedAllDay: false,
-      });
-    });
-
-    it('preserves original properties when they conflict with inboxesList', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1', name: 'Original Name' },
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'List Name',
-          channel_type: 'Channel::Email',
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result[0].name).toBe('Original Name');
-      expect(result[0].channelType).toBe('Channel::Email');
-    });
-  });
-
   describe('prepareAttachmentPayload', () => {
     it('prepares direct upload files', () => {
       const files = [{ blobSignedId: 'signed1' }];

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -30,11 +30,11 @@ const bannerClass = computed(() => {
 
 const buttonClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-4 hover:bg-n-slate-5 text-n-slate-11',
-    amber: 'bg-n-amber-4 hover:bg-n-amber-5 text-n-amber-11',
-    teal: 'bg-n-teal-4 hover:bg-n-teal-5 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 hover:bg-n-ruby-5 text-n-ruby-11',
-    blue: 'bg-n-blue-4 hover:bg-n-blue-5 text-n-blue-11',
+    slate: 'bg-n-slate-4 text-n-slate-11',
+    amber: 'bg-n-amber-4 text-n-amber-11',
+    teal: 'bg-n-teal-4 text-n-teal-11',
+    ruby: 'bg-n-ruby-4 text-n-ruby-11',
+    blue: 'bg-n-blue-4 text-n-blue-11',
   };
 
   return classMap[props.color];

app/javascript/dashboard/components-next/button/Button.vue

@@ -99,58 +99,45 @@ const computedJustify = computed(() => {
 const STYLE_CONFIG = {
   colors: {
     blue: {
-      solid:
-        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
+      solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-text outline-n-brand',
-      ghost:
-        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text outline-n-blue-border',
+      ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
-      solid:
-        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 focus-visible:bg-n-ruby-10 outline-transparent',
+      solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 focus-visible:bg-n-ruby-9/20 outline-transparent',
-      outline:
-        'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8',
-      ghost:
-        'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
-      solid:
-        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 focus-visible:bg-n-amber-10 outline-transparent',
+      solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent',
       faded:
-        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 focus-visible:bg-n-amber-9/20 outline-transparent',
-      outline:
-        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 focus-visible:bg-n-amber-9/10 outline-n-amber-9',
-      link: 'text-n-amber-9 hover:enabled:underline focus-visible:underline outline-transparent',
-      ghost:
-        'text-n-amber-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+        'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
+      outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:underline outline-transparent',
+      ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
-        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
-      outline:
-        'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10 focus-visible:bg-n-slate-9/10',
-      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 focus-visible:text-n-slate-12 hover:enabled:underline focus-visible:underline outline-transparent',
-      ghost:
-        'text-n-slate-12 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+        'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
+      outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+      ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
     },
     teal: {
-      solid:
-        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 focus-visible:bg-n-teal-10 outline-transparent',
+      solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
       faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 focus-visible:bg-n-teal-9/20 outline-transparent',
-      outline:
-        'text-n-teal-11 hover:enabled:bg-n-teal-9/10 focus-visible:bg-n-teal-9/10 outline-n-teal-9',
-      link: 'text-n-teal-9 hover:enabled:underline focus-visible:underline outline-transparent',
-      ghost:
-        'text-n-teal-9 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+        'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
+      outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:underline outline-transparent',
+      ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
@@ -184,7 +171,7 @@ const STYLE_CONFIG = {
     center: 'justify-center',
     end: 'justify-end',
   },
-  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:opacity-50',
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { computed } from 'vue';
-import { usePolicy } from 'dashboard/composables/usePolicy';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Policy from 'dashboard/components/policy.vue';
 
-const props = defineProps({
+const { featureFlag } = defineProps({
   currentPage: {
     type: Number,
     default: 1,
@@ -50,10 +50,10 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
-const { shouldShowPaywall } = usePolicy();
+const { isCloudFeatureEnabled } = useAccount();
 
 const showPaywall = computed(() => {
-  return shouldShowPaywall(props.featureFlag);
+  return !isCloudFeatureEnabled(featureFlag);
 });
 
 const handleButtonClick = () => {
@@ -68,22 +68,14 @@ const handlePageChange = event => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
-          <div class="flex gap-4 items-center">
-            <slot name="headerTitle">
-              <span class="text-xl font-medium text-n-slate-12">
-                {{ headerTitle }}
-              </span>
-            </slot>
-            <div v-if="!isEmpty" class="flex items-center gap-2">
-              <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
-              <slot name="knowMore" />
-            </div>
-          </div>
-
+          <span class="text-xl font-medium text-n-slate-12">
+            {{ headerTitle }}
+            <slot name="headerTitle" />
+          </span>
           <div
             v-if="!showPaywall"
             v-on-clickaway="() => emit('close')"
@@ -104,8 +96,8 @@ const handlePageChange = event => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
-        <slot v-if="!showPaywall" name="controls" />
+      <div class="w-full max-w-[960px] mx-auto py-4">
+        <slot name="controls" />
         <div
           v-if="isFetching"
           class="flex items-center justify-center py-10 text-n-slate-11"

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

@@ -7,7 +7,6 @@ import { dynamicTime } from 'shared/helpers/timeHelper';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
@@ -47,27 +46,14 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
+const emit = defineEmits(['action', 'navigate']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const modelValue = computed({
-  get: () => props.isSelected,
-  set: () => emit('select', props.id),
-});
-
 const statusAction = computed(() => {
   if (props.status === 'pending') {
     return [
@@ -116,17 +102,8 @@ const handleDocumentableClick = () => {
 </script>
 
 <template>
-  <CardLayout
-    selectable
-    class="relative"
-    :class="{ 'rounded-md': compact }"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
-      <Checkbox v-model="modelValue" />
-    </div>
-    <div class="flex relative justify-between w-full gap-1">
+  <CardLayout :class="{ 'rounded-md': compact }">
+    <div class="flex justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ question }}
       </span>
@@ -171,7 +148,7 @@ const handleDocumentableClick = () => {
             v-if="documentable.type === 'Captain::Document'"
             class="inline-flex items-center gap-1 truncate over"
           >
-            <i class="i-ph-files-light text-base" />
+            <i class="i-ph-chat-circle-dots text-base" />
             <span class="max-w-96 truncate" :title="documentable.name">
               {{ documentable.name }}
             </span>

app/javascript/dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue

@@ -1,59 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  bulkIds: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['deleteSuccess']);
-
-const { t } = useI18n();
-const store = useStore();
-const bulkDeleteDialogRef = ref(null);
-const i18nKey = computed(() => props.type.toUpperCase());
-
-const handleBulkDelete = async ids => {
-  if (!ids) return;
-
-  try {
-    await store.dispatch(
-      'captainBulkActions/handleBulkDelete',
-      Array.from(props.bulkIds)
-    );
-
-    emit('deleteSuccess');
-    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.SUCCESS_MESSAGE`));
-  } catch (error) {
-    useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.ERROR_MESSAGE`));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  await handleBulkDelete(Array.from(props.bulkIds));
-  bulkDeleteDialogRef.value?.close();
-};
-
-defineExpose({ dialogRef: bulkDeleteDialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="bulkDeleteDialogRef"
-    type="alert"
-    :title="t(`CAPTAIN.${i18nKey}.BULK_DELETE.TITLE`)"
-    :description="t(`CAPTAIN.${i18nKey}.BULK_DELETE.DESCRIPTION`)"
-    :confirm-button-label="t(`CAPTAIN.${i18nKey}.BULK_DELETE.CONFIRM`)"
-    @confirm="handleDialogConfirm"
-  />
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue

@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[960px] mx-auto h-full max-h-[448px] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue

@@ -2,7 +2,6 @@
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
-import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
@@ -13,14 +12,6 @@ const onClick = () => {
 </script>
 
 <template>
-  <FeatureSpotlight
-    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
-    :note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
-    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
-    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
-    learn-more-url="https://chwt.app/captain-assistant"
-    class="mb-8"
-  />
   <EmptyStateLayout
     :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
     :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"