refactor: expose replaceRoute directly

This reverts commit a0153daca4.

.circleci/config.yml

@@ -1,87 +1,84 @@
-version: 2.1
+# Ruby CircleCI 2.0 configuration file
-orbs:
+#
-  node: circleci/node@6.1.0
+# Check https://circleci.com/docs/2.0/language-ruby/ for more details
-
+#
+version: 2
 defaults: &defaults
   working_directory: ~/build
-  machine:
+  docker:
-    image: ubuntu-2204:2024.05.1
+    # specify the version you desire here
-  resource_class: large
+    - image: cimg/ruby:3.3.3-browsers
+
+    # Specify service dependencies here if necessary
+    # CircleCI maintains a library of pre-built images
+    # documented at https://circleci.com/docs/2.0/circleci-images/
+    - image: cimg/postgres:15.3
+    - image: cimg/redis:6.2.6
   environment:
-    RAILS_LOG_TO_STDOUT: false
+    - RAILS_LOG_TO_STDOUT: false
-    COVERAGE: true
+    - COVERAGE: true
-    LOG_LEVEL: warn
+    - LOG_LEVEL: warn
   parallelism: 4
+  resource_class: large
 
 jobs:
   build:
     <<: *defaults
     steps:
       - checkout
-      - node/install:
-          node-version: '20.12'
-      - node/install-pnpm
-      - node/install-packages:
-          pkg-manager: pnpm
-          override-ci-command: pnpm i
-      - run: node --version
-      - run: pnpm --version
 
       - run:
-          name: Install System Dependencies
+          name: Configure Bundler
           command: |
-            sudo apt-get update
+            echo 'export BUNDLER_VERSION=$(cat Gemfile.lock | tail -1 | tr -d " ")' >> $BASH_ENV
-            DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
+            source $BASH_ENV
-              libpq-dev \
-              redis-server \
-              postgresql \
-              build-essential \
-              git \
-              curl \
-              libssl-dev \
-              zlib1g-dev \
-              libreadline-dev \
-              libyaml-dev \
-              openjdk-11-jdk \
-              jq \
-              software-properties-common \
-              ca-certificates \
-              imagemagick \
-              libxml2-dev \
-              libxslt1-dev \
-              file \
-              g++ \
-              gcc \
-              autoconf \
-              gnupg2 \
-              patch \
-              ruby-dev \
-              liblzma-dev \
-              libgmp-dev \
-              libncurses5-dev \
-              libffi-dev \
-              libgdbm6 \
-              libgdbm-dev \
-              libvips
-
-      - run:
-          name: Install RVM and Ruby 3.3.3
-          command: |
-            sudo apt-get install -y gpg
-            gpg --keyserver hkp://keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
-            \curl -sSL https://get.rvm.io | bash -s stable
-            echo 'source ~/.rvm/scripts/rvm' >> $BASH_ENV
-            source ~/.rvm/scripts/rvm
-            rvm install "3.3.3"
-            rvm use 3.3.3 --default
             gem install bundler
 
       - run:
-          name: Install Application Dependencies
+          name: Which bundler?
+          command: bundle -v
+
+      - run:
+          name: Swap node versions
           command: |
-            source ~/.rvm/scripts/rvm
+            set +e
-            bundle install
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
-            # pnpm install
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v20
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
+
+      # Run bundler
+      # Load installed gems from cache if possible, bundle install then save cache
+      # Multiple caches are used to increase the chance of a cache hit
+
+      - restore_cache:
+          keys:
+            - chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
+
+      - run: bundle install --frozen --path ~/.bundle
+      - save_cache:
+          paths:
+            - ~/.bundle
+          key: chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
+
+      # Only necessary if app uses webpacker or yarn in some other way
+      - restore_cache:
+          keys:
+            - chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
+            - chatwoot-yarn-
+
+      - run:
+          name: yarn
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+
+      # Store yarn / webpacker cache
+      - save_cache:
+          key: chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
 
       - run:
           name: Download cc-test-reporter
@@ -89,8 +86,12 @@ jobs:
             mkdir -p ~/tmp
             curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
             chmod +x ~/tmp/cc-test-reporter
+      - persist_to_workspace:
+          root: ~/tmp
+          paths:
+            - cc-test-reporter
 
-      # Swagger verification
+      # verify swagger specification
       - run:
           name: Verify swagger API specification
           command: |
@@ -103,62 +104,45 @@ jobs:
             curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
             java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
 
-      # we remove the FRONTED_URL from the .env before running the tests
-      - run:
-          name: Database Setup and Configure Environment Variables
-          command: |
-            pg_pass=$(head /dev/urandom | tr -dc A-Za-z0-9 | head -c 15 ; echo '')
-            sed -i "s/REPLACE_WITH_PASSWORD/${pg_pass}/g" ${PWD}/.circleci/setup_chatwoot.sql
-            chmod 644 ${PWD}/.circleci/setup_chatwoot.sql
-            mv ${PWD}/.circleci/setup_chatwoot.sql /tmp/
-            sudo -i -u postgres psql -f /tmp/setup_chatwoot.sql
-            cp .env.example .env
-            sed -i '/^FRONTEND_URL/d' .env
-            sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
-            sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
-            sed -i -e '/POSTGRES_USERNAME/ s/=.*/=chatwoot/' .env
-            sed -i -e "/POSTGRES_PASSWORD/ s/=.*/=$pg_pass/" .env
-            echo -en "\nINSTALLATION_ENV=circleci" >> ".env"
-
       # Database setup
-      - run:
+      - run: bundle exec rake db:create
-          name: Run DB migrations
+      - run: bundle exec rake db:schema:load
-          command: bundle exec rails db:chatwoot_prepare
 
-      # Bundle audit
       - run:
           name: Bundle audit
           command: bundle exec bundle audit update && bundle exec bundle audit check -v
 
-      # Rubocop linting
       - run:
           name: Rubocop
           command: bundle exec rubocop
 
-      # ESLint linting
+      # - run:
+      #     name: Brakeman
+      #     command: bundle exec brakeman
+
       - run:
           name: eslint
-          command: pnpm run eslint
+          command: yarn run eslint
 
+      # Run frontend tests
       - run:
           name: Run frontend tests
           command: |
-            mkdir -p ~/build/coverage/frontend
+            mkdir -p ~/tmp/test-results/frontend_specs
             ~/tmp/cc-test-reporter before-build
-            pnpm run test:coverage
+            yarn test:coverage
-
       - run:
-          name: Code Climate Test Coverage (Frontend)
+          name: Code Climate Test Coverage
           command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
 
-      # Run backend tests
+      # Run rails tests
       - run:
           name: Run backend tests
           command: |
             mkdir -p ~/tmp/test-results/rspec
             mkdir -p ~/tmp/test-artifacts
-            mkdir -p ~/build/coverage/backend
+            mkdir -p coverage
             ~/tmp/cc-test-reporter before-build
             TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
             bundle exec rspec --format progress \
@@ -166,18 +150,54 @@ jobs:
                               --out ~/tmp/test-results/rspec.xml \
                               -- ${TESTFILES}
           no_output_timeout: 30m
-
       - run:
-          name: Code Climate Test Coverage (Backend)
+          name: Code Climate Test Coverage
           command: |
-            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "coverage/codeclimate.$CIRCLE_NODE_INDEX.json"
-
-      - run:
-          name: List coverage directory contents
-          command: |
-            ls -R ~/build/coverage
 
       - persist_to_workspace:
-          root: ~/build
+          root: coverage
           paths:
-            - coverage
+            - codeclimate.*.json
+      # collect reports
+      - store_test_results:
+          path: ~/tmp/test-results
+      - store_artifacts:
+          path: ~/tmp/test-artifacts
+      - store_artifacts:
+          path: log
+
+  upload-coverage:
+    working_directory: ~/build
+    docker:
+      # specify the version you desire here
+      - image: circleci/ruby:3.0.2-node-browsers
+    environment:
+      - CC_TEST_REPORTER_ID: caf26a895e937974a90860cfadfded20891cfd1373a5aaafb3f67406ab9d433f
+    steps:
+      - attach_workspace:
+          at: ~/build
+      - run:
+          name: Download cc-test-reporter
+          command: |
+            mkdir -p ~/tmp
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
+            chmod +x ~/tmp/cc-test-reporter
+      - persist_to_workspace:
+          root: ~/tmp
+          paths:
+            - cc-test-reporter
+      - run:
+          name: Upload coverage results to Code Climate
+          command: |
+            ~/tmp/cc-test-reporter sum-coverage --output - codeclimate.*.json |  ~/tmp/cc-test-reporter upload-coverage --debug --input -
+
+workflows:
+  version: 2
+
+  commit:
+    jobs:
+      - build
+      - upload-coverage:
+          requires:
+            - build

.circleci/setup_chatwoot.sql

@@ -1,11 +0,0 @@
-CREATE USER chatwoot CREATEDB;
-ALTER USER chatwoot PASSWORD 'REPLACE_WITH_PASSWORD';
-ALTER ROLE chatwoot SUPERUSER;
-
-UPDATE pg_database SET datistemplate = FALSE WHERE datname = 'template1';
-DROP DATABASE template1;
-CREATE DATABASE template1 WITH TEMPLATE = template0 ENCODING = 'UNICODE';
-UPDATE pg_database SET datistemplate = TRUE WHERE datname = 'template1';
-
-\c template1;
-VACUUM FREEZE;

.codeclimate.yml

@@ -27,8 +27,7 @@ checks:
       threshold: 50
 exclude_patterns:
   - 'spec/'
-  - '**/specs/**/**'
+  - '**/specs/'
-  - '**/spec/**/**'
   - 'db/*'
   - 'bin/**/*'
   - 'db/**/*'
@@ -57,5 +56,3 @@ exclude_patterns:
   - 'app/javascript/shared/constants/locales.js'
   - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
   - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
-  - '**/fixtures/**'
-  - '**/*/fixtures.js'

.eslintrc.js

