Merge branch 'develop' into refactor/structured-clone

2024-07-24 19:18:38 +05:30 · 2024-07-24 12:19:15 +05:30 · 2024-07-23 13:12:45 +05:30 · 2024-07-22 16:09:05 +05:30
3042 changed files with 78556 additions and 98650 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/**/*'
@@ -257,4 +257,3 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
-
@@ -2,36 +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,
-      },
-    },
-    {
-      files: ['**/*.story.vue'],
-      rules: {
-        'vue/no-undef-components': [
-          'error',
-          {
-            ignorePatterns: ['Variant', 'Story'],
-          },
-        ],
-        // Story files can have static strings, it doesn't need to handle i18n always.
-        'vue/no-bare-strings-in-template': 'off',
-        'no-console': 'off',
-      },
-    },
-  ],
-  plugins: ['html', 'prettier'],
  parserOptions: {
-    ecmaVersion: 'latest',
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2020,
    sourceType: 'module',
  },
+  plugins: ['html', 'prettier', 'babel'],
  rules: {
    'prettier/prettier': ['error'],
    camelcase: 'off',
@@ -47,160 +27,6 @@ module.exports = {
    'import/no-unresolved': 'off',
    'vue/html-indent': 'off',
    'vue/multi-word-component-names': 'off',
-    'vue/next-tick-style': ['error', 'callback'],
-    'vue/block-order': [
-      'error',
-      {
-        order: ['script', 'template', 'style'],
-      },
-    ],
-    'vue/component-name-in-template-casing': [
-      'error',
-      'PascalCase',
-      {
-        registeredComponentsOnly: true,
-      },
-    ],
-    'vue/component-options-name-casing': ['error', 'PascalCase'],
-    'vue/custom-event-name-casing': ['error', 'camelCase'],
-    'vue/define-emits-declaration': ['error'],
-    'vue/define-macros-order': [
-      'error',
-      {
-        order: ['defineProps', 'defineEmits'],
-        defineExposeLast: false,
-      },
-    ],
-    'vue/define-props-declaration': ['error', 'runtime'],
-    'vue/match-component-import-name': ['error'],
-    'vue/no-bare-strings-in-template': [
-      'error',
-      {
-        allowlist: [
-          '(',
-          ')',
-          ',',
-          '.',
-          '&',
-          '+',
-          '-',
-          '=',
-          '*',
-          '/',
-          '#',
-          '%',
-          '!',
-          '?',
-          ':',
-          '[',
-          ']',
-          '{',
-          '}',
-          '<',
-          '>',
-          '⌘',
-          '📄',
-          '🎉',
-          '💬',
-          '👥',
-          '📥',
-          '🔖',
-          '❌',
-          '✅',
-          '\u00b7',
-          '\u2022',
-          '\u2010',
-          '\u2013',
-          '\u2014',
-          '\u2212',
-          '|',
-        ],
-        attributes: {
-          '/.+/': [
-            'title',
-            'aria-label',
-            'aria-placeholder',
-            'aria-roledescription',
-            'aria-valuetext',
-          ],
-          input: ['placeholder'],
-        },
-        directives: ['v-text'],
-      },
-    ],
-    'vue/no-empty-component-block': 'error',
-    'vue/no-multiple-objects-in-class': 'error',
-    'vue/no-root-v-if': 'warn',
-    'vue/no-static-inline-styles': [
-      'error',
-      {
-        allowBinding: false,
-      },
-    ],
-    'vue/no-template-target-blank': [
-      'error',
-      {
-        allowReferrer: false,
-        enforceDynamicLinks: 'always',
-      },
-    ],
-    'vue/no-required-prop-with-default': [
-      'error',
-      {
-        autofix: false,
-      },
-    ],
-    'vue/no-this-in-before-route-enter': 'error',
-    'vue/no-undef-components': [
-      'error',
-      {
-        ignorePatterns: [
-          '^woot-',
-          '^fluent-',
-          '^multiselect',
-          '^router-link',
-          '^router-view',
-          '^ninja-keys',
-          '^FormulateForm',
-          '^FormulateInput',
-          '^highlightjs',
-        ],
-      },
-    ],
-    'vue/no-unused-emit-declarations': 'error',
-    'vue/no-unused-refs': 'error',
-    'vue/no-use-v-else-with-v-for': 'error',
-    'vue/prefer-true-attribute-shorthand': 'error',
-    'vue/no-useless-v-bind': [
-      'error',
-      {
-        ignoreIncludesComment: false,
-        ignoreStringEscape: false,
-      },
-    ],
-    'vue/no-v-text': 'error',
-    'vue/padding-line-between-blocks': ['error', 'always'],
-    'vue/prefer-separate-static-class': 'error',
-    'vue/require-explicit-slots': 'error',
-    'vue/require-macro-variable-name': [
-      'error',
-      {
-        defineProps: 'props',
-        defineEmits: 'emit',
-        defineSlots: 'slots',
-        useSlots: 'slots',
-        useAttrs: 'attrs',
-      },
-    ],
-    'vue/no-unused-properties': [
-      'error',
-      {
-        groups: ['props'],
-        deepData: false,
-        ignorePublicMembers: false,
-        unreferencedOptions: [],
-      },
-    ],
    'vue/max-attributes-per-line': [
      'error',
      {
@@ -230,6 +56,13 @@ module.exports = {
    'import/extensions': ['off'],
    'no-console': 'error',
  },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'config/webpack/resolve.js',
+      },
+    },
+  },
  env: {
    browser: true,
    node: 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,48 @@
+import { addDecorator } from '@storybook/vue';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueI18n from 'vue-i18n';
+import Vuelidate from 'vuelidate';
+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(Vuelidate);
+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.1', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.19.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.1', 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
@@ -175,9 +175,6 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'

-gem 'opensearch-ruby'
-gem 'searchkick'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################

@@ -203,10 +200,12 @@ group :development do
  gem 'rack-mini-profiler', '>= 3.2.0', require: false
  gem 'stackprof'
  # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.3'
+  gem 'meta_request', '>= 0.8.0'
 end

 group :test do
+  # Cypress in rails.
+  gem 'cypress-on-rails'
  # fast cleaning of database
  gem 'database_cleaner'
  # mock http calls
@@ -229,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.5'
+  gem 'rspec-rails', '>= 6.1.3'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actioncable (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailbox (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionmailer (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
-      actionview (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionpack (7.0.8.4)
+      actionview (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actiontext (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    actionview (7.0.8.4)
+      activesupport (= 7.0.8.4)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activejob (7.0.8.4)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.5)
-      activesupport (= 7.0.8.5)
-    activerecord (7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activemodel (7.0.8.4)
+      activesupport (= 7.0.8.4)
+    activerecord (7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    activestorage (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.4)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -169,7 +169,7 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.3.3)
    connection_pool (2.4.1)
    crack (1.0.0)
      bigdecimal
@@ -178,6 +178,8 @@ GEM
    csv (3.3.0)
    csv-safe (3.3.1)
      csv (~> 3.0)
+    cypress-on-rails (1.16.0)
+      rack
    database_cleaner (2.0.2)
      database_cleaner-active_record (>= 2, < 3)
    database_cleaner-active_record (2.1.0)
@@ -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)
@@ -373,7 +374,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.6)
+    i18n (1.14.5)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@@ -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.17)
+    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)
@@ -532,9 +533,6 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
-    opensearch-ruby (3.4.0)
-      faraday (>= 1.0, < 3)
-      multi_json (>= 1.0)
    openssl (3.2.0)
    orm_adapter (0.5.0)
    os (1.1.4)
@@ -554,13 +552,13 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (6.0.0)
-    puma (6.4.3)
+    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.8.1)
-    rack (2.2.10)
+    racc (1.8.0)
+    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -572,25 +570,25 @@ GEM
    rack-protection (3.2.0)
      base64 (>= 0.1.0)
      rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.7)
+    rack-proxy (0.7.6)
      rack
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.5)
-      actioncable (= 7.0.8.5)
-      actionmailbox (= 7.0.8.5)
-      actionmailer (= 7.0.8.5)
-      actionpack (= 7.0.8.5)
-      actiontext (= 7.0.8.5)
-      actionview (= 7.0.8.5)
-      activejob (= 7.0.8.5)
-      activemodel (= 7.0.8.5)
-      activerecord (= 7.0.8.5)
-      activestorage (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    rails (7.0.8.4)
+      actioncable (= 7.0.8.4)
+      actionmailbox (= 7.0.8.4)
+      actionmailer (= 7.0.8.4)
+      actionpack (= 7.0.8.4)
+      actiontext (= 7.0.8.4)
+      actionview (= 7.0.8.4)
+      activejob (= 7.0.8.4)
+      activemodel (= 7.0.8.4)
+      activerecord (= 7.0.8.4)
+      activestorage (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.4)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -598,9 +596,9 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.5)
-      actionpack (= 7.0.8.5)
-      activesupport (= 7.0.8.5)
+    railties (7.0.8.4)
+      actionpack (= 7.0.8.4)
+      activesupport (= 7.0.8.4)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
@@ -636,19 +634,20 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.9)
+    rexml (3.3.2)
+      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)
@@ -706,26 +705,24 @@ GEM
      parser
    scss_lint (0.60.0)
      sass (~> 3.5, >= 3.5.5)
-    searchkick (5.4.0)
-      activemodel (>= 6.1)
-      hashie
    seed_dump (3.3.1)
      activerecord (>= 4)
      activesupport (>= 4)
    selectize-rails (0.12.6)
-    sentry-rails (5.19.0)
+    semantic_range (3.0.0)
+    sentry-rails (5.18.1)
      railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
-    sentry-ruby (5.19.0)
+      sentry-ruby (~> 5.18.1)
+    sentry-ruby (5.18.1)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.19.0)
-      sentry-ruby (~> 5.19.0)
+    sentry-sidekiq (5.18.1)
+      sentry-ruby (~> 5.18.1)
      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
@@ -769,6 +766,7 @@ GEM
    stackprof (0.2.25)
    statsd-ruby (1.5.0)
    stripe (8.5.0)
+    strscan (3.1.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
    thor (1.3.1)
@@ -798,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)
@@ -823,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)
@@ -831,7 +827,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.17)
+    zeitwerk (2.6.16)

 PLATFORMS
  arm64-darwin-20
@@ -866,6 +862,7 @@ DEPENDENCIES
  climate_control
  commonmarker
  csv-safe
+  cypress-on-rails
  database_cleaner
  ddtrace
  debug (~> 1.8)
@@ -884,9 +881,9 @@ DEPENDENCIES
  foreman
  geocoder
  gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
  groupdate
  grpc
  haikunator
@@ -906,17 +903,16 @@ 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)
-  opensearch-ruby
  pg
  pg_search
  pgvector
@@ -934,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
@@ -942,13 +938,12 @@ DEPENDENCIES
  rubocop-rspec
  scout_apm
  scss_lint
-  searchkick
  seed_dump
-  sentry-rails (>= 5.19.0)
+  sentry-rails (>= 5.18.1)
  sentry-ruby
-  sentry-sidekiq (>= 5.19.0)
+  sentry-sidekiq (>= 5.18.1)
  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)
@@ -965,10 +960,10 @@ DEPENDENCIES
  tzinfo-data
  uglifier
  valid_email2
-  vite_rails
  web-console (>= 4.2.1)
  web-push (>= 3.0.1)
  webmock
+  webpacker
  wisper (= 2.0.0)
  working_hours

@@ -6,7 +6,7 @@ RAILS_ENV ?= development
 setup:
 	gem install bundler
 	bundle install
-	pnpm install
+	yarn install

 db_create:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:create
@@ -30,7 +30,7 @@ server:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails server -b 0.0.0.0 -p 3000

 burn:
-	bundle && pnpm install
+	bundle && yarn

 run:
 	@if [ -f ./.overmind.sock ]; then \
@@ -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
@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
    file_type = attachment['type'].to_sym
    params = { file_type: file_type, account_id: @message.account_id }

-    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
      params.merge!(file_type_params(attachment))
    elsif file_type == :location
      params.merge!(location_params(attachment))
@@ -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')
@@ -6,15 +6,13 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController

  def index
    @portal_articles = @portal.articles
-
-    set_article_count
-
-    @articles = @articles.search(list_params)
+    @all_articles = @portal_articles.search(list_params)
+    @articles_count = @all_articles.count

    @articles = if list_params[:category_slug].present?
-                  @articles.order_by_position.page(@current_page)
+                  @all_articles.order_by_position.page(@current_page)
                else
-                  @articles.order_by_updated_at.page(@current_page)
+                  @all_articles.order_by_updated_at.page(@current_page)
                end
  end

@@ -45,19 +43,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController

  private

-  def set_article_count
-    # Search the params without status and author_id, use this to
-    # compute mine count published draft etc
-    base_search_params = list_params.except(:status, :author_id)
-    @articles = @portal_articles.search(base_search_params)
-
-    @articles_count = @articles.count
-    @mine_articles_count = @articles.search_by_author(Current.user.id).count
-    @published_articles_count = @articles.published.count
-    @draft_articles_count = @articles.draft.count
-    @archived_articles_count = @articles.archived.count
-  end
-
  def fetch_article
    @article = @portal.articles.find(params[:id])
  end
@@ -68,10 +53,9 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController

  def article_params
    params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
-      :locale, meta: [:title,
-                      :description,
-                      { tags: [] }]
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status, meta: [:title,
+                                                                                                                                     :description,
+                                                                                                                                     { tags: [] }]
    )
  end

@@ -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
@@ -10,7 +10,7 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
  private

  def fetch_apps
