Merge branch 'develop' into feat/update-editor

style: no need for assignment
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2024-06-03 13:04:37 +05:30 · 2024-06-03 12:50:58 +05:30 · 2024-05-31 12:26:40 +05:30 · 2024-05-09 18:43:58 +05:30 · 2024-05-09 18:42:46 +05:30 · 2024-05-09 18:28:40 +05:30
3024 changed files with 77610 additions and 91846 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.2.2-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,48 @@ 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
-
+            TESTFILES=$(circleci tests glob **/specs/*.spec.js | circleci tests split --split-by=timings)
+            yarn test:coverage --profile 10 \
+                               --out ~/tmp/test-results/yarn.xml \
+                               -- ${TESTFILES}
      - 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 +153,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/**/*'
@@ -12,7 +12,7 @@ services:
      args:
        VARIANT: "ubuntu-22.04"
        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.3.3"
+        RUBY_VERSION: "3.2.2"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
        USER_UID: "1000"
        USER_GID: "1000"
@@ -25,7 +25,7 @@ services:
      args:
        VARIANT: "ubuntu-22.04"
        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.3.3"
+        RUBY_VERSION: "3.2.2"
        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
        USER_UID: "1000"
        USER_GID: "1000"
@@ -85,8 +85,6 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Comment out the following environment variables if required by your SMTP server
 # SMTP_TLS=
 # SMTP_SSL=
-# SMTP_OPEN_TIMEOUT
-# SMTP_READ_TIMEOUT

 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
@@ -257,4 +255,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,22 +2,16 @@ module.exports = {
  extends: [
    'airbnb-base/legacy',
    'prettier',
-    'plugin:vue/vue3-recommended',
-    'plugin:vitest-globals/recommended',
+    'plugin:vue/recommended',
+    'plugin:storybook/recommended',
+    'plugin:cypress/recommended',
  ],
-  overrides: [
-    {
-      files: ['**/*.spec.{j,t}s?(x)'],
-      env: {
-        'vitest-globals/env': true,
-      },
-    },
-  ],
-  plugins: ['html', 'prettier'],
  parserOptions: {
-    ecmaVersion: 'latest',
+    parser: '@babel/eslint-parser',
+    ecmaVersion: 2020,
    sourceType: 'module',
  },
+  plugins: ['html', 'prettier', 'babel'],
  rules: {
    'prettier/prettier': ['error'],
    camelcase: 'off',
@@ -33,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',
      {
@@ -216,18 +56,19 @@ module.exports = {
    'import/extensions': ['off'],
    'no-console': 'error',
  },
+  settings: {
+    'import/resolver': {
+      webpack: {
+        config: 'config/webpack/resolve.js',
+      },
+    },
+  },
  env: {
    browser: true,
+    jest: true,
    node: true,
  },
  globals: {
    bus: true,
-    vi: true,
-    // beforeEach: true,
-    // afterEach: true,
-    // test: true,
-    // describe: true,
-    // it: true,
-    // expect: true,
  },
 };
@@ -1,43 +0,0 @@
-name: Frontend Lint & Test
-
-on:
-  push:
-    branches:
-      - develop
-  pull_request:
-    branches:
-      - develop
-
-jobs:
-  test:
-    runs-on: ubuntu-20.04
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-      - uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9.3.0
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: 'pnpm'
-
-      - name: Install pnpm dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Run eslint
-        run: pnpm run eslint
-
-      - name: Run frontend tests with coverage
-        run: |
-          mkdir -p coverage
-          pnpm run test:coverage
@@ -25,5 +25,13 @@ jobs:
        with: 
          issue-inactive-days: '30'
          issue-lock-reason: 'resolved'
+          issue-comment: >
+            This issue has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
          pr-inactive-days: '30'
          pr-lock-reason: 'resolved'
+          pr-comment: >
+            This pull request has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
@@ -21,7 +21,7 @@ jobs:
        image: postgres:15.3
        env:
          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: ''
+          POSTGRES_PASSWORD: ""
          POSTGRES_DB: postgres
          POSTGRES_HOST_AUTH_METHOD: trust
        ports:
@@ -41,49 +41,47 @@ jobs:
        options: --entrypoint redis-server

    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          ref: ${{ github.event.pull_request.head.ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}

-      - uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+    - uses: ruby/setup-ruby@v1
+      with:
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically

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

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

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

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

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

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

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

-      - name: Upload rails log folder
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: rails-log-folder
-          path: log
+    - name: Upload rails log folder
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: rails-log-folder
+        path: log
@@ -49,17 +49,13 @@ jobs:
      with:
        bundler-cache: true # runs 'bundle install' and caches installed gems automatically

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

-    - name: pnpm
-      run: pnpm install
+    - name: yarn
+      run: yarn install

    - name: Create database
      run: bundle exec rake db:create
@@ -19,33 +19,23 @@ jobs:
        with:
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically

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

-      - name: pnpm
-        run: pnpm install
+      - name: yarn
+        run: yarn install

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

-      - name: setup env
-        run: |
-          cp .env.example .env
- 
      - name: Run asset compile
        run: bundle exec rake assets:precompile
        env:
-          RAILS_ENV: production
+          NODE_OPTIONS: --openssl-legacy-provider

      - name: Size Check
-        run: pnpm run size
-
-
+        run: yarn run size
@@ -32,16 +32,6 @@ master.key

 public/uploads
 public/packs*
-public/assets/administrate*
-public/assets/action*.js
-public/assets/activestorage*.js
-public/assets/trix*
-public/assets/belongs_to*.js
-public/assets/manifest*.js
-public/assets/manifest*.js
-public/assets/*.js.gz
-public/assets/secretField*
-public/assets/.sprockets-manifest-*.json

 # VIM files
 *.swp
@@ -85,8 +75,4 @@ yalc.lock
 yarn-debug.log*
 .yarn-integrity

-# Vite Ruby
-/public/vite*
-# Vite uses dotenv and suggests to ignore local-only env files. See
-# https://vitejs.dev/guide/env-and-mode.html#env-files
-*.local
+/storybook-static
@@ -1,11 +1,11 @@
-# #!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"

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

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

-# # stage rubocop changes to files
-# git diff --name-only --cached | xargs git add
+# stage rubocop changes to files
+git diff --name-only --cached | xargs git add
@@ -1 +1 @@
-3.3.3
+3.2.2
@@ -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$/,
+    },
+  },
+};
@@ -1,10 +1,10 @@
 source 'https://rubygems.org'

-ruby '3.3.3'
+ruby '3.2.2'

 ##-- base gems for rails --##
 gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.4'
+gem 'rails', '~> 7.0.8.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

@@ -61,10 +61,10 @@ gem 'redis-namespace'
 gem 'activerecord-import'

 ##--- gems for server & infra configuration ---##
-gem 'dotenv-rails', '>= 3.0.0'
+gem 'dotenv-rails'
 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,18 +111,18 @@ 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.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.19.0', require: false
+gem 'sentry-sidekiq', '>= 5.15.0', require: false

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

 ##-- Push notification service --##
 gem 'fcm'
-gem 'web-push', '>= 3.0.1'
+gem 'web-push'

 ##-- geocoding / parse location from ip --##
 # http://www.rubygeocoder.com/
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'

 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.3'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'

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

 group :test do
+  # Cypress in rails.
+  gem 'cypress-on-rails'
  # fast cleaning of database
  gem 'database_cleaner'
  # mock http calls
@@ -226,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.5'
+  gem 'rspec-rails'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -33,78 +33,78 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actioncable (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    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)
+    actionmailbox (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    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)
+    actionmailer (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      actionview (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.4)
-      actionview (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionpack (7.0.8.3)
+      actionview (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      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.4)
-      actionpack (= 7.0.8.4)
-      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actiontext (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.4)
-      activesupport (= 7.0.8.4)
+    actionview (7.0.8.3)
+      activesupport (= 7.0.8.3)
      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.4)
-      activesupport (= 7.0.8.4)
+    activejob (7.0.8.3)
+      activesupport (= 7.0.8.3)
      globalid (>= 0.3.6)
-    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)
+    activemodel (7.0.8.3)
+      activesupport (= 7.0.8.3)
+    activerecord (7.0.8.3)
+      activemodel (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    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)
+    activestorage (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.4)
+    activesupport (7.0.8.3)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
      tzinfo (~> 2.0)
    acts-as-taggable-on (9.0.1)
      activerecord (>= 6.0, < 7.1)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
    administrate (0.20.1)
      actionpack (>= 6.0, < 8.0)
      actionview (>= 6.0, < 8.0)
@@ -150,13 +150,13 @@ GEM
      statsd-ruby (~> 1.1)
    base64 (0.2.0)
    bcrypt (3.1.20)
-    bigdecimal (3.1.8)
+    bigdecimal (3.1.7)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
    brakeman (5.4.1)
    browser (5.3.1)
-    builder (3.3.0)
+    builder (3.2.4)
    bullet (7.0.7)
      activesupport (>= 3.0.0)
      uniform_notifier (~> 1.11)
@@ -169,31 +169,27 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.2.3)
    connection_pool (2.4.1)
-    crack (1.0.0)
-      bigdecimal
+    crack (0.4.5)
      rexml
    crass (1.0.6)
-    csv (3.3.0)
-    csv-safe (3.3.1)
-      csv (~> 3.0)
+    csv-safe (3.2.1)
+    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)
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    datadog-ci (0.8.3)
-      msgpack
    date (3.3.4)
-    ddtrace (1.23.2)
-      datadog-ci (~> 0.8.1)
-      debase-ruby_core_source (= 3.3.1)
-      libdatadog (~> 7.0.0.1.0)
-      libddwaf (~> 1.14.0.0.0)
+    ddtrace (1.11.1)
+      debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
+      libdatadog (~> 2.0.0.1.0)
+      libddwaf (~> 1.8.2.0.0)
      msgpack
-    debase-ruby_core_source (3.3.1)
+    debase-ruby_core_source (3.2.0)
    debug (1.8.0)
      irb (>= 1.5.0)
      reline (>= 0.3.1)
@@ -208,19 +204,18 @@ GEM
      bcrypt (~> 3.0)
      devise (> 3.5.2, < 5)
      rails (>= 4.2.0, < 7.2)
-    diff-lcs (1.5.1)
+    diff-lcs (1.5.0)
    digest-crc (0.6.4)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.0)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
-    dotenv (3.1.2)
-    dotenv-rails (3.1.2)
-      dotenv (= 3.1.2)
-      railties (>= 6.1)
+    dotenv (2.8.1)
+    dotenv-rails (2.8.1)
+      dotenv (= 2.8.1)
+      railties (>= 3.2)
    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)
@@ -228,8 +223,8 @@ GEM
      http (>= 3.0)
      ruby2_keywords
    email_reply_trimmer (0.1.13)
-    erubi (1.13.0)
-    et-orbi (1.2.11)
+    erubi (1.12.0)
+    et-orbi (1.2.7)
      tzinfo
    execjs (2.8.1)
    facebook-messenger (2.0.1)
@@ -256,7 +251,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 +262,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 +295,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 +313,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)
@@ -358,8 +353,9 @@ GEM
      ruby2ruby (~> 2.4)
      ruby_parser (~> 3.10)
    hana (1.3.7)
-    hashdiff (1.1.0)
+    hashdiff (1.0.1)
    hashie (5.0.0)
+    hkdf (1.0.0)
    http (5.1.1)
      addressable (~> 2.8)
      http-cookie (~> 1.0)
@@ -421,15 +417,15 @@ GEM
      addressable (~> 2.8)
    letter_opener (1.8.1)
      launchy (>= 2.2, < 3)
-    libdatadog (7.0.0.1.0)
-    libdatadog (7.0.0.1.0-x86_64-linux)
-    libddwaf (1.14.0.0.0)
+    libdatadog (2.0.0.1.0)
+    libdatadog (2.0.0.1.0-x86_64-linux)
+    libddwaf (1.8.2.0.0)
      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-arm64-darwin)
+    libddwaf (1.8.2.0.0-arm64-darwin)
      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-darwin)
+    libddwaf (1.8.2.0.0-x86_64-darwin)
      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-linux)
+    libddwaf (1.8.2.0.0-x86_64-linux)
      ffi (~> 1.0)
    line-bot-api (1.28.0)
    liquid (5.4.0)
@@ -439,7 +435,6 @@ GEM
    llhttp-ffi (0.4.0)
      ffi-compiler (~> 1.0)
      rake (~> 13.0)
-    logger (1.6.0)
    lograge (0.14.0)
      actionpack (>= 4)
      activesupport (>= 4)
@@ -456,7 +451,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)
@@ -465,8 +460,8 @@ GEM
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
-    minitest (5.25.1)
+    mini_portile2 (2.8.6)
+    minitest (5.23.0)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -479,7 +474,7 @@ GEM
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.14)
+    net-imap (0.4.11)
      date
      net-protocol
    net-pop (0.1.2)
@@ -495,14 +490,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.16.5)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.7-arm64-darwin)
+    nokogiri (1.16.5-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-darwin)
+    nokogiri (1.16.5-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.7-x86_64-linux)
+    nokogiri (1.16.5-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -521,7 +516,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,7 +527,7 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
-    openssl (3.2.0)
+    openssl (3.1.0)
    orm_adapter (0.5.0)
    os (1.1.4)
    parallel (1.23.0)
@@ -550,13 +545,13 @@ GEM
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
-    public_suffix (6.0.0)
-    puma (6.4.3)
+    public_suffix (5.0.1)
+    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.8.1)
+    racc (1.7.3)
    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
@@ -569,25 +564,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.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)
+    rails (7.0.8.3)
+      actioncable (= 7.0.8.3)
+      actionmailbox (= 7.0.8.3)
+      actionmailer (= 7.0.8.3)
+      actionpack (= 7.0.8.3)
+      actiontext (= 7.0.8.3)
+      actionview (= 7.0.8.3)
+      activejob (= 7.0.8.3)
+      activemodel (= 7.0.8.3)
+      activerecord (= 7.0.8.3)
+      activestorage (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.4)
+      railties (= 7.0.8.3)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -595,9 +590,9 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.4)
-      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.4)
+    railties (7.0.8.3)
+      actionpack (= 7.0.8.3)
+      activesupport (= 7.0.8.3)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
@@ -609,7 +604,7 @@ GEM
      ffi (~> 1.0)
    redis (5.0.6)
      redis-client (>= 0.9.0)
-    redis-client (0.22.2)
+    redis-client (0.22.1)
      connection_pool
    redis-namespace (1.10.0)
      redis (>= 4)
@@ -633,25 +628,25 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.6)
-      strscan
-    rspec-core (3.13.0)
-      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.2)
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
+    rspec-core (3.12.2)
+      rspec-support (~> 3.12.0)
+    rspec-expectations (3.12.3)
      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.1)
+      rspec-support (~> 3.12.0)
+    rspec-mocks (3.12.5)
      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-core (~> 3.13)
-      rspec-expectations (~> 3.13)
-      rspec-mocks (~> 3.13)
-      rspec-support (~> 3.13)
-    rspec-support (3.13.1)
+      rspec-support (~> 3.12.0)
+    rspec-rails (6.0.2)
+      actionpack (>= 6.1)
+      activesupport (>= 6.1)
+      railties (>= 6.1)
+      rspec-core (~> 3.12)
+      rspec-expectations (~> 3.12)
+      rspec-mocks (~> 3.12)
+      rspec-support (~> 3.12)
+    rspec-support (3.12.0)
    rspec_junit_formatter (0.6.0)
      rspec-core (>= 2, < 4, != 2.12.0)
    rubocop (1.50.2)
@@ -708,24 +703,24 @@ GEM
      activerecord (>= 4)
      activesupport (>= 4)
    selectize-rails (0.12.6)
-    sentry-rails (5.19.0)
+    semantic_range (3.0.0)
+    sentry-rails (5.17.3)
      railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
-    sentry-ruby (5.19.0)
+      sentry-ruby (~> 5.17.3)
+    sentry-ruby (5.17.3)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.19.0)
-      sentry-ruby (~> 5.19.0)
+    sentry-sidekiq (5.17.3)
+      sentry-ruby (~> 5.17.3)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.3.1)
+    sidekiq (7.2.4)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
-      logger
      rack (>= 2.2.4)
-      redis-client (>= 0.22.2)
+      redis-client (>= 0.19.0)
    sidekiq-cron (1.12.0)
      fugit (~> 1.8)
      globalid (>= 1.0.1)
@@ -794,17 +789,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)
@@ -812,14 +800,20 @@ GEM
      activemodel (>= 6.0.0)
      bindex (>= 0.4.0)
      railties (>= 6.0.0)
-    web-push (3.0.1)
+    web-push (3.0.0)
+      hkdf (~> 1.0)
      jwt (~> 2.0)
      openssl (~> 3.0)
-    webmock (3.23.1)
+    webmock (3.18.1)
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webrick (1.8.2)
+    webpacker (5.4.4)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
+    webrick (1.8.1)
    websocket-driver (0.7.6)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@@ -827,7 +821,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.17)
+    zeitwerk (2.6.14)

 PLATFORMS
  arm64-darwin-20
@@ -862,13 +856,14 @@ DEPENDENCIES
  climate_control
  commonmarker
  csv-safe
+  cypress-on-rails
  database_cleaner
  ddtrace
  debug (~> 1.8)
  devise (>= 4.9.4)
  devise-secure_password!
  devise_token_auth (>= 1.2.3)
-  dotenv-rails (>= 3.0.0)
+  dotenv-rails
  down
  elastic-apm
  email_reply_trimmer
@@ -880,9 +875,9 @@ DEPENDENCIES
  foreman
  geocoder
  gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
  groupdate
  grpc
  haikunator
@@ -902,14 +897,14 @@ DEPENDENCIES
  listen
  lograge (~> 0.14.0)
  maxminddb
-  meta_request (>= 0.8.3)
+  meta_request (>= 0.8.0)
  mock_redis
  neighbor
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
  omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.3)
+  omniauth-google-oauth2 (>= 1.1.2)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
  pg
@@ -923,13 +918,13 @@ DEPENDENCIES
  rack-cors (= 2.0.0)
  rack-mini-profiler (>= 3.2.0)
  rack-timeout
-  rails (~> 7.0.8.4)
+  rails (~> 7.0.8.1)
  redis
  redis-namespace
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails (>= 6.1.5)
+  rspec-rails
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -938,11 +933,11 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.19.0)
+  sentry-rails (>= 5.14.0)
  sentry-ruby
-  sentry-sidekiq (>= 5.19.0)
+  sentry-sidekiq (>= 5.15.0)
  shoulda-matchers
-  sidekiq (>= 7.3.1)
+  sidekiq (>= 7.2.4)
  sidekiq-cron (>= 1.12.0)
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.2.0)
@@ -959,15 +954,15 @@ DEPENDENCIES
  tzinfo-data
  uglifier
  valid_email2
-  vite_rails
  web-console (>= 4.2.1)
-  web-push (>= 3.0.1)
+  web-push
  webmock
+  webpacker
  wisper (= 2.0.0)
  working_hours

 RUBY VERSION
-   ruby 3.3.3p89
+   ruby 3.2.2p185

 BUNDLED WITH
-   2.5.16
+   2.4.6
@@ -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.3.1
@@ -1 +1 @@
-3.0.0
+2.7.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')
@@ -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
@@ -1,32 +0,0 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
-  include GoogleConcern
-  before_action :check_authorization
-
-  def create
-    email = params[:authorization][:email]
-    redirect_url = google_client.auth_code.authorize_url(
-      {
-        redirect_uri: "#{base_url}/google/callback",
-        scope: 'email profile https://mail.google.com/',
-        response_type: 'code',
-        prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
-        access_type: 'offline', # the default is 'online'
-        client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
-      }
-    )
-
-    if redirect_url
-      cache_key = "google::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
-      render json: { success: true, url: redirect_url }
-    else
-      render json: { success: false }, status: :unprocessable_entity
-    end
-  end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  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
@@ -12,8 +12,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
      }
    )
    if redirect_url
-      cache_key = "microsoft::#{email.downcase}"
-      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
+      email = email.downcase
+      ::Redis::Alfred.setex(email, Current.account.id, 5.minutes)
      render json: { success: true, url: redirect_url }
    else
      render json: { success: false }, status: :unprocessable_entity
@@ -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')
@@ -1,20 +0,0 @@
-module GoogleConcern
-  extend ActiveSupport::Concern
-
-  def google_client
-    app_id = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_SECRET', nil)
-
-    ::OAuth2::Client.new(app_id, app_secret, {
-                           site: 'https://oauth2.googleapis.com',
-                           authorize_url: 'https://accounts.google.com/o/oauth2/auth',
-                           token_url: 'https://accounts.google.com/o/oauth2/token'
-                         })
-  end
-
-  private
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end
@@ -15,6 +15,10 @@ module MicrosoftConcern

  private

+  def parsed_body
+    @parsed_body ||= Rack::Utils.parse_nested_query(@response.raw_response.body)
+  end
+
  def base_url
    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
@@ -37,7 +37,7 @@ class DashboardController < ActionController::Base
  end

  def set_dashboard_scripts
-    @dashboard_scripts = sensitive_path? ? nil : GlobalConfig.get_value('DASHBOARD_SCRIPTS')
+    @dashboard_scripts = GlobalConfig.get_value('DASHBOARD_SCRIPTS')
  end

  def ensure_installation_onboarding
@@ -72,17 +72,7 @@ class DashboardController < ActionController::Base
    @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
                          'v3app'
                        else
-                          'dashboard'
+                          'application'
                        end
  end
-
-  def sensitive_path?
-    # dont load dashboard scripts on sensitive paths like password reset
-    sensitive_paths = [edit_user_password_path].freeze
-
-    # remove app prefix
-    current_path = request.path.gsub(%r{^/app}, '')
-
-    sensitive_paths.include?(current_path)
-  end
 end
@@ -1,18 +0,0 @@
-class Google::CallbacksController < OauthCallbackController
-  include GoogleConcern
-
-  private
-
-  def provider_name
-    'google'
-  end
-
-  def imap_address
-    'imap.gmail.com'
-  end
-
-  def oauth_client
-    # from GoogleConcern
-    google_client
-  end
-end
@@ -1,17 +1,90 @@
-class Microsoft::CallbacksController < OauthCallbackController
+class Microsoft::CallbacksController < ApplicationController
  include MicrosoftConcern

+  def show
+    @response = microsoft_client.auth_code.get_token(
+      oauth_code,
+      redirect_uri: "#{base_url}/microsoft/callback"
+    )
+
+    inbox, already_exists = find_or_create_inbox
+    ::Redis::Alfred.delete(users_data['email'].downcase)
+
+    if already_exists
+      redirect_to app_microsoft_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
+    else
+      redirect_to app_microsoft_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+    end
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    redirect_to '/'
+  end
+
  private

-  def oauth_client
-    microsoft_client
+  def oauth_code
+    params[:code]
  end

-  def provider_name
-    'microsoft'
+  def users_data
+    decoded_token = JWT.decode parsed_body[:id_token], nil, false
+    decoded_token[0]
  end

-  def imap_address
-    'outlook.office365.com'
+  def parsed_body
+    @parsed_body ||= @response.response.parsed
+  end
+
+  def account_id
+    ::Redis::Alfred.get(users_data['email'].downcase)
+  end
+
+  def account
+    @account ||= Account.find(account_id)
+  end
+
+  def find_or_create_inbox
+    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?
+
+    channel_email ||= create_microsoft_channel_with_inbox
+    update_microsoft_channel(channel_email)
+
+    # reauthorize channel, this code path only triggers when microsoft auth is successful
+    # reauthorized will also update cache keys for the associated inbox
+    channel_email.reauthorized!
+
+    [channel_email.inbox, channel_exists]
+  end
+
+  # Fallback name, for when name field is missing from users_data
+  def fallback_name
+    users_data['email'].split('@').first.parameterize.titleize
+  end
+
+  def create_microsoft_channel_with_inbox
+    ActiveRecord::Base.transaction do
+      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
+      account.inboxes.create!(
+        account: account,
+        channel: channel_email,
+        name: users_data['name'] || fallback_name
+      )
+      channel_email
+    end
+  end
+
+  def update_microsoft_channel(channel_email)
+    channel_email.update!({
+                            imap_login: users_data['email'], imap_address: 'outlook.office365.com',
+                            imap_port: '993', imap_enabled: true,
+                            provider: 'microsoft',
+                            provider_config: {
+                              access_token: parsed_body['access_token'],
+                              refresh_token: parsed_body['refresh_token'],
+                              expires_on: (Time.current.utc + 1.hour).to_s
+                            }
+                          })
  end
 end
@@ -1,108 +0,0 @@
-class OauthCallbackController < ApplicationController
-  def show
-    @response = oauth_client.auth_code.get_token(
-      oauth_code,
-      redirect_uri: "#{base_url}/#{provider_name}/callback"
-    )
-
-    handle_response
-    ::Redis::Alfred.delete(cache_key)
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e).capture_exception
-    redirect_to '/'
-  end
-
-  private
-
-  def handle_response
-    inbox, already_exists = find_or_create_inbox
-
-    if already_exists
-      redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
-    else
-      redirect_to app_email_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
-    end
-  end
-
-  def find_or_create_inbox
-    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?
-
-    channel_email ||= create_channel_with_inbox
-    update_channel(channel_email)
-
-    # reauthorize channel, this code path only triggers when microsoft auth is successful
-    # reauthorized will also update cache keys for the associated inbox
-    channel_email.reauthorized!
-
-    [channel_email.inbox, channel_exists]
-  end
-
-  def update_channel(channel_email)
-    channel_email.update!({
-                            imap_login: users_data['email'], imap_address: imap_address,
-                            imap_port: '993', imap_enabled: true,
-                            provider: provider_name,
-                            provider_config: {
-                              access_token: parsed_body['access_token'],
-                              refresh_token: parsed_body['refresh_token'],
-                              expires_on: (Time.current.utc + 1.hour).to_s
-                            }
-                          })
-  end
-
-  def provider_name
-    raise NotImplementedError
-  end
-
-  def oauth_client
-    raise NotImplementedError
-  end
-
-  def cache_key
-    "#{provider_name}::#{users_data['email'].downcase}"
-  end
-
-  def create_channel_with_inbox
-    ActiveRecord::Base.transaction do
-      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
-      account.inboxes.create!(
-        account: account,
-        channel: channel_email,
-        name: users_data['name'] || fallback_name
-      )
-      channel_email
-    end
-  end
-
-  def users_data
-    decoded_token = JWT.decode parsed_body[:id_token], nil, false
-    decoded_token[0]
-  end
-
-  def account_id
-    ::Redis::Alfred.get(cache_key)
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  # Fallback name, for when name field is missing from users_data
-  def fallback_name
-    users_data['email'].split('@').first.parameterize.titleize
-  end
-
-  def oauth_code
-    params[:code]
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-end
@@ -6,7 +6,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  layout 'portal'

  def index
-    @articles = @portal.articles.published
+    @articles = @portal.articles
    search_articles
    order_by_sort_param
    @articles.page(list_params[:page]) if list_params[:page].present?
@@ -40,7 +40,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
                       when 'email'
                         ['MAILER_INBOUND_EMAIL_DOMAIN']
                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
+                         %w[ENABLE_ACCOUNT_SIGNUP]
                       end
  end
 end
@@ -0,0 +1,11 @@
+import App from './App';
+import '../../test-matchers';
+
+describe(`App component`, () => {
+  it(`should be a component`, () => {
+    // Arrange
+    // Act
+    expect(App).toBeVueComponent('App');
+    // Assert
+  });
+});
@@ -1,3 +1,30 @@
+<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 AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
@@ -8,16 +35,14 @@ 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 {
  registerSubscription,
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
-import ReconnectService from 'dashboard/helper/ReconnectService';

 export default {
  name: 'App',
@@ -32,31 +57,25 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
-  setup() {
-    const router = useRouter();
-    const store = useStore();

-    return { router, store };
-  },
+  mixins: [rtlMixin],
+
  data() {
    return {
      showAddAccountModal: false,
      latestChatwootVersion: null,
-      reconnectService: null,
    };
  },
+
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
-      isRTL: 'accounts/isRTL',
      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
      authUIFlags: 'getAuthUIFlags',
      accountUIFlags: 'accounts/getUIFlags',
-      // currentAccountId: 'getCurrentAccountId',
+      currentAccountId: 'getCurrentAccountId',
    }),
-    currentAccountId() {
-      return this.$route.params.accountId;
-    },
    hasAccounts() {
      const { accounts = [] } = this.currentUser || {};
      return accounts.length > 0;
@@ -73,27 +92,15 @@ export default {
      }
    },
    currentAccountId() {
-      console.log('THIS CALL', this.currentAccountId);
      if (this.currentAccountId) {
        this.initializeAccount();
-      } else {
-        console.log('NO ACCOUNT ID');
      }
    },
  },
-  created() {
-    this.setLocale(window.chatwootConfig.selectedLocale);
-  },
-  async mounted() {
-    this.setLocale(window.chatwootConfig.selectedLocale);
+  mounted() {
    this.initializeColorTheme();
    this.listenToThemeChanges();
-    await this.$store.dispatch('accounts/get');
-  },
-  unmounted() {
-    if (this.reconnectService) {
-      this.reconnectService.disconnect();
-    }
+    this.setLocale(window.chatwootConfig.selectedLocale);
  },
  methods: {
    initializeColorTheme() {
@@ -104,7 +111,7 @@ export default {
      mql.onchange = e => setColorTheme(e.matches);
    },
    setLocale(locale) {
-      this.$i18n.locale = locale;
+      this.$root.$i18n.locale = locale;
    },
    async initializeAccount() {
      await this.$store.dispatch('accounts/get');
@@ -115,10 +122,9 @@ 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);

      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -132,50 +138,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>
@@ -9,13 +9,6 @@ class AccountAPI extends ApiClient {
  createAccount(data) {
    return axios.post(`${this.apiVersion}/accounts`, data);
  }
-
-  async getCacheKeys() {
-    const response = await axios.get(
-      `/api/v1/accounts/${this.accountIdFromRoute}/cache_keys`
-    );
-    return response.data.cache_keys;
-  }
 }

 export default new AccountAPI();
@@ -1,14 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class MicrosoftClient extends ApiClient {
-  constructor() {
-    super('google', { accountScoped: true });
-  }
-
-  generateAuthorization(payload) {
-    return axios.post(`${this.url}/authorization`, payload);
-  }
-}
-
-export default new MicrosoftClient();
@@ -1,9 +0,0 @@
-import ApiClient from './ApiClient';
-
-class CustomRole extends ApiClient {
-  constructor() {
-    super('custom_roles', { accountScoped: true });
-  }
-}
-
-export default new CustomRole();
@@ -15,10 +15,10 @@ describe('#enterpriseAccountAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -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();
@@ -15,10 +15,10 @@ describe('#accountAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -10,10 +10,10 @@ describe('#ContactsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -14,7 +14,7 @@ describe('#AgentAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -14,10 +14,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -44,10 +44,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -71,10 +71,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -98,10 +98,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -129,10 +129,10 @@ describe('#PortalAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -4,10 +4,10 @@ describe('#AssignableAgentsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -13,10 +13,10 @@ describe('#FBChannel', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -17,10 +17,10 @@ describe('#ContactsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -16,10 +16,10 @@ describe('#ConversationApi', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -11,10 +11,10 @@ describe('#Reports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -24,10 +24,10 @@ describe('#ConversationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -15,10 +15,10 @@ describe('#ConversationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -17,10 +17,10 @@ describe('#InboxesAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -18,10 +18,10 @@ describe('#integrationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -11,10 +11,10 @@ describe('#accountAPI', () => {
  describe('createAMeeting', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -39,10 +39,10 @@ describe('#accountAPI', () => {
  describe('addParticipantToMeeting', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -16,10 +16,10 @@ describe('#linearAPI', () => {
  describe('getTeams', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -41,10 +41,10 @@ describe('#linearAPI', () => {
  describe('getTeamEntities', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -66,10 +66,10 @@ describe('#linearAPI', () => {
  describe('createIssue', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -96,10 +96,10 @@ describe('#linearAPI', () => {
  describe('link_issue', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -125,10 +125,10 @@ describe('#linearAPI', () => {
  describe('getLinkedIssue', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -150,10 +150,10 @@ describe('#linearAPI', () => {
  describe('unlinkIssue', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -178,10 +178,10 @@ describe('#linearAPI', () => {
  describe('searchIssues', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -13,10 +13,10 @@ describe('#NotificationAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -20,10 +20,10 @@ describe('#Reports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -12,10 +12,10 @@ describe('#SLAReports API', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -16,10 +16,10 @@ describe('#TeamsAPI', () => {
  describe('API calls', () => {
    const originalAxios = window.axios;
    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
    };

    beforeEach(() => {
@@ -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,13 +31,10 @@

@import 'plugins/multiselect';
@import 'plugins/dropdown';
+@import '~shared/assets/stylesheets/ionicons';

 .tooltip {
-  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900 max-w-96;
-}
-
-#app {
-  @apply h-full w-full;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }

 .hide {
@@ -218,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;
@@ -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;
@@ -0,0 +1,30 @@
+import { action } from '@storybook/addon-actions';
+import AccordionItemComponent from './AccordionItem';
+
+export default {
+  title: 'Components/Generic/Accordion',
+  component: AccordionItemComponent,
+  argTypes: {
+    title: {
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AccordionItem: AccordionItemComponent },
+  template: `
+    <accordion-item v-bind="$props" @click="onClick">
+    This is a sample content you can pass as a slot
+    </accordion-item>
+  `,
+});
+
+export const AccordionItem = Template.bind({});
+AccordionItem.args = {
+  onClick: action('Added'),
+  title: 'Title of the accordion item',
+};
@@ -1,45 +1,11 @@
-<script setup>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
-import { defineEmits } from 'vue';
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  emoji: {
-    type: String,
-    default: '',
-  },
-  isOpen: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['toggle']);
-
-const onToggle = () => {
-  emit('toggle');
-};
-</script>
-
 <template>
  <div class="-mt-px text-sm">
    <button
      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
-      @click.stop="onToggle"
+      @click="$emit('click')"
    >
      <div class="flex justify-between mb-0.5">
-        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
        <h5
          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
        >
@@ -63,3 +29,35 @@ const onToggle = () => {
    </div>
  </div>
 </template>
+
+<script>
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+
+export default {
+  components: {
+    EmojiOrIcon,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    emoji: {
+      type: String,
+      default: '',
+    },
+    isOpen: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
@@ -1,3 +1,17 @@
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <script>
 export default {
  props: {
@@ -13,19 +27,6 @@ export default {
 };
 </script>

-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <style scoped lang="scss">
 .inactive {
  img {
@@ -21,16 +21,16 @@ const props = defineProps({
  },
 });

-const emit = defineEmits([
-  'addFolders',
-  'deleteFolders',
-  'resetFilters',
-  'basicFilterChange',
-  'filtersModal',
+const emits = defineEmits([
+  'add-folders',
+  'delete-folders',
+  'reset-filters',
+  'basic-filter-change',
+  'filters-modal',
 ]);

 const onBasicFilterChange = (value, type) => {
-  emit('basicFilterChange', value, type);
+  emits('basic-filter-change', value, type);
 };

 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -61,14 +61,14 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      </span>
    </div>
    <div class="flex items-center gap-1">
-      <template v-if="hasAppliedFilters && !hasActiveFolders">
+      <div v-if="hasAppliedFilters && !hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
          size="tiny"
          variant="smooth"
          color-scheme="secondary"
          icon="save"
-          @click="emit('addFolders')"
+          @click="emits('add-folders')"
        />
        <woot-button
          v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,17 +76,17 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="alert"
          icon="dismiss-circle"
-          @click="emit('resetFilters')"
+          @click="emits('reset-filters')"
        />
-      </template>
-      <template v-if="hasActiveFolders">
+      </div>
+      <div v-if="hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
          size="tiny"
          variant="smooth"
          color-scheme="secondary"
          icon="edit"
-          @click="emit('filtersModal')"
+          @click="emits('filters-modal')"
        />
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,9 +94,9 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="alert"
          icon="delete"
-          @click="emit('deleteFolders')"
+          @click="emits('delete-folders')"
        />
-      </template>
+      </div>
      <woot-button
        v-else
        v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
@@ -104,11 +104,11 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
        color-scheme="secondary"
        icon="filter"
        size="tiny"
-        @click="emit('filtersModal')"
+        @click="emits('filters-modal')"
      />
-      <ConversationBasicFilter
+      <conversation-basic-filter
        v-if="!hasAppliedFiltersOrActiveFolders"
-        @change-filter="onBasicFilterChange"
+        @changeFilter="onBasicFilterChange"
      />
    </div>
  </div>
@@ -1,11 +1,34 @@
+<template>
+  <div class="code--container">
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
+    <highlightjs v-if="script" :language="lang" :code="script" />
+  </div>
+</template>
+
 <script>
 import 'highlight.js/styles/default.css';
-import 'highlight.js/lib/common';
-
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';

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

-<template>
-  <div class="relative text-left">
-    <div class="top-1.5 absolute right-1.5 flex items-center gap-1">
-      <form
-        v-if="enableCodePen"
-        class="flex items-center"
-        action="https://codepen.io/pen/define"
-        method="POST"
-        target="_blank"
-      >
-        <input type="hidden" name="data" :value="codepenScriptValue" />
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
-      </form>
-      <button type="button" class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
-    </div>
-    <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
-  </div>
-</template>
+<style lang="scss" scoped>
+.code--container {
+  position: relative;
+  text-align: left;
+
+  .code--action-area {
+    top: var(--space-small);
+    position: absolute;
+    right: var(--space-small);
+  }
+
+  .code--codeopen-form {
+    display: inline-block;
+  }
+}
+</style>
@@ -1,3 +1,26 @@
+<template>
+  <conversation-card
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    :enable-context-menu="true"
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @assign-priority="assignPriority"
+  />
+</template>
+
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -14,7 +37,6 @@ export default {
    'toggleContextMenu',
    'markAsUnread',
    'assignPriority',
-    'isConversationSelected',
  ],
  props: {
    source: {
@@ -37,6 +59,10 @@ export default {
      type: [String, Number],
      default: 0,
    },
+    isConversationSelected: {
+      type: Function,
+      default: () => {},
+    },
    showAssignee: {
      type: Boolean,
      default: false,
@@ -44,26 +70,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <ConversationCard
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    enable-context-menu
-    @select-conversation="selectConversation"
-    @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @assign-priority="assignPriority"
-  />
-</template>
@@ -1,13 +1,147 @@
+<template>
+  <div class="py-3 px-4">
+    <div class="flex items-center mb-1">
+      <h4 class="text-sm flex items-center m-0 w-full error">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
+          <input
+            v-model="editedValue"
+            class="!my-0 mr-2 ml-0"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
+          >
+            {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end w-4"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="mb-2 w-full flex items-center">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            autofocus="true"
+            :class="{ error: $v.editedValue.$error }"
+            @blur="$v.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div>
+            <woot-button
+              size="small"
+              icon="checkmark"
+              class="rounded-l-none rtl:rounded-r-none"
+              @click="onUpdate"
+            />
+          </div>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="hrefURL"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ urlValue }}
+        </a>
+        <p
+          v-else
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+        >
+          {{ displayValue || '---' }}
+        </p>
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="clipboard"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onCopy"
+          />
+          <woot-button
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="edit"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <multiselect-dropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from '@vuelidate/validators';
+import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
-import { getRegexp } from 'shared/helpers/Validators';
-import { useVuelidate } from '@vuelidate/core';
-import { emitter } from 'shared/helpers/mitt';
+import customAttributeMixin from '../mixins/customAttributeMixin';

 const DATE_FORMAT = 'yyyy-MM-dd';

@@ -16,6 +150,7 @@ export default {
    MultiselectDropdown,
    HelperTextPopup,
  },
+  mixins: [customAttributeMixin],
  props: {
    label: { type: String, required: true },
    description: { type: String, default: '' },
@@ -28,13 +163,10 @@ export default {
      default: null,
    },
    regexCue: { type: String, default: null },
+    regexEnabled: { type: Boolean, default: false },
    attributeKey: { type: String, required: true },
    contactId: { type: Number, default: null },
  },
-  emits: ['update', 'delete', 'copy'],
-  setup() {
-    return { v$: useVuelidate() };
-  },
  data() {
    return {
      isEditing: false,
@@ -93,13 +225,13 @@ export default {
      return this.isAttributeTypeLink ? 'url' : this.attributeType;
    },
    shouldShowErrorMessage() {
-      return this.v$.editedValue.$error;
+      return this.$v.editedValue.$error;
    },
    errorMessage() {
-      if (this.v$.editedValue.url) {
+      if (this.$v.editedValue.url) {
        return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
      }
-      if (!this.v$.editedValue.regexValidation) {
+      if (!this.$v.editedValue.regexValidation) {
        return this.regexCue
          ? this.regexCue
          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -114,7 +246,7 @@ export default {
    },
    contactId() {
      // Fix to solve validation not resetting when contactId changes in contact page
-      this.v$.$reset();
+      this.$v.$reset();
    },
  },

@@ -129,7 +261,8 @@ export default {
        required,
        regexValidation: value => {
          return !(
-            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
+            this.attributeRegex &&
+            !this.getRegexp(this.attributeRegex).test(value)
          );
        },
      },
@@ -137,10 +270,10 @@ export default {
  },
  mounted() {
    this.editedValue = this.formattedValue;
-    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    this.$emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
-  unmounted() {
-    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+  destroyed() {
+    this.$emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
    onFocusAttribute(focusAttributeKey) {
@@ -154,7 +287,7 @@ export default {
      }
    },
    onClickAway() {
-      this.v$.$reset();
+      this.$v.$reset();
      this.isEditing = false;
    },
    onEdit() {
@@ -174,8 +307,8 @@ export default {
        this.attributeType === 'date'
          ? parseISO(this.editedValue)
          : this.editedValue;
-      this.v$.$touch();
-      if (this.v$.$invalid) {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
        return;
      }
      this.isEditing = false;
@@ -183,7 +316,7 @@ export default {
    },
    onDelete() {
      this.isEditing = false;
-      this.v$.$reset();
+      this.$v.$reset();
      this.$emit('delete', this.attributeKey);
    },
    onCopy() {
@@ -193,152 +326,14 @@ export default {
 };
 </script>

-<template>
-  <div class="px-4 py-3">
-    <div class="flex items-center mb-1">
-      <h4 class="flex items-center w-full m-0 text-sm error">
-        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
-          <input
-            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
-            type="checkbox"
-            @change="onUpdate"
-          />
-        </div>
-        <div class="flex items-center justify-between w-full">
-          <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
-            :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
-          >
-            {{ label }}
-            <HelperTextPopup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
-          </span>
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end w-4"
-            @click="onDelete"
-          />
-        </div>
-      </h4>
-    </div>
-    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="flex items-center w-full mb-2">
-          <input
-            ref="inputfield"
-            v-model="editedValue"
-            :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
-            autofocus="true"
-            :class="{ error: v$.editedValue.$error }"
-            @blur="v$.editedValue.$touch"
-            @keyup.enter="onUpdate"
-          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
-          </div>
-        </div>
-        <span
-          v-if="shouldShowErrorMessage"
-          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
-        >
-          {{ errorMessage }}
-        </span>
-      </div>
-      <div
-        v-show="!isEditing"
-        class="flex group"
-        :class="{ 'is-editable': showActions }"
-      >
-        <a
-          v-if="isAttributeTypeLink"
-          :href="hrefURL"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ urlValue }}
-        </a>
-        <p
-          v-else
-          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
-        >
-          {{ displayValue || '---' }}
-        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onCopy"
-          />
-          <woot-button
-            v-if="showActions"
-            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-            variant="link"
-            size="small"
-            color-scheme="secondary"
-            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
-            @click="onEdit"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="isAttributeTypeList">
-      <MultiselectDropdown
-        :options="listOptions"
-        :selected-item="selectedItem"
-        :has-thumbnail="false"
-        :multiselector-placeholder="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
-        "
-        :input-placeholder="
-          $t(
-            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
-          )
-        "
-        @select="onUpdateListValue"
-      />
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 ::v-deep {
  .selector-wrap {
    @apply m-0 top-1;
-
    .selector-name {
      @apply ml-0;
    }
  }
-
  .name {
    @apply ml-0;
  }
@@ -1,26 +0,0 @@
-<script setup>
-import { useStoreGetters } from 'dashboard/composables/store';
-import { computed } from 'vue';
-const props = defineProps({
-  showOnCustomBrandedInstance: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const getters = useStoreGetters();
-
-const isACustomBrandedInstance =
-  getters['globalConfig/isACustomBrandedInstance'];
-
-const shouldShowContent = computed(
-  () => props.showOnCustomBrandedInstance || !isACustomBrandedInstance.value
-);
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <div v-if="shouldShowContent">
-    <slot />
-  </div>
-</template>
@@ -1,11 +1,35 @@
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <date-picker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <script>
-import DatePicker from 'vue-datepicker-next';
+import DatePicker from 'vue2-datepicker';

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

  data() {
    return {
@@ -23,7 +47,7 @@ export default {
      this.$emit('close');
    },
    chooseTime() {
-      this.$emit('chooseTime', this.snoozeTime);
+      this.$emit('choose-time', this.snoozeTime);
    },
    disabledDate(date) {
      // Disable all the previous dates
@@ -40,31 +64,8 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form
-      class="modal-content w-full pt-2 px-5 pb-6"
-      @submit.prevent="chooseTime"
-    >
-      <DatePicker
-        v-model:value="snoozeTime"
-        type="datetime"
-        inline
-        input-class="mx-input reset-base"
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-      />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
+<style lang="scss" scoped>
+.modal-content {
+  @apply pt-2 px-5 pb-6;
+}
+</style>
@@ -1,16 +1,3 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
 <template>
  <div class="flex flex-col items-start w-full gap-6">
    <div class="flex flex-col w-full gap-4">
@@ -29,3 +16,16 @@ defineProps({
    </div>
  </div>
 </template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
@@ -1,28 +1,34 @@
-<script setup>
-import { ref, defineEmits } from 'vue';
-import { useIntersectionObserver } from '@vueuse/core';
-
-const { options } = defineProps({
-  options: {
-    type: Object,
-    default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
-  },
-});
-
-const emit = defineEmits(['observed']);
-const observedElement = ref('');
-
-useIntersectionObserver(
-  observedElement,
-  ([{ isIntersecting }]) => {
-    if (isIntersecting) {
-      emit('observed');
-    }
-  },
-  options
-);
-</script>
-
 <template>
  <div ref="observedElement" class="h-6 w-full" />
 </template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+    },
+  },
+  mounted() {
+    this.intersectionObserver = null;
+    this.registerInfiniteLoader();
+  },
+  beforeDestroy() {
+    this.unobserveInfiniteLoadObserver();
+  },
+  methods: {
+    registerInfiniteLoader() {
+      this.intersectionObserver = new IntersectionObserver(entries => {
+        if (entries && entries[0].isIntersecting) {
+          this.$emit('observed');
+        }
+      }, this.options);
+      this.intersectionObserver.observe(this.$refs.observedElement);
+    },
+    unobserveInfiniteLoadObserver() {
+      this.intersectionObserver.unobserve(this.$refs.observedElement);
+    },
+  },
+};
+</script>
@@ -1,33 +1,3 @@
-<script>
-import 'highlight.js/styles/default.css';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
-
-export default {
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      masked: true,
-    };
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-    toggleMasked() {
-      this.masked = !this.masked;
-    },
-  },
-};
-</script>
-
 <template>
  <div class="text--container">
    <woot-button size="small" class="button--text" @click="onCopy">
@@ -45,6 +15,37 @@ export default {
  </div>
 </template>

+<script>
+import 'highlight.js/styles/default.css';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      masked: true,
+    };
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+    },
+    toggleMasked() {
+      this.masked = !this.masked;
+    },
+  },
+};
+</script>
+
 <style lang="scss" scoped>
 .text--container {
  position: relative;
@@ -1,71 +1,3 @@
-<script setup>
-// [TODO] Use Teleport to move the modal to the end of the body
-import { ref, computed, defineEmits, onMounted } from 'vue';
-import { useEventListener } from '@vueuse/core';
-
-const { modalType, closeOnBackdropClick, onClose } = defineProps({
-  closeOnBackdropClick: { type: Boolean, default: true },
-  showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, required: true },
-  fullWidth: { type: Boolean, default: false },
-  modalType: { type: String, default: 'centered' },
-  size: { type: String, default: '' },
-});
-
-const emit = defineEmits(['close']);
-const show = defineModel('show', { type: Boolean, default: false });
-
-const modalClassName = computed(() => {
-  const modalClassNameMap = {
-    centered: '',
-    'right-aligned': 'right-aligned',
-  };
-
-  return `modal-mask skip-context-menu ${modalClassNameMap[modalType] || ''}`;
-});
-
-// [TODO] Revisit this logic to use outside click directive
-const mousedDownOnBackdrop = ref(false);
-
-const handleMouseDown = () => {
-  mousedDownOnBackdrop.value = true;
-};
-
-const close = () => {
-  show.value = false;
-  emit('close');
-  onClose();
-};
-
-const onMouseUp = () => {
-  if (mousedDownOnBackdrop.value) {
-    mousedDownOnBackdrop.value = false;
-    if (closeOnBackdropClick) {
-      close();
-    }
-  }
-};
-
-const onKeydown = e => {
-  if (show.value && e.code === 'Escape') {
-    close();
-    e.stopPropagation();
-  }
-};
-
-useEventListener(document.body, 'mouseup', onMouseUp);
-useEventListener(document, 'keydown', onKeydown);
-
-onMounted(() => {
-  if (onClose && typeof onClose === 'function') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."
-    );
-  }
-});
-</script>
-
 <template>
  <transition name="modal-fade">
    <div
@@ -75,8 +7,8 @@ onMounted(() => {
      @mousedown="handleMouseDown"
    >
      <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
          'rounded-xl w-[37.5rem]': !fullWidth,
          'items-center rounded-none flex h-full justify-center w-full':
            fullWidth,
@@ -99,6 +31,83 @@ onMounted(() => {
  </transition>
 </template>

+<script>
+export default {
+  props: {
+    closeOnBackdropClick: {
+      type: Boolean,
+      default: true,
+    },
+    show: Boolean,
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    onClose: {
+      type: Function,
+      required: true,
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false,
+    },
+    modalType: {
+      type: String,
+      default: 'centered',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      mousedDownOnBackdrop: false,
+    };
+  },
+  computed: {
+    modalClassName() {
+      const modalClassNameMap = {
+        centered: '',
+        'right-aligned': 'right-aligned',
+      };
+
+      return `modal-mask skip-context-menu ${
+        modalClassNameMap[this.modalType] || ''
+      }`;
+    },
+  },
+  mounted() {
+    document.addEventListener('keydown', e => {
+      if (this.show && e.code === 'Escape') {
+        this.onClose();
+      }
+    });
+
+    document.body.addEventListener('mouseup', this.onMouseUp);
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.onMouseUp);
+  },
+  methods: {
+    handleMouseDown() {
+      this.mousedDownOnBackdrop = true;
+    },
+    close() {
+      this.onClose();
+    },
+    onMouseUp() {
+      if (this.mousedDownOnBackdrop) {
+        this.mousedDownOnBackdrop = false;
+        if (this.closeOnBackdropClick) {
+          this.onClose();
+        }
+      }
+    },
+  },
+};
+</script>
+
 <style lang="scss">
 .modal-mask {
  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
@@ -1,3 +1,29 @@
+<template>
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
+    <img v-if="headerImage" :src="headerImage" alt="No image" />
+    <h2
+      ref="modalHeaderTitle"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
+    >
+      {{ headerTitle }}
+    </h2>
+    <p
+      v-if="headerContent"
+      ref="modalHeaderContent"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
+    >
+      {{ headerContent }}
+      <span
+        v-if="headerContentValue"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
+      >
+        {{ headerContentValue }}
+      </span>
+    </p>
+    <slot />
+  </div>
+</template>
+
 <script>
 export default {
  props: {
@@ -20,31 +46,3 @@ export default {
  },
 };
 </script>
-
-<!-- eslint-disable vue/no-unused-refs -->
-<!-- Added ref for writing specs -->
-<template>
-  <div class="flex flex-col items-start px-8 pt-8 pb-0">
-    <img v-if="headerImage" :src="headerImage" alt="No image" />
-    <h2
-      data-test-id="modal-header-title"
-      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
-    >
-      {{ headerTitle }}
-    </h2>
-    <p
-      v-if="headerContent"
-      data-test-id="modal-header-content"
-      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
-    >
-      {{ headerContent }}
-      <span
-        v-if="headerContentValue"
-        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
-      >
-        {{ headerContentValue }}
-      </span>
-    </p>
-    <slot />
-  </div>
-</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Shivam MishraandGitHub	b9e32791a4	Merge branch 'develop' into feat/update-editor	2024-06-03 13:04:37 +05:30
Shivam Mishra GitHub Muhsin Keloth	a7945384e0	style: no need for assignment Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2024-06-03 12:50:58 +05:30
Shivam MishraandGitHub	20c4b70e8d	Merge branch 'develop' into feat/update-editor	2024-05-31 12:26:40 +05:30
Shivam Mishra	c4e636fce0	test: unit tests for useSpecialContent	2024-05-09 18:43:58 +05:30
Shivam Mishra	8ac095dea5	chore: add comments to composable	2024-05-09 18:42:46 +05:30
Shivam Mishra	ecb28383c1	refactor: move useSpecialContent to a composable	2024-05-09 18:28:40 +05:30
Shivam Mishra	6129cb5f80	feat: activate methods	2024-05-09 18:08:57 +05:30
Shivam Mishra	24a65fc483	refactor: editor.vue, make it simpler	2024-05-09 17:50:52 +05:30
Shivam Mishra	55b6e5fbf6	refactor: move create state to editorHelper	2024-05-09 17:20:14 +05:30
@@ -1 +1 @@
 .3.3
 .2.2
@@ -1 +1 @@
 .13.0
 .3.1
@@ -1 +1 @@
 .0.0
 .7.0