@@ -2,36 +2,16 @@ module.exports = {
   extends: [
     'airbnb-base/legacy',
     'prettier',
-    'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended',
-    'plugin:vitest-globals/recommended',
+    'plugin:storybook/recommended',
+    'plugin:cypress/recommended',
   ],
-  overrides: [
-    {
-      files: ['**/*.spec.{j,t}s?(x)'],
-      env: {
-        'vitest-globals/env': true,
-      },
-    },
-    {
-      files: ['**/*.story.vue'],
-      rules: {
-        'vue/no-undef-components': [
-          'error',
-          {
-            ignorePatterns: ['Variant', 'Story'],
-          },
-        ],
-        // Story files can have static strings, it doesn't need to handle i18n always.
-        'vue/no-bare-strings-in-template': 'off',
-        'no-console': 'off',
-      },
-    },
-  ],
-  plugins: ['html', 'prettier'],
   parserOptions: {
-    ecmaVersion: 'latest',
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
+  plugins: ['html', 'prettier', 'babel'],
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',
@@ -230,6 +210,13 @@ module.exports = {
     'import/extensions': ['off'],
     'no-console': 'error',
   },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'config/webpack/resolve.js',
+      },
+    },
+  },
   env: {
     browser: true,
     node: true,

.github/workflows/frontend-fe.yml

@@ -1,43 +0,0 @@
-name: Frontend Lint & Test
-
-on:
-  push:
-    branches:
-      - develop
-  pull_request:
-    branches:
-      - develop
-
-jobs:
-  test:
-    runs-on: ubuntu-20.04
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-      - uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9.3.0
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install pnpm dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run eslint
-        run: pnpm run eslint
-
-      - name: Run frontend tests with coverage
-        run: |
-          mkdir -p coverage
-          pnpm run test:coverage

.github/workflows/run_foss_spec.yml

@@ -21,7 +21,7 @@ jobs:
         image: postgres:15.3
         env:
           POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: ''
+          POSTGRES_PASSWORD: ""
           POSTGRES_DB: postgres
           POSTGRES_HOST_AUTH_METHOD: trust
         ports:
@@ -41,49 +41,47 @@ jobs:
         options: --entrypoint redis-server
 
     steps:
-      - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
+      with:
-        with:
+        ref: ${{ github.event.pull_request.head.ref }}
-          version: 9
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
 
-      - uses: ruby/setup-ruby@v1
+    - uses: ruby/setup-ruby@v1
-        with:
+      with:
-          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-      - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v4
-        with:
+      with:
-          node-version: 20
+        node-version: 20
-          cache: 'pnpm'
+        cache: yarn
 
-      - name: Install pnpm dependencies
+    - name: yarn
-        run: pnpm i
+      run: yarn install
 
-      - name: Strip enterprise code
+    - name: Strip enterprise code
-        run: |
+      run: |
-          rm -rf enterprise
+        rm -rf enterprise
-          rm -rf spec/enterprise
+        rm -rf spec/enterprise
 
-      - name: Create database
+    - name: Create database
-        run: bundle exec rake db:create
+      run: bundle exec rake db:create
 
-      - name: Seed database
+    - name: Seed database
-        run: bundle exec rake db:schema:load
+      run: bundle exec rake db:schema:load
 
-      - name: Run frontend tests
+    - name: yarn check-files
-        run: pnpm run test:coverage
+      run: yarn install --check-files
 
-      # Run rails tests
+    # Run rails tests
-      - name: Run backend tests
+    - name: Run backend tests
-        run: |
+      run: |
-          bundle exec rspec --profile=10 --format documentation
+        bundle exec rspec --profile=10 --format documentation
-        env:
+      env:
-          NODE_OPTIONS: --openssl-legacy-provider
+        NODE_OPTIONS: --openssl-legacy-provider
 
-      - name: Upload rails log folder
+    - name: Upload rails log folder
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v4
-        if: always()
+      if: always()
-        with:
+      with:
-          name: rails-log-folder
+        name: rails-log-folder
-          path: log
+        path: log

.github/workflows/run_response_bot_spec.yml

@@ -49,17 +49,13 @@ jobs:
       with:
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 9.3.0
-
     - uses: actions/setup-node@v4
       with:
         node-version: 20
-        cache: pnpm
+        cache: yarn
 
-    - name: pnpm
+    - name: yarn
-      run: pnpm install
+      run: yarn install
 
     - name: Create database
       run: bundle exec rake db:create

.github/workflows/size-limit.yml

@@ -19,33 +19,23 @@ jobs:
         with:
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9.3.0
-
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: 'yarn'
 
-      - name: pnpm
+      - name: yarn
-        run: pnpm install
+        run: yarn install
 
       - name: Strip enterprise code
         run: |
           rm -rf enterprise
           rm -rf spec/enterprise
 
-      - name: setup env
-        run: |
-          cp .env.example .env
- 
       - name: Run asset compile
         run: bundle exec rake assets:precompile
         env:
-          RAILS_ENV: production
+          NODE_OPTIONS: --openssl-legacy-provider
 
       - name: Size Check
-        run: pnpm run size
+        run: yarn run size
-
-

.gitignore

@@ -32,16 +32,6 @@ master.key
 
 public/uploads
 public/packs*
-public/assets/administrate*
-public/assets/action*.js
-public/assets/activestorage*.js
-public/assets/trix*
-public/assets/belongs_to*.js
-public/assets/manifest*.js
-public/assets/manifest*.js
-public/assets/*.js.gz
-public/assets/secretField*
-public/assets/.sprockets-manifest-*.json
 
 # VIM files
 *.swp
@@ -85,8 +75,4 @@ yalc.lock
 yarn-debug.log*
 .yarn-integrity
 
-# Vite Ruby
+/storybook-static
-/public/vite*
-# Vite uses dotenv and suggests to ignore local-only env files. See
-# https://vitejs.dev/guide/env-and-mode.html#env-files
-*.local

.husky/pre-commit

@@ -1,11 +1,11 @@
-# #!/bin/sh
+#!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/_/husky.sh"
 
-# # lint js and vue files
+# lint js and vue files
-# npx --no-install lint-staged
+npx --no-install lint-staged
 
-# # lint only staged ruby files
+# 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
+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
+# stage rubocop changes to files
-# git diff --name-only --cached | xargs git add
+git diff --name-only --cached | xargs git add

.storybook/main.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const resolve = require('../config/webpack/resolve');
+
+// Chatwoot's webpack.config.js
+process.env.NODE_ENV = 'development';
+const custom = require('../config/webpack/environment');
+
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../app/javascript/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            '@': path.resolve(__dirname, '../'),
+          },
+        },
+      },
+    },
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  webpackFinal: config => {
+    const newConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        modules: custom.resolvedModules.map(i => i.value),
+      },
+    };
+
+    newConfig.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
+      include: path.resolve(__dirname, '../app/javascript'),
+    });
+
+    return newConfig;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,46 @@
+import { addDecorator } from '@storybook/vue';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import Multiselect from 'vue-multiselect';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+
+import WootUiKit from '../app/javascript/dashboard/components';
+import i18n from '../app/javascript/dashboard/i18n';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
+
+import '../app/javascript/dashboard/assets/scss/storybook.scss';
+
+Vue.use(VueI18n);
+Vue.use(WootUiKit);
+Vue.use(Vuex);
+Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+
+Vue.component('multiselect', Multiselect);
+Vue.component('fluent-icon', FluentIcon);
+
+const store = new Vuex.Store({});
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});
+
+addDecorator(() => ({
+  template: '<story/>',
+  i18n: i18nConfig,
+  store,
+  beforeCreate: function () {
+    this.$root._i18n = this.$i18n;
+  },
+}));
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

Gemfile

@@ -49,7 +49,7 @@ gem 'aws-sdk-s3', require: false
 # original gem isn't maintained actively
 # we wanted updated version of faraday which is a dependency for slack-ruby-client
 gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby', branch: 'chatwoot', require: false
-gem 'google-cloud-storage', '>= 1.48.0', require: false
+gem 'google-cloud-storage', require: false
 gem 'image_processing'
 
 ##-- gems for database --#
@@ -64,7 +64,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
 gem 'puma'
-gem 'vite_rails'
+gem 'webpacker'
 # metrics on heroku
 gem 'barnes'
 
@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
+gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3', '>= 0.7.0'
+gem 'google-cloud-translate-v3'
 
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.3'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
 ## Gems for reponse bot
@@ -181,9 +181,6 @@ gem 'reverse_markdown'
 group :production do
   # we dont want request timing out in development while using byebug
   gem 'rack-timeout'
-  # for heroku autoscaling
-  gem 'judoscale-rails', require: false
-  gem 'judoscale-sidekiq', require: false
 end
 
 group :development do
@@ -203,10 +200,12 @@ group :development do
   gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.3'
+  gem 'meta_request', '>= 0.8.0'
 end
 
 group :test do
+  # Cypress in rails.
+  gem 'cypress-on-rails'
   # fast cleaning of database
   gem 'database_cleaner'
   # mock http calls
@@ -229,7 +228,7 @@ group :development, :test do
   gem 'mock_redis'
   gem 'pry-rails'
   gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.5'
+  gem 'rspec-rails', '>= 6.1.4'
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.8.7)
+    actioncable (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.7)
+    actionmailbox (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.7)
+      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.7)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.7)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.8.7)
+    actionmailer (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      actionview (= 7.0.8.7)
+      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.7)
+      activejob (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.7)
+    actionpack (7.0.8.4)
-      actionview (= 7.0.8.7)
+      actionview (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.7)
+    actiontext (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      activerecord (= 7.0.8.7)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.7)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.8.7)
+    actionview (7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.8.7)
+    activejob (7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       globalid (>= 0.3.6)
-    activemodel (7.0.8.7)
+    activemodel (7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
-    activerecord (7.0.8.7)
+    activerecord (7.0.8.4)
-      activemodel (= 7.0.8.7)
+      activemodel (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.8.7)
+    activestorage (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.7)
+      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.7)
+      activerecord (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.8.7)
+    activesupport (7.0.8.4)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -169,7 +169,7 @@ GEM
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crack (1.0.0)
       bigdecimal
@@ -178,6 +178,8 @@ GEM
     csv (3.3.0)
     csv-safe (3.3.1)
       csv (~> 3.0)
+    cypress-on-rails (1.16.0)
+      rack
     database_cleaner (2.0.2)
       database_cleaner-active_record (>= 2, < 3)
     database_cleaner-active_record (2.1.0)
@@ -209,7 +211,7 @@ GEM
       devise (> 3.5.2, < 5)
       rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.1)
-    digest-crc (0.6.5)
+    digest-crc (0.6.4)
       rake (>= 12.0.0, < 14.0.0)
     docile (1.4.0)
     domain_name (0.5.20190701)
@@ -220,7 +222,6 @@ GEM
       railties (>= 6.1)
     down (5.4.0)
       addressable (~> 2.8)
-    dry-cli (1.1.0)
     ecma-re-validator (0.4.0)
       regexp_parser (~> 2.2)
     elastic-apm (4.6.2)
@@ -229,7 +230,7 @@ GEM
       ruby2_keywords
     email_reply_trimmer (0.1.13)
     erubi (1.13.0)
-    et-orbi (1.2.11)
+    et-orbi (1.2.7)
       tzinfo
     execjs (2.8.1)
     facebook-messenger (2.0.1)
@@ -256,7 +257,7 @@ GEM
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
-    faraday-retry (2.2.1)
+    faraday-retry (2.1.0)
       faraday (~> 2.0)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
@@ -267,10 +268,10 @@ GEM
       rake
     flag_shih_tzu (0.3.23)
     foreman (0.87.2)
-    fugit (1.11.1)
+    fugit (1.9.0)
-      et-orbi (~> 1, >= 1.2.11)
+      et-orbi (~> 1, >= 1.2.7)
       raabro (~> 1.4)
-    gapic-common (0.20.0)
+    gapic-common (0.18.0)
       faraday (>= 1.9, < 3.a)
       faraday-retry (>= 1.0, < 3.a)
       google-protobuf (~> 3.14)
@@ -284,57 +285,57 @@ GEM
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
       oauth (>= 0.3.6)
-    google-apis-core (0.15.1)
+    google-apis-core (0.11.0)
       addressable (~> 2.5, >= 2.5.1)
-      googleauth (~> 1.9)
+      googleauth (>= 0.16.2, < 2.a)
-      httpclient (>= 2.8.3, < 3.a)
+      httpclient (>= 2.8.1, < 3.a)
       mini_mime (~> 1.0)
-      mutex_m
       representable (~> 3.0)
       retriable (>= 2.0, < 4.a)
-    google-apis-iamcredentials_v1 (0.22.0)
+      rexml
-      google-apis-core (>= 0.15.0, < 2.a)
+      webrick
-    google-apis-storage_v1 (0.47.0)
+    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.15.0, < 2.a)
+      google-apis-core (>= 0.11.0, < 2.a)
-    google-cloud-core (1.7.1)
+    google-apis-storage_v1 (0.19.0)
-      google-cloud-env (>= 1.0, < 3.a)
+      google-apis-core (>= 0.9.0, < 2.a)
+    google-cloud-core (1.6.0)
+      google-cloud-env (~> 1.0)
       google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.31.0)
+    google-cloud-dialogflow-v2 (0.23.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.18.0, < 2.a)
       google-cloud-errors (~> 1.0)
       google-cloud-location (>= 0.4, < 2.a)
-    google-cloud-env (2.2.1)
+    google-cloud-env (1.6.0)
-      faraday (>= 1.0, < 3.a)
+      faraday (>= 0.17.3, < 3.0)
     google-cloud-errors (1.3.1)
-    google-cloud-location (0.6.0)
+    google-cloud-location (0.4.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-cloud-storage (1.52.0)
+    google-cloud-storage (1.44.0)
       addressable (~> 2.8)
       digest-crc (~> 0.4)
-      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.19.0)
-      google-apis-storage_v1 (~> 0.38)
       google-cloud-core (~> 1.6)
-      googleauth (~> 1.9)
+      googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.10.0)
+    google-cloud-translate-v3 (0.6.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.5)
+    google-protobuf (3.25.3)
-    google-protobuf (3.25.5-arm64-darwin)
+    google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.5-x86_64-darwin)
+    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.5-x86_64-linux)
+    google-protobuf (3.25.3-x86_64-linux)
-    googleapis-common-protos (1.6.0)
+    googleapis-common-protos (1.4.0)
-      google-protobuf (>= 3.18, < 5.a)
+      google-protobuf (~> 3.14)
-      googleapis-common-protos-types (~> 1.7)
+      googleapis-common-protos-types (~> 1.2)
-      grpc (~> 1.41)
+      grpc (~> 1.27)
     googleapis-common-protos-types (1.14.0)
       google-protobuf (~> 3.18)
-    googleauth (1.11.2)
+    googleauth (1.5.2)
-      faraday (>= 1.0, < 3.a)
+      faraday (>= 0.17.3, < 3.a)
-      google-cloud-env (~> 2.1)
       jwt (>= 1.4, < 3.0)
+      memoist (~> 0.16)
       multi_json (~> 1.11)
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
@@ -373,7 +374,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.6)
+    i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
@@ -397,13 +398,6 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
-    judoscale-rails (1.8.2)
-      judoscale-ruby (= 1.8.2)
-      railties
-    judoscale-ruby (1.8.2)
-    judoscale-sidekiq (1.8.2)
-      judoscale-ruby (= 1.8.2)
-      sidekiq (>= 5.0)
     jwt (2.8.1)
       base64
     kaminari (1.2.2)
@@ -452,7 +446,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.23.1)
+    loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -462,7 +456,8 @@ GEM
       net-smtp
     marcel (1.0.4)
     maxminddb (0.1.22)
-    meta_request (0.8.3)
+    memoist (0.16.2)
+    meta_request (0.8.2)
       rack-contrib (>= 1.1, < 3)
       railties (>= 3.0.0, < 8)
     method_source (1.1.0)
@@ -471,22 +466,21 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.8)
+    mini_portile2 (2.8.7)
-    minitest (5.25.4)
+    minitest (5.24.1)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     multipart-post (2.3.0)
-    mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
     net-http (0.4.1)
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.17)
+    net-imap (0.4.12)
       date
       net-protocol
     net-pop (0.1.2)
@@ -502,14 +496,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.17.1)
+    nokogiri (1.16.6)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.17.1-arm64-darwin)
+    nokogiri (1.16.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-darwin)
+    nokogiri (1.16.6-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-linux)
+    nokogiri (1.16.6-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -528,7 +522,7 @@ GEM
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
-    omniauth-google-oauth2 (1.1.3)
+    omniauth-google-oauth2 (1.1.2)
       jwt (>= 2.0)
       oauth2 (~> 2.0)
       omniauth (~> 2.0)
@@ -558,13 +552,13 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (6.0.0)
-    puma (6.4.3)
+    puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.8.1)
+    racc (1.8.0)
-    rack (2.2.10)
+    rack (2.2.9)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -576,35 +570,35 @@ GEM
     rack-protection (3.2.0)
       base64 (>= 0.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.7)
+    rack-proxy (0.7.6)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.8.7)
+    rails (7.0.8.4)
-      actioncable (= 7.0.8.7)
+      actioncable (= 7.0.8.4)
-      actionmailbox (= 7.0.8.7)
+      actionmailbox (= 7.0.8.4)
-      actionmailer (= 7.0.8.7)
+      actionmailer (= 7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      actiontext (= 7.0.8.7)
+      actiontext (= 7.0.8.4)
-      actionview (= 7.0.8.7)
+      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.7)
+      activejob (= 7.0.8.4)
-      activemodel (= 7.0.8.7)
+      activemodel (= 7.0.8.4)
-      activerecord (= 7.0.8.7)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.7)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       bundler (>= 1.15.0)
-      railties (= 7.0.8.7)
+      railties (= 7.0.8.4)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.6.1)
+    rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
-      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+      nokogiri (~> 1.14)
-    railties (7.0.8.7)
+    railties (7.0.8.4)
-      actionpack (= 7.0.8.7)
+      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.7)
+      activesupport (= 7.0.8.4)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -640,19 +634,20 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.3.9)
+    rexml (3.3.4)
+      strscan
     rspec-core (3.13.0)
       rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.2)
+    rspec-expectations (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
     rspec-mocks (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.13.0)
-    rspec-rails (7.0.1)
+    rspec-rails (6.1.4)
-      actionpack (>= 7.0)
+      actionpack (>= 6.1)
-      activesupport (>= 7.0)
+      activesupport (>= 6.1)
-      railties (>= 7.0)
+      railties (>= 6.1)
       rspec-core (~> 3.13)
       rspec-expectations (~> 3.13)
       rspec-mocks (~> 3.13)
@@ -714,6 +709,7 @@ GEM
       activerecord (>= 4)
       activesupport (>= 4)
     selectize-rails (0.12.6)
+    semantic_range (3.0.0)
     sentry-rails (5.19.0)
       railties (>= 5.0)
       sentry-ruby (~> 5.19.0)
@@ -770,6 +766,7 @@ GEM
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (8.5.0)
+    strscan (3.1.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.3.1)
@@ -799,17 +796,10 @@ GEM
     uniform_notifier (1.16.0)
     uri (0.13.0)
     uri_template (0.7.0)
-    valid_email2 (5.2.6)
+    valid_email2 (4.0.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
     version_gem (1.1.4)
-    vite_rails (3.0.17)
-      railties (>= 5.1, < 8)
-      vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.8.0)
-      dry-cli (>= 0.7, < 2)
-      rack-proxy (~> 0.6, >= 0.6.1)
-      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -824,6 +814,12 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
+    webpacker (5.4.4)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
+    webrick (1.8.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -831,7 +827,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.17)
+    zeitwerk (2.6.16)
 
 PLATFORMS
   arm64-darwin-20
@@ -866,6 +862,7 @@ DEPENDENCIES
   climate_control
   commonmarker
   csv-safe
+  cypress-on-rails
   database_cleaner
   ddtrace
   debug (~> 1.8)
@@ -884,9 +881,9 @@ DEPENDENCIES
   foreman
   geocoder
   gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
-  google-cloud-storage (>= 1.48.0)
+  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
   groupdate
   grpc
   haikunator
@@ -897,8 +894,6 @@ DEPENDENCIES
   jbuilder
   json_refs
   json_schemer
-  judoscale-rails
-  judoscale-sidekiq
   jwt
   kaminari
   koala
@@ -908,14 +903,14 @@ DEPENDENCIES
   listen
   lograge (~> 0.14.0)
   maxminddb
-  meta_request (>= 0.8.3)
+  meta_request (>= 0.8.0)
   mock_redis
   neighbor
   net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
   omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.3)
+  omniauth-google-oauth2 (>= 1.1.2)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   pg
@@ -935,7 +930,7 @@ DEPENDENCIES
   responders (>= 3.1.1)
   rest-client
   reverse_markdown
-  rspec-rails (>= 6.1.5)
+  rspec-rails (>= 6.1.4)
   rspec_junit_formatter
   rubocop
   rubocop-performance
@@ -965,10 +960,10 @@ DEPENDENCIES
   tzinfo-data
   uglifier
   valid_email2
-  vite_rails
   web-console (>= 4.2.1)
   web-push (>= 3.0.1)
   webmock
+  webpacker
   wisper (= 2.0.0)
   working_hours
 

Makefile

@@ -6,7 +6,7 @@ RAILS_ENV ?= development
 setup:
 	gem install bundler
 	bundle install
-	pnpm install
+	yarn install
 
 db_create:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:create
@@ -30,7 +30,7 @@ server:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails server -b 0.0.0.0 -p 3000
 
 burn:
-	bundle && pnpm install
+	bundle && yarn
 
 run:
 	@if [ -f ./.overmind.sock ]; then \

Procfile.dev

@@ -1,4 +1,4 @@
 backend: bin/rails s -p 3000
+frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
 # https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
 worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
-vite: bin/vite dev

Procfile.test

@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-vite: bin/vite dev
+frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
 worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml

README.md

@@ -1,6 +1,3 @@
-## 🚨 Note: This branch is unstable. For the stable branch's source code, please use the branch [3.x](https://github.com/chatwoot/chatwoot/tree/3.x)
-
-
 <img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
 <img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>
 

VERSION_CW

@@ -1 +1 @@
-3.13.0
+3.9.0

VERSION_CWCTL

@@ -1 +1 @@
-3.0.0
+2.8.0

app.json

@@ -48,7 +48,7 @@
       "size": "basic"
     }
   },
-  "stack": "heroku-24",
+  "stack": "heroku-20",
   "image": "heroku/ruby",
   "addons": [
     {
@@ -58,7 +58,7 @@
       "plan": "heroku-postgresql:essential-0"
     }
   ],
-  "stack": "heroku-24",
+  "stack": "heroku-20",
   "buildpacks": [
     {
       "url": "heroku/nodejs"

app/assets/config/manifest.js

@@ -2,4 +2,5 @@
 //= link administrate/application.css
 //= link administrate/application.js
 //= link administrate-field-active_storage/application.css
+//= link dashboardChart.js
 //= link secretField.js

app/assets/javascripts/dashboardChart.js

@@ -0,0 +1,55 @@
+// eslint-disable-next-line
+function prepareData(data) {
+  var labels = [];
+  var dataSet = [];
+  data.forEach(item => {
+    labels.push(item[0]);
+    dataSet.push(item[1]);
+  });
+  return { labels, dataSet };
+}
+
+function getChartOptions() {
+  var fontFamily =
+    'PlusJakarta,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+  return {
+    responsive: true,
+    legend: { labels: { fontFamily } },
+    scales: {
+      xAxes: [
+        {
+          barPercentage: 1.26,
+          ticks: { fontFamily },
+          gridLines: { display: false },
+        },
+      ],
+      yAxes: [
+        {
+          ticks: { fontFamily },
+          gridLines: { display: false },
+        },
+      ],
+    },
+  };
+}
+
+// eslint-disable-next-line
+function drawSuperAdminDashboard(data) {
+  var ctx = document.getElementById('dashboard-chart').getContext('2d');
+  var chartData = prepareData(data);
+  // eslint-disable-next-line
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: chartData.labels,
+      datasets: [
+        {
+          label: 'Conversations',
+          data: chartData.dataSet,
+          backgroundColor: '#1f93ff',
+        },
+      ],
+    },
+    options: getChartOptions(),
+  });
+}

app/assets/stylesheets/administrate/utilities/_variables.scss

@@ -86,5 +86,8 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
 
+// Ionicons
+$ionicons-font-path: '~ionicons/fonts';
+
 // Transitions
 $transition-ease-in: all 0.250s ease-in;

app/builders/account_builder.rb

@@ -32,13 +32,11 @@ class AccountBuilder
   end
 
   def validate_email
-    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
-
     address = ValidEmail2::Address.new(@email)
-    if address.valid? && !address.disposable?
+    if address.valid? # && !address.disposable?
       true
     else
-      raise InvalidEmail.new({ valid: address.valid?, disposable: address.disposable? })
+      raise InvalidEmail.new(valid: address.valid?)
     end
   end
 
@@ -81,21 +79,4 @@ class AccountBuilder
     @user.confirm if @confirmed
     @user.save!
   end
-
-  def domain_blocked?
-    domain = @email.split('@').last
-
-    blocked_domains.each do |blocked_domain|
-      return true if domain.match?(blocked_domain)
-    end
-
-    false
-  end
-
-  def blocked_domains
-    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
-    return [] if domains.blank?
-
-    domains.split("\n").map(&:strip)
-  end
 end

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

@@ -24,7 +24,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
 
   def update
     @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
+    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
   end
 
   def destroy
@@ -67,16 +67,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agent = agents.find(params[:id])
   end
 
-  def account_user_attributes
-    [:role, :availability, :auto_offline]
-  end
-
-  def allowed_agent_params
-    [:name, :email, :name, :role, :availability, :auto_offline]
-  end
-
   def agent_params
-    params.require(:agent).permit(allowed_agent_params)
+    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
   end
 
   def new_agent_params
@@ -109,5 +101,3 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
   end
 end
-
-Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')

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

@@ -6,15 +6,13 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def index
     @portal_articles = @portal.articles
-
+    @all_articles = @portal_articles.search(list_params)
-    set_article_count
+    @articles_count = @all_articles.count
-
-    @articles = @articles.search(list_params)
 
     @articles = if list_params[:category_slug].present?
-                  @articles.order_by_position.page(@current_page)
+                  @all_articles.order_by_position.page(@current_page)
                 else
-                  @articles.order_by_updated_at.page(@current_page)
+                  @all_articles.order_by_updated_at.page(@current_page)
                 end
   end
 
@@ -45,19 +43,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   private
 
-  def set_article_count
-    # Search the params without status and author_id, use this to
-    # compute mine count published draft etc
-    base_search_params = list_params.except(:status, :author_id)
-    @articles = @portal_articles.search(base_search_params)
-
-    @articles_count = @articles.count
-    @mine_articles_count = @articles.search_by_author(Current.user.id).count
-    @published_articles_count = @articles.published.count
-    @draft_articles_count = @articles.draft.count
-    @archived_articles_count = @articles.archived.count
-  end
-
   def fetch_article
     @article = @portal.articles.find(params[:id])
   end
@@ -68,10 +53,9 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
 
   def article_params
     params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status, meta: [:title,
-      :locale, meta: [:title,
+                                                                                                                                     :description,
-                      :description,
+                                                                                                                                     { tags: [] }]
-                      { tags: [] }]
     )
   end
 

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

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter]
 
   def index
     @contacts_count = resolved_contacts.count

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

@@ -13,7 +13,7 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
 
   def destroy
     ActiveRecord::Base.transaction do
-      message.update!(content: I18n.t('conversations.messages.deleted'), content_type: :text, content_attributes: { deleted: true })
+      message.update!(content: I18n.t('conversations.messages.deleted'), content_attributes: { deleted: true })
       message.attachments.destroy_all
     end
   end

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

@@ -1,78 +1,22 @@
 class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :hook
+  before_action :check_admin_authorization?
+  before_action :fetch_hook
 
-  def proxy
+  def sso_url
-    request_url = build_request_url(request_path)
+    params_string =
-    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
+      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-    render plain: response.body, status: response.code
+      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-  end
+      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
 
-  def copilot
+    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
-    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+
-    params = {
+    sso_url = "#{installation_config.value}/sso?#{params_string}"
-      previous_messages: copilot_params[:previous_messages],
+    render json: { sso_url: sso_url }, status: :ok
-      conversation_history: conversation_history,
-      message: copilot_params[:message]
-    }
-    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
-    render plain: response.body, status: response.code
   end
 
   private
 
-  def headers
+  def fetch_hook
-    {
+    @hook = Current.account.hooks.find_by!(app_id: 'captain')
-      'X-User-Email' => hook.settings['account_email'],
-      'X-User-Token' => hook.settings['access_token'],
-      'Content-Type' => 'application/json',
-      'Accept' => '*/*'
-    }
-  end
-
-  def build_request_path(route)
-    "api/accounts/#{hook.settings['account_id']}#{route}"
-  end
-
-  def request_path
-    request_route = with_leading_hash_on_route(params[:route])
-
-    return 'api/sessions/profile' if request_route == '/sessions/profile'
-
-    build_request_path(request_route)
-  end
-
-  def build_request_url(request_path)
-    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
-    URI.join(base_url, request_path).to_s
-  end
-
-  def hook
-    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
-  end
-
-  def request_method
-    method = permitted_params[:method].downcase
-    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
-
-    method
-  end
-
-  def with_leading_hash_on_route(request_route)
-    return '' if request_route.blank?
-
-    request_route.start_with?('/') ? request_route : "/#{request_route}"
-  end
-
-  def conversation_history
-    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
-    conversation.to_llm_text
-  end
-
-  def copilot_params
-    params.permit(:previous_messages, :conversation_id, :message)
-  end
-
-  def permitted_params
-    params.permit(:method, :route, body: {})
   end
 end

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