-    @apps = Integrations::App.all.select { |app| app.active?(Current.account) }
+    @apps = Integrations::App.all.select(&:active?)
  end

  def fetch_app
@@ -1,22 +0,0 @@
-class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-  before_action :fetch_hook
-
-  def sso_url
-    params_string =
-      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
-
-    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
-
-    sso_url = "#{installation_config.value}/sso?#{params_string}"
-    render json: { sso_url: sso_url }, status: :ok
-  end
-
-  private
-
-  def fetch_hook
-    @hook = Current.account.hooks.find_by!(app_id: 'captain')
-  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
@@ -20,7 +20,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
  end

  def create
-    @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
+    @portal = Current.account.portals.build(portal_params)
    @portal.custom_domain = parsed_custom_domain
    @portal.save!
    process_attached_logo
@@ -28,7 +28,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController

  def update
    ActiveRecord::Base.transaction do
-      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
+      @portal.update!(portal_params) if params[:portal].present?
      # @portal.custom_domain = parsed_custom_domain
      process_attached_logo if params[:blob_id].present?
    rescue StandardError => e
@@ -70,21 +70,11 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController

  def portal_params
    params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link,
-      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
+      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived, { config: [:default_locale,
+                                                                                                                          { allowed_locales: [] }] }
    )
  end

-  def live_chat_widget_params
-    permitted_params = params.permit(:inbox_id)
-    return {} if permitted_params[:inbox_id].blank?
-
-    inbox = Inbox.find(permitted_params[:inbox_id])
-    return {} unless inbox.web_widget?
-
-    { channel_web_widget_id: inbox.channel.id }
-  end
-
  def portal_member_params
    params.require(:portal).permit(:account_id, member_ids: [])
  end
@@ -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

@@ -1,15 +1,6 @@
 class Google::CallbacksController < OauthCallbackController
  include GoogleConcern

-  def find_channel_by_email
-    # find by imap_login first, and then by email
-    # this ensures the legacy users can migrate correctly even if inbox email address doesn't match
-    imap_channel = Channel::Email.find_by(imap_login: users_data['email'], account: account)
-    return imap_channel if imap_channel
-
-    Channel::Email.find_by(email: users_data['email'], account: account)
-  end
-
  private

  def provider_name
@@ -25,7 +25,7 @@ class OauthCallbackController < ApplicationController
  end

  def find_or_create_inbox
-    channel_email = find_channel_by_email
+    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
    # we need this value to know where to redirect on sucessful processing of the callback
    channel_exists = channel_email.present?

@@ -39,10 +39,6 @@ class OauthCallbackController < ApplicationController
    [channel_email.inbox, channel_exists]
  end

