Merge branch 'develop' into fix/conv-order

test: last_activity_at property in conv model
test: fix specs for conv push data
2024-08-12 10:20:11 +05:30 · 2024-08-12 10:19:36 +05:30 · 2024-08-10 15:56:10 +05:30 · 2024-08-10 15:53:20 +05:30 · 2024-08-09 15:55:11 +05:30 · 2024-08-08 15:26:59 +05:30
2587 changed files with 48040 additions and 47696 deletions
@@ -1,87 +1,84 @@
-version: 2.1
-orbs:
-  node: circleci/node@6.1.0
-
+# Ruby CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-ruby/ for more details
+#
+version: 2
 defaults: &defaults
  working_directory: ~/build
-  machine:
-    image: ubuntu-2204:2024.05.1
-  resource_class: large
+  docker:
+    # specify the version you desire here
+    - 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
-    COVERAGE: true
-    LOG_LEVEL: warn
+    - RAILS_LOG_TO_STDOUT: false
+    - COVERAGE: true
+    - 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
-            DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
-              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
+            echo 'export BUNDLER_VERSION=$(cat Gemfile.lock | tail -1 | tr -d " ")' >> $BASH_ENV
+            source $BASH_ENV
            gem install bundler

      - run:
-          name: Install Application Dependencies
+          name: Which bundler?
+          command: bundle -v
+
+      - run:
+          name: Swap node versions
          command: |
-            source ~/.rvm/scripts/rvm
-            bundle install
-            # pnpm install
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+            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:
-          name: Run DB migrations
-          command: bundle exec rails db:chatwoot_prepare
+      - run: bundle exec rake db:create
+      - run: bundle exec rake db:schema:load

-      # 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"
-
-      - run:
-          name: List coverage directory contents
-          command: |
-            ls -R ~/build/coverage
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "coverage/codeclimate.$CIRCLE_NODE_INDEX.json"

      - 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
@@ -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;
@@ -27,8 +27,7 @@ checks:
      threshold: 50
 exclude_patterns:
  - 'spec/'
-  - '**/specs/**/**'
-  - '**/spec/**/**'
+  - '**/specs/'
  - 'db/*'
  - 'bin/**/*'
  - 'db/**/*'
@@ -2,22 +2,16 @@ module.exports = {
  extends: [
    'airbnb-base/legacy',
    'prettier',
-    'plugin:vue/vue3-recommended',
-    'plugin:vitest-globals/recommended',
+    'plugin:vue/recommended',
+    'plugin:storybook/recommended',
+    'plugin:cypress/recommended',
  ],
-  overrides: [
-    {
-      files: ['**/*.spec.{j,t}s?(x)'],
-      env: {
-        'vitest-globals/env': true,
-      },
-    },
-  ],
-  plugins: ['html', 'prettier'],
  parserOptions: {
-    ecmaVersion: 'latest',
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2020,
    sourceType: 'module',
  },
+  plugins: ['html', 'prettier', 'babel'],
  rules: {
    'prettier/prettier': ['error'],
    camelcase: 'off',
@@ -216,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,
@@ -223,11 +224,5 @@ module.exports = {
  globals: {
    bus: true,
    vi: true,
-    // beforeEach: true,
-    // afterEach: true,
-    // test: true,
-    // describe: true,
-    // it: true,
-    // expect: true,
  },
 };
@@ -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
@@ -25,5 +25,13 @@ jobs:
        with: 
          issue-inactive-days: '30'
          issue-lock-reason: 'resolved'
+          issue-comment: >
+            This issue has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
          pr-inactive-days: '30'
          pr-lock-reason: 'resolved'
+          pr-comment: >
+            This pull request has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
@@ -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: pnpm/action-setup@v4
-        with:
-          version: 9
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
+    - 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 # runs 'bundle install' and caches installed gems automatically
+    - uses: ruby/setup-ruby@v1
+      with:
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically

-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: yarn

-      - name: Install pnpm dependencies
-        run: pnpm i
+    - name: yarn
+      run: yarn install

-      - name: Strip enterprise code
-        run: |
-          rm -rf enterprise
-          rm -rf spec/enterprise
+    - name: Strip enterprise code
+      run: |
+        rm -rf enterprise
+        rm -rf spec/enterprise

-      - name: Create database
-        run: bundle exec rake db:create
+    - name: Create database
+      run: bundle exec rake db:create

-      - name: Seed database
-        run: bundle exec rake db:schema:load
+    - name: Seed database
+      run: bundle exec rake db:schema:load

-      - name: Run frontend tests
-        run: pnpm run test:coverage
+    - name: yarn check-files
+      run: yarn install --check-files

-      # Run rails tests
-      - name: Run backend tests
-        run: |
-          bundle exec rspec --profile=10 --format documentation
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
+    # Run rails tests
+    - name: Run backend tests
+      run: |
+        bundle exec rspec --profile=10 --format documentation
+      env:
+        NODE_OPTIONS: --openssl-legacy-provider

-      - name: Upload rails log folder
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: rails-log-folder
-          path: log
+    - name: Upload rails log folder
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: rails-log-folder
+        path: log
@@ -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
-      run: pnpm install
+    - name: yarn
+      run: yarn install

    - name: Create database
      run: bundle exec rake db:create
@@ -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
-        run: pnpm install
+      - name: yarn
+        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
@@ -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
-/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
+/storybook-static
@@ -1,11 +1,11 @@
-# #!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"

-# # lint js and vue files
-# npx --no-install lint-staged
+# lint js and vue files
+npx --no-install lint-staged

-# # lint only staged ruby files
-# git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+# lint only staged ruby files
+git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a

-# # stage rubocop changes to files
-# git diff --name-only --cached | xargs git add
+# stage rubocop changes to files
+git diff --name-only --cached | xargs git add
@@ -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;
+  },
+};
@@ -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$/,
+    },
+  },
+};
@@ -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.
@@ -111,12 +111,12 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.19.0', require: false
+gem 'sentry-rails', '>= 5.18.2', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.19.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.2', require: false

 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.1'
+gem 'sidekiq', '>= 7.3.0'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'

@@ -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
@@ -200,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
@@ -226,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.3'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -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)
@@ -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)
-      et-orbi (~> 1, >= 1.2.11)
+    fugit (1.9.0)
+      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)
@@ -300,15 +301,15 @@ GEM
    google-cloud-core (1.6.0)
      google-cloud-env (~> 1.0)
      google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.31.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-dialogflow-v2 (0.23.0)
+      gapic-common (>= 0.18.0, < 2.a)
      google-cloud-errors (~> 1.0)
      google-cloud-location (>= 0.4, < 2.a)
    google-cloud-env (1.6.0)
      faraday (>= 0.17.3, < 3.0)
    google-cloud-errors (1.3.1)
-    google-cloud-location (0.6.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-location (0.4.0)
+      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
    google-cloud-storage (1.44.0)
      addressable (~> 2.8)
@@ -318,17 +319,17 @@ GEM
      google-cloud-core (~> 1.6)
      googleauth (>= 0.16.2, < 2.a)
      mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.10.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-translate-v3 (0.6.0)
+      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.5)
-    google-protobuf (3.25.5-arm64-darwin)
-    google-protobuf (3.25.5-x86_64-darwin)
-    google-protobuf (3.25.5-x86_64-linux)
-    googleapis-common-protos (1.6.0)
-      google-protobuf (>= 3.18, < 5.a)
-      googleapis-common-protos-types (~> 1.7)
-      grpc (~> 1.41)
+    google-protobuf (3.25.3)
+    google-protobuf (3.25.3-arm64-darwin)
+    google-protobuf (3.25.3-x86_64-darwin)
+    google-protobuf (3.25.3-x86_64-linux)
+    googleapis-common-protos (1.4.0)
+      google-protobuf (~> 3.14)
+      googleapis-common-protos-types (~> 1.2)
+      grpc (~> 1.27)
    googleapis-common-protos-types (1.14.0)
      google-protobuf (~> 3.18)
    googleauth (1.5.2)
@@ -456,7 +457,7 @@ GEM
    marcel (1.0.4)
    maxminddb (0.1.22)
    memoist (0.16.2)
-    meta_request (0.8.3)
+    meta_request (0.8.2)
      rack-contrib (>= 1.1, < 3)
      railties (>= 3.0.0, < 8)
    method_source (1.1.0)
@@ -466,7 +467,7 @@ GEM
    mini_magick (4.12.0)
    mini_mime (1.1.5)
    mini_portile2 (2.8.7)
-    minitest (5.25.1)
+    minitest (5.24.1)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -479,7 +480,7 @@ GEM
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.14)
+    net-imap (0.4.12)
      date
      net-protocol
    net-pop (0.1.2)