@@ -11,17 +11,7 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Base
   end
 
   def process_event
-    response = @hook.process_event(params[:event])
+    render json: { message: @hook.process_event(params[:event]) }
-
-    # for cases like an invalid event, or when conversation does not have enough messages
-    # for a label suggestion, the response is nil
-    if response.nil?
-      render json: { message: nil }
-    elsif response[:error]
-      render json: { error: response[:error] }, status: :unprocessable_entity
-    else
-      render json: { message: response[:message] }
-    end
   end
 
   def destroy

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

@@ -20,7 +20,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def create
-    @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
+    @portal = Current.account.portals.build(portal_params)
     @portal.custom_domain = parsed_custom_domain
     @portal.save!
     process_attached_logo
@@ -28,7 +28,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def update
     ActiveRecord::Base.transaction do
-      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
+      @portal.update!(portal_params) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
     rescue StandardError => e
@@ -70,21 +70,11 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def portal_params
     params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived, { config: [:default_locale,
-      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
+                                                                                                                          { allowed_locales: [] }] }
     )
   end
 
-  def live_chat_widget_params
-    permitted_params = params.permit(:inbox_id)
-    return {} if permitted_params[:inbox_id].blank?
-
-    inbox = Inbox.find(permitted_params[:inbox_id])
-    return {} unless inbox.web_widget?
-
-    { channel_web_widget_id: inbox.channel.id }
-  end
-
   def portal_member_params
     params.require(:portal).permit(:account_id, member_ids: [])
   end

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