-  def find_channel_by_email
-    Channel::Email.find_by(email: users_data['email'], account: account)
-  end
-
  def update_channel(channel_email)
    channel_email.update!({
                            imap_login: users_data['email'], imap_address: imap_address,
@@ -6,7 +6,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  layout 'portal'

  def index
-    @articles = @portal.articles.published
+    @articles = @portal.articles
    search_articles
    order_by_sort_param
    @articles.page(list_params[:page]) if list_params[:page].present?
@@ -30,7 +30,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def set_article
    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
+    @article.increment_view_count
    @parsed_content = render_article_content(@article.content)
  end

@@ -1,5 +1,33 @@
+<template>
+  <div
+    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': isRTLView }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
+  >
+    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
+    <template v-if="currentAccountId">
+      <pending-email-verification-banner v-if="hideOnOnboardingView" />
+      <payment-pending-banner v-if="hideOnOnboardingView" />
+      <upgrade-banner />
+    </template>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
+    <add-account-modal
+      :show="showAddAccountModal"
+      :has-accounts="hasAccounts"
+    />
+    <woot-snackbar-box />
+    <network-notification />
+  </div>
+  <loading-state v-else />
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
+import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -8,12 +36,10 @@ 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 { useAccount } from 'dashboard/composables/useAccount';
 import {
  registerSubscription,
  verifyServiceWorkerExistence,
@@ -33,13 +59,9 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
-  setup() {
-    const router = useRouter();
-    const store = useStore();
-    const { accountId } = useAccount();

-    return { router, store, currentAccountId: accountId };
-  },
+  mixins: [rtlMixin],
+
  data() {
    return {
      showAddAccountModal: false,
@@ -47,13 +69,15 @@ export default {
      reconnectService: null,
    };
  },
+
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
-      isRTL: 'accounts/isRTL',
      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
      authUIFlags: 'getAuthUIFlags',
      accountUIFlags: 'accounts/getUIFlags',
+      currentAccountId: 'getCurrentAccountId',
    }),
    hasAccounts() {
      const { accounts = [] } = this.currentUser || {};
@@ -70,13 +94,10 @@ export default {
        this.showAddAccountModal = true;
      }
    },
-    currentAccountId: {
-      immediate: true,
-      handler() {
-        if (this.currentAccountId) {
-          this.initializeAccount();
-        }
-      },
+    currentAccountId() {
+      if (this.currentAccountId) {
+        this.initializeAccount();
+      }
    },
  },
  mounted() {
@@ -84,7 +105,7 @@ export default {
    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
-  unmounted() {
+  beforeDestroy() {
    if (this.reconnectService) {
      this.reconnectService.disconnect();
    }
@@ -109,10 +130,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 => {
@@ -126,50 +147,8 @@ export default {
 };
 </script>

-<template>
-  <div
-    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'"
-  >
-    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
-      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
-      <PaymentPendingBanner v-if="hideOnOnboardingView" />
-      <UpgradeBanner />
-    </template>
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
-        <component :is="Component" />
-      </transition>
-    </router-view>
-    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
-    <WootSnackbarBox />
-    <NetworkNotification />
-  </div>
-  <LoadingState v-else />
-</template>
-
 <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();
@@ -52,13 +52,12 @@ class ArticlesAPI extends PortalsAPI {
  }

  createArticle({ portalSlug, articleObj }) {
-    const { content, title, authorId, categoryId, locale } = articleObj;
+    const { content, title, author_id, category_id } = articleObj;
    return axios.post(`${this.url}/${portalSlug}/articles`, {
      content,
      title,
-      author_id: authorId,
-      category_id: categoryId,
-      locale,
+      author_id,
+      category_id,
    });
  }

@@ -32,10 +32,6 @@ class IntegrationsAPI extends ApiClient {
  deleteHook(hookId) {
    return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
  }
-
-  fetchCaptainURL() {
-    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
-  }
 }

 export default new IntegrationsAPI();
@@ -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,9 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

-@import 'shared/assets/fonts/InterDisplay/inter-display';
-@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';
@@ -33,181 +31,18 @@

@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 {
  @apply hidden;
 }

-.n-blue-border {
-  @apply border-n-blue-border;
-}
-
-.n-blue-text {
-  @apply text-n-blue-text;
-}
-
-// scss-lint:disable PropertySortOrder
@layer base {
-  /* NEXT COLORS START */
-  :root {
-    /* slate */
-    --slate-1: 252 252 253;
-    --slate-2: 249 249 251;
-    --slate-3: 240 240 243;
-    --slate-4: 232 232 236;
-    --slate-5: 224 225 230;
-    --slate-6: 217 217 224;
-    --slate-7: 205 206 214;
-    --slate-8: 185 187 198;
-    --slate-9: 139 141 152;
-    --slate-10: 128 131 141;
-    --slate-11: 96 100 108;
-    --slate-12: 28 32 36;
-
-    --ruby-1: 255 252 253;
-    --ruby-2: 255 247 248;
-    --ruby-3: 254 234 237;
-    --ruby-4: 255 220 225;
-    --ruby-5: 255 206 214;
-    --ruby-6: 248 191 200;
-    --ruby-7: 239 172 184;
-    --ruby-8: 229 146 163;
-    --ruby-9: 229 70 102;
-    --ruby-10: 220 59 93;
-    --ruby-11: 202 36 77;
-    --ruby-12: 100 23 43;
-
-    --amber-1: 254 253 251;
-    --amber-2: 254 251 233;
-    --amber-3: 255 247 194;
-    --amber-4: 255 238 156;
-    --amber-5: 251 229 119;
-    --amber-6: 243 214 115;
-    --amber-7: 233 193 98;
-    --amber-8: 226 163 54;
-    --amber-9: 255 197 61;
-    --amber-10: 255 186 24;
-    --amber-11: 171 100 0;
-    --amber-12: 79 52 34;
-
-    --teal-1: 250 254 253;
-    --teal-2: 243 251 249;
-    --teal-3: 224 248 243;
-    --teal-4: 204 243 234;
-    --teal-5: 184 234 224;
-    --teal-6: 161 222 210;
-    --teal-7: 131 205 193;
-    --teal-8: 83 185 171;
-    --teal-9: 18 165 148;
-    --teal-10: 13 155 138;
-    --teal-11: 0 133 115;
-    --teal-12: 13 61 56;
-
-    --background-color: 253 253 253;
-    --text-blue: 8 109 224;
-    --border-container: 236 236 236;
-    --border-strong: 235 235 235;
-    --border-weak: 234 234 234;
-    --solid-1: 255 255 255;
-    --solid-2: 255 255 255;
-    --solid-3: 255 255 255;
-    --solid-active: 255 255 255;
-    --solid-amber: 252 232 193;
-    --solid-blue: 218 236 255;
-
-    --alpha-1: 67, 67, 67, 0.06;
-    --alpha-2: 201, 202, 207, 0.15;
-    --alpha-3: 255, 255, 255, 0.96;
-    --black-alpha-1: 0, 0, 0, 0.12;
-    --black-alpha-2: 0, 0, 0, 0.04;
-    --border-blue: 39, 129, 246, 0.5;
-    --white-alpha: 255, 255, 255, 0.1;
-  }
-
-  body.dark {
-    /* slate */
-    --slate-1: 17 17 19;
-    --slate-2: 24 25 27;
-    --slate-3: 33 34 37;
-    --slate-4: 39 42 45;
-    --slate-5: 46 49 53;
-    --slate-6: 54 58 63;
-    --slate-7: 67 72 78;
-    --slate-8: 90 97 105;
-    --slate-9: 105 110 119;
-    --slate-10: 119 123 132;
-    --slate-11: 176 180 186;
-    --slate-12: 237 238 240;
-
-    --ruby-1: 25 17 19;
-    --ruby-2: 30 21 23;
-    --ruby-3: 58 20 30;
-    --ruby-4: 78 19 37;
-    --ruby-5: 94 26 46;
-    --ruby-6: 111 37 57;
-    --ruby-7: 136 52 71;
-    --ruby-8: 179 68 90;
-    --ruby-9: 229 70 102;
-    --ruby-10: 236 90 114;
-    --ruby-11: 255 148 157;
-    --ruby-12: 254 210 225;
-
-    --amber-1: 22 18 12;
-    --amber-2: 29 24 15;
-    --amber-3: 48 32 8;
-    --amber-4: 63 39 0;
-    --amber-5: 77 48 0;
-    --amber-6: 92 61 5;
-    --amber-7: 113 79 25;
-    --amber-8: 143 100 36;
-    --amber-9: 255 197 61;
-    --amber-10: 255 214 10;
-    --amber-11: 255 202 22;
-    --amber-12: 255 231 179;
-
-    --teal-1: 13 21 20;
-    --teal-2: 17 28 27;
-    --teal-3: 13 45 42;
-    --teal-4: 2 59 55;
-    --teal-5: 8 72 67;
-    --teal-6: 20 87 80;
-    --teal-7: 28 105 97;
-    --teal-8: 32 126 115;
-    --teal-9: 18 165 148;
-    --teal-10: 14 179 158;
-    --teal-11: 11 216 182;
-    --teal-12: 173 240 221;
-
-    --background-color: 18 18 19;
-    --border-strong: 52 52 52;
-    --border-weak: 38 38 42;
-    --solid-1: 23 23 26;
-    --solid-2: 29 30 36;
-    --solid-3: 44 45 54;
-    --solid-active: 53 57 66;
-    --solid-amber: 42 37 30;
-    --solid-blue: 16 49 91;
-    --text-blue: 126 182 255;
-
-    --alpha-1: 36, 36, 36, 0.8;
-    --alpha-2: 139, 147, 182, 0.15;
-    --alpha-3: 36, 38, 45, 0.9;
-    --black-alpha-1: 0, 0, 0, 0.3;
-    --black-alpha-2: 0, 0, 0, 0.2;
-    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
-  }
-  /* NEXT COLORS END */
-
+  // scss-lint:disable PropertySortOrder
  :root {
    --color-amber-25: 254 253 251;
    --color-amber-50: 255 249 237;
@@ -378,7 +213,6 @@
    --color-orange-800: 204 78 0;
    --color-orange-900: 88 45 29;
  }
-
  // scss-lint:disable QualifyingElement
  body.dark {
    --color-amber-25: 31 19 0;
@@ -550,15 +384,3 @@
    --color-orange-900: 255 224 194;
  }
 }
-
-@layer utilities {
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-}
@@ -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%;
+}
@@ -1,10 +1,6 @@
 table {
  @apply border-spacing-0 text-sm w-full;

-
-}
-
-.woot-table {
  thead {
    th {
      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
@@ -20,7 +16,9 @@ table {
      @apply p-2.5 text-slate-700 dark:text-slate-100;
    }
  }
+}

+.woot-table {
  tr {
    .show-if-hover {
      transition: opacity 0.2s $swift-ease-out-function;
@@ -1,141 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
-import SMSCampaignDetails from './SMSCampaignDetails.vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  isLiveChatType: {
-    type: Boolean,
-    default: false,
-  },
-  isEnabled: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String,
-    default: '',
-  },
-  sender: {
-    type: Object,
-    default: null,
-  },
-  inbox: {
-    type: Object,
-    default: null,
-  },
-  scheduledAt: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const { t } = useI18n();
-
-const STATUS_COMPLETED = 'completed';
-
-const { formatMessage } = useMessageFormatter();
-
-const isActive = computed(() =>
-  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
-);
-
-const statusTextColor = computed(() => ({
-  'text-n-teal-11': isActive.value,
-  'text-n-slate-12': !isActive.value,
-}));
-
-const campaignStatus = computed(() => {
-  if (props.isLiveChatType) {
-    return props.isEnabled
-      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
-      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
-  }
-
-  return props.status === STATUS_COMPLETED
-    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
-    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
-});
-
-const inboxName = computed(() => props.inbox?.name || '');
-
-const inboxIcon = computed(() => {
-  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, phoneNumber);
-});
-</script>
-
-<template>
-  <CardLayout class="flex flex-row justify-between flex-1 gap-8" layout="row">
-    <template #header>
-      <div class="flex flex-col items-start gap-2">
-        <div class="flex justify-between gap-3 w-fit">
-          <span
-            class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
-          >
-            {{ title }}
-          </span>
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ campaignStatus }}
-          </span>
-        </div>
-        <div
-          v-dompurify-html="formatMessage(message)"
-          class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
-        />
-        <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
-          <LiveChatCampaignDetails
-            v-if="isLiveChatType"
-            :sender="sender"
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-          />
-          <SMSCampaignDetails
-            v-else
-            :inbox-name="inboxName"
-            :inbox-icon="inboxIcon"
-            :scheduled-at="scheduledAt"
-          />
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-end w-20 gap-2">
-        <Button
-          v-if="isLiveChatType"
-          variant="faded"
-          size="sm"
-          color="slate"
-          icon="i-lucide-sliders-vertical"
-          @click="emit('edit')"
-        />
-        <Button
-          variant="faded"
-          color="ruby"
-          size="sm"
-          icon="i-lucide-trash"
-          @click="emit('delete')"
-        />
-      </div>
-    </template>
-  </CardLayout>
-</template>
@@ -1,54 +0,0 @@
-<script setup>
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  sender: {
-    type: Object,
-    default: null,
-  },
-  inboxName: {
-    type: String,
-    default: '',
-  },
-  inboxIcon: {
-    type: String,
-    default: '',
-  },
-});
-
-const { t } = useI18n();
-
-const senderName = computed(
-  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
-);
-
-const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
-</script>
-
-<template>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Thumbnail
-      :author="sender || { name: senderName }"
-      :name="senderName"
-      :src="senderThumbnailSrc"
-    />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ senderName }}
-    </span>
-  </div>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ inboxName }}
-    </span>
-  </div>
-</template>
@@ -1,41 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { messageStamp } from 'shared/helpers/timeHelper';
-
-import { useI18n } from 'vue-i18n';
-defineProps({
-  inboxName: {
-    type: String,
-    default: '',
-  },
-  inboxIcon: {
-    type: String,
-    default: '',
-  },
-  scheduledAt: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
-  </span>
-  <div class="flex items-center gap-1.5 flex-shrink-0">
-    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ inboxName }}
-    </span>
-  </div>
-
-  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
-  </span>
-  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
-    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
-  </span>
-</template>
@@ -1,52 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['click', 'close']);
-
-const handleButtonClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto">
-        <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-xl font-medium text-n-slate-12">
-            {{ headerTitle }}
-          </span>
-          <div
-            v-on-clickaway="() => emit('close')"
-            class="relative group/campaign-button"
-          >
-            <Button
-              :label="buttonLabel"
-              icon="i-lucide-plus"
-              size="sm"
-              class="group-hover/campaign-button:brightness-110"
-              @click="handleButtonClick"
-            />
-            <slot name="action" />
-          </div>
-        </div>
-      </div>
-    </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-4">
-        <slot name="default" />
-      </div>
-    </main>
-  </section>
-</template>
@@ -1,212 +0,0 @@
-export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
-  {
-    id: 1,
-    title: 'Chatbot Assistance',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Alexa Rivera',
-    },
-    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://www.chatwoot.com/features/chatbot/',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: true,
-    created_at: '2024-10-24T13:10:26.636Z',
-    updated_at: '2024-10-24T13:10:26.636Z',
-  },
-  {
-    id: 2,
-    title: 'Pricing Information Support',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Jamie Lee',
-    },
-    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
-    campaign_status: 'active',
-    enabled: false,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://www.chatwoot.com/pricings',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:11:08.763Z',
-    updated_at: '2024-10-24T13:11:08.763Z',
-  },
-  {
-    id: 3,
-    title: 'Product Setup Assistance',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Chatwoot',
-    },
-    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
-    campaign_status: 'active',
-    enabled: false,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
-      time_on_page: 10,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:11:44.285Z',
-    updated_at: '2024-10-24T13:11:44.285Z',
-  },
-  {
-    id: 4,
-    title: 'General Assistance Campaign',
-    inbox: {
-      id: 2,
-      name: 'PaperLayer Website',
-      channel_type: 'Channel::WebWidget',
-      phone_number: '',
-    },
-    sender: {
-      id: 1,
-      name: 'Chris Barlow',
-    },
-    message:
-      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'ongoing',
-    trigger_rules: {
-      url: 'https://siv.com',
-      time_on_page: 200,
-    },
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-29T19:54:33.741Z',
-    updated_at: '2024-10-29T19:56:26.296Z',
-  },
-];
-
-export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
-  {
-    id: 1,
-    title: 'Customer Feedback Request',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message:
-      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1729775588,
-    audience: [
-      { id: 4, type: 'Label' },
-      { id: 5, type: 'Label' },
-      { id: 6, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:13:08.496Z',
-    updated_at: '2024-10-24T13:15:38.698Z',
-  },
-  {
-    id: 2,
-    title: 'Welcome New Customer',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
-    campaign_status: 'completed',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1729732500,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 6, type: 'Label' },
-      { id: 5, type: 'Label' },
-      { id: 2, type: 'Label' },
-      { id: 4, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-24T13:14:00.168Z',
-    updated_at: '2024-10-24T13:15:38.707Z',
-  },
-  {
-    id: 3,
-    title: 'New Business Welcome',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Hello! We’re excited to have your business with us!',
-    campaign_status: 'active',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1730368440,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 3, type: 'Label' },
-      { id: 6, type: 'Label' },
-      { id: 4, type: 'Label' },
-      { id: 2, type: 'Label' },
-      { id: 5, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-30T07:54:49.915Z',
-    updated_at: '2024-10-30T07:54:49.915Z',
-  },
-  {
-    id: 4,
-    title: 'New Member Onboarding',
-    inbox: {
-      id: 6,
-      name: 'PaperLayer Mobile',
-      channel_type: 'Channel::Sms',
-      phone_number: '+29818373149903',
-      provider: 'default',
-    },
-    message: 'Welcome to the team! Reach out if you have questions.',
-    campaign_status: 'completed',
-    enabled: true,
-    campaign_type: 'one_off',
-    scheduled_at: 1730304840,
-    audience: [
-      { id: 1, type: 'Label' },
-      { id: 3, type: 'Label' },
-      { id: 6, type: 'Label' },
-    ],
-    trigger_rules: {},
-    trigger_only_during_business_hours: false,
-    created_at: '2024-10-29T16:14:10.374Z',
-    updated_at: '2024-10-30T16:15:03.157Z',
-  },
-];
@@ -1,39 +0,0 @@
-<script setup>
-import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-          is-live-chat-type
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -1,38 +0,0 @@
-<script setup>
-import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :trigger-rules="campaign.trigger_rules"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -1,39 +0,0 @@
-<script setup>
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  campaigns: {
-    type: Array,
-    required: true,
-  },
-  isLiveChatType: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['edit', 'delete']);
-
-const handleEdit = campaign => emit('edit', campaign);
-const handleDelete = campaign => emit('delete', campaign);
-</script>
-
-<template>
-  <div class="flex flex-col gap-4">
-    <CampaignCard
-      v-for="campaign in campaigns"
-      :key="campaign.id"
-      :title="campaign.title"
-      :message="campaign.message"
-      :is-enabled="campaign.enabled"
-      :status="campaign.campaign_status"
-      :trigger-rules="campaign.trigger_rules"
-      :sender="campaign.sender"
-      :inbox="campaign.inbox"
-      :scheduled-at="campaign.scheduled_at"
-      :is-live-chat-type="isLiveChatType"
-      @edit="handleEdit(campaign)"
-      @delete="handleDelete(campaign)"
-    />
-  </div>
-</template>
@@ -1,49 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-
-const deleteCampaign = async id => {
-  if (!id) return;
-
-  try {
-    await store.dispatch('campaigns/delete', id);
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  await deleteCampaign(props.selectedCampaign.id);
-  dialogRef.value?.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="alert"
-    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
-    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
-    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
-    @confirm="handleDialogConfirm"
-  />
-</template>
@@ -1,76 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const props = defineProps({
-  selectedCampaign: {
-    type: Object,
-    default: null,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const liveChatCampaignFormRef = ref(null);
-
-const uiFlags = useMapGetter('campaigns/getUIFlags');
-const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
-
-const isInvalidForm = computed(
-  () => liveChatCampaignFormRef.value?.isSubmitDisabled
-);
-
-const selectedCampaignId = computed(() => props.selectedCampaign.id);
-
-const updateCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/update', {
-      id: selectedCampaignId.value,
-      ...campaignDetails,
-    });
-
-    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = () => {
-  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
-    :is-loading="isUpdatingCampaign"
-    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
-    overflow-y-auto
-    @confirm="handleSubmit"
-  >
-    <template #form>
-      <LiveChatCampaignForm
-        ref="liveChatCampaignFormRef"
-        mode="edit"
-        :selected-campaign="selectedCampaign"
-        :show-action-buttons="false"
-        @submit="handleSubmit"
-      />
-    </template>
-  </Dialog>
-</template>
@@ -1,54 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONGOING,
-    });
-
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => emit('close');
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-  handleClose();
-};
-</script>
-
-<template>
-  <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
-  >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
-      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
-    </h3>
-    <LiveChatCampaignForm
-      mode="create"
-      @submit="handleSubmit"
-      @cancel="handleClose"
-    />
-  </div>
-</template>
@@ -1,323 +0,0 @@
-<script setup>
-import { reactive, computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { URLPattern } from 'urlpattern-polyfill';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCampaign: {
-    type: Object,
-    default: () => ({}),
-  },
-  showActionButtons: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
-};
-
-const senderList = ref([]);
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  senderId: 0,
-  enabled: true,
-  triggerOnlyDuringBusinessHours: false,
-  endPoint: '',
-  timeOnPage: 10,
-};
-
-const state = reactive({ ...initialState });
-
-const urlValidators = {
-  shouldBeAValidURLPattern: value => {
-    try {
-      // eslint-disable-next-line
-      new URLPattern(value);
-      return true;
-    } catch {
-      return false;
-    }
-  },
-  shouldStartWithHTTP: value =>
-    value ? value.startsWith('https://') || value.startsWith('http://') : false,
-};
-
-const validationRules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  senderId: { required },
-  endPoint: { required, ...urlValidators },
-  timeOnPage: { required },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const sendersAndBotList = computed(() => [
-  { value: 0, label: 'Bot' },
-  ...mapToOptions(senderList.value, 'id', 'name'),
-]);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  endPoint: getErrorMessage('endPoint', 'END_POINT'),
-  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
-  sender: getErrorMessage('senderId', 'SENT_BY'),
-}));
-
-const resetState = () => Object.assign(state, initialState);
-
-const handleCancel = () => emit('cancel');
-
-const handleInboxChange = async inboxId => {
-  if (!inboxId) {
-    senderList.value = [];
-    return;
-  }
-
-  try {
-    const response = await store.dispatch('inboxMembers/get', { inboxId });
-    senderList.value = response?.data?.payload ?? [];
-  } catch (error) {
-    senderList.value = [];
-    useAlert(
-      error?.response?.message ??
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  sender_id: state.senderId || null,
-  enabled: state.enabled,
-  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
-  trigger_rules: {
-    url: state.endPoint,
-    time_on_page: state.timeOnPage,
-  },
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  if (props.mode === 'create') {
-    resetState();
-    handleCancel();
-  }
-};
-
-const updateStateFromCampaign = campaign => {
-  if (!campaign) return;
-
-  const {
-    title,
-    message,
-    inbox: { id: inboxId },
-    sender,
-    enabled,
-    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
-    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
-  } = campaign;
-
-  Object.assign(state, {
-    title,
-    message,
-    inboxId,
-    senderId: sender?.id ?? 0,
-    enabled,
-    triggerOnlyDuringBusinessHours,
-    endPoint,
-    timeOnPage,
-  });
-};
-
-watch(
-  () => state.inboxId,
-  newInboxId => {
-    if (newInboxId) {
-      handleInboxChange(newInboxId);
-    }
-  },
-  { immediate: true }
-);
-
-watch(
-  () => props.selectedCampaign,
-  newCampaign => {
-    if (props.mode === 'edit' && newCampaign) {
-      updateStateFromCampaign(newCampaign);
-    }
-  },
-  { immediate: true }
-);
-
-defineExpose({ prepareCampaignDetails, isSubmitDisabled });
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <Editor
-      v-model="state.message"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
-      </label>
-      <ComboBox
-        id="sentBy"
-        v-model="state.senderId"
-        :options="sendersAndBotList"
-        :has-error="!!formErrors.sender"
-        :disabled="!state.inboxId"
-        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-        :message="formErrors.sender"
-      />
-    </div>
-
-    <Input
-      v-model="state.endPoint"
-      type="url"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
-      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
-      :message="formErrors.endPoint"
-      :message-type="formErrors.endPoint ? 'error' : 'info'"
-    />
-
-    <Input
-      v-model="state.timeOnPage"
-      type="number"
-      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
-      :placeholder="
-        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
-      "
-      :message="formErrors.timeOnPage"
-      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
-    />
-
-    <fieldset class="flex flex-col gap-2.5">
-      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
-      </legend>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.enabled" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
-        </span>
-      </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{
-            t(
-              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
-            )
-          }}
-        </span>
-      </label>
-    </fieldset>
-
-    <div
-      v-if="showActionButtons"
-      class="flex items-center justify-between w-full gap-3"
-    >
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="
-          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
-        "
-        class="w-full"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
@@ -1,49 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
-  >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
-      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
-    </h3>
-    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-  </div>
-</template>
@@ -1,189 +0,0 @@
-<script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getSMSInboxes'),
-};
-
-const initialState = {
-  title: '',
-  message: '',
-  inboxId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
-  inboxId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const isSubmitDisabled = computed(() => v$.value.$invalid);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  scheduled_at: formatToUTCString(state.scheduledAt),
-  audience: state.selectedAudience?.map(id => ({
-    id,
-    type: 'Label',
-  })),
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <TextArea
-      v-model="state.message"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      show-character-count
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex items-center justify-between w-full gap-3">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
@@ -1,23 +0,0 @@
-<script setup>
-const props = defineProps({
-  layout: {
-    type: String,
-    default: 'col',
-  },
-});
-const emit = defineEmits(['click']);
-const handleClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <div
-    class="relative flex w-full gap-3 px-6 py-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
-    :class="props.layout === 'col' ? 'flex-col' : 'flex-row'"
-    @click="handleClick"
-  >
-    <slot name="header" />
-    <slot name="footer" />
-  </div>
-</template>
@@ -1,173 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue';
-
-import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  messageType: {
-    type: String,
-    default: 'info',
-    validator: value => ['info', 'error', 'success'].includes(value),
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const isFocused = ref(false);
-
-const characterCount = computed(() => props.modelValue.length);
-
-const messageClass = computed(() => {
-  switch (props.messageType) {
-    case 'error':
-      return 'text-n-ruby-9 dark:text-n-ruby-9';
-    case 'success':
-      return 'text-green-500 dark:text-green-400';
-    default:
-      return 'text-n-slate-11 dark:text-n-slate-11';
-  }
-});
-
-const handleInput = value => {
-  if (!props.disabled) {
-    emit('update:modelValue', value);
-  }
-};
-
-const handleFocus = () => {
-  if (!props.disabled) {
-    isFocused.value = true;
-  }
-};
-
-const handleBlur = () => {
-  if (!props.disabled) {
-    isFocused.value = false;
-  }
-};
-
-watch(
-  () => props.modelValue,
-  newValue => {
-    if (props.maxLength && props.showCharacterCount) {
-      if (characterCount.value >= props.maxLength) {
-        emit('update:modelValue', newValue.slice(0, props.maxLength));
-      }
-    }
-  }
-);
-</script>
-
-<template>
-  <div class="flex flex-col min-w-0 gap-1">
-    <label v-if="label" class="mb-0.5 text-sm font-medium text-n-slate-12">
-      {{ label }}
-    </label>
-    <div
-      class="flex flex-col w-full gap-2 px-3 py-3 transition-all duration-500 ease-in-out border rounded-lg editor-wrapper bg-n-alpha-black2"
-      :class="[
-        {
-          'cursor-not-allowed opacity-50 pointer-events-none !bg-n-alpha-black2 disabled:border-n-weak dark:disabled:border-n-weak':
-            disabled,
-          'border-n-brand dark:border-n-brand': isFocused,
-          'hover:border-n-slate-6 dark:hover:border-n-slate-6 border-n-weak dark:border-n-weak':
-            !isFocused && messageType !== 'error',
-          'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9':
-            messageType === 'error' && !isFocused,
-        },
-      ]"
-    >
-      <WootEditor
-        :model-value="modelValue"
-        :placeholder="placeholder"
-        :focus-on-mount="focusOnMount"
-        :disabled="disabled"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-      />
-      <div
-        v-if="showCharacterCount"
-        class="flex items-center justify-end h-4 ltr:right-3 rtl:left-3"
-      >
-        <span class="text-xs tabular-nums text-n-slate-10">
-          {{ characterCount }} / {{ maxLength }}
-        </span>
-      </div>
-    </div>
-    <p
-      v-if="message"
-      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
-      :class="messageClass"
-    >
-      {{ message }}
-    </p>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.editor-wrapper {
-  ::v-deep {
-    .ProseMirror-menubar-wrapper {
-      @apply gap-2 !important;
-
-      .ProseMirror-menubar {
-        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5  !important;
-
-        .ProseMirror-menuitem {
-          @apply h-5 !important;
-        }
-
-        .ProseMirror-icon {
-          @apply p-1 w-3 h-3 text-n-slate-12 dark:text-n-slate-12 !important;
-        }
-      }
-      .ProseMirror.ProseMirror-woot-style {
-        p {
-          @apply first:mt-0 !important;
-        }
-
-        .empty-node {
-          @apply m-0 !important;
-
-          &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11 !important;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
@@ -1,47 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  subtitle: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <section
-    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
-  >
-    <div
-      class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
-    >
-      <div
-        class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
-      >
-        <slot name="empty-state-item" />
-      </div>
-      <div
-        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-20 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent"
-      >
-        <div class="flex flex-col items-center justify-center gap-6">
-          <div class="flex flex-col items-center justify-center gap-3">
-            <h2
-              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
-            >
-              {{ title }}
-            </h2>
-            <p
-              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
-            >
-              {{ subtitle }}
-            </p>
-          </div>
-          <slot name="actions" />
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
@@ -1,87 +0,0 @@
-<script setup>
-import ArticleCard from './ArticleCard.vue';
-
-const articles = [
-  {
-    id: 1,
-    title: "How to get an SSL certificate for your Help Center's custom domain",
-    status: 'draft',
-    updatedAt: 1729048936,
-    author: {
-      name: 'John',
-      thumbnail: 'https://i.pravatar.cc/300',
-    },
-    category: {
-      title: 'Marketing',
-      slug: 'marketing',
-      icon: '📈',
-    },
-    views: 400,
-  },
-  {
-    id: 2,
-    title: 'Setting up your first Help Center portal',
-    status: '',
-    updatedAt: 1729048936,
-    author: {
-      name: 'John',
-      thumbnail: 'https://i.pravatar.cc/300',
-    },
-    category: {
-      title: 'Development',
-      slug: 'development',
-      icon: '🛠️',
-    },
-    views: 1400,
-  },
-  {
-    id: 3,
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: 1729048936,
-    author: {
-      name: 'Fernando',
-      thumbnail: 'https://i.pravatar.cc/300',
-    },
-    category: {
-      title: 'Finance',
-      slug: 'finance',
-      icon: '💰',
-    },
-    views: 4300,
-  },
-];
-
-const category = {
-  name: 'Marketing',
-  slug: 'marketing',
-  icon: '📈',
-};
-</script>
-
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
-<template>
-  <Story
-    title="Components/HelpCenter/ArticleCard"
-    :layout="{ type: 'grid', width: '700px' }"
-  >
-    <Variant title="Article Card">
-      <div
-        v-for="(article, index) in articles"
-        :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <ArticleCard
-          :id="article.id"
-          :title="article.title"
-          :status="article.status"
-          :author="article.author"
-          :category="category"
-          :views="article.views"
-          :updated-at="article.updatedAt"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,198 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-import {
-  ARTICLE_MENU_ITEMS,
-  ARTICLE_MENU_OPTIONS,
-  ARTICLE_STATUSES,
-} from 'dashboard/helper/portalHelper';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  status: {
-    type: String,
-    required: true,
-  },
-  author: {
-    type: Object,
-    default: null,
-  },
-  category: {
-    type: Object,
-    required: true,
-  },
-  views: {
-    type: Number,
-    required: true,
-  },
-  updatedAt: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['openArticle', 'articleAction']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const articleMenuItems = computed(() => {
-  const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
-    (acc, [key, item]) => {
-      acc[key] = { ...item, label: t(item.label) };
-      return acc;
-    },
-    {}
-  );
-
-  const statusItems = (
-    ARTICLE_MENU_OPTIONS[props.status] ||
-    ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
-  ).map(key => commonItems[key]);
-
-  return [...statusItems, commonItems.delete];
-});
-
-const statusTextColor = computed(() => {
-  switch (props.status) {
-    case 'archived':
-      return 'text-n-slate-12';
-    case 'draft':
-      return 'text-n-amber-11';
-    default:
-      return 'text-n-teal-11';
-  }
-});
-
-const statusText = computed(() => {
-  switch (props.status) {
-    case 'archived':
-      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.ARCHIVED');
-    case 'draft':
-      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.DRAFT');
-    default:
-      return t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.STATUS.PUBLISHED');
-  }
-});
-
-const categoryName = computed(() => {
-  if (props.category?.slug) {
-    return `${props.category.icon} ${props.category.name}`;
-  }
-  return t(
-    'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
-  );
-});
-
-const authorName = computed(() => {
-  return props.author?.name || props.author?.availableName || '-';
-});
-
-const authorThumbnailSrc = computed(() => {
-  return props.author?.thumbnail;
-});
-
-const lastUpdatedAt = computed(() => {
-  return dynamicTime(props.updatedAt);
-});
-
-const handleArticleAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('articleAction', { action, value, id: props.id });
-};
-
-const handleClick = id => {
-  emit('openArticle', id);
-};
-</script>
-
-<template>
-  <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-1">
-        <span
-          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
-          @click="handleClick(id)"
-        >
-          {{ title }}
-        </span>
-        <div class="flex items-center gap-2">
-          <span
-            class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
-            :class="statusTextColor"
-          >
-            {{ statusText }}
-          </span>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative flex items-center group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="articleMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
-              @action="handleArticleAction($event)"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <div class="flex items-center justify-between gap-4">
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-1">
-            <Thumbnail
-              :author="author"
-              :name="authorName"
-              :src="authorThumbnailSrc"
-            />
-            <span class="text-sm text-n-slate-11">
-              {{ authorName }}
-            </span>
-          </div>
-          <span class="block text-sm whitespace-nowrap text-n-slate-11">
-            {{ categoryName }}
-          </span>
-          <div
-            class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
-          >
-            <Icon icon="i-lucide-eye" class="size-4" />
-            <span class="text-sm">
-              {{
-                t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
-                  count: views,
-                })
-              }}
-            </span>
-          </div>
-        </div>
-        <span class="text-sm text-n-slate-11 line-clamp-1">
-          {{ lastUpdatedAt }}
-        </span>
-      </div>
-    </template>
-  </CardLayout>
-</template>
@@ -1,48 +0,0 @@
-<script setup>
-import CategoryCard from './CategoryCard.vue';
-const categories = [
-  {
-    id: 1,
-    title: 'Getting started',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: 5,
-    slug: 'getting-started',
-    icon: '🚀',
-  },
-  {
-    id: 2,
-    title: 'Marketing',
-    description: '',
-    articlesCount: 4,
-    slug: 'marketing',
-    icon: '📈',
-  },
-];
-</script>
-
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
-<template>
-  <Story
-    title="Components/HelpCenter/CategoryCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Category Card">
-      <div
-        v-for="(category, index) in categories"
-        :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <CategoryCard
-          :id="category.id"
-          :slug="category.slug"
-          :title="category.title"
-          :description="category.description"
-          :articles-count="category.articlesCount"
-          :icon="category.icon"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,137 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  icon: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  articlesCount: {
-    type: Number,
-    required: true,
-  },
-  slug: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['click', 'action']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const categoryMenuItems = [
-  {
-    label: 'Edit',
-    action: 'edit',
-    value: 'edit',
-    icon: 'i-lucide-pencil',
-  },
-  {
-    label: 'Delete',
-    action: 'delete',
-    value: 'delete',
-    icon: 'i-lucide-trash',
-  },
-];
-
-const categoryTitleWithIcon = computed(() => {
-  return `${props.icon} ${props.title}`;
-});
-
-const description = computed(() => {
-  return props.description ? props.description : 'No description added';
-});
-
-const hasDescription = computed(() => {
-  return props.description.length > 0;
-});
-
-const handleClick = slug => {
-  emit('click', slug);
-};
-
-const handleAction = ({ action, value }) => {
-  emit('action', { action, value, id: props.id });
-  toggleDropdown(false);
-};
-</script>
-
-<template>
-  <CardLayout>
-    <template #header>
-      <div class="flex gap-2">
-        <div class="flex justify-between w-full gap-2">
-          <div class="flex items-center justify-start w-full min-w-0 gap-2">
-            <span
-              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
-              @click="handleClick(slug)"
-            >
-              {{ categoryTitleWithIcon }}
-            </span>
-            <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
-            >
-              {{
-                t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
-                  count: articlesCount,
-                })
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              variant="ghost"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-            <DropdownMenu
-              v-if="showActionsDropdown"
-              :menu-items="categoryMenuItems"
-              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-              @action="handleAction"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <span
-        class="text-sm line-clamp-3"
-        :class="
-          hasDescription
-            ? 'text-slate-500 dark:text-slate-400'
-            : 'text-slate-400 dark:text-slate-700'
-        "
-      >
-        {{ description }}
-      </span>
-    </template>
-  </CardLayout>
-</template>
@@ -1,16 +0,0 @@
-<script setup>
-import ArticleEmptyState from './ArticleEmptyState.vue';
-</script>
-
-<template>
-  <Story
-    title="Components/HelpCenter/EmptyState/ArticleEmptyState"
-    :layout="{ type: 'single', width: '1100px' }"
-  >
-    <Variant title="Article Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
-        <ArticleEmptyState />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,56 +0,0 @@
-<script setup>
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-import articleContent from 'dashboard/components-next/HelpCenter/EmptyState/Portal/portalEmptyStateContent.js';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-  showButton: {
-    type: Boolean,
-    default: true,
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
-        <ArticleCard
-          v-for="(article, index) in articleContent.slice(0, 5)"
-          :id="article.id"
-          :key="`article-${index}`"
-          :title="article.title"
-          :status="article.status"
-          :updated-at="article.updatedAt"
-          :author="article.author"
-          :category="article.category"
-          :views="article.views"
-        />
-      </div>
-    </template>
-    <template #actions>
-      <div v-if="showButton">
-        <Button :label="buttonLabel" icon="i-lucide-plus" @click="onClick" />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -1,49 +0,0 @@
-<script setup>
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
-import categoryContent from 'dashboard/components-next/HelpCenter/EmptyState/Category/categoryEmptyStateContent.js';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4 p-px">
-        <div class="space-y-4">
-          <CategoryCard
-            v-for="category in categoryContent"
-            :id="category.id"
-            :key="category.id"
-            :title="category.name"
-            :icon="category.icon"
-            :description="category.description"
-            :articles-count="category.meta.articles_count || 0"
-            :slug="category.slug"
-          />
-        </div>
-        <div class="space-y-4">
-          <CategoryCard
-            v-for="category in categoryContent.reverse()"
-            :id="category.id"
-            :key="category.id"
-            :title="category.name"
-            :icon="category.icon"
-            :description="category.description"
-            :articles-count="category.meta.articles_count || 0"
-            :slug="category.slug"
-          />
-        </div>
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -1,142 +0,0 @@
-export default [
-  {
-    id: 1,
-    name: 'Getting Started',
-    icon: '🚀',
-    description: 'Quick guides to help new users onboard.',
-    slug: 'getting-started',
-    meta: {
-      articles_count: 5,
-    },
-  },
-  {
-    id: 2,
-    name: 'Advanced Features',
-    icon: '💡',
-    description: 'Explore advanced features for power users.',
-    slug: 'advanced-features',
-    meta: {
-      articles_count: 8,
-    },
-  },
-  {
-    id: 3,
-    name: 'FAQs',
-    icon: '❓',
-    description: 'Commonly asked questions and helpful answers.',
-    slug: 'faqs',
-    meta: {
-      articles_count: 3,
-    },
-  },
-  {
-    id: 4,
-    name: 'Troubleshooting',
-    icon: '🛠️',
-    description: 'Resolve common issues with step-by-step guidance.',
-    slug: 'troubleshooting',
-    meta: {
-      articles_count: 6,
-    },
-  },
-  {
-    id: 5,
-    name: 'Community Guidelines',
-    icon: '👥',
-    description: 'Rules and practices for community engagement.',
-    slug: 'community-guidelines',
-    meta: {
-      articles_count: 2,
-    },
-  },
-  {
-    id: 6,
-    name: 'Account Management',
-    icon: '🔑',
-    description: 'Manage your account and settings efficiently.',
-    slug: 'account-management',
-    meta: {
-      articles_count: 7,
-    },
-  },
-  {
-    id: 7,
-    name: 'Security Tips',
-    icon: '🔒',
-    description: 'Best practices for securing your account.',
-    slug: 'security-tips',
-    meta: {
-      articles_count: 4,
-    },
-  },
-  {
-    id: 8,
-    name: 'Integrations',
-    icon: '🔗',
-    description: 'Connect to third-party services and tools easily.',
-    slug: 'integrations',
-    meta: {
-      articles_count: 9,
-    },
-  },
-  {
-    id: 9,
-    name: 'Billing & Payments',
-    icon: '💳',
-    description: 'Manage your billing and payment details seamlessly.',
-    slug: 'billing-payments',
-    meta: {
-      articles_count: 5,
-    },
-  },
-  {
-    id: 10,
-    name: 'Customization',
-    icon: '🎨',
-    description: 'Personalize and customize your user experience.',
-    slug: 'customization',
-    meta: {
-      articles_count: 7,
-    },
-  },
-  {
-    id: 11,
-    name: 'Notifications',
-    icon: '🔔',
-    description: 'Adjust your notification settings and preferences.',
-    slug: 'notifications',
-    meta: {
-      articles_count: 3,
-    },
-  },
-  {
-    id: 12,
-    name: 'Privacy',
-    icon: '🛡️',
-    description: 'Understand how your data is collected and used.',
-    slug: 'privacy',
-    meta: {
-      articles_count: 2,
-    },
-  },
-  {
-    id: 13,
-    name: 'Mobile App',
-    icon: '📱',
-    description: 'Guides for using the mobile app effectively.',
-    slug: 'mobile-app',
-    meta: {
-      articles_count: 6,
-    },
-  },
-  {
-    id: 14,
-    name: 'Beta Features',
-    icon: '🧪',
-    description: 'Learn about new experimental features in beta.',
-    slug: 'beta-features',
-    meta: {
-      articles_count: 4,
-    },
-  },
-];
@@ -1,16 +0,0 @@
-<script setup>
-import PortalEmptyState from './PortalEmptyState.vue';
-</script>
-
-<template>
-  <Story
-    title="Components/HelpCenter/EmptyState/PortalEmptyState"
-    :layout="{ type: 'single', width: '1100px' }"
-  >
-    <Variant title="Portal Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
-        <PortalEmptyState />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,72 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-import articleContent from './portalEmptyStateContent';
-import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
-
-const createPortalDialogRef = ref(null);
-const openDialog = () => {
-  createPortalDialogRef.value.dialogRef.open();
-};
-
-const router = useRouter();
-
-const onPortalCreate = ({ slug: portalSlug, locale }) => {
-  router.push({
-    name: 'portals_articles_index',
-    params: { portalSlug, locale },
-  });
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('HELP_CENTER.TITLE')"
-    :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
-  >
-    <template #empty-state-item>
-      <div class="grid grid-cols-2 gap-4 p-px">
-        <div class="space-y-4">
-          <ArticleCard
-            v-for="(article, index) in articleContent"
-            :id="article.id"
-            :key="`article-${index}`"
-            :title="article.title"
-            :status="article.status"
-            :updated-at="article.updatedAt"
-            :author="article.author"
-            :category="article.category"
-            :views="article.views"
-          />
-        </div>
-        <div class="space-y-4">
-          <ArticleCard
-            v-for="(article, index) in articleContent.reverse()"
-            :id="article.id"
-            :key="`article-${index}`"
-            :title="article.title"
-            :status="article.status"
-            :updated-at="article.updatedAt"
-            :author="article.author"
-            :category="article.category"
-            :views="article.views"
-          />
-        </div>
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('HELP_CENTER.NEW_PAGE.CREATE_PORTAL_BUTTON')"
-        icon="i-lucide-plus"
-        @click="openDialog"
-      />
-      <CreatePortalDialog
-        ref="createPortalDialogRef"
-        @create="onPortalCreate"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -1,172 +0,0 @@
-export default [
-  {
-    id: 1,
-    title: "How to get an SSL certificate for your Help Center's custom domain",
-    status: 'draft',
-    updatedAt: 1729205669,
-    author: { availableName: 'Michael' },
-    category: {
-      slug: 'configuration',
-      icon: '📦',
-      name: 'Setup & Configuration',
-    },
-    views: 3400,
-  },
-  {
-    id: 2,
-    title: 'Setting up your first Help Center portal',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'John' },
-    category: { slug: 'onboarding', icon: '🧑‍🍳', name: 'Onboarding' },
-    views: 400,
-  },
-  {
-    id: 3,
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: 1729205669,
-    author: { availableName: 'Fernando' },
-    category: { slug: 'best-practices', icon: '⛺️', name: 'Best Practices' },
-    views: 400,
-  },
-  {
-    id: 4,
-    title: 'Customizing the appearance of your Help Center',
-    status: 'draft',
-    updatedAt: 1729205669,
-    author: { availableName: 'Jane' },
-    category: { slug: 'design', icon: '🎨', name: 'Design' },
-    views: 400,
-  },
-  {
-    id: 5,
-    title: 'Integrating your Help Center with third-party tools',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'Sarah' },
-    category: {
-      slug: 'integrations',
-      icon: '🔗',
-      name: 'Integrations',
-    },
-    views: 2800,
-  },
-  {
-    id: 6,
-    title: 'Managing user permissions in your Help Center',
-    status: 'draft',
-    updatedAt: 1729205669,
-    author: { availableName: 'Alex' },
-    category: {
-      slug: 'administration',
-      icon: '🔐',
-      name: 'Administration',
-    },
-    views: 1200,
-  },
-  {
-    id: 7,
-    title: 'Creating and managing FAQ sections',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'Emily' },
-    category: {
-      slug: 'content-management',
-      icon: '📝',
-      name: 'Content Management',
-    },
-    views: 5600,
-  },
-  {
-    id: 8,
-    title: 'Implementing search functionality in your Help Center',
-    status: 'archived',
-    updatedAt: 1729205669,
-    author: { availableName: 'David' },
-    category: {
-      slug: 'features',
-      icon: '🔍',
-      name: 'Features',
-    },
-    views: 1800,
-  },
-  {
-    id: 9,
-    title: 'Analyzing Help Center usage metrics',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'Rachel' },
-    category: {
-      slug: 'analytics',
-      icon: '📊',
-      name: 'Analytics',
-    },
-    views: 3200,
-  },
-  {
-    id: 10,
-    title: 'Setting up multilingual support in your Help Center',
-    status: 'draft',
-    updatedAt: 1729205669,
-    author: { availableName: 'Carlos' },
-    category: {
-      slug: 'localization',
-      icon: '🌍',
-      name: 'Localization',
-    },
-    views: 900,
-  },
-  {
-    id: 11,
-    title: 'Creating interactive tutorials for your products',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'Olivia' },
-    category: {
-      slug: 'education',
-      icon: '🎓',
-      name: 'Education',
-    },
-    views: 4100,
-  },
-  {
-    id: 12,
-    title: 'Implementing a feedback system in your Help Center',
-    status: 'draft',
-    updatedAt: 1729205669,
-    author: { availableName: 'Nathan' },
-    category: {
-      slug: 'user-engagement',
-      icon: '💬',
-      name: 'User Engagement',
-    },
-    views: 750,
-  },
-  {
-    id: 13,
-    title: 'Optimizing Help Center content for SEO',
-    status: 'published',
-    updatedAt: 1729205669,
-    author: { availableName: 'Sophia' },
-    category: {
-      slug: 'seo',
-      icon: '🚀',
-      name: 'SEO',
-    },
-    views: 2900,
-  },
-  {
-    id: 14,
-    title: 'Creating a knowledge base for internal teams',
-    status: 'archived',
-    updatedAt: 1729205669,
-    author: { availableName: 'Daniel' },
-    category: {
-      slug: 'internal-resources',
-      icon: '🏢',
-      name: 'Internal Resources',
-    },
-    views: 1500,
-  },
-];
@@ -1,113 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
-import { useRoute } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store.js';
-
-import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import PortalSwitcher from 'dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue';
-import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
-
-defineProps({
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalItems: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 25,
-  },
-  showHeaderTitle: {
-    type: Boolean,
-    default: true,
-  },
-  showPaginationFooter: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['update:currentPage']);
-
-const route = useRoute();
-
-const createPortalDialogRef = ref(null);
-
-const showPortalSwitcher = ref(false);
-
-const portals = useMapGetter('portals/allPortals');
-
-const currentPortalSlug = computed(() => route.params.portalSlug);
-
-const activePortalName = computed(() => {
-  return portals.value?.find(portal => portal.slug === currentPortalSlug.value)
-    ?.name;
-});
-
-const updateCurrentPage = page => {
-  emit('update:currentPage', page);
-};
-const togglePortalSwitcher = () => {
-  showPortalSwitcher.value = !showPortalSwitcher.value;
-};
-</script>
-
-<template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto">
-        <div
-          v-if="showHeaderTitle"
-          class="flex items-center justify-start h-20 gap-2"
-        >
-          <span
-            v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
-          >
-            {{ activePortalName }}
-          </span>
-          <div v-if="activePortalName" class="relative group">
-            <OnClickOutside @trigger="showPortalSwitcher = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                variant="ghost"
-                size="xs"
-                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
-                @click="togglePortalSwitcher"
-              />
-
-              <PortalSwitcher
-                v-if="showPortalSwitcher"
-                class="absolute ltr:left-0 rtl:right-0 top-9"
-                @close="showPortalSwitcher = false"
-                @create-portal="createPortalDialogRef.dialogRef.open()"
-              />
-            </OnClickOutside>
-            <CreatePortalDialog ref="createPortalDialogRef" />
-          </div>
-        </div>
-        <slot name="header-actions" />
-      </div>
-    </header>
-    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[900px] mx-auto py-3">
-        <slot name="content" />
-      </div>
-    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
-      <PaginationFooter
-        :current-page="currentPage"
-        :total-items="totalItems"
-        :items-per-page="itemsPerPage"
-        @update:current-page="updateCurrentPage"
-      />
-    </footer>
-    <!-- Do not remove this slot. It can be used to add dialogs. -->
-    <slot />
-  </section>
-</template>
@@ -1,29 +0,0 @@
-<script setup>
-import LocaleCard from './LocaleCard.vue';
-const locales = [
-  { name: 'English', isDefault: true, articleCount: 29, categoryCount: 5 },
-  { name: 'Spanish', isDefault: false, articleCount: 29, categoryCount: 5 },
-];
-</script>
-
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
-<template>
-  <Story
-    title="Components/HelpCenter/LocaleCard"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Locale Card">
-      <div class="px-10 py-4 bg-white dark:bg-slate-900">
-        <div v-for="(locale, index) in locales" :key="index" class="px-20 py-2">
-          <LocaleCard
-            :locale="locale.name"
-            :is-default="locale.isDefault"
-            :article-count="locale.articleCount"
-            :category-count="locale.categoryCount"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,118 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { LOCALE_MENU_ITEMS } from 'dashboard/helper/portalHelper';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  locale: {
-    type: String,
-    required: true,
-  },
-  isDefault: {
-    type: Boolean,
-    required: true,
-  },
-  localeCode: {
-    type: String,
-    required: true,
-  },
-  articleCount: {
-    type: Number,
-    required: true,
-  },
-  categoryCount: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action']);
-
-const { t } = useI18n();
-
-const [showDropdownMenu, toggleDropdown] = useToggle();
-
-const localeMenuItems = computed(() =>
-  LOCALE_MENU_ITEMS.map(item => ({
-    ...item,
-    label: t(item.label),
-    disabled: props.isDefault,
-  }))
-);
-
-const handleAction = ({ action, value }) => {
-  emit('action', { action, value });
-  toggleDropdown(false);
-};
-</script>
-
-<template>
-  <CardLayout>
-    <template #header>
-      <div class="flex justify-between gap-2">
-        <div class="flex items-center justify-start gap-2">
-          <span
-            class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
-          >
-            {{ locale }} ({{ localeCode }})
-          </span>
-          <span
-            v-if="isDefault"
-            class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
-          >
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
-          </span>
-        </div>
-        <div class="flex items-center justify-end gap-4">
-          <div class="flex items-center gap-4">
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
-                  articleCount
-                )
-              }}
-            </span>
-            <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
-            <span
-              class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
-            >
-              {{
-                $t(
-                  'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',
-                  categoryCount
-                )
-              }}
-            </span>
-          </div>
-          <div
-            v-on-clickaway="() => toggleDropdown(false)"
-            class="relative group"
-          >
-            <Button
-              icon="i-lucide-ellipsis-vertical"
-              color="slate"
-              size="xs"
-              class="rounded-md group-hover:bg-n-alpha-2"
-              @click="toggleDropdown()"
-            />
-
-            <DropdownMenu
-              v-if="showDropdownMenu"
-              :menu-items="localeMenuItems"
-              class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
-              @action="handleAction"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-  </CardLayout>
-</template>
@@ -1,154 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { debounce } from '@chatwoot/utils';
-import { useI18n } from 'vue-i18n';
-import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
-import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
-import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-  isUpdating: {
-    type: Boolean,
-    default: false,
-  },
-  isSaved: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'saveArticle',
-  'goBack',
-  'setAuthor',
-  'setCategory',
-  'previewArticle',
-]);
-
-const { t } = useI18n();
-
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
-
-const articleTitle = computed({
-  get: () => props.article.title,
-  set: value => {
-    saveArticle({ title: value });
-  },
-});
-
-const articleContent = computed({
-  get: () => props.article.content,
-  set: content => {
-    saveArticle({ content });
-  },
-});
-
-const onClickGoBack = () => {
-  emit('goBack');
-};
-
-const setAuthorId = authorId => {
-  emit('setAuthor', authorId);
-};
-
-const setCategoryId = categoryId => {
-  emit('setCategory', categoryId);
-};
-
-const previewArticle = () => {
-  emit('previewArticle');
-};
-</script>
-
-<template>
-  <HelpCenterLayout :show-header-title="false" :show-pagination-footer="false">
-    <template #header-actions>
-      <ArticleEditorHeader
-        :is-updating="isUpdating"
-        :is-saved="isSaved"
-        :status="article.status"
-        :article-id="article.id"
-        @go-back="onClickGoBack"
-        @preview-article="previewArticle"
-      />
-    </template>
-    <template #content>
-      <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
-        <TextArea
-          v-model="articleTitle"
-          auto-height
-          min-height="4rem"
-          custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
-          custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
-          placeholder="Title"
-          autofocus
-        />
-        <ArticleEditorControls
-          :article="article"
-          @save-article="saveArticle"
-          @set-author="setAuthorId"
-          @set-category="setCategoryId"
-        />
-      </div>
-      <FullEditor
-        v-model="articleContent"
-        class="py-0 pb-10 pl-4 rtl:pr-4 rtl:pl-0 h-fit"
-        :placeholder="
-          t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
-        "
-        :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="false"
-      />
-    </template>
-  </HelpCenterLayout>
-</template>
-
-<style lang="scss" scoped>
-::v-deep {
-  .ProseMirror .empty-node::before {
-    @apply text-slate-200 dark:text-slate-500 text-base;
-  }
-
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
-  }
-
-  .ProseMirror-menubar {
-    display: none; // Hide by default
-  }
-
-  .editor-root .has-selection {
-    .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
-      display: flex;
-      top: var(--selection-top, auto) !important;
-      left: var(--selection-left, 0) !important;
-      width: fit-content !important;
-      position: absolute !important;
-
-      .ProseMirror-menuitem {
-        @apply mr-0;
-
-        .ProseMirror-icon {
-          @apply p-0 mt-1 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
@@ -1,264 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { OnClickOutside } from '@vueuse/components';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['saveArticle', 'setAuthor', 'setCategory']);
-
-const { t } = useI18n();
-const route = useRoute();
-
-const openAgentsList = ref(false);
-const openCategoryList = ref(false);
-const openProperties = ref(false);
-const selectedAuthorId = ref(null);
-const selectedCategoryId = ref(null);
-
-const agents = useMapGetter('agents/getAgents');
-const categories = useMapGetter('categories/allCategories');
-const currentUserId = useMapGetter('getCurrentUserID');
-
-const isNewArticle = computed(() => !props.article?.id);
-
-const currentUser = computed(() =>
-  agents.value.find(agent => agent.id === currentUserId.value)
-);
-
-const categorySlugFromRoute = computed(() => route.params.categorySlug);
-
-const author = computed(() => {
-  if (isNewArticle.value) {
-    return selectedAuthorId.value
-      ? agents.value.find(agent => agent.id === selectedAuthorId.value)
-      : currentUser.value;
-  }
-  return props.article?.author || null;
-});
-
-const authorName = computed(
-  () => author.value?.name || author.value?.available_name || '-'
-);
-const authorThumbnailSrc = computed(() => author.value?.thumbnail);
-
-const agentList = computed(() => {
-  return (
-    agents.value
-      ?.map(({ name, id, thumbnail }) => ({
-        label: name,
-        value: id,
-        thumbnail: { name, src: thumbnail },
-        isSelected: props.article?.author?.id
-          ? id === props.article.author.id
-          : id === (selectedAuthorId.value || currentUserId.value),
-        action: 'assignAuthor',
-      }))
-      // Sort the list by isSelected first, then by name(label)
-      .toSorted((a, b) => {
-        if (a.isSelected !== b.isSelected) {
-          return Number(b.isSelected) - Number(a.isSelected);
-        }
-        return a.label.localeCompare(b.label);
-      }) ?? []
-  );
-});
-
-const hasAgentList = computed(() => {
-  return agents.value?.length > 1;
-});
-
-const findCategoryFromSlug = slug => {
-  return categories.value?.find(category => category.slug === slug);
-};
-
-const assignCategoryFromSlug = slug => {
-  const categoryFromSlug = findCategoryFromSlug(slug);
-  if (categoryFromSlug) {
-    selectedCategoryId.value = categoryFromSlug.id;
-    return categoryFromSlug;
-  }
-  return null;
-};
-
-const selectedCategory = computed(() => {
-  if (isNewArticle.value) {
-    if (categorySlugFromRoute.value) {
-      const categoryFromSlug = assignCategoryFromSlug(
-        categorySlugFromRoute.value
-      );
-      if (categoryFromSlug) return categoryFromSlug;
-    }
-    return selectedCategoryId.value
-      ? categories.value.find(
-          category => category.id === selectedCategoryId.value
-        )
-      : categories.value[0] || null;
-  }
-  return categories.value.find(
-    category => category.id === props.article?.category?.id
-  );
-});
-
-const categoryList = computed(() => {
-  return (
-    categories.value
-      .map(({ name, id, icon }) => ({
-        label: name,
-        value: id,
-        emoji: icon,
-        isSelected: isNewArticle.value
-          ? id === (selectedCategoryId.value || selectedCategory.value?.id)
-          : id === props.article?.category?.id,
-        action: 'assignCategory',
-      }))
-      // Sort categories by isSelected
-      .toSorted((a, b) => Number(b.isSelected) - Number(a.isSelected))
-  );
-});
-
-const hasCategoryMenuItems = computed(() => {
-  return categoryList.value?.length > 0;
-});
-
-const handleArticleAction = ({ action, value }) => {
-  const actions = {
-    assignAuthor: () => {
-      if (isNewArticle.value) {
-        selectedAuthorId.value = value;
-        emit('setAuthor', value);
-      } else {
-        emit('saveArticle', { author_id: value });
-      }
-      openAgentsList.value = false;
-    },
-    assignCategory: () => {
-      if (isNewArticle.value) {
-        selectedCategoryId.value = value;
-        emit('setCategory', value);
-      } else {
-        emit('saveArticle', { category_id: value });
-      }
-      openCategoryList.value = false;
-    },
-  };
-
-  actions[action]?.();
-};
-
-const updateMeta = meta => {
-  emit('saveArticle', { meta });
-};
-
-onMounted(() => {
-  if (categorySlugFromRoute.value && isNewArticle.value) {
-    // Assign category from slug if there is one
-    const categoryFromSlug = findCategoryFromSlug(categorySlugFromRoute.value);
-    if (categoryFromSlug) {
-      handleArticleAction({
-        action: 'assignCategory',
-        value: categoryFromSlug?.id,
-      });
-    }
-  }
-});
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <div class="relative flex items-center gap-2">
-      <OnClickOutside @trigger="openAgentsList = false">
-        <Button
-          variant="ghost"
-          class="!px-0 font-normal hover:!bg-transparent"
-          text-variant="info"
-          @click="openAgentsList = !openAgentsList"
-        >
-          <Thumbnail
-            :author="author"
-            :name="authorName"
-            :size="20"
-            :src="authorThumbnailSrc"
-          />
-          <span
-            v-if="author"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
-          >
-            {{ author.available_name }}
-          </span>
-        </Button>
-        <DropdownMenu
-          v-if="openAgentsList && hasAgentList"
-          :menu-items="agentList"
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
-          @action="handleArticleAction"
-        />
-      </OnClickOutside>
-    </div>
-    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-    <div class="relative">
-      <OnClickOutside @trigger="openCategoryList = false">
-        <Button
-          :label="
-            selectedCategory?.name ||
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
-          "
-          :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
-          variant="ghost"
-          class="!px-2 font-normal hover:!bg-transparent"
-          @click="openCategoryList = !openCategoryList"
-        >
-          <span
-            v-if="selectedCategory"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
-          >
-            {{
-              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
-            }}
-          </span>
-        </Button>
-        <DropdownMenu
-          v-if="openCategoryList && hasCategoryMenuItems"
-          :menu-items="categoryList"
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-52"
-          @action="handleArticleAction"
-        />
-      </OnClickOutside>
-    </div>
-
-    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
-    <div class="relative">
-      <OnClickOutside @trigger="openProperties = false">
-        <Button
-          :label="
-            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.MORE_PROPERTIES')
-          "
-          icon="i-lucide-plus"
-          variant="ghost"
-          :disabled="isNewArticle"
-          class="!px-2 font-normal hover:!bg-transparent hover:!text-n-slate-11"
-          @click="openProperties = !openProperties"
-        />
-        <ArticleEditorProperties
-          v-if="openProperties"
-          :article="article"
-          class="right-0 z-[100] mt-2 xl:left-0 top-full"
-          @save-article="updateMeta"
-          @close="openProperties = false"
-        />
-      </OnClickOutside>
-    </div>
-  </div>
-</template>
@@ -1,177 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useStore } from 'dashboard/composables/store.js';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { OnClickOutside } from '@vueuse/components';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
-import {
-  ARTICLE_EDITOR_STATUS_OPTIONS,
-  ARTICLE_STATUSES,
-  ARTICLE_MENU_ITEMS,
-} from 'dashboard/helper/portalHelper';
-import wootConstants from 'dashboard/constants/globals';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  isUpdating: {
-    type: Boolean,
-    default: false,
-  },
-  isSaved: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String,
-    default: '',
-  },
-  articleId: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['goBack', 'previewArticle']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-
-const isArticlePublishing = ref(false);
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-const showArticleActionMenu = ref(false);
-
-const articleMenuItems = computed(() => {
-  const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
-  return statusOptions.map(option => {
-    const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
-    return {
-      label: t(label),
-      value,
-      action: 'update-status',
-      icon,
-    };
-  });
-});
-
-const statusText = computed(() =>
-  t(
-    `HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.STATUS.${props.isUpdating ? 'SAVING' : 'SAVED'}`
-  )
-);
-
-const onClickGoBack = () => emit('goBack');
-
-const previewArticle = () => emit('previewArticle');
-
-const getStatusMessage = (status, isSuccess) => {
-  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
-  const statusMap = {
-    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
-    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
-    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
-  };
-
-  return statusMap[status]
-    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
-    : '';
-};
-
-const updateArticleStatus = async ({ value }) => {
-  showArticleActionMenu.value = false;
-  const status = getArticleStatus(value);
-  if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-    isArticlePublishing.value = true;
-  }
-  const { portalSlug } = route.params;
-
-  try {
-    await store.dispatch('articles/update', {
-      portalSlug,
-      articleId: props.articleId,
-      status,
-    });
-
-    useAlert(getStatusMessage(status, true));
-
-    if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
-      useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-    } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-      useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-    }
-    isArticlePublishing.value = false;
-  } catch (error) {
-    useAlert(error?.message ?? getStatusMessage(status, false));
-    isArticlePublishing.value = false;
-  }
-};
-</script>
-
-<template>
-  <div class="flex items-center justify-between h-20">
-    <Button
-      :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.BACK_TO_ARTICLES')"
-      icon="i-lucide-chevron-left"
-      variant="link"
-      color="slate"
-      size="sm"
-      class="ltr:pl-3 rtl:pr-3"
-      @click="onClickGoBack"
-    />
-    <div class="flex items-center gap-4">
-      <span
-        v-if="isUpdating || isSaved"
-        class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
-      >
-        {{ statusText }}
-      </span>
-      <div class="flex items-center gap-2">
-        <Button
-          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
-          color="slate"
-          size="sm"
-          :disabled="!articleId"
-          @click="previewArticle"
-        />
-        <div class="flex items-center">
-          <Button
-            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
-            size="sm"
-            class="ltr:rounded-r-none rtl:rounded-l-none"
-            :is-loading="isArticlePublishing"
-            :disabled="
-              status === ARTICLE_STATUSES.PUBLISHED ||
-              !articleId ||
-              isArticlePublishing
-            "
-            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
-          />
-          <div class="relative">
-            <OnClickOutside @trigger="showArticleActionMenu = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                size="sm"
-                :disabled="!articleId"
-                class="ltr:rounded-l-none rtl:rounded-r-none"
-                @click.stop="showArticleActionMenu = !showArticleActionMenu"
-              />
-              <DropdownMenu
-                v-if="showArticleActionMenu"
-                :menu-items="articleMenuItems"
-                class="mt-2 ltr:right-0 rtl:left-0 top-full"
-                @action="updateArticleStatus($event)"
-              />
-            </OnClickOutside>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,134 +0,0 @@
-<script setup>
-import { reactive, watch, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { debounce } from '@chatwoot/utils';
-
-import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  article: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['saveArticle', 'close']);
-
-const saveArticle = debounce(value => emit('saveArticle', value), 400, false);
-
-const { t } = useI18n();
-
-const state = reactive({
-  title: '',
-  description: '',
-  tags: [],
-});
-
-const updateState = () => {
-  state.title = props.article.meta?.title || '';
-  state.description = props.article.meta?.description || '';
-  state.tags = props.article.meta?.tags || [];
-};
-
-watch(
-  state,
-  newState => {
-    saveArticle({
-      title: newState.title,
-      description: newState.description,
-      tags: newState.tags,
-    });
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  updateState();
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
-  >
-    <div class="flex items-center justify-between">
-      <h3>
-        {{
-          t(
-            'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.ARTICLE_PROPERTIES'
-          )
-        }}
-      </h3>
-      <Button
-        icon="i-lucide-x"
-        size="sm"
-        variant="ghost"
-        class="hover:text-n-slate-11"
-        @click="emit('close')"
-      />
-    </div>
-    <div class="flex flex-col gap-2">
-      <div>
-        <div class="flex justify-between w-full gap-4 py-2">
-          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
-          >
-            {{
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION'
-              )
-            }}
-          </label>
-          <TextArea
-            v-model="state.description"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
-              )
-            "
-            class="w-[220px]"
-            custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[150px]"
-            auto-height
-            min-height="3rem"
-          />
-        </div>
-        <div class="flex justify-between w-full gap-2 py-2">
-          <InlineInput
-            v-model="state.title"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE_PLACEHOLDER'
-              )
-            "
-            :label="
-              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
-            "
-            custom-label-class="min-w-[120px]"
-          />
-        </div>
-        <div class="flex justify-between w-full gap-2 py-2">
-          <label
-            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
-          >
-            {{
-              t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
-            }}
-          </label>
-          <TagInput
-            v-model="state.tags"
-            :placeholder="
-              t(
-                'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
-              )
-            "
-            class="w-[224px]"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,194 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { OnClickOutside } from '@vueuse/components';
-import {
-  ARTICLE_TABS,
-  CATEGORY_ALL,
-  ARTICLE_TABS_OPTIONS,
-} from 'dashboard/helper/portalHelper';
-
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  categories: {
-    type: Array,
-    required: true,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-  meta: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits([
-  'tabChange',
-  'localeChange',
-  'categoryChange',
-  'newArticle',
-]);
-
-const route = useRoute();
-const { t } = useI18n();
-
-const isCategoryMenuOpen = ref(false);
-const isLocaleMenuOpen = ref(false);
-
-const countKey = tab => {
-  if (tab.value === 'all') {
-    return 'articlesCount';
-  }
-  return `${tab.value}ArticlesCount`;
-};
-
-const tabs = computed(() => {
-  return ARTICLE_TABS_OPTIONS.map(tab => ({
-    label: t(`HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.TABS.${tab.key}`),
-    value: tab.value,
-    count: props.meta[countKey(tab)],
-  }));
-});
-
-const activeTabIndex = computed(() => {
-  const tabParam = route.params.tab || ARTICLE_TABS.ALL;
-  return tabs.value.findIndex(tab => tab.value === tabParam);
-});
-
-const activeCategoryName = computed(() => {
-  const activeCategory = props.categories.find(
-    category => category.slug === route.params.categorySlug
-  );
-
-  if (activeCategory) {
-    const { icon, name } = activeCategory;
-    return `${icon} ${name}`;
-  }
-
-  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
-});
-
-const activeLocaleName = computed(() => {
-  return props.allowedLocales.find(
-    locale => locale.code === route.params.locale
-  )?.name;
-});
-
-const categoryMenuItems = computed(() => {
-  const defaultMenuItem = {
-    label: t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL'),
-    value: CATEGORY_ALL,
-    action: 'filter',
-  };
-
-  const categoryItems = props.categories.map(category => ({
-    label: category.name,
-    value: category.slug,
-    action: 'filter',
-    emoji: category.icon,
-  }));
-
-  const hasCategorySlug = !!route.params.categorySlug;
-
-  return hasCategorySlug ? [defaultMenuItem, ...categoryItems] : categoryItems;
-});
-
-const hasCategoryMenuItems = computed(() => {
-  return categoryMenuItems.value?.length > 0;
-});
-
-const localeMenuItems = computed(() => {
-  return props.allowedLocales.map(locale => ({
-    label: locale.name,
-    value: locale.code,
-    action: 'filter',
-  }));
-});
-
-const hasMoreThanOneLocaleMenuItems = computed(() => {
-  return localeMenuItems.value?.length > 1;
-});
-
-const handleLocaleAction = ({ value }) => {
-  emit('localeChange', value);
-  isLocaleMenuOpen.value = false;
-};
-
-const handleCategoryAction = ({ value }) => {
-  emit('categoryChange', value);
-  isCategoryMenuOpen.value = false;
-};
-
-const handleNewArticle = () => {
-  emit('newArticle');
-};
-
-const handleTabChange = value => {
-  emit('tabChange', value);
-};
-</script>
-
-<template>
-  <div class="flex flex-col items-start w-full gap-2 lg:flex-row">
-    <TabBar
-      :tabs="tabs"
-      :initial-active-tab="activeTabIndex"
-      @tab-changed="handleTabChange"
-    />
-    <div class="flex items-start justify-between w-full gap-2">
-      <div class="flex items-center gap-2">
-        <div v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
-          <OnClickOutside @trigger="isLocaleMenuOpen = false">
-            <Button
-              :label="activeLocaleName"
-              size="sm"
-              icon="i-lucide-chevron-down"
-              color="slate"
-              trailing-icon
-              @click="isLocaleMenuOpen = !isLocaleMenuOpen"
-            />
-
-            <DropdownMenu
-              v-if="isLocaleMenuOpen"
-              :menu-items="localeMenuItems"
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
-              @action="handleLocaleAction"
-            />
-          </OnClickOutside>
-        </div>
-        <div v-if="hasCategoryMenuItems" class="relative group">
-          <OnClickOutside @trigger="isCategoryMenuOpen = false">
-            <Button
-              :label="activeCategoryName"
-              icon="i-lucide-chevron-down"
-              size="sm"
-              color="slate"
-              trailing-icon
-              class="max-w-48"
-              @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-            />
-
-            <DropdownMenu
-              v-if="isCategoryMenuOpen"
-              :menu-items="categoryMenuItems"
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
-              @action="handleCategoryAction"
-            />
-          </OnClickOutside>
-        </div>
-      </div>
-      <Button
-        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
-        icon="i-lucide-plus"
-        size="sm"
-        @click="handleNewArticle"
-      />
-    </div>
-  </div>
-</template>
@@ -1,190 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import Draggable from 'vuedraggable';
-import { useMapGetter, useStore } from 'dashboard/composables/store.js';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
-import wootConstants from 'dashboard/constants/globals';
-
-import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
-
-const props = defineProps({
-  articles: {
-    type: Array,
-    required: true,
-  },
-  isCategoryArticles: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { ARTICLE_STATUS_TYPES } = wootConstants;
-
-const router = useRouter();
-const route = useRoute();
-const store = useStore();
-const { t } = useI18n();
-
-const localArticles = ref(props.articles);
-
-const dragEnabled = computed(() => {
-  // Enable dragging only for category articles and when there's more than one article
-  return props.isCategoryArticles && localArticles.value?.length > 1;
-});
-
-const getCategoryById = useMapGetter('categories/categoryById');
-
-const openArticle = id => {
-  const { tab, categorySlug, locale } = route.params;
-  if (props.isCategoryArticles) {
-    router.push({
-      name: 'portals_categories_articles_edit',
-      params: { articleSlug: id },
-    });
-  } else {
-    router.push({
-      name: 'portals_articles_edit',
-      params: {
-        articleSlug: id,
-        tab,
-        categorySlug,
-        locale,
-      },
-    });
-  }
-};
-
-const onReorder = reorderedGroup => {
-  store.dispatch('articles/reorder', {
-    reorderedGroup,
-    portalSlug: route.params.portalSlug,
-  });
-};
-
-const onDragEnd = () => {
-  // Reuse existing positions to maintain order within the current group
-  const sortedArticlePositions = localArticles.value
-    .map(article => article.position)
-    .sort((a, b) => a - b); // Use custom sort to handle numeric values correctly
-
-  const orderedArticles = localArticles.value.map(article => article.id);
-
-  // Create a map of article IDs to their new positions
-  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-    obj[key] = sortedArticlePositions[index];
-    return obj;
-  }, {});
-
-  onReorder(reorderedGroup);
-};
-
-const getCategory = categoryId => {
-  return getCategoryById.value(categoryId) || { name: '', icon: '' };
-};
-
-const getStatusMessage = (status, isSuccess) => {
-  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
-  const statusMap = {
-    [ARTICLE_STATUS_TYPES.PUBLISH]: 'PUBLISH_ARTICLE',
-    [ARTICLE_STATUS_TYPES.ARCHIVE]: 'ARCHIVE_ARTICLE',
-    [ARTICLE_STATUS_TYPES.DRAFT]: 'DRAFT_ARTICLE',
-  };
-
-  return statusMap[status]
-    ? t(`HELP_CENTER.${statusMap[status]}.API.${messageType}`)
-    : '';
-};
-
-const updateMeta = () => {
-  const { portalSlug, locale } = route.params;
-  return store.dispatch('portals/show', { portalSlug, locale });
-};
-
-const handleArticleAction = async (action, { status, id }) => {
-  const { portalSlug } = route.params;
-  try {
-    if (action === 'delete') {
-      await store.dispatch('articles/delete', {
-        portalSlug,
-        articleId: id,
-      });
-      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
-    } else {
-      await store.dispatch('articles/update', {
-        portalSlug,
-        articleId: id,
-        status,
-      });
-      useAlert(getStatusMessage(status, true));
-
-      if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
-        useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
-      } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
-        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
-      }
-    }
-    await updateMeta();
-  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      (action === 'delete'
-        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
-        : getStatusMessage(status, false));
-    useAlert(errorMessage);
-  }
-};
-
-const updateArticle = ({ action, value, id }) => {
-  const status = action !== 'delete' ? getArticleStatus(value) : null;
-  handleArticleAction(action, { status, id });
-};
-
-// Watch for changes in the articles prop and update the localArticles ref
-watch(
-  () => props.articles,
-  newArticles => {
-    localArticles.value = newArticles;
-  },
-  { deep: true }
-);
-</script>
-
-<template>
-  <Draggable
-    v-model="localArticles"
-    :disabled="!dragEnabled"
-    item-key="id"
-    tag="ul"
-    ghost-class="article-ghost-class"
-    class="w-full h-full space-y-4"
-    @end="onDragEnd"
-  >
-    <template #item="{ element }">
-      <li class="list-none rounded-2xl">
-        <ArticleCard
-          :id="element.id"
-          :key="element.id"
-          :title="element.title"
-          :status="element.status"
-          :author="element.author"
-          :category="getCategory(element.category.id)"
-          :views="element.views || 0"
-          :updated-at="element.updatedAt"
-          :class="{ 'cursor-grab': dragEnabled }"
-          @open-article="openArticle"
-          @article-action="updateArticle"
-        />
-      </li>
-    </template>
-  </Draggable>
-</template>
-
-<style lang="scss" scoped>
-.article-ghost-class {
-  @apply opacity-50 bg-n-solid-1;
-}
-</style>
@@ -1,72 +0,0 @@
-<script setup>
-import ArticlesPage from './ArticlesPage.vue';
-
-const articles = [
-  {
-    title: "How to get an SSL certificate for your Help Center's custom domain",
-    status: 'draft',
-    updatedAt: '2 days ago',
-    author: 'Michael',
-    category: '⚡️ Marketing',
-    views: 3400,
-  },
-  {
-    title: 'Setting up your first Help Center portal',
-    status: '',
-    updatedAt: '1 week ago',
-    author: 'John',
-    category: '🛠️ Development',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Customizing the appearance of your Help Center',
-    status: '',
-    updatedAt: '5 days ago',
-    author: 'Jane',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Customizing the appearance of your Help Center',
-    status: '',
-    updatedAt: '5 days ago',
-    author: 'Jane',
-    category: '💰 Finance',
-    views: 400,
-  },
-  {
-    title: 'Best practices for organizing your Help Center content',
-    status: 'archived',
-    updatedAt: '3 days ago',
-    author: 'Fernando',
-    category: '💰 Finance',
-    views: 400,
-  },
-];
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
-    <Variant title="All Articles">
-      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
-        <ArticlesPage :articles="articles" />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,190 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
-import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleHeaderControls.vue';
-import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
-
-const props = defineProps({
-  articles: {
-    type: Array,
-    required: true,
-  },
-  categories: {
-    type: Array,
-    required: true,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-  portalName: {
-    type: String,
-    required: true,
-  },
-  meta: {
-    type: Object,
-    required: true,
-  },
-  isCategoryArticles: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['pageChange', 'fetchPortal']);
-
-const router = useRouter();
-const route = useRoute();
-const { t } = useI18n();
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isFetching = useMapGetter('articles/isFetching');
-
-const hasNoArticles = computed(
-  () => !isFetching.value && !props.articles.length
-);
-
-const isLoading = computed(() => isFetching.value || isSwitchingPortal.value);
-
-const totalArticlesCount = computed(() => props.meta.allArticlesCount);
-
-const hasNoArticlesInPortal = computed(
-  () => totalArticlesCount.value === 0 && !props.isCategoryArticles
-);
-
-const shouldShowPaginationFooter = computed(() => {
-  return !(isFetching.value || isSwitchingPortal.value || hasNoArticles.value);
-});
-
-const updateRoute = newParams => {
-  const { portalSlug, locale, tab, categorySlug } = route.params;
-  router.push({
-    name: 'portals_articles_index',
-    params: {
-      portalSlug,
-      locale: newParams.locale ?? locale,
-      tab: newParams.tab ?? tab,
-      categorySlug: newParams.categorySlug ?? categorySlug,
-      ...newParams,
-    },
-  });
-};
-
-const articlesCount = computed(() => {
-  const { tab } = route.params;
-  const { meta } = props;
-  const countMap = {
-    '': meta.articlesCount,
-    mine: meta.mineArticlesCount,
-    draft: meta.draftArticlesCount,
-    archived: meta.archivedArticlesCount,
-  };
-  return Number(countMap[tab] || countMap['']);
-});
-
-const showArticleHeaderControls = computed(
-  () =>
-    !hasNoArticlesInPortal.value &&
-    !props.isCategoryArticles &&
-    !isSwitchingPortal.value
-);
-
-const showCategoryHeaderControls = computed(
-  () => props.isCategoryArticles && !isSwitchingPortal.value
-);
-
-const getEmptyStateText = type => {
-  if (props.isCategoryArticles) {
-    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
-  }
-  const tabName = route.params.tab?.toUpperCase() || 'ALL';
-  return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.${tabName}.${type}`);
-};
-
-const getEmptyStateTitle = computed(() => getEmptyStateText('TITLE'));
-const getEmptyStateSubtitle = computed(() => getEmptyStateText('SUBTITLE'));
-
-const handleTabChange = tab =>
-  updateRoute({ tab: tab.value === ARTICLE_TABS.ALL ? '' : tab.value });
-
-const handleCategoryAction = value =>
-  updateRoute({ categorySlug: value === CATEGORY_ALL ? '' : value });
-
-const handleLocaleAction = value => {
-  updateRoute({ locale: value, categorySlug: '' });
-  emit('fetchPortal', value);
-};
-const handlePageChange = page => emit('pageChange', page);
-
-const navigateToNewArticlePage = () => {
-  const { categorySlug, locale } = route.params;
-  router.push({
-    name: 'portals_articles_new',
-    params: { categorySlug, locale },
-  });
-};
-</script>
-
-<template>
-  <HelpCenterLayout
-    :current-page="Number(meta.currentPage)"
-    :total-items="articlesCount"
-    :items-per-page="25"
-    :header="portalName"
-    :show-pagination-footer="shouldShowPaginationFooter"
-    @update:current-page="handlePageChange"
-  >
-    <template #header-actions>
-      <div class="flex items-end justify-between">
-        <ArticleHeaderControls
-          v-if="showArticleHeaderControls"
-          :categories="categories"
-          :allowed-locales="allowedLocales"
-          :meta="meta"
-          @tab-change="handleTabChange"
-          @locale-change="handleLocaleAction"
-          @category-change="handleCategoryAction"
-          @new-article="navigateToNewArticlePage"
-        />
-        <CategoryHeaderControls
-          v-else-if="showCategoryHeaderControls"
-          :categories="categories"
-          :allowed-locales="allowedLocales"
-          :has-selected-category="isCategoryArticles"
-        />
-      </div>
-    </template>
-    <template #content>
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <ArticleList
-        v-else-if="!hasNoArticles"
-        :articles="articles"
-        :is-category-articles="isCategoryArticles"
-      />
-      <ArticleEmptyState
-        v-else
-        class="pt-14"
-        :title="getEmptyStateTitle"
-        :subtitle="getEmptyStateSubtitle"
-        :show-button="hasNoArticlesInPortal"
-        :button-label="
-          t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
-        "
-        @click="navigateToNewArticlePage"
-      />
-    </template>
-  </HelpCenterLayout>
-</template>
@@ -1,209 +0,0 @@
-<script setup>
-import CategoriesPage from './CategoriesPage.vue';
-
-const categories = [
-  {
-    id: 'getting-started',
-    title: '🚀 Getting started',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'marketing',
-    title: 'Marketing',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support.',
-    articlesCount: '4',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'development',
-    title: 'Development',
-    description: '',
-    articlesCount: '5',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Archived article',
-        title: 'Best practices for organizing your Help Center content',
-        status: 'archived',
-        updatedAt: '3 days ago',
-        author: 'Fernando',
-        category: '💰 Finance',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Customizing the appearance of your Help Center',
-        status: '',
-        updatedAt: '5 days ago',
-        author: 'Jane',
-        category: '💰 Finance',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'roadmap',
-    title: '🛣️ Roadmap',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '3',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-  {
-    id: 'finance',
-    title: '💰 Finance',
-    description:
-      'Learn how to use Chatwoot effectively and make the most of its features to enhance customer support and engagement.',
-    articlesCount: '2',
-    articles: [
-      {
-        variant: 'Draft article',
-        title:
-          "How to get an SSL certificate for your Help Center's custom domain",
-        status: 'draft',
-        updatedAt: '2 days ago',
-        author: 'Michael',
-        category: '⚡️ Marketing',
-        views: 3400,
-      },
-      {
-        variant: 'Published article',
-        title: 'Setting up your first Help Center portal',
-        status: '',
-        updatedAt: '1 week ago',
-        author: 'John',
-        category: '🛠️ Development',
-        views: 400,
-      },
-    ],
-  },
-];
-</script>
-
-<template>
-  <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
-    <Variant title="All Categories">
-      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
-        <CategoriesPage :categories="categories" />
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,139 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import CategoryList from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryList.vue';
-import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
-import CategoryEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Category/CategoryEmptyState.vue';
-import EditCategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/EditCategoryDialog.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-const props = defineProps({
-  categories: {
-    type: Array,
-    required: true,
-  },
-  isFetching: {
-    type: Boolean,
-    required: false,
-  },
-  allowedLocales: {
-    type: Array,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['fetchCategories']);
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const editCategoryDialog = ref(null);
-const selectedCategory = ref(null);
-
-const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
-const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-const hasCategories = computed(() => props.categories?.length > 0);
-
-const updateRoute = (newParams, routeName) => {
-  const { accountId, portalSlug, locale } = route.params;
-  const baseParams = { accountId, portalSlug, locale };
-
-  router.push({
-    name: routeName,
-    params: {
-      ...baseParams,
-      ...newParams,
-      categorySlug: newParams.categorySlug,
-    },
-  });
-};
-
-const openCategoryArticles = slug => {
-  updateRoute({ categorySlug: slug }, 'portals_categories_articles_index');
-};
-
-const handleLocaleChange = value => {
-  updateRoute({ locale: value }, 'portals_categories_index');
-  emit('fetchCategories', value);
-};
-
-async function deleteCategory(category) {
-  try {
-    await store.dispatch('categories/delete', {
-      portalSlug: route.params.portalSlug,
-      categoryId: category.id,
-    });
-
-    useTrack(PORTALS_EVENTS.DELETE_CATEGORY, {
-      hasArticles: category?.meta?.articles_count > 0,
-    });
-
-    useAlert(
-      t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.SUCCESS_MESSAGE')
-    );
-  } catch (error) {
-    useAlert(
-      error.message ||
-        t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.DELETE.API.ERROR_MESSAGE')
-    );
-  }
-}
-
-const handleAction = ({ action, id, category: categoryData }) => {
-  if (action === 'edit') {
-    selectedCategory.value = props.categories.find(
-      category => category.id === id
-    );
-    editCategoryDialog.value.dialogRef.open();
-  }
-  if (action === 'delete') {
-    deleteCategory(categoryData);
-  }
-};
-</script>
-
-<template>
-  <HelpCenterLayout :show-pagination-footer="false">
-    <template #header-actions>
-      <CategoryHeaderControls
-        :categories="categories"
-        :is-category-articles="false"
-        :allowed-locales="allowedLocales"
-        @locale-change="handleLocaleChange"
-      />
-    </template>
-    <template #content>
-      <div
-        v-if="isLoading"
-        class="flex items-center justify-center py-10 text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-      <CategoryList
-        v-else-if="hasCategories"
-        :categories="categories"
-        @click="openCategoryArticles"
-        @action="handleAction"
-      />
-      <CategoryEmptyState
-        v-else
-        class="pt-14"
-        :title="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.TITLE')"
-        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_EMPTY_STATE.SUBTITLE')"
-      />
-    </template>
-    <EditCategoryDialog
-      ref="editCategoryDialog"
-      :allowed-locales="allowedLocales"
-      :selected-category="selectedCategory"
-    />
-  </HelpCenterLayout>
-</template>
@@ -1,112 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { useRoute } from 'vue-router';
-import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-import CategoryForm from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'edit',
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  selectedCategory: {
-    type: Object,
-    default: () => ({}),
-  },
-  portalName: {
-    type: String,
-    default: '',
-  },
-  activeLocaleName: {
-    type: String,
-    default: '',
-  },
-  activeLocaleCode: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-const route = useRoute();
-
-const handleCategory = async formData => {
-  const { id, name, slug, icon, description, locale } = formData;
-  const categoryData = { name, icon, slug, description };
-
-  if (props.mode === 'create') {
-    categoryData.locale = locale;
-  } else {
-    categoryData.id = id;
-  }
-
-  try {
-    const action = props.mode === 'edit' ? 'update' : 'create';
-    const payload = {
-      portalSlug: route.params.portalSlug,
-      categoryObj: categoryData,
-    };
-
-    if (action === 'update') {
-      payload.categoryId = id;
-    }
-
-    await store.dispatch(`categories/${action}`, payload);
-
-    const successMessage = t(
-      `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.SUCCESS_MESSAGE`
-    );
-    useAlert(successMessage);
-
-    const trackEvent =
-      props.mode === 'edit'
-        ? PORTALS_EVENTS.EDIT_CATEGORY
-        : PORTALS_EVENTS.CREATE_CATEGORY;
-    useTrack(
-      trackEvent,
-      props.mode === 'create'
-        ? { hasDescription: Boolean(description) }
-        : undefined
-    );
-
-    emit('close');
-  } catch (error) {
-    const errorMessage =
-      error?.message ||
-      t(
-        `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.${props.mode.toUpperCase()}.API.ERROR_MESSAGE`
-      );
-    useAlert(errorMessage);
-  }
-};
-</script>
-
-<template>
-  <div
-    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
-  >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
-      {{
-        t(
-          `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`
-        )
-      }}
-    </h3>
-    <CategoryForm
-      :mode="mode"
-      :selected-category="selectedCategory"
-      :active-locale-code="activeLocaleCode"
-      :portal-name="portalName"
-      :active-locale-name="activeLocaleName"
-      @submit="handleCategory"
-      @cancel="emit('close')"
-    />
-  </div>
-</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Muhsin KelothandGitHub	3b723ecccc	Merge branch 'develop' into refactor/structured-clone	2024-07-24 19:18:38 +05:30
Muhsin KelothandGitHub	168938500f	Merge branch 'develop' into refactor/structured-clone	2024-07-24 12:19:15 +05:30
Muhsin KelothandGitHub	2bb7d1e4b2	Merge branch 'develop' into refactor/structured-clone	2024-07-23 13:12:45 +05:30
Shivam Mishra	c5c3b74728	refactor: use structuredClone instead of JSON stringify and parse	2024-07-22 16:09:05 +05:30
@@ -1 +1 @@
 .13.0
 .9.0
@@ -1 +1 @@
 .0.0
 .8.0