@@ -495,14 +496,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.16.6)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.16.6-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.16.6-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.6-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -521,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)
@@ -551,12 +552,12 @@ 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.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
@@ -569,7 +570,7 @@ 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)
@@ -633,20 +634,20 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.6)
+    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)
-      actionpack (>= 7.0)
-      activesupport (>= 7.0)
-      railties (>= 7.0)
+    rspec-rails (6.1.3)
+      actionpack (>= 6.1)
+      activesupport (>= 6.1)
+      railties (>= 6.1)
      rspec-core (~> 3.13)
      rspec-expectations (~> 3.13)
      rspec-mocks (~> 3.13)
@@ -708,19 +709,20 @@ GEM
      activerecord (>= 4)
      activesupport (>= 4)
    selectize-rails (0.12.6)
-    sentry-rails (5.19.0)
+    semantic_range (3.0.0)
+    sentry-rails (5.18.2)
      railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
-    sentry-ruby (5.19.0)
+      sentry-ruby (~> 5.18.2)
+    sentry-ruby (5.18.2)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.19.0)
-      sentry-ruby (~> 5.19.0)
+    sentry-sidekiq (5.18.2)
+      sentry-ruby (~> 5.18.2)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.3.1)
+    sidekiq (7.3.0)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      logger
@@ -794,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)
@@ -819,7 +814,12 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
+    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)
@@ -827,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
@@ -862,6 +862,7 @@ DEPENDENCIES
  climate_control
  commonmarker
  csv-safe
+  cypress-on-rails
  database_cleaner
  ddtrace
  debug (~> 1.8)
@@ -880,9 +881,9 @@ DEPENDENCIES
  foreman
  geocoder
  gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
  groupdate
  grpc
  haikunator
@@ -902,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
@@ -929,7 +930,7 @@ DEPENDENCIES
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails (>= 6.1.5)
+  rspec-rails (>= 6.1.3)
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -938,11 +939,11 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.19.0)
+  sentry-rails (>= 5.18.2)
  sentry-ruby
-  sentry-sidekiq (>= 5.19.0)
+  sentry-sidekiq (>= 5.18.2)
  shoulda-matchers
-  sidekiq (>= 7.3.1)
+  sidekiq (>= 7.3.0)
  sidekiq-cron (>= 1.12.0)
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.2.0)
@@ -959,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

@@ -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
@@ -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
@@ -1,12 +1,9 @@
-## 🚨 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"/>

 ___

-# Chatwoot
+# Chatwoot 

 Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
 <p>
@@ -101,7 +98,7 @@ Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.

 ### Other deployment options

-For other supported options, checkout our [deployment page](https://chatwoot.com/deploy).
+For other supported options, checkout our [deployment page](https://chatwoot.com/deploy). 

 ## Security

@@ -1 +1 @@
-3.13.0
+3.9.0
@@ -1 +1 @@
-3.0.0
+2.8.0
@@ -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
@@ -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(),
+  });
+}
@@ -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;
@@ -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
@@ -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')
@@ -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
@@ -11,17 +11,7 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Base
  end

  def process_event
-    response = @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
+    render json: { message: @hook.process_event(params[:event]) }
  end

  def destroy
@@ -1,68 +1,13 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
  def create
-    result = if params[:attachment].present?
-               create_from_file
-             elsif params[:external_url].present?
-               create_from_url
-             else
-               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
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].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
@@ -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

@@ -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
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
  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')
@@ -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

@@ -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?
@@ -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,9 +9,8 @@ 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 rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import {
@@ -32,12 +32,9 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
-  setup() {
-    const router = useRouter();
-    const store = useStore();

-    return { router, store };
-  },
+  mixins: [rtlMixin],
+
  data() {
    return {
      showAddAccountModal: false,
@@ -45,18 +42,15 @@ export default {
      reconnectService: null,
    };
  },
+
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
-      isRTL: 'accounts/isRTL',
      currentUser: 'getCurrentUser',
      authUIFlags: 'getAuthUIFlags',
      accountUIFlags: 'accounts/getUIFlags',
-      // currentAccountId: 'getCurrentAccountId',
+      currentAccountId: 'getCurrentAccountId',
    }),
-    currentAccountId() {
-      return this.$route.params.accountId;
-    },
    hasAccounts() {
      const { accounts = [] } = this.currentUser || {};
      return accounts.length > 0;
@@ -73,24 +67,17 @@ export default {
      }
    },
    currentAccountId() {
-      console.log('THIS CALL', this.currentAccountId);
      if (this.currentAccountId) {
        this.initializeAccount();
-      } else {
-        console.log('NO ACCOUNT ID');
      }
    },
  },