@@ -1,68 +1,13 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create
-    result = if params[:attachment].present?
+    file_blob = ActiveStorage::Blob.create_and_upload!(
-               create_from_file
+      key: nil,
-             elsif params[:external_url].present?
+      io: params[:attachment].tempfile,
-               create_from_url
+      filename: params[:attachment].original_filename,
-             else
+      content_type: params[:attachment].content_type
-               render_error('No file or URL provided', :unprocessable_entity)
-             end
-
-    render_success(result) if result.is_a?(ActiveStorage::Blob)
-  end
-
-  private
-
-  def create_from_file
-    attachment = params[:attachment]
-    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
-  end
-
-  def create_from_url
-    uri = parse_uri(params[:external_url])
-    return if performed?
-
-    fetch_and_process_file_from_uri(uri)
-  end
-
-  def parse_uri(url)
-    uri = URI.parse(url)
-    validate_uri(uri)
-    uri
-  rescue URI::InvalidURIError, SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-    nil
-  end
-
-  def validate_uri(uri)
-    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-  end
-
-  def fetch_and_process_file_from_uri(uri)
-    uri.open do |file|
-      create_and_save_blob(file, File.basename(uri.path), file.content_type)
-    end
-  rescue OpenURI::HTTPError => e
-    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
-  rescue SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-  rescue StandardError
-    render_error('An unexpected error occurred', :internal_server_error)
-  end
-
-  def create_and_save_blob(io, filename, content_type)
-    ActiveStorage::Blob.create_and_upload!(
-      io: io,
-      filename: filename,
-      content_type: content_type
     )
-  end
+    file_blob.save!
 
-  def render_success(file_blob)
     render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
   end
-
-  def render_error(message, status)
-    render json: { error: message }, status: status
-  end
 end

app/controllers/api/v1/profiles_controller.rb

@@ -17,7 +17,7 @@ class Api::V1::ProfilesController < Api::BaseController
 
   def avatar
     @user.avatar.attachment.destroy! if @user.avatar.attached?
-    @user.reload
+    head :ok
   end
 
   def auto_offline

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

@@ -11,8 +11,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
       process_update_contact
       @conversation = create_conversation
       conversation.messages.create!(message_params)
-      # TODO: Temporary fix for message type cast issue, since message_type is returning as string instead of integer
-      conversation.reload
     end
   end
 

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

@@ -66,9 +66,7 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
   end
 
   def check_authorization
-    return if Current.account_user.administrator?
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-
-    raise Pundit::NotAuthorizedError
   end
 
   def common_params
@@ -137,5 +135,3 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
   end
 end
-
-Api::V2::Accounts::ReportsController.prepend_mod_with('Api::V2::Accounts::ReportsController')

app/controllers/dashboard_controller.rb

@@ -72,7 +72,7 @@ class DashboardController < ActionController::Base
     @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
                           'v3app'
                         else
-                          'dashboard'
+                          'application'
                         end
   end
 

app/controllers/google/callbacks_controller.rb

@@ -1,15 +1,6 @@
 class Google::CallbacksController < OauthCallbackController
   include GoogleConcern
 
-  def find_channel_by_email
-    # find by imap_login first, and then by email
-    # this ensures the legacy users can migrate correctly even if inbox email address doesn't match
-    imap_channel = Channel::Email.find_by(imap_login: users_data['email'], account: account)
-    return imap_channel if imap_channel
-
-    Channel::Email.find_by(email: users_data['email'], account: account)
-  end
-
   private
 
   def provider_name

app/controllers/oauth_callback_controller.rb

@@ -25,7 +25,7 @@ class OauthCallbackController < ApplicationController
   end
 
   def find_or_create_inbox
-    channel_email = find_channel_by_email
+    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
     # we need this value to know where to redirect on sucessful processing of the callback
     channel_exists = channel_email.present?
 
@@ -39,10 +39,6 @@ class OauthCallbackController < ApplicationController
     [channel_email.inbox, channel_exists]
   end
 
-  def find_channel_by_email
-    Channel::Email.find_by(email: users_data['email'], account: account)
-  end
-
   def update_channel(channel_email)
     channel_email.update!({
                             imap_login: users_data['email'], imap_address: imap_address,

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

@@ -4,7 +4,6 @@ class Platform::Api::V1::AccountsController < PlatformController
   def create
     @resource = Account.create!(account_params)
     update_resource_features
-    @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 

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

@@ -6,7 +6,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   layout 'portal'
 
   def index
-    @articles = @portal.articles.published
+    @articles = @portal.articles
     search_articles
     order_by_sort_param
     @articles.page(list_params[:page]) if list_params[:page].present?
@@ -30,7 +30,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
+    @article.increment_view_count
     @parsed_content = render_article_content(@article.content)
   end
 

app/dashboards/account_dashboard.rb

@@ -26,8 +26,7 @@ class AccountDashboard < Administrate::BaseDashboard
     conversations: CountField,
     locale: Field::Select.with_options(collection: LANGUAGES_CONFIG.map { |_x, y| y[:iso_639_1_code] }),
     status: Field::Select.with_options(collection: [%w[Active active], %w[Suspended suspended]]),
-    account_users: Field::HasMany,
+    account_users: Field::HasMany
-    custom_attributes: Field::String
   }.merge(enterprise_attribute_types).freeze
 
   # COLLECTION_ATTRIBUTES
@@ -46,7 +45,7 @@ class AccountDashboard < Administrate::BaseDashboard
 
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.
-  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
+  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
   SHOW_PAGE_ATTRIBUTES = (%i[
     id
     name

app/javascript/dashboard/App.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -8,12 +9,9 @@ import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
-import { useRouter } from 'vue-router';
-import { useStore } from 'dashboard/composables/store';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
-import { useAccount } from 'dashboard/composables/useAccount';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -33,13 +31,6 @@ export default {
     UpgradeBanner,
     PendingEmailVerificationBanner,
   },
-  setup() {
-    const router = useRouter();
-    const store = useStore();
-    const { accountId } = useAccount();
-
-    return { router, store, currentAccountId: accountId };
-  },
   data() {
     return {
       showAddAccountModal: false,
@@ -47,6 +38,7 @@ export default {
       reconnectService: null,
     };
   },
+
   computed: {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
@@ -54,6 +46,7 @@ export default {
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
+      currentAccountId: 'getCurrentAccountId',
     }),
     hasAccounts() {
       const { accounts = [] } = this.currentUser || {};
@@ -70,13 +63,10 @@ export default {
         this.showAddAccountModal = true;
       }
     },
-    currentAccountId: {
+    currentAccountId() {
-      immediate: true,
+      if (this.currentAccountId) {
-      handler() {
+        this.initializeAccount();
-        if (this.currentAccountId) {
+      }
-          this.initializeAccount();
-        }
-      },
     },
   },
   mounted() {
@@ -84,7 +74,7 @@ export default {
     this.listenToThemeChanges();
     this.setLocale(window.chatwootConfig.selectedLocale);
   },
-  unmounted() {
+  beforeDestroy() {
     if (this.reconnectService) {
       this.reconnectService.disconnect();
     }
@@ -110,9 +100,8 @@ export default {
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
       this.latestChatwootVersion = latestChatwootVersion;
-      vueActionCable.init(this.store, pubsubToken);
+      vueActionCable.init(pubsubToken);
-      this.reconnectService = new ReconnectService(this.store, this.router);
+      this.reconnectService = new ReconnectService(this.$store, router);
-      window.reconnectService = this.reconnectService;
 
       verifyServiceWorkerExistence(registration =>
         registration.pushManager.getSubscription().then(subscription => {
@@ -140,11 +129,9 @@ export default {
       <PaymentPendingBanner v-if="hideOnOnboardingView" />
       <UpgradeBanner />
     </template>
-    <router-view v-slot="{ Component }">
+    <transition name="fade" mode="out-in">
-      <transition name="fade" mode="out-in">
+      <router-view />
-        <component :is="Component" />
+    </transition>
-      </transition>
-    </router-view>
     <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
     <WootSnackbarBox />
     <NetworkNotification />
@@ -154,22 +141,6 @@ export default {
 
 <style lang="scss">
 @import './assets/scss/app';
-
-.v-popper--theme-tooltip .v-popper__inner {
-  background: black !important;
-  font-size: 0.75rem;
-  padding: 4px 8px !important;
-  border-radius: 6px;
-  font-weight: 400;
-}
-
-.v-popper--theme-tooltip .v-popper__arrow-container {
-  display: none;
-}
-
-.multiselect__input {
-  margin-bottom: 0px !important;
-}
 </style>
 
-<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

app/javascript/dashboard/api/contacts.js

@@ -27,14 +27,6 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
-  show(id) {
-    return axios.get(`${this.url}/${id}?include_contact_inboxes=false`);
-  }
-
-  update(id, data) {
-    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
-  }
-
   getConversations(contactId) {
     return axios.get(`${this.url}/${contactId}/conversations`);
   }

app/javascript/dashboard/api/customRole.js

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

app/javascript/dashboard/api/helpCenter/articles.js

@@ -52,13 +52,12 @@ class ArticlesAPI extends PortalsAPI {
   }
 
   createArticle({ portalSlug, articleObj }) {
-    const { content, title, authorId, categoryId, locale } = articleObj;
+    const { content, title, author_id, category_id } = articleObj;
     return axios.post(`${this.url}/${portalSlug}/articles`, {
       content,
       title,
-      author_id: authorId,
+      author_id,
-      category_id: categoryId,
+      category_id,
-      locale,
     });
   }
 

app/javascript/dashboard/api/integrations.js

@@ -33,12 +33,8 @@ class IntegrationsAPI extends ApiClient {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
 
-  requestCaptain(body) {
+  fetchCaptainURL() {
-    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
+    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
-  }
-
-  requestCaptainCopilot(body) {
-    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
   }
 }
 

app/javascript/dashboard/assets/images/auth/bottom-right.svg

@@ -1,3 +0,0 @@
-<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H600V200H400V400H200V600H0V800H200H400H600H800V600V400V200V0Z" fill="#2773E4" fill-opacity="0.42"/>
-</svg>

app/javascript/dashboard/assets/images/auth/top-left.svg

@@ -1,3 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0V200V400V600H200V400H400V200H600V0H400H200Z" fill="#2773E4" fill-opacity="0.42"/>
-</svg>

app/javascript/dashboard/assets/scss/_animations.scss

@@ -31,6 +31,23 @@
   transform: translateX($space-medium);
 }
 
+.menu-list-enter-active,
+.menu-list-leave-active {
+  transition: opacity 0.3s var(--ease-out-cubic),
+    transform 0.2s var(--ease-out-cubic);
+}
+
+.menu-list-leave-to {
+  opacity: 0;
+  position: absolute;
+  transform: translateX($space-small);
+}
+
+.menu-list-enter {
+  opacity: 0;
+  transform: translateX(-$space-small);
+}
+
 .slide-up-enter-active {
   transition: all 0.3s var(--ease-in-cubic);
 }
@@ -48,8 +65,7 @@
 .menu-slide-enter-active,
 .menu-slide-leave-active {
   transform: translateY(0);
-  transition:
+  transition: transform 0.25s var(--ease-in-cubic),
-    transform 0.25s var(--ease-in-cubic),
     opacity 0.15s var(--ease-in-cubic);
 }
 

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

@@ -1,4 +1,4 @@
-@import 'vue-datepicker-next/scss/index';
+@import '~vue2-datepicker/scss/index';
 
 .date-picker {
   // To be removed one SLA reports date picker is created
@@ -25,7 +25,7 @@
   }
 
   .mx-input {
-    @apply h-[2.5rem] flex border border-solid border-n-weak rounded-md shadow-none;
+    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
   }
 
   .mx-input:disabled,
@@ -39,7 +39,7 @@
 }
 
 .mx-datepicker-main {
-  @apply border-0 bg-n-solid-2 rounded-xl;
+  @apply border-0 bg-white dark:bg-slate-800;
 
   .cell {
     &.disabled {
@@ -53,14 +53,6 @@
     }
   }
 
-  .mx-calendar+.mx-calendar {
-    @apply border-l border-n-weak;
-  }
-
-  .mx-datepicker-footer {
-    @apply border border-n-weak;
-  }
-
   .mx-time {
     @apply border-0 bg-white dark:bg-slate-800;
 

app/javascript/dashboard/assets/scss/_formulate.scss

@@ -1,4 +1,4 @@
-@import 'dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/variables';
 
 .formulate-input {
   .formulate-input-errors {

app/javascript/dashboard/assets/scss/_layout.scss

@@ -1,11 +1,10 @@
 // scss-lint:disable SpaceAfterPropertyColon
 @import 'shared/assets/fonts/inter';
-
 // Inter,
 html,
 body {
   font-family:
-    'Inter',
+    'PlusJakarta',
     -apple-system,
     system-ui,
     BlinkMacSystemFont,
@@ -24,7 +23,7 @@ body {
 }
 
 .app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
+  @apply h-full flex-grow-0 min-h-0 w-full;
 
   .button--fixed-top {
     @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,5 +1,5 @@
-@import 'dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
+@import '~widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 

app/javascript/dashboard/assets/scss/_variables.scss

@@ -89,6 +89,9 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
+// Ionicons
+$ionicons-font-path: '~ionicons/fonts';
+
 // Transitions
 $transition-ease-in: all 0.250s ease-in;
 

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

@@ -2,6 +2,7 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import 'shared/assets/fonts/plus-jakarta';
 @import 'shared/assets/fonts/InterDisplay/inter-display';
 @import 'shared/assets/fonts/inter';
 
@@ -33,209 +34,19 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
+@import '~shared/assets/stylesheets/ionicons';
 
 .tooltip {
-  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900 max-w-96;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
-}
-
-#app {
-  @apply h-full w-full;
 }
 
 .hide {
   @apply hidden;
 }
 
-.n-blue-border {
-  @apply border-n-blue-border;
-}
-
-.n-blue-text {
-  @apply text-n-blue-text;
-}
-
-// 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;
-
-    --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;
-
-    --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.8;
-  }
-  /* NEXT COLORS END */
 
+  // scss-lint:disable PropertySortOrder
   :root {
     --color-amber-25: 254 253 251;
     --color-amber-50: 255 249 237;
@@ -578,15 +389,3 @@
     --color-orange-900: 255 224 194;
   }
 }
-
-@layer utilities {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}

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

@@ -222,7 +222,6 @@
 
   .multiselect__input {
     @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0px !important;
   }
 
   .multiselect__single {

app/javascript/dashboard/assets/scss/storybook.scss

@@ -0,0 +1,39 @@
+@import 'shared/assets/fonts/inter';
+@import 'shared/assets/fonts/plus-jakarta';
+@import 'shared/assets/stylesheets/animations';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/font-weights';
+@import 'shared/assets/stylesheets/shadows';
+@import 'shared/assets/stylesheets/border-radius';
+@import 'variables';
+
+@import 'vue-multiselect/dist/vue-multiselect.min.css';
+@import '~shared/assets/stylesheets/ionicons';
+
+@import 'mixins';
+@import 'helper-classes';
+
+@import 'typography';
+@import 'layout';
+@import 'animations';
+
+@import 'widgets/buttons';
+@import 'widgets/base';
+
+@import 'plugins/multiselect';
+
+@import 'widget/assets/scss/reset';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'widget/assets/scss/utilities';
+
+html,
+body {
+  font-family: 'PlusJakarta', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}

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

@@ -31,13 +31,7 @@ hr {
 ul,
 ol,
 dl {
-  @apply list-disc list-outside leading-[1.65];
+  @apply mb-2 list-disc list-outside leading-[1.65];
-}
-
-ul:not(.reset-base),
-ol:not(.reset-base),
-dl:not(.reset-base) {
-  @apply mb-0;
 }
 
 // Form elements

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

@@ -96,7 +96,7 @@ button {
   }
 
   // @TODDO - Remove after moving all buttons to woot-button
-  .icon + .button__content {
+  .icon+.button__content {
     @apply w-auto;
   }
 

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

@@ -6,14 +6,6 @@
   @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
-.tabs--container--compact.tab--chat-type {
-  .tabs-title {
-    a {
-      @apply py-2 text-sm;
-    }
-  }
-}
-
 .tabs {
   @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }

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

@@ -1,137 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
-import SMSCampaignDetails from './SMSCampaignDetails.vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  isLiveChatType: {
-    type: Boolean,
-    default: false,
-  },
-  isEnabled: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String,
-    default: '',
-  },
-  sender: {
-    type: Object,
-    default: null,
-  },
-  inbox: {
-    type: Object,
-    default: null,
-  },
-  scheduledAt: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const { t } = useI18n();
-
-const STATUS_COMPLETED = 'completed';
-
-const { formatMessage } = useMessageFormatter();
-
-const isActive = computed(() =>
-  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
-);
-
-const statusTextColor = computed(() => ({
-  'text-n-teal-11': isActive.value,
-  'text-n-slate-12': !isActive.value,
-}));
-
-const campaignStatus = computed(() => {
-  if (props.isLiveChatType) {
-    return props.isEnabled
-      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
-      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
-  }
-
-  return props.status === STATUS_COMPLETED
-    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
-    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
-});
-
-const inboxName = computed(() => props.inbox?.name || '');
-
-const inboxIcon = computed(() => {
-  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, phoneNumber);
-});
-</script>
-
-<template>
-  <CardLayout layout="row">
-    <div class="flex flex-col items-start justify-between flex-1 min-w-0 gap-2">
-      <div class="flex justify-between gap-3 w-fit">
-        <span
-          class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
-        >
-          {{ title }}
-        </span>
-        <span
-          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-          :class="statusTextColor"
-        >
-          {{ campaignStatus }}
-        </span>
-      </div>
-      <div
-        v-dompurify-html="formatMessage(message)"
-        class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
-      />
-      <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
-        <LiveChatCampaignDetails
-          v-if="isLiveChatType"
-          :sender="sender"
-          :inbox-name="inboxName"
-          :inbox-icon="inboxIcon"
-        />
-        <SMSCampaignDetails
-          v-else
-          :inbox-name="inboxName"
-          :inbox-icon="inboxIcon"
-          :scheduled-at="scheduledAt"
-        />
-      </div>
-    </div>
-    <div class="flex items-center justify-end w-20 gap-2">
-      <Button
-        v-if="isLiveChatType"
-        variant="faded"
-        size="sm"
-        color="slate"
-        icon="i-lucide-sliders-vertical"
-        @click="emit('edit')"
-      />
-      <Button
-        variant="faded"
-        color="ruby"
-        size="sm"
-        icon="i-lucide-trash"
-        @click="emit('delete')"
-      />
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  sender: {
-    type: Object,
-    default: null,
-  },
-  inboxName: {
-    type: String,
-    default: '',
-  },
-  inboxIcon: {
-    type: String,
-    default: '',
-  },
-});
-
-const { t } = useI18n();
-
-const senderName = computed(
-  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
-);
-
-const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
-</script>
-
-<template>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Avatar
-      :name="senderName"
-      :src="senderThumbnailSrc"
-      :size="16"
-      rounded-full
-    />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ senderName }}
-    </span>
-  </div>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ inboxName }}
-    </span>
-  </div>
-</template>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue

@@ -1,41 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { messageStamp } from 'shared/helpers/timeHelper';
-
-import { useI18n } from 'vue-i18n';
-defineProps({
-  inboxName: {
-    type: String,
-    default: '',
-  },
-  inboxIcon: {
-    type: String,
-    default: '',
-  },
-  scheduledAt: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ inboxName }}
-    </span>
-  </div>
-
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
-  </span>
-  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
-    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
-  </span>
-</template>

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

@@ -1,52 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['click', 'close']);
-
-const handleButtonClick = () => {
-  emit('click');
-};
-</script>
-
-<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-[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 }}
-          </span>
-          <div
-            v-on-clickaway="() => emit('close')"
-            class="relative group/campaign-button"
-          >
-            <Button
-              :label="buttonLabel"
-              icon="i-lucide-plus"
-              size="sm"
-              class="group-hover/campaign-button:brightness-110"
-              @click="handleButtonClick"
-            />
-            <slot name="action" />
-          </div>
-        </div>
-      </div>
-    </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot name="default" />
-      </div>
-    </main>
-  </section>
-</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js

@@ -1,212 +0,0 @@
-export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
-  {
-    id: 1,
-    title: 'Chatbot Assistance',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Alexa Rivera',
-    },
-    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://www.chatwoot.com/features/chatbot/',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: true,
-    created_at: '2024-10-24T13:10:26.636Z',
-    updated_at: '2024-10-24T13:10:26.636Z',
-  },
-  {
-    id: 2,
-    title: 'Pricing Information Support',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Jamie Lee',
-    },
-    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
-    campaign_status: 'active',
-    enabled: false,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://www.chatwoot.com/pricings',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:11:08.763Z',
-    updated_at: '2024-10-24T13:11:08.763Z',
-  },
-  {
-    id: 3,
-    title: 'Product Setup Assistance',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Chatwoot',
-    },
-    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
-    campaign_status: 'active',
-    enabled: false,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:11:44.285Z',
-    updated_at: '2024-10-24T13:11:44.285Z',
-  },
-  {
-    id: 4,
-    title: 'General Assistance Campaign',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Chris Barlow',
-    },
-    message:
-      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://siv.com',
-      time_on_page: 200,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-29T19:54:33.741Z',
-    updated_at: '2024-10-29T19:56:26.296Z',
-  },
-];
-
-export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
-  {
-    id: 1,
-    title: 'Customer Feedback Request',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message:
-      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1729775588,
-    audience: [
-      { id: 4, type: 'Label' },
-      { id: 5, type: 'Label' },
-      { id: 6, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:13:08.496Z',
-    updated_at: '2024-10-24T13:15:38.698Z',
-  },
-  {
-    id: 2,
-    title: 'Welcome New Customer',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
-    campaign_status: 'completed',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1729732500,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 6, type: 'Label' },
-      { id: 5, type: 'Label' },
-      { id: 2, type: 'Label' },
-      { id: 4, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:14:00.168Z',
-    updated_at: '2024-10-24T13:15:38.707Z',
-  },
-  {
-    id: 3,
-    title: 'New Business Welcome',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Hello! We’re excited to have your business with us!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1730368440,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 3, type: 'Label' },
-      { id: 6, type: 'Label' },
-      { id: 4, type: 'Label' },
-      { id: 2, type: 'Label' },
-      { id: 5, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-30T07:54:49.915Z',
-    updated_at: '2024-10-30T07:54:49.915Z',
-  },
-  {
-    id: 4,
-    title: 'New Member Onboarding',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Welcome to the team! Reach out if you have questions.',
-    campaign_status: 'completed',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1730304840,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 3, type: 'Label' },
-      { id: 6, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-29T16:14:10.374Z',
-    updated_at: '2024-10-30T16:15:03.157Z',
-  },
-];

app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue

@@ -1,38 +0,0 @@
-<script setup>
-import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-          is-live-chat-type
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue

@@ -1,37 +0,0 @@
-<script setup>
-import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>

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

@@ -1,38 +0,0 @@
-<script setup>
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  campaigns: {
-    type: Array,
-    required: true,
-  },
-  isLiveChatType: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const handleEdit = campaign => emit('edit', campaign);
-const handleDelete = campaign => emit('delete', campaign);
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <CampaignCard
-      v-for="campaign in campaigns"
-      :key="campaign.id"
-      :title="campaign.title"
-      :message="campaign.message"
-      :is-enabled="campaign.enabled"
-      :status="campaign.campaign_status"
-      :sender="campaign.sender"
-      :inbox="campaign.inbox"
-      :scheduled-at="campaign.scheduled_at"
-      :is-live-chat-type="isLiveChatType"
-      @edit="handleEdit(campaign)"
-      @delete="handleDelete(campaign)"
-    />
-  </div>
-</template>

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

@@ -1,49 +0,0 @@
-<script setup>
-import { ref } 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({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-
-const deleteCampaign = async id => {
-  if (!id) return;
-
-  try {
-    await store.dispatch('campaigns/delete', id);
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  await deleteCampaign(props.selectedCampaign.id);
-  dialogRef.value?.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
-    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
-    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
-    @confirm="handleDialogConfirm"
-  />
-</template>

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

@@ -1,74 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const props = defineProps({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const liveChatCampaignFormRef = ref(null);
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
-
-const isInvalidForm = computed(
-  () => liveChatCampaignFormRef.value?.isSubmitDisabled
-);
-
-const selectedCampaignId = computed(() => props.selectedCampaign.id);
-
-const updateCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/update', {
-      id: selectedCampaignId.value,
-      ...campaignDetails,
-    });
-
-    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = () => {
-  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
-    :is-loading="isUpdatingCampaign"
-    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
-    overflow-y-auto
-    @confirm="handleSubmit"
-  >
-    <LiveChatCampaignForm
-      ref="liveChatCampaignFormRef"
-      mode="edit"
-      :selected-campaign="selectedCampaign"
-      :show-action-buttons="false"
-      @submit="handleSubmit"
-    />
-  </Dialog>
-</template>

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

@@ -1,54 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONGOING,
-    });
-
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => emit('close');
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-  handleClose();
-};
-</script>
-
-<template>
-  <div
-    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`) }}
-    </h3>
-    <LiveChatCampaignForm
-      mode="create"
-      @submit="handleSubmit"
-      @cancel="handleClose"
-    />
-  </div>
-</template>

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

@@ -1,323 +0,0 @@
-<script setup>
-import { reactive, computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { URLPattern } from 'urlpattern-polyfill';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCampaign: {
-    type: Object,
-    default: () => ({}),
-  },
-  showActionButtons: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
-};
-
-const senderList = ref([]);
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  senderId: 0,
-  enabled: true,
-  triggerOnlyDuringBusinessHours: false,
-  endPoint: '',
-  timeOnPage: 10,
-};
-
-const state = reactive({ ...initialState });
-
-const urlValidators = {
-  shouldBeAValidURLPattern: value => {
-    try {
-      // eslint-disable-next-line
-      new URLPattern(value);
-      return true;
-    } catch {
-      return false;
-    }
-  },
-  shouldStartWithHTTP: value =>
-    value ? value.startsWith('https://') || value.startsWith('http://') : false,
-};
-
-const validationRules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  senderId: { required },
-  endPoint: { required, ...urlValidators },
-  timeOnPage: { required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const sendersAndBotList = computed(() => [
-  { value: 0, label: 'Bot' },
-  ...mapToOptions(senderList.value, 'id', 'name'),
-]);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  endPoint: getErrorMessage('endPoint', 'END_POINT'),
-  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
-  sender: getErrorMessage('senderId', 'SENT_BY'),
-}));
-
-const resetState = () => Object.assign(state, initialState);
-
-const handleCancel = () => emit('cancel');
-
-const handleInboxChange = async inboxId => {
-  if (!inboxId) {
-    senderList.value = [];
-    return;
-  }
-
-  try {
-    const response = await store.dispatch('inboxMembers/get', { inboxId });
-    senderList.value = response?.data?.payload ?? [];
-  } catch (error) {
-    senderList.value = [];
-    useAlert(
-      error?.response?.message ??
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  sender_id: state.senderId || null,
-  enabled: state.enabled,
-  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
-  trigger_rules: {
-    url: state.endPoint,
-    time_on_page: state.timeOnPage,
-  },
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  if (props.mode === 'create') {
-    resetState();
-    handleCancel();
-  }
-};
-
-const updateStateFromCampaign = campaign => {
-  if (!campaign) return;
-
-  const {
-    title,
-    message,
-    inbox: { id: inboxId },
-    sender,
-    enabled,
-    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
-    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-  } = campaign;
-
-  Object.assign(state, {
-    title,
-    message,
-    inboxId,
-    senderId: sender?.id ?? 0,
-    enabled,
-    triggerOnlyDuringBusinessHours,
-    endPoint,
-    timeOnPage,
-  });
-};
-
-watch(
-  () => state.inboxId,
-  newInboxId => {
-    if (newInboxId) {
-      handleInboxChange(newInboxId);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.selectedCampaign,
-  newCampaign => {
-    if (props.mode === 'edit' && newCampaign) {
-      updateStateFromCampaign(newCampaign);
-    }
-  },
-  { immediate: true }
-);
-
-defineExpose({ prepareCampaignDetails, isSubmitDisabled });
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <Editor
-      v-model="state.message"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
-      </label>
-      <ComboBox
-        id="sentBy"
-        v-model="state.senderId"
-        :options="sendersAndBotList"
-        :has-error="!!formErrors.sender"
-        :disabled="!state.inboxId"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-        :message="formErrors.sender"
-      />
-    </div>
-
-    <Input
-      v-model="state.endPoint"
-      type="url"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
-      :message="formErrors.endPoint"
-      :message-type="formErrors.endPoint ? 'error' : 'info'"
-    />
-
-    <Input
-      v-model="state.timeOnPage"
-      type="number"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
-      :placeholder="
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
-      "
-      :message="formErrors.timeOnPage"
-      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
-    />
-
-    <fieldset class="flex flex-col gap-2.5">
-      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
-      </legend>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.enabled" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
-        </span>
-      </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{
-            t(
-              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
-            )
-          }}
-        </span>
-      </label>
-    </fieldset>
-
-    <div
-      v-if="showActionButtons"
-      class="flex items-center justify-between w-full gap-3"
-    >
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="
-          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
-        "
-        class="w-full"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>

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

@@ -1,49 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    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`) }}
-    </h3>
-    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-  </div>
-</template>

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

@@ -1,189 +0,0 @@
-<script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getSMSInboxes'),
-};
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  scheduled_at: formatToUTCString(state.scheduledAt),
-  audience: state.selectedAudience?.map(id => ({
-    id,
-    type: 'Label',
-  })),
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <TextArea
-      v-model="state.message"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      show-character-count
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex items-center justify-between w-full gap-3">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>

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

@@ -1,32 +0,0 @@
-<script setup>
-defineProps({
-  layout: {
-    type: String,
-    default: 'col',
-  },
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <div
-    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 px-6 py-5"
-      :class="
-        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
-      "
-      @click="handleClick"
-    >
-      <slot />
-    </div>
-
-    <slot name="after" />
-  </div>
-</template>

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

@@ -1,108 +0,0 @@
-<script setup>
-import { computed, watch, onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-
-import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
-import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';
-
-const props = defineProps({
-  contactId: {
-    type: [String, Number],
-    default: null,
-  },
-});
-
-const store = useStore();
-const route = useRoute();
-
-const showDropdown = ref(false);
-
-const allLabels = useMapGetter('labels/getLabels');
-const contactLabels = useMapGetter('contactLabels/getContactLabels');
-
-const savedLabels = computed(() => {
-  const availableContactLabels = contactLabels.value(props.contactId);
-  return allLabels.value.filter(({ title }) =>
-    availableContactLabels.includes(title)
-  );
-});
-
-const labelMenuItems = computed(() => {
-  return allLabels.value
-    ?.map(label => ({
-      label: label.title,
-      value: label.id,
-      thumbnail: { name: label.title, color: label.color },
-      isSelected: savedLabels.value.some(
-        savedLabel => savedLabel.id === label.id
-      ),
-      action: 'addLabel',
-    }))
-    .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
-});
-
-const fetchLabels = async contactId => {
-  if (!contactId) {
-    return;
-  }
-  store.dispatch('contactLabels/get', contactId);
-};
-
-const handleLabelAction = async ({ action, value }) => {
-  try {
-    // Get current label titles
-    const currentLabels = savedLabels.value.map(label => label.title);
-
-    // Find the label title for the ID (value)
-    const selectedLabel = allLabels.value.find(label => label.id === value);
-    if (!selectedLabel) return;
-
-    let updatedLabels;
-    if (action === 'addLabel') {
-      // If label is already selected, remove it (toggle behavior)
-      if (currentLabels.includes(selectedLabel.title)) {
-        updatedLabels = currentLabels.filter(
-          labelTitle => labelTitle !== selectedLabel.title
-        );
-      } else {
-        // Add the new label
-        updatedLabels = [...currentLabels, selectedLabel.title];
-      }
-    }
-
-    await store.dispatch('contactLabels/update', {
-      contactId: props.contactId,
-      labels: updatedLabels,
-    });
-
-    showDropdown.value = false;
-  } catch (error) {
-    // error
-  }
-};
-
-watch(
-  () => props.contactId,
-  (newVal, oldVal) => {
-    if (newVal !== oldVal) {
-      fetchLabels(newVal);
-    }
-  }
-);
-onMounted(() => {
-  if (route.params.contactId) {
-    fetchLabels(route.params.contactId);
-  }
-});
-</script>
-
-<template>
-  <div class="flex flex-wrap items-center gap-2">
-    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
-    <AddLabel
-      :label-menu-items="labelMenuItems"
-      @update-label="handleLabelAction"
-    />
-  </div>
-</template>

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

@@ -1,183 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Flag from 'dashboard/components-next/flag/Flag.vue';
-import countries from 'shared/constants/countries';
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  name: { type: String, default: '' },
-  email: { type: String, default: '' },
-  additionalAttributes: { type: Object, default: () => ({}) },
-  phoneNumber: { type: String, default: '' },
-  thumbnail: { type: String, default: '' },
-  isExpanded: { type: Boolean, default: false },
-  isUpdating: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
-
-const { t } = useI18n();
-
-const contactsFormRef = ref(null);
-
-const getInitialContactData = () => ({
-  id: props.id,
-  name: props.name,
-  email: props.email,
-  phoneNumber: props.phoneNumber,
-  additionalAttributes: props.additionalAttributes,
-});
-
-const contactData = ref(getInitialContactData());
-
-const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
-
-const countriesMap = computed(() => {
-  return countries.reduce((acc, country) => {
-    acc[country.code] = country;
-    acc[country.id] = country;
-    return acc;
-  }, {});
-});
-
-const countryDetails = computed(() => {
-  const attributes = props.additionalAttributes || {};
-  const { country, countryCode, city } = attributes;
-
-  if (!country && !countryCode) return null;
-
-  const activeCountry =
-    countriesMap.value[country] || countriesMap.value[countryCode];
-
-  if (!activeCountry) return null;
-
-  return {
-    countryCode: activeCountry.id,
-    city: city ? `${city},` : null,
-    name: activeCountry.name,
-  };
-});
-
-const formattedLocation = computed(() => {
-  if (!countryDetails.value) return '';
-
-  return [countryDetails.value.city, countryDetails.value.name]
-    .filter(Boolean)
-    .join(' ');
-});
-
-const handleFormUpdate = updatedData => {
-  Object.assign(contactData.value, updatedData);
-};
-
-const handleUpdateContact = () => {
-  emit('updateContact', contactData.value);
-};
-
-const onClickExpand = () => {
-  emit('toggle');
-  contactData.value = getInitialContactData();
-};
-
-const onClickViewDetails = () => emit('showContact', props.id);
-</script>
-
-<template>
-  <CardLayout :key="id" layout="row">
-    <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
-      <div class="flex flex-col gap-0.5 flex-1">
-        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
-          <span class="text-base font-medium truncate text-n-slate-12">
-            {{ name }}
-          </span>
-          <span class="inline-flex items-center gap-1">
-            <span
-              v-if="additionalAttributes?.companyName"
-              class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
-            />
-            <span
-              v-if="additionalAttributes?.companyName"
-              class="text-sm truncate text-n-slate-11"
-            >
-              {{ additionalAttributes.companyName }}
-            </span>
-          </span>
-        </div>
-        <div class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1">
-          <div v-if="email" class="truncate max-w-72" :title="email">
-            <span class="text-sm text-n-slate-11">
-              {{ email }}
-            </span>
-          </div>
-          <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
-          <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
-            {{ phoneNumber }}
-          </span>
-          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
-          <span
-            v-if="countryDetails"
-            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
-          >
-            <Flag :country="countryDetails.countryCode" class="size-3.5" />
-            {{ formattedLocation }}
-          </span>
-          <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
-          <Button
-            :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
-            variant="link"
-            size="xs"
-            @click="onClickViewDetails"
-          />
-        </div>
-      </div>
-    </div>
-
-    <Button
-      icon="i-lucide-chevron-down"
-      variant="ghost"
-      color="slate"
-      size="xs"
-      :class="{ 'rotate-180': isExpanded }"
-      @click="onClickExpand"
-    />
-
-    <template #after>
-      <transition
-        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
-        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
-        enter-from-class="overflow-hidden opacity-0 max-h-0"
-        enter-to-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-from-class="opacity-100 max-h-[690px] sm:max-h-[470px] md:max-h-[410px]"
-        leave-to-class="overflow-hidden opacity-0 max-h-0"
-      >
-        <div v-show="isExpanded" class="w-full">
-          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
-            <ContactsForm
-              ref="contactsFormRef"
-              :contact-data="contactData"
-              @update="handleFormUpdate"
-            />
-            <div>
-              <Button
-                :label="
-                  t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
-                "
-                size="sm"
-                :is-loading="isUpdating"
-                :disabled="isUpdating || isFormInvalid"
-                @click="handleUpdateContact"
-              />
-            </div>
-          </div>
-        </div>
-      </transition>
-    </template>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import ContactsCard from '../ContactsCard.vue';
-import contacts from './fixtures';
-
-const expandedCardId = ref(null);
-
-const toggleExpanded = id => {
-  expandedCardId.value = expandedCardId.value === id ? null : id;
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactsCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Default with expandable function">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="contacts[0]"
-          :is-expanded="expandedCardId === contacts[0].id"
-          @toggle="toggleExpanded(contacts[0].id)"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Company Name and without phone number">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="{ ...contacts[1], phoneNumber: '' }"
-          :is-expanded="false"
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Expanded State">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="contacts[2]"
-          is-expanded
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Without Email and Phone">
-      <div class="flex flex-col p-4">
-        <ContactsCard
-          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
-          :is-expanded="false"
-          @toggle="() => {}"
-          @update-contact="() => {}"
-          @show-contact="() => {}"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js

@@ -1,149 +0,0 @@
-export default [
-  {
-    additionalAttributes: {
-      socialProfiles: {},
-    },
-    availabilityStatus: null,
-    email: 'johndoe@chatwoot.com',
-    id: 370,
-    name: 'John Doe',
-    phoneNumber: '+918634322418',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
-    customAttributes: {},
-    lastActivityAt: 1731608270,
-    createdAt: 1731586271,
-  },
-  {
-    additionalAttributes: {
-      city: 'kerala',
-      country: 'India',
-      description: 'Curious about the web. ',
-      companyName: 'Chatwoot',
-      countryCode: '',
-      socialProfiles: {
-        github: 'abozler',
-        twitter: 'ozler',
-        facebook: 'abozler',
-        linkedin: 'abozler',
-        instagram: 'ozler',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ozler@chatwoot.com',
-    id: 29,
-    name: 'Abraham Ozlers',
-    phoneNumber: '+246232222222',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
-    customAttributes: {
-      dateContact: '2024-02-01T00:00:00.000Z',
-      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
-      listContact: 'Not spam',
-      numberContact: '12',
-    },
-    lastActivityAt: 1712127410,
-    createdAt: 1712127389,
-  },
-  {
-    additionalAttributes: {
-      city: 'Kerala',
-      country: 'India',
-      description:
-        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
-      companyName: 'Chatwoot',
-      countryCode: 'IN',
-      socialProfiles: {
-        github: 'cmathersonj',
-        twitter: 'cmather',
-        facebook: 'cmathersonj',
-        linkedin: 'cmathersonj',
-        instagram: 'cmathersonjs',
-      },
-    },
-    availabilityStatus: null,
-    email: 'cmathersonj@va.test',
-    id: 22,
-    name: 'Candice Matherson',
-    phoneNumber: '+917474774742',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
-    customAttributes: {
-      dateContact: '2024-11-12T03:23:06.963Z',
-      linkContact: 'https://sd.sd',
-      textContact: 'hey',
-      numberContact: '12',
-      checkboxContact: true,
-    },
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      city: '',
-      country: '',
-      description: '',
-      companyName: '',
-      countryCode: '',
-      socialProfiles: {
-        github: '',
-        twitter: '',
-        facebook: '',
-        linkedin: '',
-        instagram: '',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ofolkardi@taobao.test',
-    id: 21,
-    name: 'Ophelia Folkard',
-    phoneNumber: '',
-    identifier: null,
-    thumbnail:
-      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
-    customAttributes: {},
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      socialProfiles: {},
-    },
-    availabilityStatus: null,
-    email: 'wcasteloth@exblog.jp',
-    id: 20,
-    name: 'Willy Castelot',
-    phoneNumber: '+919384',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
-    customAttributes: {},
-    lastActivityAt: 1712123233,
-    createdAt: 1712123233,
-  },
-  {
-    additionalAttributes: {
-      city: '',
-      country: '',
-      description: '',
-      companyName: '',
-      countryCode: '',
-      socialProfiles: {
-        github: '',
-        twitter: '',
-        facebook: '',
-        linkedin: '',
-        instagram: '',
-      },
-    },
-    availabilityStatus: null,
-    email: 'ederingtong@printfriendly.test',
-    id: 19,
-    name: 'Elisabeth Derington',
-    phoneNumber: '',
-    identifier: null,
-    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
-    customAttributes: {},
-    lastActivityAt: 1712123232,
-    createdAt: 1712123232,
-  },
-];

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

@@ -1,89 +0,0 @@
-<script setup>
-import { computed, useSlots } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-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: () => ({}),
-  },
-});
-
-const emit = defineEmits(['goToContactsList']);
-
-const { t } = useI18n();
-const slots = useSlots();
-const route = useRoute();
-
-const contactId = computed(() => route.params.contactId);
-
-const selectedContactName = computed(() => {
-  return props.selectedContact?.name;
-});
-
-const breadcrumbItems = computed(() => {
-  const items = [
-    {
-      label: t('CONTACTS_LAYOUT.HEADER.BREADCRUMB.CONTACTS'),
-      link: '#',
-    },
-  ];
-  if (props.selectedContact) {
-    items.push({
-      label: selectedContactName.value,
-    });
-  }
-  return items;
-});
-
-const handleBreadcrumbClick = () => {
-  emit('goToContactsList');
-};
-</script>
-
-<template>
-  <section
-    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
-  >
-    <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 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"
-            />
-            <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 xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[650px]">
-          <slot name="default" />
-        </div>
-      </main>
-    </div>
-
-    <div
-      v-if="slots.sidebar"
-      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>
-  </section>
-</template>

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

@@ -1,58 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  selectedContact: {
-    type: Object,
-    default: null,
-  },
-});
-
-const emit = defineEmits(['goToContactsList']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-
-const dialogRef = ref(null);
-
-const deleteContact = async id => {
-  if (!id) return;
-
-  try {
-    await store.dispatch('contacts/delete', id);
-    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.API.ERROR_MESSAGE'));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  emit('goToContactsList');
-  await deleteContact(route.params.contactId || props.selectedContact.id);
-  dialogRef.value?.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')"
-    :description="
-      t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', {
-        contactName: props.selectedContact.name,
-      })
-    "
-    :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')"
-    @confirm="handleDialogConfirm"
-  />
-</template>

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

@@ -1,66 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const emit = defineEmits(['export']);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const dialogRef = ref(null);
-
-const segments = useMapGetter('customViews/getContactCustomViews');
-const appliedFilters = useMapGetter('contacts/getAppliedContactFilters');
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const isExportingContact = computed(() => uiFlags.value.isExporting);
-
-const activeSegmentId = computed(() => route.params.segmentId);
-const activeSegment = computed(() =>
-  activeSegmentId.value
-    ? segments.value.find(view => view.id === Number(activeSegmentId.value))
-    : undefined
-);
-
-const exportContacts = async () => {
-  let query = { payload: [] };
-
-  if (activeSegmentId.value && activeSegment.value) {
-    query = activeSegment.value.query;
-  } else if (Object.keys(appliedFilters.value).length > 0) {
-    query = filterQueryGenerator(appliedFilters.value);
-  }
-
-  emit('export', {
-    ...query,
-    label: route.params.label || '',
-  });
-};
-
-const handleDialogConfirm = async () => {
-  await exportContacts();
-  dialogRef.value?.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.TITLE')"
-    :description="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.DESCRIPTION')
-    "
-    :confirm-button-label="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.CONFIRM')
-    "
-    :is-loading="isExportingContact"
-    :disable-confirm-button="isExportingContact"
-    @confirm="handleDialogConfirm"
-  />
-</template>

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

@@ -1,134 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const emit = defineEmits(['import']);
-const { t } = useI18n();
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const isImportingContact = computed(() => uiFlags.value.isImporting);
-
-const dialogRef = ref(null);
-const fileInput = ref(null);
-
-const hasSelectedFile = ref(null);
-const selectedFileName = ref('');
-
-const csvUrl = '/downloads/import-contacts-sample.csv';
-
-const handleFileClick = () => fileInput.value?.click();
-
-const processFileName = fileName => {
-  const lastDotIndex = fileName.lastIndexOf('.');
-  const extension = fileName.slice(lastDotIndex);
-  const baseName = fileName.slice(0, lastDotIndex);
-
-  return baseName.length > 20
-    ? `${baseName.slice(0, 20)}...${extension}`
-    : fileName;
-};
-
-const handleFileChange = () => {
-  const file = fileInput.value?.files[0];
-  hasSelectedFile.value = file;
-  selectedFileName.value = file ? processFileName(file.name) : '';
-};
-
-const handleRemoveFile = () => {
-  hasSelectedFile.value = null;
-  if (fileInput.value) {
-    fileInput.value.value = null;
-  }
-  selectedFileName.value = '';
-};
-
-const uploadFile = async () => {
-  if (!hasSelectedFile.value) return;
-  emit('import', hasSelectedFile.value);
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.TITLE')"
-    :confirm-button-label="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.IMPORT')
-    "
-    :is-loading="isImportingContact"
-    :disable-confirm-button="isImportingContact"
-    @confirm="uploadFile"
-  >
-    <template #description>
-      <p class="mb-0 text-sm text-n-slate-11">
-        {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DESCRIPTION') }}
-        <a
-          :href="csvUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-          download="import-contacts-sample.csv"
-          class="text-n-blue-text"
-        >
-          {{
-            t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
-          }}
-        </a>
-      </p>
-    </template>
-
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center gap-2">
-        <label class="text-sm text-n-slate-12 whitespace-nowrap">
-          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.LABEL') }}
-        </label>
-        <div class="flex items-center justify-between w-full gap-2">
-          <span v-if="hasSelectedFile" class="text-sm text-n-slate-12">
-            {{ selectedFileName }}
-          </span>
-          <Button
-            v-if="!hasSelectedFile"
-            :label="
-              t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHOOSE_FILE')
-            "
-            icon="i-lucide-upload"
-            color="slate"
-            variant="ghost"
-            size="sm"
-            class="!w-fit"
-            @click="handleFileClick"
-          />
-          <div v-else class="flex items-center gap-1">
-            <Button
-              :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.CHANGE')"
-              color="slate"
-              variant="ghost"
-              size="sm"
-              @click="handleFileClick"
-            />
-            <div class="w-px h-3 bg-n-strong" />
-            <Button
-              icon="i-lucide-trash"
-              color="slate"
-              variant="ghost"
-              size="sm"
-              @click="handleRemoveFile"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <input
-      ref="fileInput"
-      type="file"
-      accept="text/csv"
-      class="hidden"
-      @change="handleFileChange"
-    />
-  </Dialog>
-</template>

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

@@ -1,112 +0,0 @@
-<script setup>
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  selectedContact: {
-    type: Object,
-    required: true,
-  },
-  primaryContactId: {
-    type: [Number, null],
-    default: null,
-  },
-  primaryContactList: {
-    type: Array,
-    default: () => [],
-  },
-  isSearching: {
-    type: Boolean,
-    default: false,
-  },
-  hasError: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:primaryContactId', 'search']);
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center justify-between h-5 gap-2">
-        <label class="text-sm text-n-slate-12">
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
-        </label>
-        <span
-          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
-        >
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
-        </span>
-      </div>
-      <ComboBox
-        id="inbox"
-        :model-value="primaryContactId"
-        :options="primaryContactList"
-        :empty-state="
-          isSearching
-            ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
-            : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
-        "
-        :search-placeholder="
-          t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
-        "
-        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
-        :has-error="hasError"
-        :message="errorMessage"
-        class="[&>div>button]:bg-n-alpha-black2"
-        @update:model-value="value => emit('update:primaryContactId', value)"
-        @search="query => emit('search', query)"
-      />
-    </div>
-    <div class="relative flex justify-center gap-2 top-4">
-      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
-        <div
-          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
-        />
-        <div
-          class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
-        />
-      </div>
-    </div>
-    <div class="flex flex-col gap-2">
-      <div class="flex items-center justify-between h-5 gap-2">
-        <label class="text-sm text-n-slate-12">
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
-        </label>
-        <span
-          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
-        >
-          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
-        </span>
-      </div>
-      <div
-        class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
-      >
-        <Avatar
-          :name="selectedContact.name || ''"
-          :src="selectedContact.thumbnail || ''"
-          :size="32"
-          rounded-full
-        />
-        <div class="flex flex-col w-full min-w-0 gap-1">
-          <span class="text-sm leading-4 truncate text-n-slate-11">
-            {{ selectedContact.name }}
-          </span>
-          <span class="text-sm leading-4 truncate text-n-slate-11">
-            {{ selectedContact.email }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,315 +0,0 @@
-<script setup>
-import { computed, reactive, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { required, email, minLength } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
-import { splitName } from '@chatwoot/utils';
-import countries from 'shared/constants/countries.js';
-import Input from 'dashboard/components-next/input/Input.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
-
-const props = defineProps({
-  contactData: {
-    type: Object,
-    default: null,
-  },
-  isDetailsView: {
-    type: Boolean,
-    default: false,
-  },
-  isNewContact: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update']);
-
-const { t } = useI18n();
-
-const FORM_CONFIG = {
-  FIRST_NAME: { field: 'firstName' },
-  LAST_NAME: { field: 'lastName' },
-  EMAIL_ADDRESS: { field: 'email' },
-  PHONE_NUMBER: { field: 'phoneNumber' },
-  CITY: { field: 'additionalAttributes.city' },
-  COUNTRY: { field: 'additionalAttributes.country' },
-  BIO: { field: 'additionalAttributes.description' },
-  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
-};
-
-const SOCIAL_CONFIG = {
-  LINKEDIN: 'i-ri-linkedin-box-fill',
-  FACEBOOK: 'i-ri-facebook-circle-fill',
-  INSTAGRAM: 'i-ri-instagram-line',
-  TWITTER: 'i-ri-twitter-x-fill',
-  GITHUB: 'i-ri-github-fill',
-};
-
-const defaultState = {
-  id: 0,
-  name: '',
-  email: '',
-  firstName: '',
-  lastName: '',
-  phoneNumber: '',
-  additionalAttributes: {
-    description: '',
-    companyName: '',
-    countryCode: '',
-    country: '',
-    city: '',
-    socialProfiles: {
-      facebook: '',
-      github: '',
-      instagram: '',
-      linkedin: '',
-      twitter: '',
-    },
-  },
-};
-
-const state = reactive({ ...defaultState });
-
-const validationRules = {
-  firstName: { required, minLength: minLength(2) },
-  email: { email },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const isFormInvalid = computed(() => v$.value.$invalid);
-
-const prepareStateBasedOnProps = () => {
-  if (props.isNewContact) {
-    return; // Added to prevent state update for new contact form
-  }
-
-  const {
-    id,
-    name = '',
-    email: emailAddress,
-    phoneNumber,
-    additionalAttributes = {},
-  } = props.contactData || {};
-  const { firstName, lastName } = splitName(name);
-  const {
-    description = '',
-    companyName = '',
-    countryCode = '',
-    country = '',
-    city = '',
-    socialProfiles = {},
-  } = additionalAttributes || {};
-
-  Object.assign(state, {
-    id,
-    name,
-    firstName,
-    lastName,
-    email: emailAddress,
-    phoneNumber,
-    additionalAttributes: {
-      description,
-      companyName,
-      countryCode,
-      country,
-      city,
-      socialProfiles,
-    },
-  });
-};
-
-const countryOptions = computed(() =>
-  countries.map(({ name }) => ({ label: name, value: name }))
-);
-
-const editDetailsForm = computed(() =>
-  Object.keys(FORM_CONFIG).map(key => ({
-    key,
-    placeholder: t(
-      `CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.${key}.PLACEHOLDER`
-    ),
-  }))
-);
-
-const socialProfilesForm = computed(() =>
-  Object.entries(SOCIAL_CONFIG).map(([key, icon]) => ({
-    key,
-    placeholder: t(`CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.FORM.${key}.PLACEHOLDER`),
-    icon,
-  }))
-);
-
-const isValidationField = key => {
-  const field = FORM_CONFIG[key]?.field;
-  return ['firstName', 'email'].includes(field);
-};
-
-const getValidationKey = key => {
-  return FORM_CONFIG[key]?.field;
-};
-
-// Creates a computed property for two-way form field binding
-const getFormBinding = key => {
-  const field = FORM_CONFIG[key]?.field;
-  if (!field) return null;
-
-  return computed({
-    get: () => {
-      // Handle firstName/lastName fields
-      if (field === 'firstName' || field === 'lastName') {
-        return state[field]?.toString() || '';
-      }
-
-      // Handle nested vs non-nested fields
-      const [base, nested] = field.split('.');
-      // Example: 'email' → state.email
-      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
-      return (nested ? state[base][nested] : state[base])?.toString() || '';
-    },
-
-    set: async value => {
-      // Handle name fields specially to maintain the combined 'name' field
-      if (field === 'firstName' || field === 'lastName') {
-        state[field] = value;
-        // Example: firstName="John", lastName="Doe" → name="John Doe"
-        state.name = `${state.firstName} ${state.lastName}`.trim();
-      } else {
-        // Handle nested vs non-nested fields
-        const [base, nested] = field.split('.');
-        if (nested) {
-          // Example: additionalAttributes.city = "New York"
-          state[base][nested] = value;
-        } else {
-          // Example: email = "test@example.com"
-          state[base] = value;
-        }
-      }
-
-      const isFormValid = await v$.value.$validate();
-      if (isFormValid) {
-        const { firstName, lastName, ...stateWithoutNames } = state;
-        emit('update', stateWithoutNames);
-      }
-    },
-  });
-};
-
-const getMessageType = key => {
-  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
-    ? 'error'
-    : 'info';
-};
-
-const handleCountrySelection = value => {
-  const selectedCountry = countries.find(option => option.name === value);
-  state.additionalAttributes.countryCode = selectedCountry?.id || '';
-  emit('update', state);
-};
-
-const resetValidation = () => {
-  v$.value.$reset();
-};
-
-const resetForm = () => {
-  Object.assign(state, defaultState);
-};
-
-watch(() => props.contactData, prepareStateBasedOnProps, {
-  immediate: true,
-  deep: true,
-});
-
-// Expose state to parent component for avatar upload
-defineExpose({
-  state,
-  resetValidation,
-  isFormInvalid,
-  resetForm,
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-6">
-    <div class="flex flex-col items-start gap-2">
-      <span class="py-1 text-sm font-medium text-n-slate-12">
-        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
-      </span>
-      <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
-        <template v-for="item in editDetailsForm" :key="item.key">
-          <ComboBox
-            v-if="item.key === 'COUNTRY'"
-            v-model="state.additionalAttributes.country"
-            :options="countryOptions"
-            :placeholder="item.placeholder"
-            class="[&>div>button]:h-8"
-            :class="{
-              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
-                !isDetailsView,
-              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
-                isDetailsView,
-            }"
-            @update:model-value="handleCountrySelection"
-          />
-          <PhoneNumberInput
-            v-else-if="item.key === 'PHONE_NUMBER'"
-            v-model="getFormBinding(item.key).value"
-            :placeholder="item.placeholder"
-            :show-border="isDetailsView"
-          />
-          <Input
-            v-else
-            v-model="getFormBinding(item.key).value"
-            :placeholder="item.placeholder"
-            :message-type="getMessageType(item.key)"
-            :custom-input-class="`h-8 !pt-1 !pb-1 ${
-              !isDetailsView ? '[&:not(.error,.focus)]:!border-transparent' : ''
-            }`"
-            class="w-full"
-            @input="
-              isValidationField(item.key) &&
-                v$[getValidationKey(item.key)].$touch()
-            "
-            @blur="
-              isValidationField(item.key) &&
-                v$[getValidationKey(item.key)].$touch()
-            "
-          />
-        </template>
-      </div>
-    </div>
-    <div class="flex flex-col items-start gap-2">
-      <span class="py-1 text-sm font-medium text-n-slate-12">
-        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
-      </span>
-      <div class="flex flex-wrap gap-2">
-        <div
-          v-for="item in socialProfilesForm"
-          :key="item.key"
-          class="flex items-center h-8 gap-2 px-2 rounded-lg"
-          :class="{
-            'bg-n-alpha-2 dark:bg-n-solid-2': isDetailsView,
-            'bg-n-alpha-2 dark:bg-n-solid-3': !isDetailsView,
-          }"
-        >
-          <Icon
-            :icon="item.icon"
-            class="flex-shrink-0 text-n-slate-11 size-4"
-          />
-          <input
-            v-model="
-              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
-            "
-            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)"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,68 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
-
-const emit = defineEmits(['create']);
-
-const { t } = useI18n();
-
-const dialogRef = ref(null);
-const contactsFormRef = ref(null);
-const contact = ref(null);
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-const isCreatingContact = computed(() => uiFlags.value.isCreating);
-
-const createNewContact = contactItem => {
-  contact.value = contactItem;
-};
-
-const handleDialogConfirm = async () => {
-  if (!contact.value) return;
-  emit('create', contact.value);
-};
-
-const onSuccess = () => {
-  contactsFormRef.value?.resetForm();
-  dialogRef.value.close();
-};
-
-const closeDialog = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef, contactsFormRef, onSuccess });
-</script>
-
-<template>
-  <Dialog ref="dialogRef" width="3xl" @confirm="handleDialogConfirm">
-    <ContactsForm
-      ref="contactsFormRef"
-      is-new-contact
-      @update="createNewContact"
-    />
-    <template #footer>
-      <div class="flex items-center justify-between w-full gap-3">
-        <Button
-          :label="t('DIALOG.BUTTONS.CANCEL')"
-          variant="link"
-          class="h-10 hover:!no-underline hover:text-n-brand"
-          @click="closeDialog"
-        />
-        <Button
-          :label="
-            t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
-          "
-          color="blue"
-          :is-loading="isCreatingContact"
-          @click="handleDialogConfirm"
-        />
-      </div>
-    </template>
-  </Dialog>
-</template>

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

@@ -1,71 +0,0 @@
-<script setup>
-import { ref, reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const emit = defineEmits(['create']);
-
-const FILTER_TYPE_CONTACT = 1;
-
-const { t } = useI18n();
-
-const uiFlags = useMapGetter('customViews/getUIFlags');
-const isCreating = computed(() => uiFlags.value.isCreating);
-
-const dialogRef = ref(null);
-
-const state = reactive({
-  name: '',
-});
-
-const validationRules = {
-  name: { required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const handleDialogConfirm = async () => {
-  const isNameValid = await v$.value.$validate();
-  if (!isNameValid) return;
-  emit('create', {
-    name: state.name,
-    filter_type: FILTER_TYPE_CONTACT,
-  });
-  state.name = '';
-  v$.value.$reset();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.TITLE')"
-    :confirm-button-label="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.CONFIRM')
-    "
-    :is-loading="isCreating"
-    :disable-confirm-button="isCreating"
-    @confirm="handleDialogConfirm"
-  >
-    <Input
-      v-model="state.name"
-      :label="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.LABEL')"
-      :placeholder="
-        t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.PLACEHOLDER')
-      "
-      :message="
-        v$.name.$error
-          ? t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR')
-          : ''
-      "
-      :message-type="v$.name.$error ? 'error' : 'info'"
-    />
-  </Dialog>
-</template>

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

@@ -1,43 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const emit = defineEmits(['delete']);
-
-const FILTER_TYPE_CONTACT = 'contact';
-
-const { t } = useI18n();
-
-const uiFlags = useMapGetter('customViews/getUIFlags');
-const isDeleting = computed(() => uiFlags.value.isDeleting);
-
-const dialogRef = ref(null);
-
-const handleDialogConfirm = async () => {
-  emit('delete', {
-    filterType: FILTER_TYPE_CONTACT,
-  });
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.TITLE')"
-    :description="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.DESCRIPTION')
-    "
-    :confirm-button-label="
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.CONFIRM')
-    "
-    :is-loading="isDeleting"
-    :disable-confirm-button="isDeleting"
-    @confirm="handleDialogConfirm"
-  />
-</template>

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

@@ -1,73 +0,0 @@
-<script setup>
-import ContactMergeForm from '../ContactMergeForm.vue';
-import { contactData, primaryContactList } from './fixtures';
-
-const handleSearch = query => {
-  console.log('Searching for:', query);
-};
-
-const handleUpdate = value => {
-  console.log('Primary contact updated:', value);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactMergeForm"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactMergeForm
-          :selected-contact="contactData"
-          :primary-contact-list="primaryContactList"
-          :primary-contact-id="null"
-          :is-searching="false"
-          @update:primary-contact-id="handleUpdate"
-          @search="handleSearch"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With Selected Primary Contact">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactMergeForm
-          :selected-contact="contactData"
-          :primary-contact-list="primaryContactList"
-          :primary-contact-id="1"
-          :is-searching="false"
-          @update:primary-contact-id="handleUpdate"
-          @search="handleSearch"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Error State">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactMergeForm
-          :selected-contact="contactData"
-          :primary-contact-list="primaryContactList"
-          :primary-contact-id="null"
-          :is-searching="false"
-          has-error
-          error-message="Please select a primary contact"
-          @update:primary-contact-id="handleUpdate"
-          @search="handleSearch"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty Primary Contact List">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactMergeForm
-          :selected-contact="contactData"
-          :primary-contact-list="[]"
-          :primary-contact-id="null"
-          :is-searching="false"
-          @update:primary-contact-id="handleUpdate"
-          @search="handleSearch"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,80 +0,0 @@
-<script setup>
-import ContactsForm from '../ContactsForm.vue';
-import { contactData } from './fixtures';
-
-const handleUpdate = updatedData => {
-  console.log('Form updated:', updatedData);
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactsForm"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default without border">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
-      </div>
-    </Variant>
-
-    <Variant title="Details View with border">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="contactData"
-          is-details-view
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Minimal Data">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="{
-            id: 21,
-            name: 'Ophelia Folkard',
-            email: 'ofolkardi@taobao.test',
-            phoneNumber: '',
-            additionalAttributes: {
-              city: '',
-              country: '',
-              description: '',
-              companyName: '',
-              countryCode: '',
-              socialProfiles: {
-                github: '',
-                twitter: '',
-                facebook: '',
-                linkedin: '',
-                instagram: '',
-              },
-            },
-          }"
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="With All Social Profiles">
-      <div class="p-6 border rounded-lg border-n-strong">
-        <ContactsForm
-          :contact-data="{
-            ...contactData,
-            additionalAttributes: {
-              ...contactData.additionalAttributes,
-              socialProfiles: {
-                github: 'cmathersonj',
-                twitter: 'cmather',
-                facebook: 'cmathersonj',
-                linkedin: 'cmathersonj',
-                instagram: 'cmathersonjs',
-              },
-            },
-          }"
-          @update="handleUpdate"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js

@@ -1,47 +0,0 @@
-export const contactData = {
-  id: 370,
-  name: 'John Doe',
-  email: 'johndoe@chatwoot.com',
-  phoneNumber: '+918634322418',
-  additionalAttributes: {
-    city: 'Kerala',
-    country: 'India',
-    description: 'Curious about the web.',
-    companyName: 'Chatwoot',
-    countryCode: 'IN',
-    socialProfiles: {
-      github: 'johndoe',
-      twitter: 'johndoe',
-      facebook: 'johndoe',
-      linkedin: 'johndoe',
-      instagram: 'johndoe',
-    },
-  },
-};
-
-export const primaryContactList = [
-  {
-    id: 1,
-    name: 'Jane Smith',
-    email: 'jane@chatwoot.com',
-    thumbnail: '',
-    label: '(ID: 1) Jane Smith',
-    value: 1,
-  },
-  {
-    id: 2,
-    name: 'Mike Johnson',
-    email: 'mike@chatwoot.com',
-    thumbnail: '',
-    label: '(ID: 2) Mike Johnson',
-    value: 2,
-  },
-  {
-    id: 3,
-    name: 'Sarah Wilson',
-    email: 'sarah@chatwoot.com',
-    thumbnail: '',
-    label: '(ID: 3) Sarah Wilson',
-    value: 3,
-  },
-];

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

@@ -1,143 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import ContactSortMenu from './components/ContactSortMenu.vue';
-import ContactMoreActions from './components/ContactMoreActions.vue';
-import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-
-defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    required: true,
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isSegmentsView: {
-    type: Boolean,
-    default: false,
-  },
-  hasActiveFilters: {
-    type: Boolean,
-    default: false,
-  },
-  isLabelView: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'search',
-  'filter',
-  'update:sort',
-  'add',
-  'import',
-  'export',
-  'createSegment',
-  'deleteSegment',
-]);
-</script>
-
-<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-[960px]"
-    >
-      <span class="text-xl font-medium truncate text-n-slate-12">
-        {{ headerTitle }}
-      </span>
-      <div class="flex items-center flex-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2">
-          <Input
-            :model-value="searchValue"
-            type="search"
-            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
-            :custom-input-class="[
-              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
-            ]"
-            @input="emit('search', $event.target.value)"
-          >
-            <template #prefix>
-              <Icon
-                icon="i-lucide-search"
-                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
-              />
-            </template>
-          </Input>
-        </div>
-        <div class="flex items-center gap-2">
-          <div v-if="!isLabelView" class="relative">
-            <Button
-              id="toggleContactsFilterButton"
-              :icon="
-                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
-              "
-              color="slate"
-              size="sm"
-              class="relative w-8"
-              variant="ghost"
-              @click="emit('filter')"
-            >
-              <div
-                v-if="hasActiveFilters && !isSegmentsView"
-                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-              />
-            </Button>
-            <slot name="filter" />
-          </div>
-          <Button
-            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
-            icon="i-lucide-save"
-            color="slate"
-            size="sm"
-            variant="ghost"
-            @click="emit('createSegment')"
-          />
-          <Button
-            v-if="isSegmentsView && !isLabelView"
-            icon="i-lucide-trash"
-            color="slate"
-            size="sm"
-            variant="ghost"
-            @click="emit('deleteSegment')"
-          />
-          <ContactSortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-          <ContactMoreActions
-            @add="emit('add')"
-            @import="emit('import')"
-            @export="emit('export')"
-          />
-        </div>
-        <div class="w-px h-4 bg-n-strong" />
-        <ComposeConversation>
-          <template #trigger="{ toggle }">
-            <Button :label="buttonLabel" size="sm" @click="toggle" />
-          </template>
-        </ComposeConversation>
-      </div>
-    </div>
-  </header>
-</template>

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

@@ -1,311 +0,0 @@
-<script setup>
-import { ref, computed, unref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useRouter } from 'vue-router';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
-import contactFilterItems from 'dashboard/routes/dashboard/contacts/contactFilterItems';
-import {
-  DuplicateContactException,
-  ExceptionWithMessage,
-} from 'shared/helpers/CustomErrors';
-import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-import countries from 'shared/constants/countries';
-import {
-  useCamelCase,
-  useSnakeCase,
-} from 'dashboard/composables/useTransformKeys';
-
-import ContactsHeader from 'dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue';
-import CreateNewContactDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue';
-import ContactExportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactExportDialog.vue';
-import ContactImportDialog from 'dashboard/components-next/Contacts/ContactsForm/ContactImportDialog.vue';
-import CreateSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/CreateSegmentDialog.vue';
-import DeleteSegmentDialog from 'dashboard/components-next/Contacts/ContactsForm/DeleteSegmentDialog.vue';
-import ContactsFilter from 'dashboard/components-next/filter/ContactsFilter.vue';
-
-const props = defineProps({
-  showSearch: { type: Boolean, default: true },
-  searchValue: { type: String, default: '' },
-  activeSort: { type: String, default: 'last_activity_at' },
-  activeOrdering: { type: String, default: '' },
-  headerTitle: { type: String, default: '' },
-  segmentsId: { type: [String, Number], default: 0 },
-  activeSegment: { type: Object, default: null },
-  hasAppliedFilters: { type: Boolean, default: false },
-  isLabelView: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'update:sort',
-  'search',
-  'applyFilter',
-  'clearFilters',
-]);
-
-const { t } = useI18n();
-const store = useStore();
-const router = useRouter();
-
-const createNewContactDialogRef = ref(null);
-const contactExportDialogRef = ref(null);
-const contactImportDialogRef = ref(null);
-const createSegmentDialogRef = ref(null);
-const deleteSegmentDialogRef = ref(null);
-
-const showFiltersModal = ref(false);
-const appliedFilter = ref([]);
-const segmentsQuery = ref({});
-
-const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
-const contactAttributes = useMapGetter('attributes/getContactAttributes');
-const hasActiveSegments = computed(
-  () => props.activeSegment && props.segmentsId !== 0
-);
-const activeSegmentName = computed(() => props.activeSegment?.name);
-
-const openCreateNewContactDialog = async () => {
-  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
-  createNewContactDialogRef.value?.dialogRef.open();
-};
-const openContactImportDialog = () =>
-  contactImportDialogRef.value?.dialogRef.open();
-const openContactExportDialog = () =>
-  contactExportDialogRef.value?.dialogRef.open();
-const openCreateSegmentDialog = () =>
-  createSegmentDialogRef.value?.dialogRef.open();
-const openDeleteSegmentDialog = () =>
-  deleteSegmentDialogRef.value?.dialogRef.open();
-
-const onCreate = async contact => {
-  try {
-    await store.dispatch('contacts/create', contact);
-    createNewContactDialogRef.value?.onSuccess();
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    const i18nPrefix = 'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION';
-    if (error instanceof DuplicateContactException) {
-      if (error.data.includes('email')) {
-        useAlert(t(`${i18nPrefix}.EMAIL_ADDRESS_DUPLICATE`));
-      } else if (error.data.includes('phone_number')) {
-        useAlert(t(`${i18nPrefix}.PHONE_NUMBER_DUPLICATE`));
-      }
-    } else if (error instanceof ExceptionWithMessage) {
-      useAlert(error.data);
-    } else {
-      useAlert(t(`${i18nPrefix}.ERROR_MESSAGE`));
-    }
-  }
-};
-
-const onImport = async file => {
-  try {
-    await store.dispatch('contacts/import', file);
-    contactImportDialogRef.value?.dialogRef.close();
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.SUCCESS_MESSAGE')
-    );
-    useTrack(CONTACTS_EVENTS.IMPORT_SUCCESS);
-  } catch (error) {
-    useAlert(
-      error.message ??
-        t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.ERROR_MESSAGE')
-    );
-    useTrack(CONTACTS_EVENTS.IMPORT_FAILURE);
-  }
-};
-
-const onExport = async query => {
-  try {
-    await store.dispatch('contacts/export', query);
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error.message ||
-        t('CONTACTS_LAYOUT.HEADER.ACTIONS.EXPORT_CONTACT.ERROR_MESSAGE')
-    );
-  }
-};
-
-const onCreateSegment = async payload => {
-  try {
-    const payloadData = {
-      ...payload,
-      query: segmentsQuery.value,
-    };
-    const response = await store.dispatch('customViews/create', payloadData);
-    createSegmentDialogRef.value?.dialogRef.close();
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.SUCCESS_MESSAGE')
-    );
-    const segmentId = response?.data?.id;
-    if (!segmentId) return;
-    // Navigate to the created segment
-    router.push({
-      name: 'contacts_dashboard_segments_index',
-      params: { segmentId },
-      query: { page: 1 },
-    });
-  } catch {
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.CREATE_SEGMENT.ERROR_MESSAGE')
-    );
-  }
-};
-
-const onDeleteSegment = async payload => {
-  try {
-    await store.dispatch('customViews/delete', {
-      id: Number(props.segmentsId),
-      ...payload,
-    });
-    router.push({
-      name: 'contacts_dashboard_index',
-      query: {
-        page: 1,
-      },
-    });
-    deleteSegmentDialogRef.value?.dialogRef.close();
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      t('CONTACTS_LAYOUT.HEADER.ACTIONS.FILTERS.DELETE_SEGMENT.ERROR_MESSAGE')
-    );
-  }
-};
-
-const closeAdvanceFiltersModal = () => {
-  showFiltersModal.value = false;
-  appliedFilter.value = [];
-};
-
-const clearFilters = async () => {
-  emit('clearFilters');
-};
-
-const onApplyFilter = async payload => {
-  payload = useSnakeCase(payload);
-  segmentsQuery.value = filterQueryGenerator(payload);
-  emit('applyFilter', filterQueryGenerator(payload));
-  showFiltersModal.value = false;
-};
-
-const onUpdateSegment = async (payload, segmentName) => {
-  payload = useSnakeCase(payload);
-  const payloadData = {
-    ...props.activeSegment,
-    name: segmentName,
-    query: filterQueryGenerator(payload),
-  };
-  await store.dispatch('customViews/update', payloadData);
-  closeAdvanceFiltersModal();
-};
-
-const setParamsForEditSegmentModal = () => {
-  return {
-    countries,
-    filterTypes: contactFilterItems,
-    allCustomAttributes: useSnakeCase(contactAttributes.value),
-  };
-};
-
-const initializeSegmentToFilterModal = segment => {
-  const query = unref(segment)?.query?.payload;
-  if (!Array.isArray(query)) return;
-
-  const newFilters = query.map(filter => {
-    const transformed = useCamelCase(filter);
-    const values = Array.isArray(transformed.values)
-      ? generateValuesForEditCustomViews(
-          useSnakeCase(filter),
-          setParamsForEditSegmentModal()
-        )
-      : [];
-
-    return {
-      attributeKey: transformed.attributeKey,
-      attributeModel: transformed.attributeModel,
-      customAttributeType: transformed.customAttributeType,
-      filterOperator: transformed.filterOperator,
-      queryOperator: transformed.queryOperator ?? 'and',
-      values,
-    };
-  });
-
-  appliedFilter.value = [...appliedFilter.value, ...newFilters];
-};
-
-const onToggleFilters = () => {
-  appliedFilter.value = [];
-  if (hasActiveSegments.value) {
-    initializeSegmentToFilterModal(props.activeSegment);
-  } else {
-    appliedFilter.value = props.hasAppliedFilters
-      ? [...appliedFilters.value]
-      : [
-          {
-            attributeKey: 'name',
-            filterOperator: 'equal_to',
-            values: '',
-            queryOperator: 'and',
-            attributeModel: 'standard',
-          },
-        ];
-  }
-  showFiltersModal.value = true;
-};
-
-defineExpose({
-  onToggleFilters,
-});
-</script>
-
-<template>
-  <ContactsHeader
-    :show-search="showSearch"
-    :search-value="searchValue"
-    :active-sort="activeSort"
-    :active-ordering="activeOrdering"
-    :header-title="headerTitle"
-    :is-segments-view="hasActiveSegments"
-    :is-label-view="isLabelView"
-    :has-active-filters="hasAppliedFilters"
-    :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
-    @search="emit('search', $event)"
-    @update:sort="emit('update:sort', $event)"
-    @add="openCreateNewContactDialog"
-    @import="openContactImportDialog"
-    @export="openContactExportDialog"
-    @filter="onToggleFilters"
-    @create-segment="openCreateSegmentDialog"
-    @delete-segment="openDeleteSegmentDialog"
-  >
-    <template #filter>
-      <ContactsFilter
-        v-if="showFiltersModal"
-        v-model="appliedFilter"
-        :segment-name="activeSegmentName"
-        :is-segment-view="hasActiveSegments"
-        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
-        @apply-filter="onApplyFilter"
-        @update-segment="onUpdateSegment"
-        @close="closeAdvanceFiltersModal"
-        @clear-filters="clearFilters"
-      />
-    </template>
-  </ContactsHeader>
-
-  <CreateNewContactDialog ref="createNewContactDialogRef" @create="onCreate" />
-  <ContactExportDialog ref="contactExportDialogRef" @export="onExport" />
-  <ContactImportDialog ref="contactImportDialogRef" @import="onImport" />
-  <CreateSegmentDialog ref="createSegmentDialogRef" @create="onCreateSegment" />
-  <DeleteSegmentDialog ref="deleteSegmentDialogRef" @delete="onDeleteSegment" />
-</template>

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

@@ -1,62 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const emit = defineEmits(['add', 'import', 'export']);
-
-const { t } = useI18n();
-
-const contactMenuItems = [
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
-    action: 'add',
-    value: 'add',
-    icon: 'i-lucide-plus',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
-    action: 'export',
-    value: 'export',
-    icon: 'i-lucide-upload',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
-    action: 'import',
-    value: 'import',
-    icon: 'i-lucide-download',
-  },
-];
-const showActionsDropdown = ref(false);
-
-const handleContactAction = ({ action }) => {
-  if (action === 'add') {
-    emit('add');
-  } else if (action === 'import') {
-    emit('import');
-  } else if (action === 'export') {
-    emit('export');
-  }
-};
-</script>
-
-<template>
-  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
-    <Button
-      icon="i-lucide-ellipsis-vertical"
-      color="slate"
-      variant="ghost"
-      size="sm"
-      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
-      @click="showActionsDropdown = !showActionsDropdown"
-    />
-    <DropdownMenu
-      v-if="showActionsDropdown"
-      :menu-items="contactMenuItems"
-      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
-      @action="handleContactAction($event)"
-    />
-  </div>
-</template>

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

@@ -1,138 +0,0 @@
-<script setup>
-import { ref, computed, toRef } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
-
-const props = defineProps({
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:sort']);
-
-const { t } = useI18n();
-
-const isMenuOpen = ref(false);
-
-const sortMenus = [
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.NAME'),
-    value: 'name',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.EMAIL'),
-    value: 'email',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.PHONE_NUMBER'),
-    value: 'phone_number',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COMPANY'),
-    value: 'company_name',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.COUNTRY'),
-    value: 'country',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CITY'),
-    value: 'city',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.LAST_ACTIVITY'),
-    value: 'last_activity_at',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.OPTIONS.CREATED_AT'),
-    value: 'created_at',
-  },
-];
-
-const orderingMenus = [
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.ASCENDING'),
-    value: '',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.OPTIONS.DESCENDING'),
-    value: '-',
-  },
-];
-
-// Converted the props to refs for better reactivity
-const activeSort = toRef(props, 'activeSort');
-
-const activeOrdering = toRef(props, 'activeOrdering');
-
-const activeSortLabel = computed(() => {
-  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
-  return (
-    selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL')
-  );
-});
-
-const activeOrderingLabel = computed(() => {
-  const selectedMenu = orderingMenus.find(
-    menu => menu.value === activeOrdering.value
-  );
-  return selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL');
-});
-
-const handleSortChange = value => {
-  emit('update:sort', { sort: value, order: props.activeOrdering });
-};
-
-const handleOrderChange = value => {
-  emit('update:sort', { sort: props.activeSort, order: value });
-};
-</script>
-
-<template>
-  <div class="relative">
-    <Button
-      icon="i-lucide-arrow-down-up"
-      color="slate"
-      size="sm"
-      variant="ghost"
-      :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
-      @click="isMenuOpen = !isMenuOpen"
-    />
-    <div
-      v-if="isMenuOpen"
-      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
-    >
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-sm text-n-slate-12">
-          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL') }}
-        </span>
-        <SelectMenu
-          :model-value="activeSort"
-          :options="sortMenus"
-          :label="activeSortLabel"
-          @update:model-value="handleSortChange"
-        />
-      </div>
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-sm text-n-slate-12">
-          {{ t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL') }}
-        </span>
-        <SelectMenu
-          :model-value="activeOrdering"
-          :options="orderingMenus"
-          :label="activeOrderingLabel"
-          @update:model-value="handleOrderChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,69 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-
-import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
-
-const props = defineProps({
-  activeSegment: { type: Object, default: null },
-});
-
-const emit = defineEmits(['clearFilters', 'openFilter']);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
-const activeSegmentId = computed(() => route.params.segmentId);
-
-const activeSegmentQuery = computed(() => {
-  const query = props.activeSegment?.query?.payload;
-  if (!Array.isArray(query)) return [];
-
-  const newFilters = query.map(filter => {
-    const transformed = useCamelCase(filter);
-    return {
-      attributeKey: transformed.attributeKey,
-      attributeModel: transformed.attributeModel,
-      customAttributeType: transformed.customAttributeType,
-      filterOperator: transformed.filterOperator,
-      queryOperator: transformed.queryOperator ?? 'and',
-      values: transformed.values,
-    };
-  });
-
-  return newFilters;
-});
-
-const hasActiveSegments = computed(
-  () => props.activeSegment && activeSegmentId.value !== 0
-);
-
-const activeFilterQueryData = computed(() => {
-  return hasActiveSegments.value
-    ? activeSegmentQuery.value
-    : appliedFilters.value;
-});
-</script>
-
-<template>
-  <ActiveFilterPreview
-    :applied-filters="activeFilterQueryData"
-    :max-visible-filters="2"
-    :more-filters-label="
-      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-        count: activeFilterQueryData.length - 2,
-      })
-    "
-    :clear-button-label="
-      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
-    "
-    :show-clear-button="!hasActiveSegments"
-    class="max-w-[960px] px-6"
-    @open-filter="emit('openFilter')"
-    @clear-filters="emit('clearFilters')"
-  />
-</template>

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

@@ -1,106 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import ContactHeader from '../ContactHeader.vue';
-
-// Base state controls
-const searchValue = ref('');
-const activeSort = ref('last_activity_at');
-const activeOrdering = ref('');
-
-const onSearch = value => {
-  searchValue.value = value;
-  console.log('🔍 Search:', value);
-};
-
-const onSort = ({ sort, order }) => {
-  activeSort.value = sort;
-  activeOrdering.value = order;
-  console.log('🔄 Sort changed:', { sort, order });
-};
-
-const onFilter = () => {
-  console.log('🏷️ Filter clicked');
-};
-
-const onMessage = () => {
-  console.log('💬 Message clicked');
-};
-
-const onAdd = () => {
-  console.log('➕ Add contact clicked');
-};
-
-const onImport = () => {
-  console.log('📥 Import contacts clicked');
-};
-
-const onExport = () => {
-  console.log('📤 Export contacts clicked');
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Contacts/ContactHeader"
-    :layout="{ type: 'grid', width: '900px' }"
-  >
-    <Variant title="Default">
-      <div class="w-full h-[400px]">
-        <ContactHeader
-          header-title="Contacts"
-          button-label="Message"
-          :search-value="searchValue"
-          :active-sort="activeSort"
-          :active-ordering="activeOrdering"
-          @search="onSearch"
-          @filter="onFilter"
-          @update:sort="onSort"
-          @message="onMessage"
-          @add="onAdd"
-          @import="onImport"
-          @export="onExport"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty State">
-      <div class="w-full">
-        <ContactHeader
-          :show-search="false"
-          header-title="Contacts"
-          button-label="Message"
-          :search-value="searchValue"
-          :active-sort="activeSort"
-          :active-ordering="activeOrdering"
-          @search="onSearch"
-          @filter="onFilter"
-          @update:sort="onSort"
-          @message="onMessage"
-          @add="onAdd"
-          @import="onImport"
-          @export="onExport"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Segment View">
-      <div class="w-full">
-        <ContactHeader
-          :show-search="false"
-          header-title="Segment: VIP Customers"
-          button-label="Message"
-          :search-value="searchValue"
-          :active-sort="activeSort"
-          :active-ordering="activeOrdering"
-          @search="onSearch"
-          @filter="onFilter"
-          @update:sort="onSort"
-          @message="onMessage"
-          @add="onAdd"
-          @import="onImport"
-          @export="onExport"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,103 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
-import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
-import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-
-defineProps({
-  searchValue: { type: String, default: '' },
-  headerTitle: { type: String, default: '' },
-  showPaginationFooter: { type: Boolean, default: true },
-  currentPage: { type: Number, default: 1 },
-  totalItems: { type: Number, default: 100 },
-  itemsPerPage: { type: Number, default: 15 },
-  activeSort: { type: String, default: '' },
-  activeOrdering: { type: String, default: '' },
-  activeSegment: { type: Object, default: null },
-  segmentsId: { type: [String, Number], default: 0 },
-  hasAppliedFilters: { type: Boolean, default: false },
-  isFetchingList: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'update:currentPage',
-  'update:sort',
-  'search',
-  'applyFilter',
-  'clearFilters',
-]);
-
-const route = useRoute();
-
-const contactListHeaderWrapper = ref(null);
-
-const isNotSegmentView = computed(() => {
-  return route.name !== 'contacts_dashboard_segments_index';
-});
-
-const isLabelView = computed(
-  () => route.name === 'contacts_dashboard_labels_index'
-);
-
-const updateCurrentPage = page => {
-  emit('update:currentPage', page);
-};
-
-const openFilter = () => {
-  contactListHeaderWrapper.value?.onToggleFilters();
-};
-</script>
-
-<template>
-  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
-  >
-    <div class="flex flex-col w-full h-full transition-all duration-300">
-      <ContactListHeaderWrapper
-        ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView"
-        :search-value="searchValue"
-        :active-sort="activeSort"
-        :active-ordering="activeOrdering"
-        :header-title="headerTitle"
-        :active-segment="activeSegment"
-        :segments-id="segmentsId"
-        :has-applied-filters="hasAppliedFilters"
-        :is-label-view="isLabelView"
-        @update:sort="emit('update:sort', $event)"
-        @search="emit('search', $event)"
-        @apply-filter="emit('applyFilter', $event)"
-        @clear-filters="emit('clearFilters')"
-      />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[960px]">
-          <ContactsActiveFiltersPreview
-            v-if="
-              (hasAppliedFilters || !isNotSegmentView) &&
-              !isFetchingList &&
-              !isLabelView
-            "
-            :active-segment="activeSegment"
-            @clear-filters="emit('clearFilters')"
-            @open-filter="openFilter"
-          />
-          <slot name="default" />
-        </div>
-      </main>
-      <footer
-        v-if="showPaginationFooter"
-        class="sticky bottom-0 z-10 px-4 pb-4"
-      >
-        <PaginationFooter
-          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
-          :current-page="currentPage"
-          :total-items="totalItems"
-          :items-per-page="itemsPerPage"
-          @update:current-page="updateCurrentPage"
-        />
-      </footer>
-    </div>
-  </section>
-</template>