-  created() {
-    this.setLocale(window.chatwootConfig.selectedLocale);
-  },
-  async mounted() {
-    this.setLocale(window.chatwootConfig.selectedLocale);
+  mounted() {
    this.initializeColorTheme();
    this.listenToThemeChanges();
-    await this.$store.dispatch('accounts/get');
+    this.setLocale(window.chatwootConfig.selectedLocale);
  },
-  unmounted() {
+  beforeDestroy() {
    if (this.reconnectService) {
      this.reconnectService.disconnect();
    }
@@ -104,7 +91,7 @@ export default {
      mql.onchange = e => setColorTheme(e.matches);
    },
    setLocale(locale) {
-      this.$i18n.locale = locale;
+      this.$root.$i18n.locale = locale;
    },
    async initializeAccount() {
      await this.$store.dispatch('accounts/get');
@@ -115,10 +102,10 @@ export default {
        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
      this.setLocale(locale);
+      this.updateRTLDirectionView(locale);
      this.latestChatwootVersion = latestChatwootVersion;
-      vueActionCable.init(this.store, pubsubToken);
-      this.reconnectService = new ReconnectService(this.store, this.router);
-      window.reconnectService = this.reconnectService;
+      vueActionCable.init(pubsubToken);
+      this.reconnectService = new ReconnectService(this.$store, router);

      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -137,8 +124,8 @@ export default {
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTL }"
-    :dir="isRTL ? 'rtl' : 'ltr'"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
    <template v-if="currentAccountId">
@@ -146,11 +133,9 @@ export default {
      <PaymentPendingBanner v-if="hideOnOnboardingView" />
      <UpgradeBanner />
    </template>
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
    <WootSnackbarBox />
    <NetworkNotification />
@@ -160,22 +145,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>
@@ -1,9 +0,0 @@
-import ApiClient from './ApiClient';
-
-class CustomRole extends ApiClient {
-  constructor() {
-    super('custom_roles', { accountScoped: true });
-  }
-}
-
-export default new CustomRole();
@@ -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>
@@ -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>
@@ -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:
-    transform 0.25s var(--ease-in-cubic),
+  transition: transform 0.25s var(--ease-in-cubic),
    opacity 0.15s var(--ease-in-cubic);
 }

@@ -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
@@ -1,4 +1,4 @@
-@import 'dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/variables';

 .formulate-input {
  .formulate-input-errors {
@@ -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;
@@ -1,5 +1,5 @@
-@import 'dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
+@import '~dashboard/assets/scss/variables';
+@import '~widget/assets/scss/mixins';

 $spinner-before-border-color: rgba(255, 255, 255, 0.7);

@@ -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;

@@ -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,13 +34,10 @@

@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;
-}
-
-#app {
-  @apply h-full w-full;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }

 .hide {
@@ -47,6 +45,7 @@
 }

@layer base {
+
  // scss-lint:disable PropertySortOrder
  :root {
    --color-amber-25: 254 253 251;
@@ -222,7 +222,6 @@

  .multiselect__input {
    @apply h-[2.875rem] min-h-[2.875rem];
-    margin-bottom: 0px !important;
  }

  .multiselect__single {
@@ -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%;
+}
@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import AccordionItemComponent from './AccordionItem';
+
+export default {
+  title: 'Components/Generic/Accordion',
+  component: AccordionItemComponent,
+  argTypes: {
+    title: {
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AccordionItem: AccordionItemComponent },
+  template: `
+    <accordion-item v-bind="$props" @click="onClick">
+    This is a sample content you can pass as a slot
+    </accordion-item>
+  `,
+});
+
+export const AccordionItem = Template.bind({});
+AccordionItem.args = {
+  onClick: action('Added'),
+  title: 'Title of the accordion item',
+};
@@ -1,34 +1,32 @@
-<script setup>
+<script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-import { defineEmits } from 'vue';

-defineProps({
-  title: {
-    type: String,
-    required: true,
+export default {
+  components: {
+    EmojiOrIcon,
  },
-  compact: {
-    type: Boolean,
-    default: false,
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    emoji: {
+      type: String,
+      default: '',
+    },
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  emoji: {
-    type: String,
-    default: '',
-  },
-  isOpen: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['toggle']);
-
-const onToggle = () => {
-  emit('toggle');
 };
 </script>

@@ -36,7 +34,7 @@ const onToggle = () => {
  <div class="-mt-px text-sm">
    <button
      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click.stop="onToggle"
+      @click="$emit('click')"
    >
      <div class="flex justify-between mb-0.5">
        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
@@ -16,6 +16,7 @@ export default {
 <template>
  <button
    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
  >
    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
    <h3
@@ -61,7 +61,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      </span>
    </div>
    <div class="flex items-center gap-1">
-      <template v-if="hasAppliedFilters && !hasActiveFolders">
+      <div v-if="hasAppliedFilters && !hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
          size="tiny"
@@ -78,8 +78,8 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          icon="dismiss-circle"
          @click="emit('resetFilters')"
        />
-      </template>
-      <template v-if="hasActiveFolders">
+      </div>
+      <div v-if="hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
          size="tiny"
@@ -96,7 +96,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          icon="delete"
          @click="emit('deleteFolders')"
        />
-      </template>
+      </div>
      <woot-button
        v-else
        v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
@@ -108,7 +108,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      />
      <ConversationBasicFilter
        v-if="!hasAppliedFiltersOrActiveFolders"
-        @change-filter="onBasicFilterChange"
+        @changeFilter="onBasicFilterChange"
      />
    </div>
  </div>
@@ -1,7 +1,5 @@
 <script>
 import 'highlight.js/styles/default.css';
-import 'highlight.js/lib/common';
-
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';

@@ -30,28 +28,14 @@ export default {
      return JSON.stringify({
        title: this.codepenTitle,
        private: true,
-        [lang]: this.scrubbedScript,
+        [lang]: this.script,
      });
    },
-    scrubbedScript() {
-      // remove trailing and leading extra lines and not spaces
-      const scrubbed = this.script.replace(/^\s*[\r\n]/gm, '');
-      const lines = scrubbed.split('\n');
-
-      // remove extra indentations
-      const minIndent = lines.reduce((min, line) => {
-        if (line.trim().length === 0) return min;
-        const indent = line.match(/^\s*/)[0].length;
-        return Math.min(min, indent);
-      }, Infinity);
-
-      return lines.map(line => line.slice(minIndent)).join('\n');
-    },
  },
  methods: {
    async onCopy(e) {
      e.preventDefault();
-      await copyTextToClipboard(this.scrubbedScript);
+      await copyTextToClipboard(this.script);
      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
@@ -59,24 +43,42 @@ export default {
 </script>

 <template>
-  <div class="relative text-left">
-    <div class="top-1.5 absolute right-1.5 flex items-center gap-1">
+  <div class="code--container">
+    <div class="code--action-area">
      <form
        v-if="enableCodePen"
-        class="flex items-center"
+        class="code--codeopen-form"
        action="https://codepen.io/pen/define"
        method="POST"
        target="_blank"
      >
        <input type="hidden" name="data" :value="codepenScriptValue" />
+
        <button type="submit" class="button secondary tiny">
          {{ $t('COMPONENTS.CODE.CODEPEN') }}
        </button>
      </form>
-      <button type="button" class="button secondary tiny" @click="onCopy">
+      <button class="button secondary tiny" @click="onCopy">
        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
      </button>
    </div>
-    <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
+    <highlightjs v-if="script" :language="lang" :code="script" />
  </div>
 </template>
+
+<style lang="scss" scoped>
+.code--container {
+  position: relative;
+  text-align: left;
+
+  .code--action-area {
+    top: var(--space-small);
+    position: absolute;
+    right: var(--space-small);
+  }
+
+  .code--codeopen-form {
+    display: inline-block;
+  }
+}
+</style>
@@ -14,7 +14,6 @@ export default {
    'toggleContextMenu',
    'markAsUnread',
    'assignPriority',
-    'isConversationSelected',
  ],
  props: {
    source: {
@@ -37,6 +36,10 @@ export default {
      type: [String, Number],
      default: 0,
    },
+    isConversationSelected: {
+      type: Function,
+      default: () => {},
+    },
    showAssignee: {
      type: Boolean,
      default: false,
@@ -56,14 +59,14 @@ export default {
    :selected="isConversationSelected(source.id)"
    :show-assignee="showAssignee"
    enable-context-menu
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
  />
 </template>
@@ -7,7 +7,6 @@ import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import { getRegexp } from 'shared/helpers/Validators';
 import { useVuelidate } from '@vuelidate/core';
-import { emitter } from 'shared/helpers/mitt';

 const DATE_FORMAT = 'yyyy-MM-dd';

@@ -31,7 +30,6 @@ export default {
    attributeKey: { type: String, required: true },
    contactId: { type: Number, default: null },
  },
-  emits: ['update', 'delete', 'copy'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -137,10 +135,10 @@ export default {
  },
  mounted() {
    this.editedValue = this.formattedValue;
-    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    this.$emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
-  unmounted() {
-    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+  destroyed() {
+    this.$emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
    onFocusAttribute(focusAttributeKey) {
@@ -323,7 +321,7 @@ export default {
            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
          )
        "
-        @select="onUpdateListValue"
+        @click="onUpdateListValue"
      />
    </div>
  </div>
@@ -333,12 +331,10 @@ export default {
 ::v-deep {
  .selector-wrap {
    @apply m-0 top-1;
-
    .selector-name {
      @apply ml-0;
    }
  }
-
  .name {
    @apply ml-0;
  }
@@ -18,7 +18,6 @@ const shouldShowContent = computed(
 );
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="shouldShowContent">
    <slot />
@@ -1,11 +1,10 @@
 <script>
-import DatePicker from 'vue-datepicker-next';
+import DatePicker from 'vue2-datepicker';

 export default {
  components: {
    DatePicker,
  },
-  emits: ['close', 'chooseTime'],

  data() {
    return {
@@ -44,18 +43,15 @@ export default {
 <template>
  <div class="flex flex-col">
    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form
-      class="modal-content w-full pt-2 px-5 pb-6"
-      @submit.prevent="chooseTime"
-    >
+    <form class="modal-content" @submit.prevent="chooseTime">
      <DatePicker
-        v-model:value="snoozeTime"
+        v-model="snoozeTime"
        type="datetime"
        inline
-        input-class="mx-input reset-base"
        :lang="lang"
        :disabled-date="disabledDate"
        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
      />
      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
        <woot-button variant="clear" @click.prevent="onClose">
@@ -68,3 +64,9 @@ export default {
    </form>
  </div>
 </template>
+
+<style lang="scss" scoped>
+.modal-content {
+  @apply pt-2 px-5 pb-6;
+}
+</style>
@@ -1,26 +1,32 @@
-<script setup>
-import { ref, defineEmits } from 'vue';
-import { useIntersectionObserver } from '@vueuse/core';
-
-const { options } = defineProps({
-  options: {
-    type: Object,
-    default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+    },
  },
-});
-
-const emit = defineEmits(['observed']);
-const observedElement = ref('');
-
-useIntersectionObserver(
-  observedElement,
-  ([{ isIntersecting }]) => {
-    if (isIntersecting) {
-      emit('observed');
-    }
+  mounted() {
+    this.intersectionObserver = null;
+    this.registerInfiniteLoader();
  },
-  options
-);
+  beforeDestroy() {
+    this.unobserveInfiniteLoadObserver();
+  },
+  methods: {
+    registerInfiniteLoader() {
+      this.intersectionObserver = new IntersectionObserver(entries => {
+        if (entries && entries[0].isIntersecting) {
+          this.$emit('observed');
+        }
+      }, this.options);
+      this.intersectionObserver.observe(this.$refs.observedElement);
+    },
+    unobserveInfiniteLoadObserver() {
+      this.intersectionObserver.unobserve(this.$refs.observedElement);
+    },
+  },
+};
 </script>

 <template>
@@ -1,69 +1,78 @@
-<script setup>
-// [TODO] Use Teleport to move the modal to the end of the body
-import { ref, computed, defineEmits, onMounted } from 'vue';
-import { useEventListener } from '@vueuse/core';
+<script>
+export default {
+  props: {
+    closeOnBackdropClick: {
+      type: Boolean,
+      default: true,
+    },
+    show: Boolean,
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    onClose: {
+      type: Function,
+      required: true,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    modalType: {
+      type: String,
+      default: 'centered',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      mousedDownOnBackdrop: false,
+    };
+  },
+  computed: {
+    modalClassName() {
+      const modalClassNameMap = {
+        centered: '',
+        'right-aligned': 'right-aligned',
+      };

-const { modalType, closeOnBackdropClick, onClose } = defineProps({
-  closeOnBackdropClick: { type: Boolean, default: true },
-  showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, required: true },
-  fullWidth: { type: Boolean, default: false },
-  modalType: { type: String, default: 'centered' },
-  size: { type: String, default: '' },
-});
+      return `modal-mask skip-context-menu ${
+        modalClassNameMap[this.modalType] || ''
+      }`;
+    },
+  },
+  mounted() {
+    document.addEventListener('keydown', e => {
+      if (this.show && e.code === 'Escape') {
+        this.onClose();
+      }
+    });

-const emit = defineEmits(['close']);
-const show = defineModel('show', { type: Boolean, default: false });
-
-const modalClassName = computed(() => {
-  const modalClassNameMap = {
-    centered: '',
-    'right-aligned': 'right-aligned',
-  };
-
-  return `modal-mask skip-context-menu ${modalClassNameMap[modalType] || ''}`;
-});
-
-// [TODO] Revisit this logic to use outside click directive
-const mousedDownOnBackdrop = ref(false);
-
-const handleMouseDown = () => {
-  mousedDownOnBackdrop.value = true;
+    document.body.addEventListener('mouseup', this.onMouseUp);
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.onMouseUp);
+  },
+  methods: {
+    handleMouseDown() {
+      this.mousedDownOnBackdrop = true;
+    },
+    close() {
+      this.onClose();
+    },
+    onMouseUp() {
+      if (this.mousedDownOnBackdrop) {
+        this.mousedDownOnBackdrop = false;
+        if (this.closeOnBackdropClick) {
+          this.onClose();
+        }
+      }
+    },
+  },
 };
-
-const close = () => {
-  show.value = false;
-  emit('close');
-  onClose();
-};
-
-const onMouseUp = () => {
-  if (mousedDownOnBackdrop.value) {
-    mousedDownOnBackdrop.value = false;
-    if (closeOnBackdropClick) {
-      close();
-    }
-  }
-};
-
-const onKeydown = e => {
-  if (show.value && e.code === 'Escape') {
-    close();
-    e.stopPropagation();
-  }
-};
-
-useEventListener(document.body, 'mouseup', onMouseUp);
-useEventListener(document, 'keydown', onKeydown);
-
-onMounted(() => {
-  if (onClose && typeof onClose === 'function') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."
-    );
-  }
-});
 </script>

 <template>
@@ -27,14 +27,14 @@ export default {
  <div class="flex flex-col items-start px-8 pt-8 pb-0">
    <img v-if="headerImage" :src="headerImage" alt="No image" />
    <h2
-      data-test-id="modal-header-title"
+      ref="modalHeaderTitle"
      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
    >
      {{ headerTitle }}
    </h2>
    <p
      v-if="headerContent"
-      data-test-id="modal-header-content"
+      ref="modalHeaderContent"
      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
    >
      {{ headerContent }}
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onBeforeUnmount } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useRoute } from 'dashboard/composables/route';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -1,6 +1,5 @@
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { emitter } from 'shared/helpers/mitt';

 export default {
  props: {
@@ -11,7 +10,7 @@ export default {
  },
  methods: {
    onMenuItemClick() {
-      emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
+      this.$emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
    },
  },
 };
@@ -1,6 +1,5 @@
 <script>
 import WootSnackbar from './Snackbar.vue';
-import { emitter } from 'shared/helpers/mitt';

 export default {
  components: {
@@ -20,10 +19,10 @@ export default {
  },

  mounted() {
-    emitter.on('newToastMessage', this.onNewToastMessage);
+    this.$emitter.on('newToastMessage', this.onNewToastMessage);
  },
-  unmounted() {
-    emitter.off('newToastMessage', this.onNewToastMessage);
+  beforeDestroy() {
+    this.$emitter.off('newToastMessage', this.onNewToastMessage);
  },
  methods: {
    onNewToastMessage({ message, action }) {
@@ -1,8 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAccount } from 'dashboard/composables/useAccount';
 import Banner from 'dashboard/components/ui/Banner.vue';
+import accountMixin from 'dashboard/mixins/account';

 const EMPTY_SUBSCRIPTION_INFO = {
  status: null,
@@ -11,13 +11,10 @@ const EMPTY_SUBSCRIPTION_INFO = {

 export default {
  components: { Banner },
+  mixins: [accountMixin],
  setup() {
    const { isAdmin } = useAdmin();
-
-    const { accountId } = useAccount();
-
    return {
-      accountId,
      isAdmin,
    };
  },
@@ -79,7 +76,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -87,6 +83,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primary-action="routeToBilling"
+    @click="routeToBilling"
  />
 </template>
@@ -1,10 +1,12 @@
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
+import accountMixin from 'dashboard/mixins/account';
 import { useAlert } from 'dashboard/composables';

 export default {
  components: { Banner },
+  mixins: [accountMixin],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -28,7 +30,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -37,6 +38,6 @@ export default {
    :action-button-label="actionButtonMessage"
    action-button-icon="mail"
    has-action-button
-    @primary-action="resendVerificationEmail"
+    @click="resendVerificationEmail"
  />
 </template>
@@ -67,7 +67,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -1,17 +1,12 @@
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import { useAccount } from 'dashboard/composables/useAccount';
+import accountMixin from 'dashboard/mixins/account';
 import { differenceInDays } from 'date-fns';

 export default {
  components: { Banner },
-  setup() {
-    const { accountId } = useAccount();
-    return {
-      accountId,
-    };
-  },
+  mixins: [accountMixin],
  data() {
    return { conversationMeta: {} };
  },
@@ -81,7 +76,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -89,6 +83,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primary-action="routeToBilling"
+    @click="routeToBilling"
  />
 </template>
@@ -27,17 +27,16 @@ export default {
      default: 'primary',
    },
  },
-  created() {
-    // eslint-disable-next-line
-    console.warn(
-      '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-    );
+  methods: {
+    onClick(e) {
+      this.$emit('click', e);
+    },
  },
 };
 </script>

 <template>
-  <button :type="type" class="button nice" :class="variant">
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
    <fluent-icon
      v-if="!isLoading && icon"
      class="icon"
@@ -40,6 +40,11 @@ export default {
      return `button nice gap-2 ${this.buttonClass || ' '}`;
    },
  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>

@@ -49,6 +54,7 @@ export default {
    data-testid="submit_button"
    :disabled="disabled"
    :class="computedClass"
+    @click="onClick"
  >
    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
    <span>{{ buttonText }}</span>
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
+import { useI18n } from 'dashboard/composables/useI18n';
 import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@@ -13,12 +13,13 @@ import wootConstants from 'dashboard/constants/globals';
 import {
  CMD_REOPEN_CONVERSATION,
  CMD_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
+} from 'dashboard/routes/dashboard/commands/commandBarBusEvents';

 const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();

+const resolveActionsRef = ref(null);
 const arrowDownButtonRef = ref(null);
 const isLoading = ref(false);

@@ -130,14 +131,17 @@ const keyboardEvents = {
  },
 };

-useKeyboardEvents(keyboardEvents);
+useKeyboardEvents(keyboardEvents, resolveActionsRef);

 useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
 useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 </script>

 <template>
-  <div class="relative flex items-center justify-end resolve-actions">
+  <div
+    ref="resolveActionsRef"
+    class="relative flex items-center justify-end resolve-actions"
+  >
    <div class="button-group">
      <woot-button
        v-if="isOpen"
@@ -1,40 +1,45 @@
-// [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
-import Button from './ui/WootButton.vue';
-import Code from './Code.vue';
-import ColorPicker from './widgets/ColorPicker.vue';
+import Bar from './widgets/chart/BarChart';
+import Button from './ui/WootButton';
+import Code from './Code';
+import ColorPicker from './widgets/ColorPicker';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
+import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
-import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import FeatureToggle from './widgets/FeatureToggle.vue';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import FeatureToggle from './widgets/FeatureToggle';
+import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import PhoneInput from './widgets/forms/PhoneInput.vue';
-import Label from './ui/Label.vue';
-import LoadingState from './widgets/LoadingState.vue';
-import ModalHeader from './ModalHeader.vue';
-import Modal from './Modal.vue';
-import SidemenuIcon from './SidemenuIcon.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import SubmitButton from './buttons/FormSubmitButton.vue';
-import Tabs from './ui/Tabs/Tabs.vue';
-import TabsItem from './ui/Tabs/TabsItem.vue';
+import Label from './ui/Label';
+import LoadingState from './widgets/LoadingState';
+import Modal from './Modal';
+import ModalHeader from './ModalHeader';
+import SidemenuIcon from './SidemenuIcon';
+import Spinner from 'shared/components/Spinner';
+import SubmitButton from './buttons/FormSubmitButton';
+import Tabs from './ui/Tabs/Tabs';
+import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
 import DatePicker from './ui/DatePicker/DatePicker.vue';

 const WootUIKit = {
  AvatarUploader,
+  Bar,
  Button,
  Code,
  ColorPicker,
  ConfirmDeleteModal,
  ConfirmModal,
+  ContextMenu,
  DeleteModal,
  DropdownItem,
  DropdownMenu,
  FeatureToggle,
+  HorizontalBar,
  Input,
  PhoneInput,
  Label,
@@ -31,29 +31,26 @@ export default {
      currentAccountId: 'getCurrentAccountId',
      currentUserAutoOffline: 'getCurrentUserAutoOffline',
    }),
-    statusList() {
-      return [
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.ONLINE'),
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.BUSY'),
-        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.OFFLINE'),
-      ];
-    },
    availabilityDisplayLabel() {
      const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
        key => key === this.currentUserAvailability
      );
-      return this.statusList[availabilityIndex];
+      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST')[
+        availabilityIndex
+      ];
    },
    currentUserAvailability() {
      return this.getCurrentUserAvailability;
    },
    availabilityStatuses() {
-      return this.statusList.map((statusLabel, index) => ({
-        label: statusLabel,
-        value: AVAILABILITY_STATUS_KEYS[index],
-        disabled:
-          this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
-      }));
+      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
+        (statusLabel, index) => ({
+          label: statusLabel,
+          value: AVAILABILITY_STATUS_KEYS[index],
+          disabled:
+            this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
+        })
+      );
    },
  },

@@ -105,7 +102,7 @@ export default {
        size="small"
        :color-scheme="status.disabled ? '' : 'secondary'"
        :variant="status.disabled ? 'smooth' : 'clear'"
-        class="status-change--dropdown-button"
+        class-names="status-change--dropdown-button"
        @click="changeAvailabilityStatus(status.value)"
      >
        <AvailabilityStatusBadge :status="status.value" />
@@ -132,7 +129,7 @@ export default {
      <woot-switch
        size="small"
        class="mx-1 mt-px mb-0"
-        :model-value="currentUserAutoOffline"
+        :value="currentUserAutoOffline"
        @input="updateAutoOffline"
      />
    </WootDropdownItem>
@@ -1,16 +1,14 @@
 <script>
+import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'dashboard/composables/route';

 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
 import { routesWithPermissions } from '../../routes';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../helper/permissionsHelper';
+import { hasPermissions } from '../../helper/permissionsHelper';

 export default {
  components: {
@@ -22,15 +20,13 @@ export default {
      type: Boolean,
      default: true,
    },
+    sidebarClassName: {
+      type: String,
+      default: '',
+    },
  },
-  emits: [
-    'toggleAccountModal',
-    'showAddLabelPopup',
-    'openNotificationPanel',
-    'closeKeyShortcutModal',
-    'openKeyShortcutModal',
-  ],
  setup(props, { emit }) {
+    const sidebarRef = ref(null);
    const route = useRoute();
    const router = useRouter();

@@ -68,10 +64,11 @@ export default {
        action: () => navigateToRoute('agent_list'),
      },
    };
-    useKeyboardEvents(keyboardEvents);
+    useKeyboardEvents(keyboardEvents, sidebarRef);

    return {
      toggleKeyShortcutModal,
+      sidebarRef,
    };
  },
  data() {
@@ -116,11 +113,7 @@ export default {
      return getSidebarItems(this.accountId);
    },
    primaryMenuItems() {
-      const userPermissions = getUserPermissions(
-        this.currentUser,
-        this.accountId
-      );
-
+      const userPermissions = this.currentUser.permissions;
      const menuItems = this.sideMenuConfig.primaryMenu;
      return menuItems.filter(menuItem => {
        const isAvailableForTheUser = hasPermissions(
@@ -131,7 +124,6 @@ export default {
        if (!isAvailableForTheUser) {
          return false;
        }
-
        if (
          menuItem.alwaysVisibleOnChatwootInstances &&
          !this.isACustomBrandedInstance
@@ -139,12 +131,10 @@ export default {
          return true;
        }
        if (menuItem.featureFlag) {
-          const isEnabled = this.isFeatureEnabledonAccount(
+          return this.isFeatureEnabledonAccount(
            this.accountId,
            menuItem.featureFlag
          );
-
-          return isEnabled;
        }
        return true;
      });
@@ -166,17 +156,6 @@ export default {
        ) || {};
      return activePrimaryMenu;
    },
-    hasSecondaryMenu() {
-      return (
-        this.activeSecondaryMenu.menuItems &&
-        this.activeSecondaryMenu.menuItems.length
-      );
-    },
-    hasSecondarySidebar() {
-      // if it is explicitly stated to show and it has secondary menu items to show
-      // showSecondarySidebar corresponds to the UI settings, indicating if the user has toggled it
-      return this.showSecondarySidebar && this.hasSecondaryMenu;
-    },
  },

  watch: {
@@ -216,7 +195,7 @@ export default {
 </script>

 <template>
-  <aside class="flex h-full">
+  <aside ref="sidebarRef" class="flex h-full">
    <PrimarySidebar
      :logo-source="globalConfig.logoThumbnail"
      :installation-name="globalConfig.installationName"
@@ -224,12 +203,13 @@ export default {
      :account-id="accountId"
      :menu-items="primaryMenuItems"
      :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
    />
    <SecondarySidebar
-      v-if="hasSecondarySidebar"
+      v-if="showSecondarySidebar"
+      :class="sidebarClassName"
      :account-id="accountId"
      :inboxes="inboxes"
      :labels="labels"
@@ -238,8 +218,8 @@ export default {
      :menu-config="activeSecondaryMenu"
      :current-user="currentUser"
      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
    />
  </aside>
 </template>
@@ -39,7 +39,6 @@ const settings = accountId => ({
    'settings_teams_list',
    'settings_teams_new',
    'sla_list',
-    'custom_roles_list',
  ],
  menuItems: [
    {
@@ -179,18 +178,6 @@ const settings = accountId => ({
      isEnterpriseOnly: true,
      featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
    },
-    {
-      icon: 'scan-person',
-      label: 'CUSTOM_ROLES',
-      hasSubMenu: false,
-      meta: {
-        permissions: ['administrator'],
-      },
-      toState: frontendURL(`accounts/${accountId}/settings/custom-roles/list`),
-      toStateName: 'custom_roles_list',
-      isEnterpriseOnly: true,
-      beta: true,
-    },
    {
      icon: 'document-list-clock',
      label: 'SLA',
@@ -2,7 +2,6 @@
 import { mapGetters } from 'vuex';

 export default {
-  emits: ['toggleAccounts'],
  data() {
    return { showSwitchButton: false };
  },
@@ -26,7 +25,6 @@ export default {
 };
 </script>

-<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showShowCurrentAccountContext"
@@ -7,7 +7,7 @@ export default {
      default: true,
    },
  },
-  emits: ['closeAccountModal', 'showCreateAccountModal'],
+
  computed: {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
@@ -52,13 +52,9 @@ export default {
                {{ account.name }}
              </div>
              <div
-                class="text-xs font-medium lowercase text-slate-500 dark:text-slate-500 hover:underline-offset-4"
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
              >
-                {{
-                  account.custom_role_id
-                    ? account.custom_role.name
-                    : account.role
-                }}
+                {{ account.role }}
              </div>
            </label>
          </span>
@@ -1,7 +1,7 @@
 <script>
+import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
-import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';

 export default {
@@ -15,7 +15,6 @@ export default {
      default: true,
    },
  },
-  emits: ['closeAccountCreateModal'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -24,13 +23,11 @@ export default {
      accountName: '',
    };
  },
-  validations() {
-    return {
-      accountName: {
-        required,
-        minLength: minLength(1),
-      },
-    };
+  validations: {
+    accountName: {
+      required,
+      minLength: minLength(1),
+    },
  },
  computed: {
    ...mapGetters({
@@ -79,7 +76,7 @@ export default {
          <label :class="{ error: v$.accountName.$error }">
            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
            <input
-              v-model="accountName"
+              v-model.trim="accountName"
              type="text"
              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
              @input="v$.accountName.$touch"
@@ -6,7 +6,6 @@ export default {
  components: {
    Thumbnail,
  },
-  emits: ['toggleMenu'],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -2,8 +2,6 @@
 import { mapGetters } from 'vuex';

 export default {
-  emits: ['openNotificationPanel'],
-
  computed: {
    ...mapGetters({
      notificationMetadata: 'notifications/getMeta',
@@ -17,12 +17,6 @@ export default {
      default: false,
    },
  },
-  emits: [
-    'close',
-    'openKeyShortcutModal',
-    'toggleAccounts',
-    'showSupportChatWindow',
-  ],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -7,7 +7,6 @@ import NotificationBell from './NotificationBell.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
-import { useTrack } from 'dashboard/composables';

 export default {
  components: {
@@ -43,16 +42,12 @@ export default {
      default: '',
    },
  },
-  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
  data() {
    return {
      helpDocsURL: wootConstants.DOCS_URL,
      showOptionsMenu: false,
    };
  },
-  mounted() {
-    console.log('MENU ITEMS', this.menuItems);
-  },
  methods: {
    frontendURL,
    toggleOptions() {
@@ -65,7 +60,7 @@ export default {
      window.$chatwoot.toggle();
    },
    openNotificationPanel() {
-      useTrack(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
+      this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
      this.$emit('openNotificationPanel');
    },
  },
@@ -100,13 +95,13 @@ export default {
        open-in-new-page
        :to="helpDocsURL"
      />
-      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggle-menu="toggleOptions" />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
      <OptionsMenu
        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
        @close="toggleOptions"
      />
    </div>
@@ -26,13 +26,6 @@ export default {
      default: false,
    },
  },
-  mounted() {
-    console.log(
-      'MOUNTED: PRIMARY NAV ITEM',
-      this.name,
-      this.$t(`SIDEBAR.${this.name}`)
-    );
-  },
 };
 </script>

@@ -4,10 +4,7 @@ import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../../helper/permissionsHelper';
+import { hasPermissions } from '../../../helper/permissionsHelper';
 import { routesWithPermissions } from '../../../routes';

 export default {
@@ -49,21 +46,20 @@ export default {
      default: false,
    },
  },
-  emits: ['addLabel', 'toggleAccounts'],
  computed: {
    ...mapGetters({
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
    }),
+    hasSecondaryMenu() {
+      return this.menuConfig.menuItems && this.menuConfig.menuItems.length;
+    },
    contactCustomViews() {
      return this.customViews.filter(view => view.filter_type === 'contact');
    },
    accessibleMenuItems() {
      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
        menuItem => {
-          const userPermissions = getUserPermissions(
-            this.currentUser,
-            this.accountId
-          );
+          const { permissions: userPermissions = [] } = this.currentUser;
          return hasPermissions(
            routesWithPermissions[menuItem.toStateName],
            userPermissions
@@ -241,9 +237,10 @@ export default {

 <template>
  <div
+    v-if="hasSecondaryMenu"
    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
  >
-    <AccountContext @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggleAccounts="toggleAccountModal" />
    <transition-group
      name="menu-list"
      tag="ul"
@@ -258,7 +255,7 @@ export default {
        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
        :key="menuItem.key"
        :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
+        @addLabel="showAddLabelPopup"
      />
    </transition-group>
  </div>
@@ -58,7 +58,7 @@ export default {
    active-class="active"
  >
    <li
-      class="h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
      :class="{
        'bg-woot-25 dark:bg-slate-800': isActive,
        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
@@ -105,7 +105,7 @@ export default {
          </span>
          <span
            v-if="showChildCount"
-            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
+            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs font-medium mx-1 py-0 px-1"
            :class="
              isCountZero
                ? `text-slate-300 dark:text-slate-500`
@@ -1,7 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useConfig } from 'dashboard/composables/useConfig';
+import configMixin from 'shared/mixins/configMixin';
 import {
  getInboxClassByType,
  getInboxWarningIconClass,
@@ -16,19 +16,17 @@ import Policy from '../../policy.vue';

 export default {
  components: { SecondaryChildNavItem, Policy },
+  mixins: [configMixin],
  props: {
    menuItem: {
      type: Object,
      default: () => ({}),
    },
  },
-  emits: ['addLabel', 'open'],
  setup() {
    const { isAdmin } = useAdmin();
-    const { isEnterprise } = useConfig();
    return {
      isAdmin,
-      isEnterprise,
    };
  },
  computed: {
@@ -103,7 +101,7 @@ export default {
    },
    isInboxSettings() {
      return (
-        this.$route.name === 'settings_inbox_show' &&
+        this.$store.state.route.name === 'settings_inbox_show' &&
        this.menuItem.toStateName === 'settings_inbox_list'
      );
    },
@@ -209,7 +207,7 @@ export default {
    </div>
    <router-link
      v-else
-      class="flex items-center p-2 m-0 text-sm leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
      :class="computedClass"
      :to="menuItem && menuItem.toState"
    >
@@ -221,7 +219,7 @@ export default {
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
      <span
        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 rounded-md text-xxs"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
        :class="{
          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
@@ -236,7 +234,7 @@ export default {
        v-if="menuItem.beta"
        data-view-component="true"
        label="Beta"
-        class="inline-block px-1 mx-1 leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
      >
        {{ $t('SIDEBAR.BETA') }}
      </span>
@@ -1,62 +1,79 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
 import AccountSelector from '../AccountSelector.vue';
+import { createLocalVue, mount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+
+import i18n from 'dashboard/i18n';
 import WootModal from 'dashboard/components/Modal.vue';
 import WootModalHeader from 'dashboard/components/ModalHeader.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

-const store = createStore({
-  modules: {
-    auth: {
-      namespaced: false,
-      getters: {
-        getCurrentAccountId: () => 1,
-        getCurrentUser: () => ({
-          accounts: [
-            { id: 1, name: 'Chatwoot', role: 'administrator' },
-            { id: 2, name: 'GitX', role: 'agent' },
-          ],
-        }),
-      },
-    },
-    globalConfig: {
-      namespaced: true,
-      getters: {
-        get: () => ({ createNewAccountFromDashboard: false }),
-      },
-    },
-  },
+const localVue = createLocalVue();
+localVue.component('woot-modal', WootModal);
+localVue.component('woot-modal-header', WootModalHeader);
+localVue.component('fluent-icon', FluentIcon);
+
+localVue.use(Vuex);
+localVue.use(VueI18n);
+
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
 });

-describe('AccountSelector', () => {
+describe('accountSelctor', () => {
  let accountSelector = null;
+  const currentUser = {
+    accounts: [
+      {
+        id: 1,
+        name: 'Chatwoot',
+        role: 'administrator',
+      },
+      {
+        id: 2,
+        name: 'GitX',
+        role: 'agent',
+      },
+    ],
+  };
+
+  let actions = null;
+  let modules = null;

  beforeEach(() => {
-    accountSelector = mount(AccountSelector, {
-      global: {
-        plugins: [store],
-        components: {
-          'woot-modal': WootModal,
-          'woot-modal-header': WootModalHeader,
-          'fluent-icon': FluentIcon,
-        },
-        stubs: {
-          WootButton: { template: '<button />' },
-          // override global stub
-          WootModalHeader: false,
+    actions = {};
+    modules = {
+      auth: {
+        getters: {
+          getCurrentAccountId: () => 1,
+          getCurrentUser: () => currentUser,
        },
      },
-      props: { showAccountModal: true },
+      globalConfig: {
+        getters: {
+          'globalConfig/get': () => ({ createNewAccountFromDashboard: false }),
+        },
+      },
+    };
+
+    let store = new Vuex.Store({ actions, modules });
+    accountSelector = mount(AccountSelector, {
+      store,
+      localVue,
+      i18n: i18nConfig,
+      propsData: { showAccountModal: true },
+      stubs: { WootButton: { template: '<button />' } },
    });
  });

  it('title and sub title exist', () => {
    const headerComponent = accountSelector.findComponent(WootModalHeader);
-    const title = headerComponent.find('[data-test-id="modal-header-title"]');
+    const title = headerComponent.findComponent({ ref: 'modalHeaderTitle' });
    expect(title.text()).toBe('Switch Account');
-    const content = headerComponent.find(
-      '[data-test-id="modal-header-content"]'
-    );
+    const content = headerComponent.findComponent({
+      ref: 'modalHeaderContent',
+    });
    expect(content.text()).toBe('Select an account from the following list');
  });

@@ -1,10 +1,28 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
 import AgentDetails from '../AgentDetails.vue';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
+
+import i18n from 'dashboard/i18n';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueI18n);
+localVue.component('thumbnail', Thumbnail);
+localVue.component('woot-button', WootButton);
+localVue.component('woot-button', WootButton);
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});

-describe('AgentDetails', () => {
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});
+
+describe('agentDetails', () => {
  const currentUser = {
    name: 'Neymar Junior',
    avatar_url: '',
@@ -12,46 +30,37 @@ describe('AgentDetails', () => {
  };
  const currentRole = 'agent';
  let store = null;
+  let actions = null;
+  let modules = null;
  let agentDetails = null;

-  const mockTooltipDirective = {
-    mounted: (el, binding) => {
-      // You can mock the behavior here if necessary
-      el.setAttribute('data-tooltip', binding.value || '');
-    },
-  };
-
  beforeEach(() => {
-    store = createStore({
-      modules: {
-        auth: {
-          namespaced: false,
-          getters: {
-            getCurrentUser: () => currentUser,
-            getCurrentRole: () => currentRole,
-            getCurrentUserAvailability: () => currentUser.availability_status,
-          },
+    actions = {};
+
+    modules = {
+      auth: {
+        getters: {
+          getCurrentUser: () => currentUser,
+          getCurrentRole: () => currentRole,
+          getCurrentUserAvailability: () => currentUser.availability_status,
        },
      },
+    };
+
+    store = new Vuex.Store({
+      actions,
+      modules,
    });

    agentDetails = shallowMount(AgentDetails, {
-      global: {
-        plugins: [store],
-        components: {
-          Thumbnail,
-          WootButton,
-        },
-        directives: {
-          tooltip: mockTooltipDirective, // Mocking the tooltip directive
-        },
-        stubs: { WootButton: { template: '<button><slot /></button>' } },
-      },
+      store,
+      localVue,
+      i18n: i18nConfig,
    });
  });

-  it('shows the correct agent status', () => {
-    expect(agentDetails.findComponent(Thumbnail).vm.status).toBe('online');
+  it(' the agent status', () => {
+    expect(agentDetails.find('thumbnail-stub').vm.status).toBe('online');
  });

  it('agent thumbnail exists', () => {
@@ -1,7 +1,20 @@
-import { shallowMount } from '@vue/test-utils';
-import { createStore } from 'vuex';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import NotificationBell from '../NotificationBell.vue';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
+
+import i18n from 'dashboard/i18n';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueI18n);
+localVue.component('fluent-icon', FluentIcon);
+
+const i18nConfig = new VueI18n({
+  locale: 'en',
+  messages: i18n,
+});

 const $route = {
  name: 'notifications_index',
@@ -20,51 +33,43 @@ describe('notificationBell', () => {
    };
    modules = {
      auth: {
-        namespaced: false,
        getters: {
          getCurrentAccountId: () => accountId,
        },
      },
      notifications: {
-        namespaced: false,
        getters: {
          'notifications/getMeta': () => notificationMetadata,
        },
      },
    };

-    store = createStore({
+    store = new Vuex.Store({
      actions,
      modules,
    });
  });

-  it('it should return unread count 19', () => {
+  it('it should return unread count 19 ', () => {
    const wrapper = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
+      localVue,
+      i18n: i18nConfig,
+      store,
+      mocks: {
+        $route,
      },
    });
    expect(wrapper.vm.unreadCount).toBe('19');
  });

-  it('it should return unread count 99+', async () => {
+  it('it should return unread count 99+ ', async () => {
    notificationMetadata.unreadCount = 100;
    const wrapper = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
+      localVue,
+      i18n: i18nConfig,
+      store,
+      mocks: {
+        $route,
      },
    });
    expect(wrapper.vm.unreadCount).toBe('99+');
@@ -72,14 +77,11 @@ describe('notificationBell', () => {

  it('isNotificationPanelActive', async () => {
    const notificationBell = shallowMount(NotificationBell, {
-      global: {
-        plugins: [store],
-        mocks: {
-          $route,
-        },
-        components: {
-          'fluent-icon': FluentIcon,
-        },
+      store,
+      localVue,
+      i18n: i18nConfig,
+      mocks: {
+        $route,
      },
    });

@@ -1,6 +1,9 @@
-import { mount } from '@vue/test-utils';
-import { createStore } from 'vuex';
 import AvailabilityStatus from '../AvailabilityStatus.vue';
+import { createLocalVue, mount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
+
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -8,64 +11,70 @@ import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue
 import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';

+import i18n from 'dashboard/i18n';
+
+const localVue = createLocalVue();
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});
+localVue.use(Vuex);
+localVue.use(VueI18n);
+localVue.component('woot-button', WootButton);
+localVue.component('woot-dropdown-header', WootDropdownHeader);
+localVue.component('woot-dropdown-menu', WootDropdownMenu);
+localVue.component('woot-dropdown-divider', WootDropdownDivider);
+localVue.component('woot-dropdown-item', WootDropdownItem);
+localVue.component('fluent-icon', FluentIcon);
+
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
+
 describe('AvailabilityStatus', () => {
  const currentAvailability = 'online';
  const currentAccountId = '1';
  const currentUserAutoOffline = false;
  let store = null;
  let actions = null;
+  let modules = null;
+  let availabilityStatus = null;

  beforeEach(() => {
    actions = {
-      updateAvailability: vi.fn(() => Promise.resolve()),
+      updateAvailability: vi.fn(() => {
+        return Promise.resolve();
+      }),
    };

-    store = createStore({
-      modules: {
-        auth: {
-          namespaced: false,
-          getters: {
-            getCurrentUserAvailability: () => currentAvailability,
-            getCurrentAccountId: () => currentAccountId,
-            getCurrentUserAutoOffline: () => currentUserAutoOffline,
-          },
+    modules = {
+      auth: {
+        getters: {
+          getCurrentUserAvailability: () => currentAvailability,
+          getCurrentAccountId: () => currentAccountId,
+          getCurrentUserAutoOffline: () => currentUserAutoOffline,
        },
      },
-      actions,
+    };
+
+    store = new Vuex.Store({ actions, modules });
+
+    availabilityStatus = mount(AvailabilityStatus, {
+      store,
+      localVue,
+      i18n: i18nConfig,
+      stubs: { WootSwitch: { template: '<button />' } },
    });
  });

  it('dispatches an action when user changes status', async () => {
-    const wrapper = mount(AvailabilityStatus, {
-      global: {
-        plugins: [store],
-        components: {
-          WootButton,
-          WootDropdownItem,
-          WootDropdownMenu,
-          WootDropdownHeader,
-          WootDropdownDivider,
-          FluentIcon,
-        },
-        stubs: {
-          WootSwitch: { template: '<button />' },
-        },
-      },
-    });
+    await availabilityStatus;
+    availabilityStatus
+      .findAll('.status-change--dropdown-button')
+      .at(2)
+      .trigger('click');

-    // Ensure that the dropdown menu is opened
-    await wrapper.vm.openStatusMenu();
-
-    // Simulate the user clicking the 3rd button (offline status)
-    const buttons = wrapper.findAll('.status-change--dropdown-button');
-    expect(buttons.length).toBeGreaterThan(0); // Ensure buttons exist
-
-    await buttons[2].trigger('click');
-
-    expect(actions.updateAvailability).toHaveBeenCalledTimes(1);
-    expect(actions.updateAvailability.mock.calls[0][1]).toEqual({
-      availability: 'offline',
-      account_id: currentAccountId,
-    });
+    expect(actions.updateAvailability).toBeCalledWith(
+      expect.any(Object),
+      { availability: 'offline', account_id: currentAccountId },
+      undefined
+    );
  });
 });
@@ -1,11 +1,7 @@
 <script setup>
 import { useStoreGetters } from 'dashboard/composables/store';
 import { computed } from 'vue';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../helper/permissionsHelper';
-
+import { hasPermissions } from '../helper/permissionsHelper';
 const props = defineProps({
  permissions: {
    type: Array,
@@ -14,17 +10,12 @@ const props = defineProps({
 });

 const getters = useStoreGetters();
-const user = computed(() => getters.getCurrentUser.value);
-const accountId = computed(() => getters.getCurrentAccountId.value);
-const userPermissions = computed(() => {
-  return getUserPermissions(user.value, accountId.value);
-});
-const hasPermission = computed(() => {
-  return hasPermissions(props.permissions, userPermissions.value);
-});
+const user = getters.getCurrentUser.value;
+const hasPermission = computed(() =>
+  hasPermissions(props.permissions, user.permissions)
+);
 </script>

-<!-- eslint-disable vue/no-root-v-if -->
 <template>
  <div v-if="hasPermission">
    <slot />
@@ -7,8 +7,5 @@ exports[`SidemenuIcon > matches snapshot 1`] = `
  icon="list"
  size="small"
  variant="clear"
->
-  
-  
-</button>
+/>
 `;
@@ -1,24 +0,0 @@
-<script setup>
-import { useMapGetter } from 'dashboard/composables/store';
-
-defineProps({
-  content: {
-    type: String,
-    default: '',
-  },
-});
-
-const isRTL = useMapGetter('accounts/isRTL');
-</script>
-
-<template>
-  <div
-    class="overflow-hidden whitespace-nowrap text-ellipsis"
-    :class="{ 'text-right': isRTL }"
-  >
-    <slot v-if="$slots.default || content">
-      <template v-if="content">{{ content }}</template>
-    </slot>
-    <span v-else class="text-slate-300 dark:text-slate-700"> --- </span>
-  </div>
-</template>
@@ -1,117 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-const props = defineProps({
-  table: {
-    type: Object,
-    required: true,
-  },
-});
-
-const getFormattedPages = (start, end) => {
-  const formatter = new Intl.NumberFormat(navigator.language);
-  return Array.from({ length: end - start + 1 }, (_, i) =>
-    formatter.format(start + i)
-  );
-};
-
-const currentPage = computed(() => {
-  return props.table.getState().pagination.pageIndex + 1;
-});
-
-const totalPages = computed(() => {
-  return props.table.getPageCount();
-});
-
-const visiblePages = computed(() => {
-  if (totalPages.value <= 3) return getFormattedPages(1, totalPages.value);
-  if (currentPage.value === 1) return getFormattedPages(1, 3);
-  if (currentPage.value === totalPages.value) {
-    return getFormattedPages(totalPages.value - 2, totalPages.value);
-  }
-
-  return getFormattedPages(currentPage.value - 1, currentPage.value + 1);
-});
-
-const total = computed(() => {
-  return props.table.getRowCount();
-});
-
-const start = computed(() => {
-  const { pagination } = props.table.getState();
-  return pagination.pageIndex * pagination.pageSize + 1;
-});
-
-const end = computed(() => {
-  const { pagination } = props.table.getState();
-  return Math.min(
-    (pagination.pageIndex + 1) * pagination.pageSize,
-    total.value
-  );
-});
-</script>
-
-<template>
-  <div class="flex items-center justify-between">
-    <div class="flex flex-1 items-center justify-between">
-      <div>
-        <p class="text-sm text-gray-700">
-          {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
-        </p>
-      </div>
-      <nav class="isolate inline-flex gap-1">
-        <woot-button
-          :disabled="!table.getCanPreviousPage()"
-          variant="clear"
-          class="size-8 flex items-center border border-slate-50"
-          color-scheme="secondary"
-          @click="table.setPageIndex(0)"
-        >
-          <span class="i-lucide-chevrons-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          variant="clear"
-          class="size-8 flex items-center border border-slate-50"
-          color-scheme="secondary"
-          :disabled="!table.getCanPreviousPage()"
-          @click="table.previousPage()"
-        >
-          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          v-for="page in visiblePages"
-          :key="page"
-          variant="clear"
-          class="size-8 flex items-center justify-center border text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
-          color-scheme="secondary"
-          @click="table.setPageIndex(page - 1)"
-        >
-          <div
-            class="text-center"
-            :class="{ 'text-woot-500': page == currentPage }"
-          >
-            {{ page }}
-          </div>
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="size-8 flex items-center border border-slate-50"
-          color-scheme="secondary"
-          @click="table.nextPage()"
-        >
-          <span class="i-lucide-chevron-right size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="size-8 flex items-center border border-slate-50"
-          color-scheme="secondary"
-          @click="table.setPageIndex(table.getPageCount() - 1)"
-        >
-          <span class="i-lucide-chevrons-right size-3" aria-hidden="true" />
-        </woot-button>
-      </nav>
-    </div>
-  </div>
-</template>
@@ -1,18 +0,0 @@
-<script setup>
-defineProps({
-  header: {
-    type: Object,
-    required: true,
-  },
-});
-
-const sortIconMap = {
-  default: 'i-lucide-chevrons-up-down',
-  asc: 'i-lucide-chevron-up',
-  desc: 'i-lucide-chevron-down',
-};
-</script>
-
-<template>
-  <span :class="sortIconMap[header.column.getIsSorted() || 'default']" />
-</template>
@@ -1,65 +0,0 @@
-<script setup>
-import { FlexRender } from '@tanstack/vue-table';
-import SortButton from './SortButton.vue';
-
-defineProps({
-  table: {
-    type: Object,
-    required: true,
-  },
-  fixed: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<template>
-  <table :class="{ 'table-fixed': fixed }">
-    <thead
-      class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
-    >
-      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-        <th
-          v-for="header in headerGroup.headers"
-          :key="header.id"
-          :style="{
-            width: `${header.getSize()}px`,
-          }"
-          class="text-left py-3 px-5 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
-          @click="header.column.getCanSort() && header.column.toggleSorting()"
-        >
-          <div
-            v-if="!header.isPlaceholder"
-            class="flex place-items-center gap-1"
-          >
-            <FlexRender
-              :render="header.column.columnDef.header"
-              :props="header.getContext()"
-            />
-            <SortButton v-if="header.column.getCanSort()" :header="header" />
-          </div>
-        </th>
-      </tr>
-    </thead>
-
-    <tbody class="divide-y divide-slate-25 dark:divide-slate-900">
-      <tr
-        v-for="row in table.getRowModel().rows"
-        :key="row.id"
-        class="hover:bg-slate-25 dark:hover:bg-slate-800"
-      >
-        <td
-          v-for="cell in row.getVisibleCells()"
-          :key="cell.id"
-          class="py-2 px-5"
-        >
-          <FlexRender
-            :render="cell.column.columnDef.cell"
-            :props="cell.getContext()"
-          />
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
@@ -18,7 +18,6 @@ export default {
      default: '',
    },
  },
-  emits: ['open', 'close'],
  methods: {
    onClickOpenPath() {
      this.$emit('open');
@@ -38,7 +38,6 @@ export default {
      default: false,
    },
  },
-  emits: ['primaryAction', 'close'],
  computed: {
    bannerClasses() {
      const classList = [this.colorScheme];
@@ -51,7 +50,7 @@ export default {
  },
  methods: {
    onClick(e) {
-      this.$emit('primaryAction', e);
+      this.$emit('click', e);
    },
    onClickClose(e) {
      this.$emit('close', e);
@@ -62,7 +61,7 @@ export default {

 <template>
  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white woot-banner"
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
    :class="bannerClasses"
  >
    <span class="banner-message">
@@ -1,38 +1,43 @@
-<script setup>
-import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
-
-const { x, y } = defineProps({
-  x: { type: Number, default: 0 },
-  y: { type: Number, default: 0 },
-});
-const emit = defineEmits(['close']);
-
-const left = ref(x);
-const top = ref(y);
-
-const style = computed(() => ({
-  top: top.value + 'px',
-  left: left.value + 'px',
-}));
-
-const target = ref();
-onMounted(() => {
-  nextTick(() => {
-    target.value.focus();
-  });
-});
+<script>
+export default {
+  props: {
+    x: {
+      type: Number,
+      default: 0,
+    },
+    y: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      left: this.x,
+      top: this.y,
+      show: false,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        top: this.top + 'px',
+        left: this.left + 'px',
+      };
+    },
+  },
+  mounted() {
+    this.$nextTick(() => this.$el.focus());
+  },
+};
 </script>

 <template>
-  <Teleport to="body">
-    <div
-      ref="target"
-      class="fixed outline-none z-[9999] cursor-pointer"
-      :style="style"
-      tabindex="0"
-      @blur="emit('close')"
-    >
-      <slot />
-    </div>
-  </Teleport>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
 </template>
@@ -222,7 +222,7 @@ const emitDateRange = () => {
    >
      <CalendarDateRange
        :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
      />
      <div
        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -264,15 +264,15 @@ const emitDateRange = () => {
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                />
                <CalendarMonth
                  v-else-if="calendarViews[calendar] === MONTH"
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                  @prev="moveCalendar(calendar, 'prev', YEAR)"
                  @next="moveCalendar(calendar, 'next', YEAR)"
                />
@@ -286,9 +286,9 @@ const emitDateRange = () => {
                  :selected-end-date="selectedEndDate"
                  :selecting-end-date="selectingEndDate"
                  :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                  @prev="moveCalendar(calendar, 'prev')"
                  @next="moveCalendar(calendar, 'next')"
                />
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'change']);
+const emit = defineEmits(['clear', 'clear']);

 const onClickClear = () => {
  emit('clear');
@@ -62,7 +62,7 @@ const selectMonth = index => {
          MONTH
        )
      "
-      @set-view="setViewMode"
+      @setView="setViewMode"
      @prev="onClickPrev"
      @next="onClickNext"
    />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Shivam MishraandGitHub	4caa9b1539	Merge branch 'develop' into fix/conv-order	2024-08-12 10:20:11 +05:30
Shivam Mishra	8ee2419ea5	test: last_activity_at property in conv model	2024-08-12 10:19:36 +05:30
Shivam Mishra	9bcc3c25e3	test: fix specs for conv push data	2024-08-10 15:56:10 +05:30
Shivam MishraandGitHub	106352cdce	Merge branch 'develop' into fix/conv-order	2024-08-10 15:53:20 +05:30
Shivam Mishra	e74a0e5684	feat: add last_activity_at fallack on conv model directly	2024-08-09 15:55:11 +05:30
Shivam Mishra	de6ab10714	fix: last_activity_at is nil when conv is created The payload does not include last_activity_at when the conversation is created. Becuase of this the frontend is not able to sort the conversations when appending this. Another problem is that the last_activity_at is not always present, it is added only when a message is created, and it updates it. So this can be nil when the conversation is created, so we fallback to created_at only at the presentation layer	2024-08-08 15:26:59 +05:30
@@ -1 +1 @@
 .13.0
 .9.0
@@ -1 +1 @@
 .0.0
 .8.0