chore: source account id directly

This reverts commit 9101e1e221.

.circleci/config.yml

@@ -1,84 +1,87 @@
-# Ruby CircleCI 2.0 configuration file
+version: 2.1
-#
+orbs:
-# Check https://circleci.com/docs/2.0/language-ruby/ for more details
+  node: circleci/node@6.1.0
-#
+
-version: 2
 defaults: &defaults
   working_directory: ~/build
-  docker:
+  machine:
-    # specify the version you desire here
+    image: ubuntu-2204:2024.05.1
-    - image: cimg/ruby:3.3.3-browsers
-
-    # Specify service dependencies here if necessary
-    # CircleCI maintains a library of pre-built images
-    # documented at https://circleci.com/docs/2.0/circleci-images/
-    - image: cimg/postgres:15.3
-    - image: cimg/redis:6.2.6
-  environment:
-    - RAILS_LOG_TO_STDOUT: false
-    - COVERAGE: true
-    - LOG_LEVEL: warn
-  parallelism: 4
   resource_class: large
+  environment:
+    RAILS_LOG_TO_STDOUT: false
+    COVERAGE: true
+    LOG_LEVEL: warn
+  parallelism: 4
 
 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: Configure Bundler
+          name: Install System Dependencies
           command: |
-            echo 'export BUNDLER_VERSION=$(cat Gemfile.lock | tail -1 | tr -d " ")' >> $BASH_ENV
+            sudo apt-get update
-            source $BASH_ENV
+            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
             gem install bundler
 
       - run:
-          name: Which bundler?
+          name: Install Application Dependencies
-          command: bundle -v
-
-      - run:
-          name: Swap node versions
           command: |
-            set +e
+            source ~/.rvm/scripts/rvm
-            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
+            bundle install
-            export NVM_DIR="$HOME/.nvm"
+            # pnpm install
-            [ -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
@@ -86,12 +89,8 @@ 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
 
-      # verify swagger specification
+      # Swagger verification
       - run:
           name: Verify swagger API specification
           command: |
@@ -104,45 +103,62 @@ 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
 
-      # Database setup
+      # we remove the FRONTED_URL from the .env before running the tests
-      - run: bundle exec rake db:create
+      - run:
-      - run: bundle exec rake db:schema:load
+          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
+
+      # 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
 
-      # - run:
+      # ESLint linting
-      #     name: Brakeman
-      #     command: bundle exec brakeman
-
       - run:
           name: eslint
-          command: yarn run eslint
+          command: pnpm run eslint
 
-      # Run frontend tests
       - run:
           name: Run frontend tests
           command: |
-            mkdir -p ~/tmp/test-results/frontend_specs
+            mkdir -p ~/build/coverage/frontend
             ~/tmp/cc-test-reporter before-build
-            yarn test:coverage
+            pnpm run test:coverage
-      - run:
-          name: Code Climate Test Coverage
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
 
-      # Run rails tests
+      - run:
+          name: Code Climate Test Coverage (Frontend)
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+
+      # Run backend tests
       - run:
           name: Run backend tests
           command: |
             mkdir -p ~/tmp/test-results/rspec
             mkdir -p ~/tmp/test-artifacts
-            mkdir -p coverage
+            mkdir -p ~/build/coverage/backend
             ~/tmp/cc-test-reporter before-build
             TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
             bundle exec rspec --format progress \
@@ -150,54 +166,18 @@ jobs:
                               --out ~/tmp/test-results/rspec.xml \
                               -- ${TESTFILES}
           no_output_timeout: 30m
+
       - run:
-          name: Code Climate Test Coverage
+          name: Code Climate Test Coverage (Backend)
           command: |
-            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "coverage/codeclimate.$CIRCLE_NODE_INDEX.json"
+            ~/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
 
       - persist_to_workspace:
-          root: coverage
+          root: ~/build
           paths:
-            - codeclimate.*.json
+            - coverage
-      # collect reports
-      - store_test_results:
-          path: ~/tmp/test-results
-      - store_artifacts:
-          path: ~/tmp/test-artifacts
-      - store_artifacts:
-          path: log
-
-  upload-coverage:
-    working_directory: ~/build
-    docker:
-      # specify the version you desire here
-      - image: circleci/ruby:3.0.2-node-browsers
-    environment:
-      - CC_TEST_REPORTER_ID: caf26a895e937974a90860cfadfded20891cfd1373a5aaafb3f67406ab9d433f
-    steps:
-      - attach_workspace:
-          at: ~/build
-      - run:
-          name: Download cc-test-reporter
-          command: |
-            mkdir -p ~/tmp
-            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
-            chmod +x ~/tmp/cc-test-reporter
-      - persist_to_workspace:
-          root: ~/tmp
-          paths:
-            - cc-test-reporter
-      - run:
-          name: Upload coverage results to Code Climate
-          command: |
-            ~/tmp/cc-test-reporter sum-coverage --output - codeclimate.*.json |  ~/tmp/cc-test-reporter upload-coverage --debug --input -
-
-workflows:
-  version: 2
-
-  commit:
-    jobs:
-      - build
-      - upload-coverage:
-          requires:
-            - build

.circleci/setup_chatwoot.sql

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

.codeclimate.yml

@@ -27,7 +27,8 @@ checks:
       threshold: 50
 exclude_patterns:
   - 'spec/'
-  - '**/specs/'
+  - '**/specs/**/**'
+  - '**/spec/**/**'
   - 'db/*'
   - 'bin/**/*'
   - 'db/**/*'

.eslintrc.js

@@ -1,6 +1,23 @@
 module.exports = {
-  extends: ['airbnb-base/legacy', 'prettier', 'plugin:vue/recommended'],
+  extends: [
+    'airbnb-base/legacy',
+    'prettier',
+    'plugin:vue/vue3-recommended',
+    'plugin:vitest-globals/recommended',
+  ],
+  overrides: [
+    {
+      files: ['**/*.spec.{j,t}s?(x)'],
+      env: {
+        'vitest-globals/env': true,
+      },
+    },
+  ],
   plugins: ['html', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',
@@ -206,5 +223,11 @@ module.exports = {
   globals: {
     bus: true,
     vi: true,
+    // beforeEach: true,
+    // afterEach: true,
+    // test: true,
+    // describe: true,
+    // it: true,
+    // expect: true,
   },
 };

.github/workflows/frontend-fe.yml

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

.github/workflows/run_foss_spec.yml

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

.github/workflows/run_response_bot_spec.yml

@@ -49,13 +49,17 @@ 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: yarn
+        cache: pnpm
 
-    - name: yarn
+    - name: pnpm
-      run: yarn install
+      run: pnpm install
 
     - name: Create database
       run: bundle exec rake db:create

.github/workflows/size-limit.yml

@@ -19,23 +19,33 @@ 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: 'yarn'
+          cache: 'pnpm'
 
-      - name: yarn
+      - name: pnpm
-        run: yarn install
+        run: pnpm 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:
-          NODE_OPTIONS: --openssl-legacy-provider
+          RAILS_ENV: production
 
       - name: Size Check
-        run: yarn run size
+        run: pnpm run size
+
+

VERSION_CW

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

VERSION_CWCTL

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

app/javascript/dashboard/App.vue

@@ -52,8 +52,11 @@ export default {
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
-      currentAccountId: 'getCurrentAccountId',
+      // currentAccountId: 'getCurrentAccountId',
     }),
+    currentAccountId() {
+      return this.$route.params.accountId;
+    },
     hasAccounts() {
       const { accounts = [] } = this.currentUser || {};
       return accounts.length > 0;
@@ -70,15 +73,22 @@ export default {
       }
     },
     currentAccountId() {
+      console.log('THIS CALL', this.currentAccountId);
       if (this.currentAccountId) {
         this.initializeAccount();
+      } else {
+        console.log('NO ACCOUNT ID');
       }
     },
   },
-  mounted() {
+  created() {
+    this.setLocale(window.chatwootConfig.selectedLocale);
+  },
+  async mounted() {
+    this.setLocale(window.chatwootConfig.selectedLocale);
     this.initializeColorTheme();
     this.listenToThemeChanges();
-    this.setLocale(window.chatwootConfig.selectedLocale);
+    await this.$store.dispatch('accounts/get');
   },
   unmounted() {
     if (this.reconnectService) {
@@ -94,7 +104,7 @@ export default {
       mql.onchange = e => setColorTheme(e.matches);
     },
     setLocale(locale) {
-      this.$root.$i18n.locale = locale;
+      this.$i18n.locale = locale;
     },
     async initializeAccount() {
       await this.$store.dispatch('accounts/get');

app/javascript/dashboard/components/ChatList.vue

@@ -537,12 +537,6 @@ function loadMoreConversations() {
     return;
   }
 
-  // Increment the current page
-  store.dispatch('conversationPage/setCurrentPage', {
-    filter: currentPageFilterKey.value,
-    page: currentFiltersPage.value + 1,
-  });
-
   if (!hasAppliedFiltersOrActiveFolders.value) {
     fetchConversations();
   } else if (hasActiveFolders.value) {
@@ -769,11 +763,11 @@ watch(conversationFilters, (newVal, oldVal) => {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
-      @addFolders="onClickOpenAddFoldersModal"
+      @add-folders="onClickOpenAddFoldersModal"
-      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filtersModal="onToggleAdvanceFiltersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
-      @resetFilters="resetAndFetchData"
+      @reset-filters="resetAndFetchData"
-      @basicFilterChange="onBasicFilterChange"
+      @basic-filter-change="onBasicFilterChange"
     />
 
     <AddCustomViews
@@ -785,7 +779,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
     <DeleteCustomViews
       v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
+      v-model:show="showDeleteFoldersModal"
       :active-custom-view="activeFolder"
       :custom-views-id="foldersId"
       :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
@@ -796,7 +790,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       v-if="!hasAppliedFiltersOrActiveFolders"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
-      @chatTabChange="updateAssigneeTab"
+      @chat-tab-change="updateAssigneeTab"
     />
 
     <p
@@ -813,11 +807,11 @@ watch(conversationFilters, (newVal, oldVal) => {
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @selectAllConversations="toggleSelectAll"
+      @select-all-conversations="toggleSelectAll"
-      @assignAgent="onAssignAgent"
+      @assign-agent="onAssignAgent"
-      @updateConversations="onUpdateConversations"
+      @update-conversations="onUpdateConversations"
-      @assignLabels="onAssignLabels"
+      @assign-labels="onAssignLabels"
-      @assignTeam="onAssignTeamsForBulk"
+      @assign-team="onAssignTeamsForBulk"
     />
     <div
       ref="conversationListRef"
@@ -854,8 +848,8 @@ watch(conversationFilters, (newVal, oldVal) => {
               :folders-id="foldersId"
               :conversation-type="conversationType"
               :show-assignee="showAssigneeInConversationCard"
-              @selectConversation="selectConversation"
+              @select-conversation="selectConversation"
-              @deSelectConversation="deSelectConversation"
+              @de-select-conversation="deSelectConversation"
             />
           </DynamicScrollerItem>
         </template>
@@ -878,7 +872,7 @@ watch(conversationFilters, (newVal, oldVal) => {
       </DynamicScroller>
     </div>
     <woot-modal
-      :show.sync="showAdvancedFilters"
+      v-model:show="showAdvancedFilters"
       :on-close="closeAdvanceFiltersModal"
       size="medium"
     >
@@ -889,8 +883,8 @@ watch(conversationFilters, (newVal, oldVal) => {
         :active-folder-name="activeFolderName"
         :on-close="closeAdvanceFiltersModal"
         :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
+        @apply-filter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
+        @update-folder="onUpdateSavedFilter"
       />
     </woot-modal>
   </div>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -108,7 +108,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
       />
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
-        @changeFilter="onBasicFilterChange"
+        @change-filter="onBasicFilterChange"
       />
     </div>
   </div>

app/javascript/dashboard/components/ConversationItem.vue

@@ -56,14 +56,14 @@ export default {
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
     enable-context-menu
-    @selectConversation="selectConversation"
+    @select-conversation="selectConversation"
-    @deSelectConversation="deSelectConversation"
+    @de-select-conversation="deSelectConversation"
-    @assignAgent="assignAgent"
+    @assign-agent="assignAgent"
-    @assignTeam="assignTeam"
+    @assign-team="assignTeam"
-    @assignLabel="assignLabels"
+    @assign-label="assignLabels"
-    @updateConversationStatus="updateConversationStatus"
+    @update-conversation-status="updateConversationStatus"
-    @contextMenuToggle="toggleContextMenu"
+    @context-menu-toggle="toggleContextMenu"
-    @markAsUnread="markAsUnread"
+    @mark-as-unread="markAsUnread"
-    @assignPriority="assignPriority"
+    @assign-priority="assignPriority"
   />
 </template>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -31,6 +31,7 @@ export default {
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  emits: ['update', 'delete', 'copy'],
   setup() {
     return { v$: useVuelidate() };
   },
@@ -138,7 +139,7 @@ export default {
     this.editedValue = this.formattedValue;
     emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
   },
-  destroyed() {
+  unmounted() {
     emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
   },
   methods: {

app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue

@@ -18,6 +18,7 @@ const shouldShowContent = computed(
 );
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div v-if="shouldShowContent">
     <slot />

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -5,6 +5,7 @@ export default {
   components: {
     DatePicker,
   },
+  emits: ['close', 'chooseTime'],
 
   data() {
     return {
@@ -43,15 +44,18 @@ export default {
 <template>
   <div class="flex flex-col">
     <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
+    <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"
-        :popup-style="{ width: '100%' }"
       />
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button variant="clear" @click.prevent="onClose">
@@ -64,9 +68,3 @@ export default {
     </form>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.modal-content {
-  @apply pt-2 px-5 pb-6;
-}
-</style>

app/javascript/dashboard/components/Modal.vue

@@ -3,9 +3,8 @@
 import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
-const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
+const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
-  show: Boolean,
   showCloseButton: { type: Boolean, default: true },
   onClose: { type: Function, required: true },
   fullWidth: { type: Boolean, default: false },
@@ -14,6 +13,7 @@ const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
 });
 
 const emit = defineEmits(['close']);
+const show = defineModel('show', { type: Boolean, default: false });
 
 const modalClassName = computed(() => {
   const modalClassNameMap = {
@@ -32,6 +32,7 @@ const handleMouseDown = () => {
 };
 
 const close = () => {
+  show.value = false;
   emit('close');
   onClose();
 };
@@ -40,14 +41,14 @@ const onMouseUp = () => {
   if (mousedDownOnBackdrop.value) {
     mousedDownOnBackdrop.value = false;
     if (closeOnBackdropClick) {
-      onClose();
+      close();
     }
   }
 };
 
 const onKeydown = e => {
-  if (show && e.code === 'Escape') {
+  if (show.value && e.code === 'Escape') {
-    onClose();
+    close();
     e.stopPropagation();
   }
 };

app/javascript/dashboard/components/ModalHeader.vue

@@ -27,14 +27,14 @@ export default {
   <div class="flex flex-col items-start px-8 pt-8 pb-0">
     <img v-if="headerImage" :src="headerImage" alt="No image" />
     <h2
-      ref="modalHeaderTitle"
+      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"
-      ref="modalHeaderContent"
+      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 }}

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -79,6 +79,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Banner
     v-if="shouldShowBanner"
@@ -86,6 +87,6 @@ export default {
     :banner-message="bannerMessage"
     :action-button-label="actionButtonMessage"
     has-action-button
-    @primaryAction="routeToBilling"
+    @primary-action="routeToBilling"
   />
 </template>

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

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

app/javascript/dashboard/components/app/UpdateBanner.vue

@@ -67,6 +67,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Banner
     v-if="shouldShowBanner"

app/javascript/dashboard/components/app/UpgradeBanner.vue

@@ -81,6 +81,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Banner
     v-if="shouldShowBanner"
@@ -88,6 +89,6 @@ export default {
     :banner-message="bannerMessage"
     :action-button-label="actionButtonMessage"
     has-action-button
-    @primaryAction="routeToBilling"
+    @primary-action="routeToBilling"
   />
 </template>

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -105,7 +105,7 @@ export default {
         size="small"
         :color-scheme="status.disabled ? '' : 'secondary'"
         :variant="status.disabled ? 'smooth' : 'clear'"
-        class-names="status-change--dropdown-button"
+        class="status-change--dropdown-button"
         @click="changeAvailabilityStatus(status.value)"
       >
         <AvailabilityStatusBadge :status="status.value" />

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -22,11 +22,14 @@ export default {
       type: Boolean,
       default: true,
     },
-    hasBanner: {
-      type: Boolean,
-      default: false,
-    },
   },
+  emits: [
+    'toggleAccountModal',
+    'showAddLabelPopup',
+    'openNotificationPanel',
+    'closeKeyShortcutModal',
+    'openKeyShortcutModal',
+  ],
   setup(props, { emit }) {
     const route = useRoute();
     const router = useRouter();
@@ -117,6 +120,7 @@ export default {
         this.currentUser,
         this.accountId
       );
+
       const menuItems = this.sideMenuConfig.primaryMenu;
       return menuItems.filter(menuItem => {
         const isAvailableForTheUser = hasPermissions(
@@ -127,6 +131,7 @@ export default {
         if (!isAvailableForTheUser) {
           return false;
         }
+
         if (
           menuItem.alwaysVisibleOnChatwootInstances &&
           !this.isACustomBrandedInstance
@@ -134,10 +139,12 @@ export default {
           return true;
         }
         if (menuItem.featureFlag) {
-          return this.isFeatureEnabledonAccount(
+          const isEnabled = this.isFeatureEnabledonAccount(
             this.accountId,
             menuItem.featureFlag
           );
+
+          return isEnabled;
         }
         return true;
       });
@@ -217,9 +224,9 @@ export default {
       :account-id="accountId"
       :menu-items="primaryMenuItems"
       :active-menu-item="activePrimaryMenu.key"
-      @toggleAccounts="toggleAccountModal"
+      @toggle-accounts="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @openNotificationPanel="openNotificationPanel"
+      @open-notification-panel="openNotificationPanel"
     />
     <SecondarySidebar
       v-if="hasSecondarySidebar"
@@ -231,8 +238,8 @@ export default {
       :menu-config="activeSecondaryMenu"
       :current-user="currentUser"
       :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @addLabel="showAddLabelPopup"
+      @add-label="showAddLabelPopup"
-      @toggleAccounts="toggleAccountModal"
+      @toggle-accounts="toggleAccountModal"
     />
   </aside>
 </template>

app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  emits: ['toggleAccounts'],
   data() {
     return { showSwitchButton: false };
   },
@@ -25,6 +26,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="showShowCurrentAccountContext"

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -7,7 +7,7 @@ export default {
       default: true,
     },
   },
-
+  emits: ['closeAccountModal', 'showCreateAccountModal'],
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -15,6 +15,7 @@ export default {
       default: true,
     },
   },
+  emits: ['closeAccountCreateModal'],
   setup() {
     return { v$: useVuelidate() };
   },

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -6,6 +6,7 @@ export default {
   components: {
     Thumbnail,
   },
+  emits: ['toggleMenu'],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -2,6 +2,8 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  emits: ['openNotificationPanel'],
+
   computed: {
     ...mapGetters({
       notificationMetadata: 'notifications/getMeta',

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -17,6 +17,12 @@ export default {
       default: false,
     },
   },
+  emits: [
+    'close',
+    'openKeyShortcutModal',
+    'toggleAccounts',
+    'showSupportChatWindow',
+  ],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',

app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue

@@ -43,12 +43,16 @@ export default {
       default: '',
     },
   },
+  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
   data() {
     return {
       helpDocsURL: wootConstants.DOCS_URL,
       showOptionsMenu: false,
     };
   },
+  mounted() {
+    console.log('MENU ITEMS', this.menuItems);
+  },
   methods: {
     frontendURL,
     toggleOptions() {
@@ -96,13 +100,13 @@ export default {
         open-in-new-page
         :to="helpDocsURL"
       />
-      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggleMenu="toggleOptions" />
+      <AgentDetails @toggle-menu="toggleOptions" />
       <OptionsMenu
         :show="showOptionsMenu"
-        @toggleAccounts="toggleAccountModal"
+        @toggle-accounts="toggleAccountModal"
-        @showSupportChatWindow="toggleSupportChatWindow"
+        @show-support-chat-window="toggleSupportChatWindow"
-        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
         @close="toggleOptions"
       />
     </div>

app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue

@@ -26,6 +26,13 @@ export default {
       default: false,
     },
   },
+  mounted() {
+    console.log(
+      'MOUNTED: PRIMARY NAV ITEM',
+      this.name,
+      this.$t(`SIDEBAR.${this.name}`)
+    );
+  },
 };
 </script>
 

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -49,6 +49,7 @@ export default {
       default: false,
     },
   },
+  emits: ['addLabel', 'toggleAccounts'],
   computed: {
     ...mapGetters({
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -242,7 +243,7 @@ export default {
   <div
     class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
   >
-    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
@@ -257,7 +258,7 @@ export default {
         v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"
-        @addLabel="showAddLabelPopup"
+        @add-label="showAddLabelPopup"
       />
     </transition-group>
   </div>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -106,10 +106,11 @@ export default {
           <span
             v-if="showChildCount"
             class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
-            :class="isCountZero
+            :class="
+              isCountZero
                 ? `text-slate-300 dark:text-slate-500`
                 : `text-slate-700 dark:text-slate-50`
-              "
+            "
           >
             {{ childItemCount }}
           </span>

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -22,6 +22,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['addLabel', 'open'],
   setup() {
     const { isAdmin } = useAdmin();
     const { isEnterprise } = useConfig();

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -1,79 +1,62 @@
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import AccountSelector from '../AccountSelector.vue';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-
-import i18n from 'dashboard/i18n';
 import WootModal from 'dashboard/components/Modal.vue';
 import WootModalHeader from 'dashboard/components/ModalHeader.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
-const localVue = createLocalVue();
+const store = createStore({
-localVue.component('woot-modal', WootModal);
+  modules: {
-localVue.component('woot-modal-header', WootModalHeader);
+    auth: {
-localVue.component('fluent-icon', FluentIcon);
+      namespaced: false,
-
+      getters: {
-localVue.use(Vuex);
+        getCurrentAccountId: () => 1,
-localVue.use(VueI18n);
+        getCurrentUser: () => ({
-
+          accounts: [
-const i18nConfig = new VueI18n({
+            { id: 1, name: 'Chatwoot', role: 'administrator' },
-  locale: 'en',
+            { id: 2, name: 'GitX', role: 'agent' },
-  messages: i18n,
+          ],
+        }),
+      },
+    },
+    globalConfig: {
+      namespaced: true,
+      getters: {
+        get: () => ({ createNewAccountFromDashboard: false }),
+      },
+    },
+  },
 });
 
-describe('accountSelctor', () => {
+describe('AccountSelector', () => {
   let accountSelector = null;
-  const currentUser = {
-    accounts: [
-      {
-        id: 1,
-        name: 'Chatwoot',
-        role: 'administrator',
-      },
-      {
-        id: 2,
-        name: 'GitX',
-        role: 'agent',
-      },
-    ],
-  };
-
-  let actions = null;
-  let modules = null;
 
   beforeEach(() => {
-    actions = {};
-    modules = {
-      auth: {
-        getters: {
-          getCurrentAccountId: () => 1,
-          getCurrentUser: () => currentUser,
-        },
-      },
-      globalConfig: {
-        getters: {
-          'globalConfig/get': () => ({ createNewAccountFromDashboard: false }),
-        },
-      },
-    };
-
-    let store = new Vuex.Store({ actions, modules });
     accountSelector = mount(AccountSelector, {
-      store,
+      global: {
-      localVue,
+        plugins: [store],
-      i18n: i18nConfig,
+        components: {
-      propsData: { showAccountModal: true },
+          'woot-modal': WootModal,
-      stubs: { WootButton: { template: '<button />' } },
+          'woot-modal-header': WootModalHeader,
+          'fluent-icon': FluentIcon,
+        },
+        stubs: {
+          WootButton: { template: '<button />' },
+          // override global stub
+          WootModalHeader: false,
+        },
+      },
+      props: { showAccountModal: true },
     });
   });
 
   it('title and sub title exist', () => {
     const headerComponent = accountSelector.findComponent(WootModalHeader);
-    const title = headerComponent.findComponent({ ref: 'modalHeaderTitle' });
+    const title = headerComponent.find('[data-test-id="modal-header-title"]');
     expect(title.text()).toBe('Switch Account');
-    const content = headerComponent.findComponent({
+    const content = headerComponent.find(
-      ref: 'modalHeaderContent',
+      '[data-test-id="modal-header-content"]'
-    });
+    );
     expect(content.text()).toBe('Select an account from the following list');
   });
 

app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js

@@ -1,27 +1,10 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import AgentDetails from '../AgentDetails.vue';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-
-import i18n from 'dashboard/i18n';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueI18n);
-localVue.component('thumbnail', Thumbnail);
-localVue.component('woot-button', WootButton);
-localVue.component('woot-button', WootButton);
-localVue.use(VTooltip, {
-  defaultHtml: false,
-});
 
-const i18nConfig = new VueI18n({
+describe('AgentDetails', () => {
-  locale: 'en',
-  messages: i18n,
-});
-
-describe('agentDetails', () => {
   const currentUser = {
     name: 'Neymar Junior',
     avatar_url: '',
@@ -29,37 +12,46 @@ describe('agentDetails', () => {
   };
   const currentRole = 'agent';
   let store = null;
-  let actions = null;
-  let modules = null;
   let agentDetails = null;
 
-  beforeEach(() => {
+  const mockTooltipDirective = {
-    actions = {};
+    mounted: (el, binding) => {
+      // You can mock the behavior here if necessary
+      el.setAttribute('data-tooltip', binding.value || '');
+    },
+  };
 
-    modules = {
+  beforeEach(() => {
-      auth: {
+    store = createStore({
-        getters: {
+      modules: {
-          getCurrentUser: () => currentUser,
+        auth: {
-          getCurrentRole: () => currentRole,
+          namespaced: false,
-          getCurrentUserAvailability: () => currentUser.availability_status,
+          getters: {
+            getCurrentUser: () => currentUser,
+            getCurrentRole: () => currentRole,
+            getCurrentUserAvailability: () => currentUser.availability_status,
+          },
         },
       },
-    };
-
-    store = new Vuex.Store({
-      actions,
-      modules,
     });
 
     agentDetails = shallowMount(AgentDetails, {
-      store,
+      global: {
-      localVue,
+        plugins: [store],
-      i18n: i18nConfig,
+        components: {
+          Thumbnail,
+          WootButton,
+        },
+        directives: {
+          tooltip: mockTooltipDirective, // Mocking the tooltip directive
+        },
+        stubs: { WootButton: { template: '<button><slot /></button>' } },
+      },
     });
   });
 
-  it(' the agent status', () => {
+  it('shows the correct agent status', () => {
-    expect(agentDetails.find('thumbnail-stub').vm.status).toBe('online');
+    expect(agentDetails.findComponent(Thumbnail).vm.status).toBe('online');
   });
 
   it('agent thumbnail exists', () => {

app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js

@@ -1,20 +1,7 @@
-import NotificationBell from '../NotificationBell.vue';
+import { shallowMount } from '@vue/test-utils';
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
-
+import NotificationBell from '../NotificationBell.vue';
-import i18n from 'dashboard/i18n';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueI18n);
-localVue.component('fluent-icon', FluentIcon);
-
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
 
 const $route = {
   name: 'notifications_index',
@@ -33,43 +20,51 @@ describe('notificationBell', () => {
     };
     modules = {
       auth: {
+        namespaced: false,
         getters: {
           getCurrentAccountId: () => accountId,
         },
       },
       notifications: {
+        namespaced: false,
         getters: {
           'notifications/getMeta': () => notificationMetadata,
         },
       },
     };
 
-    store = new Vuex.Store({
+    store = createStore({
       actions,
       modules,
     });
   });
 
-  it('it should return unread count 19 ', () => {
+  it('it should return unread count 19', () => {
     const wrapper = shallowMount(NotificationBell, {
-      localVue,
+      global: {
-      i18n: i18nConfig,
+        plugins: [store],
-      store,
+        mocks: {
-      mocks: {
+          $route,
-        $route,
+        },
+        components: {
+          'fluent-icon': FluentIcon,
+        },
       },
     });
     expect(wrapper.vm.unreadCount).toBe('19');
   });
 
-  it('it should return unread count 99+ ', async () => {
+  it('it should return unread count 99+', async () => {
     notificationMetadata.unreadCount = 100;
     const wrapper = shallowMount(NotificationBell, {
-      localVue,
+      global: {
-      i18n: i18nConfig,
+        plugins: [store],
-      store,
+        mocks: {
-      mocks: {
+          $route,
-        $route,
+        },
+        components: {
+          'fluent-icon': FluentIcon,
+        },
       },
     });
     expect(wrapper.vm.unreadCount).toBe('99+');
@@ -77,11 +72,14 @@ describe('notificationBell', () => {
 
   it('isNotificationPanelActive', async () => {
     const notificationBell = shallowMount(NotificationBell, {
-      store,
+      global: {
-      localVue,
+        plugins: [store],
-      i18n: i18nConfig,
+        mocks: {
-      mocks: {
+          $route,
-        $route,
+        },
+        components: {
+          'fluent-icon': FluentIcon,
+        },
       },
     });
 

app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js

@@ -1,9 +1,6 @@
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
 import AvailabilityStatus from '../AvailabilityStatus.vue';
-import { createLocalVue, mount } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import FloatingVue from 'floating-vue';
-
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -11,70 +8,64 @@ import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue
 import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 
-import i18n from 'dashboard/i18n';
-
-const localVue = createLocalVue();
-localVue.use(FloatingVue, {
-  html: false,
-});
-localVue.use(Vuex);
-localVue.use(VueI18n);
-localVue.component('woot-button', WootButton);
-localVue.component('woot-dropdown-header', WootDropdownHeader);
-localVue.component('woot-dropdown-menu', WootDropdownMenu);
-localVue.component('woot-dropdown-divider', WootDropdownDivider);
-localVue.component('woot-dropdown-item', WootDropdownItem);
-localVue.component('fluent-icon', FluentIcon);
-
-const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
-
 describe('AvailabilityStatus', () => {
   const currentAvailability = 'online';
   const currentAccountId = '1';
   const currentUserAutoOffline = false;
   let store = null;
   let actions = null;
-  let modules = null;
-  let availabilityStatus = null;
 
   beforeEach(() => {
     actions = {
-      updateAvailability: vi.fn(() => {
+      updateAvailability: vi.fn(() => Promise.resolve()),
-        return Promise.resolve();
-      }),
     };
 
-    modules = {
+    store = createStore({
-      auth: {
+      modules: {
-        getters: {
+        auth: {
-          getCurrentUserAvailability: () => currentAvailability,
+          namespaced: false,
-          getCurrentAccountId: () => currentAccountId,
+          getters: {
-          getCurrentUserAutoOffline: () => currentUserAutoOffline,
+            getCurrentUserAvailability: () => currentAvailability,
+            getCurrentAccountId: () => currentAccountId,
+            getCurrentUserAutoOffline: () => currentUserAutoOffline,
+          },
         },
       },
-    };
+      actions,
-
-    store = new Vuex.Store({ actions, modules });
-
-    availabilityStatus = mount(AvailabilityStatus, {
-      store,
-      localVue,
-      i18n: i18nConfig,
-      stubs: { WootSwitch: { template: '<button />' } },
     });
   });
 
   it('dispatches an action when user changes status', async () => {
-    await availabilityStatus;
+    const wrapper = mount(AvailabilityStatus, {
-    availabilityStatus
+      global: {
-      .findAll('.status-change--dropdown-button')
+        plugins: [store],
-      .at(2)
+        components: {
-      .trigger('click');
+          WootButton,
+          WootDropdownItem,
+          WootDropdownMenu,
+          WootDropdownHeader,
+          WootDropdownDivider,
+          FluentIcon,
+        },
+        stubs: {
+          WootSwitch: { template: '<button />' },
+        },
+      },
+    });
 
-    expect(actions.updateAvailability).toBeCalledWith(
+    // Ensure that the dropdown menu is opened
-      expect.any(Object),
+    await wrapper.vm.openStatusMenu();
-      { availability: 'offline', account_id: currentAccountId },
+
-      undefined
+    // Simulate the user clicking the 3rd button (offline status)
-    );
+    const buttons = wrapper.findAll('.status-change--dropdown-button');
+    expect(buttons.length).toBeGreaterThan(0); // Ensure buttons exist
+
+    await buttons[2].trigger('click');
+
+    expect(actions.updateAvailability).toHaveBeenCalledTimes(1);
+    expect(actions.updateAvailability.mock.calls[0][1]).toEqual({
+      availability: 'offline',
+      account_id: currentAccountId,
+    });
   });
 });

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -7,5 +7,8 @@ exports[`SidemenuIcon > matches snapshot 1`] = `
   icon="list"
   size="small"
   variant="clear"
-/>
+>
+  
+  
+</button>
 `;

app/javascript/dashboard/components/ui/AnnouncementPopup.vue

@@ -18,6 +18,7 @@ export default {
       default: '',
     },
   },
+  emits: ['open', 'close'],
   methods: {
     onClickOpenPath() {
       this.$emit('open');

app/javascript/dashboard/components/ui/Banner.vue

@@ -38,6 +38,7 @@ export default {
       default: false,
     },
   },
+  emits: ['primaryAction', 'close'],
   computed: {
     bannerClasses() {
       const classList = [this.colorScheme];

app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue

@@ -222,7 +222,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @setRange="setDateRange"
+        @set-range="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -264,15 +264,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @selectYear="openCalendar($event, calendar, YEAR)"
+                  @select-year="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @selectMonth="openCalendar($event, calendar)"
+                  @select-month="openCalendar($event, calendar)"
-                  @setView="setViewMode"
+                  @set-view="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -286,9 +286,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @selectDate="selectDate"
+                  @select-date="selectDate"
-                  @setView="setViewMode"
+                  @set-view="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'clear']);
+const emit = defineEmits(['clear', 'change']);
 
 const onClickClear = () => {
   emit('clear');

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -62,7 +62,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @setView="setViewMode"
+      @set-view="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @setView="setViewMode"
+      @set-view="setViewMode"
     />
     <CalendarWeekLabel />
     <div

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -16,6 +16,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['change'],
   methods: {
     handleChange(value) {
       this.$emit('change', value);

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -17,6 +17,7 @@ export default {
       default: [],
     },
   },
+  emits: ['change'],
 
   methods: {
     handleChange(value) {

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -38,7 +38,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['onSearch', 'select']);
+const emit = defineEmits(['onSearch', 'select', 'removeFilter']);
 
 const searchTerm = ref('');
 
@@ -84,10 +84,10 @@ const shouldShowEmptyState = computed(() => {
     <slot name="search">
       <DropdownSearch
         v-if="enableSearch"
-        :input-value="searchTerm"
+        v-model="searchTerm"
         :input-placeholder="inputPlaceholder"
         :show-clear-filter="showClearFilter"
-        @input="onSearch"
+        @update:model-value="onSearch"
         @remove="$emit('removeFilter')"
       />
     </slot>

app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -1,10 +1,6 @@
 <script setup>
-import { defineEmits } from 'vue';
+import { defineEmits, defineModel } from 'vue';
 defineProps({
-  inputValue: {
-    type: String,
-    default: '',
-  },
   inputPlaceholder: {
     type: String,
     default: '',
@@ -15,7 +11,12 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['input', 'remove']);
+const emit = defineEmits(['remove']);
+
+const value = defineModel({
+  type: String,
+  default: '',
+});
 </script>
 
 <template>
@@ -29,16 +30,15 @@ const emit = defineEmits(['input', 'remove']);
         class="text-slate-400 dark:text-slate-400 flex-shrink-0"
       />
       <input
+        v-model="value"
+        :placeholder="inputPlaceholder"
         type="text"
         class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
-        :placeholder="inputPlaceholder"
-        :value="inputValue"
-        @input="emit('input', $event.target.value)"
       />
     </div>
     <!-- Clear filter button -->
     <woot-button
-      v-if="!inputValue && showClearFilter"
+      v-if="!modelValue && showClearFilter"
       size="small"
       variant="clear"
       color-scheme="primary"

app/javascript/dashboard/components/ui/Label.vue

@@ -44,6 +44,7 @@ export default {
       default: '',
     },
   },
+  emits: ['remove'],
   computed: {
     textColor() {
       if (this.variant === 'smooth') return '';

app/javascript/dashboard/components/ui/Switch.vue

@@ -4,6 +4,7 @@ export default {
     modelValue: { type: Boolean, default: false },
     size: { type: String, default: '' },
   },
+  emits: ['update:modelValue', 'input'],
   methods: {
     onClick() {
       this.$emit('update:modelValue', !this.modelValue);

app/javascript/dashboard/components/widgets/AIAssistanceButton.vue

@@ -17,6 +17,7 @@ export default {
     AICTAModal,
     AIAssistanceCTAButton,
   },
+  emits: ['replaceText'],
   setup(props, { emit }) {
     const { uiSettings, updateUISettings } = useUISettings();
 
@@ -137,19 +138,19 @@ export default {
         @click="openAIAssist"
       />
       <woot-modal
-        :show.sync="showAIAssistanceModal"
+        v-model:show="showAIAssistanceModal"
         :on-close="hideAIAssistanceModal"
       >
         <AIAssistanceModal
           :ai-option="aiOption"
-          @applyText="insertText"
+          @apply-text="insertText"
           @close="hideAIAssistanceModal"
         />
       </woot-modal>
     </div>
     <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
       <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+      <woot-modal v-model:show="showAICtaModal" :on-close="hideAICtaModal">
         <AICTAModal @close="hideAICtaModal" />
       </woot-modal>
     </div>

app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue

@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['open'],
+
   methods: {
     onClick() {
       this.$emit('open');

app/javascript/dashboard/components/widgets/AIAssistanceModal.vue

@@ -13,6 +13,7 @@ export default {
       required: true,
     },
   },
+  emits: ['close', 'applyText'],
   setup() {
     const { formatMessage } = useMessageFormatter();
     const { draftMessage, processEvent, recordAnalytics } = useAI();

app/javascript/dashboard/components/widgets/AICTAModal.vue

@@ -7,6 +7,8 @@ import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 
 export default {
+  emits: ['close'],
+
   setup() {
     const { updateUISettings } = useUISettings();
     const { recordAnalytics } = useAI();

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -38,6 +38,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
   computed: {
     action_name: {
       get() {

app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue

@@ -1,8 +1,10 @@
 <script>
 export default {
-  // The value types are dynamic, hence prop validation removed to work with our action schema
+  props: {
-  // eslint-disable-next-line vue/require-prop-types
+    teams: { type: Array, required: true },
-  props: ['teams', 'value'],
+    modelValue: { type: Object, required: true },
+  },
+  emits: ['update:modelValue'],
   data() {
     return {
       selectedTeams: [],
@@ -10,13 +12,13 @@ export default {
     };
   },
   mounted() {
-    const { team_ids: teamIds } = this.value;
+    const { team_ids: teamIds } = this.modelValue;
     this.selectedTeams = teamIds;
-    this.message = this.value.message;
+    this.message = this.modelValue.message;
   },
   methods: {
     updateValue() {
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         team_ids: this.selectedTeams.map(team => team.id),
         message: this.message,
       });

app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -11,6 +11,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       uploadState: 'idle',

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -12,6 +12,7 @@ export default {
       required: true,
     },
   },
+  emits: ['channelItemClick'],
   computed: {
     hasFbConfigured() {
       return window.chatwootConfig?.fbAppId;

app/javascript/dashboard/components/widgets/ColorPicker.vue

@@ -11,6 +11,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       isPickerOpen: false,
@@ -45,7 +46,7 @@ export default {
       disable-alpha
       :model-value="modelValue"
       class="colorpicker--chrome"
-      @update:modelValue="updateColor"
+      @update:model-value="updateColor"
     />
   </div>
 </template>

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -80,6 +80,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
     <div

app/javascript/dashboard/components/widgets/FeatureToggle.vue

@@ -19,6 +19,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div v-if="isFeatureEnabled">
     <slot />

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -47,6 +47,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
   computed: {
     attributeKey: {
       get() {

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -5,7 +5,7 @@ export default {
   props: {
     inbox: {
       type: Object,
-      default: () => { },
+      default: () => {},
     },
   },
   computed: {

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -16,6 +16,8 @@ const props = defineProps({
     default: 0,
   },
 });
+
+const emit = defineEmits(['pageChange']);
 const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
 const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
 const lastIndex = computed(() =>
@@ -26,6 +28,7 @@ const isFooterVisible = computed(
 );
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <footer
     v-if="isFooterVisible"
@@ -42,7 +45,7 @@ const isFooterVisible = computed(
       :total-pages="totalPages"
       :total-count="totalCount"
       :page-size="pageSize"
-      @pageChange="$emit('pageChange', $event)"
+      @page-change="emit('pageChange', $event)"
     />
   </footer>
 </template>

app/javascript/dashboard/components/widgets/VideoCallButton.vue

@@ -41,6 +41,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <woot-button
     v-if="isVideoIntegrationEnabled"

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -13,7 +13,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['recorderProgressChanged', 'finishRecord']);
+const emit = defineEmits([
+  'recorderProgressChanged',
+  'finishRecord',
+  'pause',
+  'play',
+]);
 
 const waveformContainer = ref(null);
 const wavesurfer = ref(null);
@@ -47,6 +52,9 @@ const initWaveSurfer = () => {
     ],
   });
 
+  wavesurfer.value.on('pause', () => emit('pause'));
+  wavesurfer.value.on('play', () => emit('play'));
+
   record.value = wavesurfer.value.plugins[0];
 
   wavesurfer.value.on('finish', () => {
@@ -106,11 +114,9 @@ onUnmounted(() => {
   }
 });
 
-defineExpose({ playPause, stopRecording });
+defineExpose({ playPause, stopRecording, record });
 </script>
 
 <template>
-  <div class="w-full">
+  <div ref="waveformContainer" class="w-full p-1" />
-    <div ref="waveformContainer" />
-  </div>
 </template>

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -176,7 +176,7 @@ const editorMenuOptions = computed(() => {
 
 function createSuggestionPlugin({
   trigger,
-  minChars = 1,
+  minChars = 0,
   showMenu,
   searchTerm,
   isAllowed = () => true,

app/javascript/dashboard/components/widgets/WootWriter/FullEditor.vue

@@ -47,6 +47,7 @@ export default {
     placeholder: { type: String, default: '' },
     enabledMenuOptions: { type: Array, default: () => [] },
   },
+  emits: ['blur', 'input', 'update:modelValue', 'keyup', 'focus', 'keydown'],
   setup() {
     const { uiSettings, updateUISettings } = useUISettings();
 
@@ -60,17 +61,9 @@ export default {
       plugins: [imagePastePlugin(this.handleImageUpload)],
     };
   },
-  computed: {
-    contentFromEditor() {
-      if (editorView) {
-        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
-      }
-      return '';
-    },
-  },
   watch: {
     modelValue(newValue = '') {
-      if (newValue !== this.contentFromEditor) {
+      if (newValue !== this.contentFromEditor()) {
         this.reloadState();
       }
     },
@@ -95,6 +88,12 @@ export default {
     this.focusEditorInputField();
   },
   methods: {
+    contentFromEditor() {
+      if (editorView) {
+        return ArticleMarkdownSerializer.serialize(editorView.state.doc);
+      }
+      return '';
+    },
     openFileBrowser() {
       this.$refs.imageUploadInput.click();
     },
@@ -212,8 +211,8 @@ export default {
       editorView.focus();
     },
     emitOnChange() {
-      this.$emit('update:modelValue', this.contentFromEditor);
+      this.$emit('update:modelValue', this.contentFromEditor());
-      this.$emit('input', this.contentFromEditor);
+      this.$emit('input', this.contentFromEditor());
     },
     onKeyup() {
       this.$emit('keyup');

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -1,4 +1,5 @@
 <script>
+import { ref } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
@@ -26,7 +27,7 @@ export default {
     },
     onSend: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     sendButtonText: {
       type: String,
@@ -34,7 +35,7 @@ export default {
     },
     recordingAudioDurationText: {
       type: String,
-      default: '',
+      default: '00:00',
     },
     // inbox prop is used in /mixins/inboxMixin,
     // remove this props when refactoring to composable if not needed
@@ -53,19 +54,19 @@ export default {
     },
     onFileUpload: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     toggleEmojiPicker: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     toggleAudioRecorder: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     toggleAudioRecorderPlayPause: {
       type: Function,
-      default: () => { },
+      default: () => {},
     },
     isRecordingAudio: {
       type: Boolean,
@@ -112,10 +113,18 @@ export default {
       required: true,
     },
   },
+  emits: [
+    'replaceText',
+    'toggleInsertArticle',
+    'toggleEditor',
+    'selectWhatsappTemplate',
+  ],
   setup() {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
       useUISettings();
 
+    const uploadRef = ref(false);
+
     const keyboardEvents = {
       'Alt+KeyA': {
         action: () => {
@@ -137,6 +146,7 @@ export default {
     return {
       setSignatureFlagForInbox,
       fetchSignatureFlagFromUISettings,
+      uploadRef,
     };
   },
   computed: {
@@ -166,9 +176,9 @@ export default {
         return false;
       }
       // Disable audio recorder for safari browser as recording is not supported
-      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+      // const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
-        navigator.userAgent
+      //   navigator.userAgent
-      );
+      // );
 
       return (
         this.isFeatureEnabledonAccount(
@@ -249,13 +259,13 @@ export default {
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
         icon="emoji"
-        emoji="😊"
         color-scheme="secondary"
         variant="smooth"
         size="small"
         @click="toggleEmojiPicker"
       />
       <FileUpload
+        ref="uploadRef"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
         :size="4096 * 4096"
@@ -274,7 +284,6 @@ export default {
           class-names="button--upload"
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
           icon="attach"
-          emoji="📎"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -284,7 +293,6 @@ export default {
         v-if="showAudioRecorderButton"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
         :icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
-        emoji="🎤"
         :color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
         variant="smooth"
         size="small"
@@ -294,7 +302,6 @@ export default {
         v-if="showEditorToggle"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
         icon="quote"
-        emoji="🖊️"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -303,7 +310,6 @@ export default {
       <woot-button
         v-if="showAudioPlayStopButton"
         :icon="audioRecorderPlayStopIcon"
-        emoji="🎤"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -340,11 +346,11 @@ export default {
         :conversation-id="conversationId"
         :is-private-note="isOnPrivateNote"
         :message="message"
-        @replaceText="replaceText"
+        @replace-text="replaceText"
       />
       <transition name="modal-fade">
         <div
-          v-show="$refs.uploadRef && $refs.uploadRef.dropActive"
+          v-show="uploadRef && uploadRef.dropActive"
           class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -22,6 +22,7 @@ export default {
       default: false,
     },
   },
+  emits: ['setReplyMode', 'togglePopout'],
   setup(props, { emit }) {
     const setReplyMode = mode => {
       emit('setReplyMode', mode);

app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue

@@ -48,7 +48,7 @@ onMounted(() => {
     v-if="items.length"
     type="emoji"
     :items="items"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
   >
     <template #default="{ item, selected }">
       <span

app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -1,6 +1,7 @@
 import lamejs from '@breezystack/lamejs';
 
 const writeString = (view, offset, string) => {
+  // eslint-disable-next-line no-plusplus
   for (let i = 0; i < string.length; i++) {
     view.setUint8(offset + i, string.charCodeAt(i));
   }
@@ -28,7 +29,9 @@ const bufferToWav = async (buffer, numChannels, sampleRate) => {
 
   // WAV Data
   const offset = 44;
+  // eslint-disable-next-line no-plusplus
   for (let i = 0; i < buffer.length; i++) {
+    // eslint-disable-next-line no-plusplus
     for (let channel = 0; channel < numChannels; channel++) {
       const sample = Math.max(
         -1,

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -10,6 +10,7 @@ export default {
       default: '',
     },
   },
+  emits: ['replace'],
   computed: {
     ...mapGetters({
       cannedMessages: 'getCannedResponses',
@@ -46,6 +47,6 @@ export default {
   <MentionBox
     v-if="items.length"
     :items="items"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
   />
 </template>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -37,6 +37,7 @@ export default {
       default: false,
     },
   },
+  emits: ['applyFilter', 'updateFolder'],
   setup() {
     const { setFilterAttributes } = useFilter({
       filteri18nKey: 'FILTER',
@@ -363,8 +364,8 @@ export default {
               ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
               : ''
           "
-          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
+          @remove-filter="removeFilter(i)"
         />
         <div class="mt-4">
           <woot-button

app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

@@ -27,6 +27,7 @@ export default {
   components: {
     FilterItem,
   },
+  emits: ['changeFilter'],
   setup() {
     const { updateUISettings } = useUISettings();
 
@@ -107,7 +108,7 @@ export default {
           :selected-value="chatStatus"
           :items="chatStatusItems"
           path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @onChangeFilter="onChangeFilter"
+          @on-change-filter="onChangeFilter"
         />
       </div>
       <div class="flex items-center justify-between last:mt-4">
@@ -119,7 +120,7 @@ export default {
           :selected-value="sortFilter"
           :items="chatSortItems"
           path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @onChangeFilter="onChangeFilter"
+          @on-change-filter="onChangeFilter"
         />
       </div>
     </div>

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -34,6 +34,7 @@ export default {
       default: true,
     },
   },
+  emits: ['contactPanelToggle'],
   data() {
     return { activeIndex: 0 };
   },
@@ -103,7 +104,7 @@ export default {
       :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contactPanelToggle="onToggleContactPanel"
+      @contact-panel-toggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
@@ -128,7 +129,7 @@ export default {
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
-        @contactPanelToggle="onToggleContactPanel"
+        @contact-panel-toggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -69,6 +69,15 @@ export default {
       default: false,
     },
   },
+  emits: [
+    'contextMenuToggle',
+    'assignAgent',
+    'assignLabel',
+    'assignTeam',
+    'markAsUnread',
+    'assignPriority',
+    'updateConversationStatus',
+  ],
   data() {
     return {
       hovered: false,
@@ -336,12 +345,12 @@ export default {
         :priority="chat.priority"
         :chat-id="chat.id"
         :has-unread-messages="hasUnread"
-        @updateConversation="onUpdateConversation"
+        @update-conversation="onUpdateConversation"
-        @assignAgent="onAssignAgent"
+        @assign-agent="onAssignAgent"
-        @assignLabel="onAssignLabel"
+        @assign-label="onAssignLabel"
-        @assignTeam="onAssignTeam"
+        @assign-team="onAssignTeam"
-        @markAsUnread="markAsUnread"
+        @mark-as-unread="markAsUnread"
-        @assignPriority="assignPriority"
+        @assign-priority="assignPriority"
       />
     </ContextMenu>
   </div>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -41,6 +41,7 @@ export default {
       default: false,
     },
   },
+  emits: ['contactPanelToggle'],
   setup(props, { emit }) {
     const keyboardEvents = {
       'Alt+KeyO': {

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -2,6 +2,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, email } from '@vuelidate/validators';
 import { useAlert } from 'dashboard/composables';
+
 export default {
   props: {
     show: {
@@ -13,6 +14,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['cancel', 'update:show'],
   setup() {
     return { v$: useVuelidate() };
   },
@@ -31,6 +33,14 @@ export default {
     },
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     sentToOtherEmailAddress() {
       return this.selectedType === 'other_email_address';
     },
@@ -80,9 +90,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onCancel">
+  <woot-modal v-model:show="localShow" :on-close="onCancel">
     <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('EMAIL_TRANSCRIPT.TITLE')"

app/javascript/dashboard/components/widgets/conversation/FilterItem.vue

@@ -18,6 +18,7 @@ export default {
       required: true,
     },
   },
+  emits: ['onChangeFilter'],
   data() {
     return {
       activeValue: this.selectedValue,

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -439,6 +439,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <li
     v-if="shouldRenderMessage"
@@ -579,7 +580,7 @@ export default {
         :message="data"
         @open="openContextMenu"
         @close="closeContextMenu"
-        @replyTo="handleReplyTo"
+        @reply-to="handleReplyTo"
       />
     </div>
   </li>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -52,6 +52,7 @@ export default {
       default: false,
     },
   },
+  emits: ['contactPanelToggle'],
   setup() {
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
@@ -477,6 +478,7 @@ export default {
     </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
+        <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">
           <span v-if="shouldShowSpinner" class="spinner message" />
         </li>
@@ -547,9 +549,9 @@ export default {
         </div>
       </div>
       <ReplyBox
+        v-model:popout-reply-box="isPopOutReplyBox"
         :conversation-id="currentChat.id"
-        :popout-reply-box.sync="isPopOutReplyBox"
+        @toggle-popout="showPopOutReplyBox"
-        @togglePopout="showPopOutReplyBox"
       />
     </div>
   </div>

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -28,7 +28,7 @@ export default {
     emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
     emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
   },
-  destroyed() {
+  unmounted() {
     emitter.off(CMD_MUTE_CONVERSATION, this.mute);
     emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
     emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);

app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue

@@ -29,6 +29,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <span
     v-if="priority"

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -1,5 +1,6 @@
 <script>
-import { defineAsyncComponent } from 'vue';
+// [TODO] The popout events are needlessly complex and should be simplified
+import { defineAsyncComponent, defineModel } from 'vue';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -18,7 +19,7 @@ import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
-import WootAudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
+import AudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -49,28 +50,23 @@ const EmojiInput = defineAsyncComponent(
 
 export default {
   components: {
-    EmojiInput,
-    CannedResponse,
-    ReplyToMessage,
-    ResizableTextArea,
-    AttachmentPreview,
-    ReplyTopPanel,
-    ReplyEmailHead,
-    ReplyBottomPanel,
-    WootMessageEditor,
-    WootAudioRecorder,
-    Banner,
-    WhatsappTemplates,
-    MessageSignatureMissingAlert,
     ArticleSearchPopover,
+    AttachmentPreview,
+    AudioRecorder,
+    Banner,
+    CannedResponse,
+    EmojiInput,
+    MessageSignatureMissingAlert,
+    ReplyBottomPanel,
+    ReplyEmailHead,
+    ReplyToMessage,
+    ReplyTopPanel,
+    ResizableTextArea,
+    WhatsappTemplates,
+    WootMessageEditor,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  props: {
+  emits: ['update:popoutReplyBox', 'togglePopout'],
-    popoutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
   setup() {
     const {
       uiSettings,
@@ -79,8 +75,14 @@ export default {
       fetchSignatureFlagFromUISettings,
     } = useUISettings();
 
+    const popoutReplyBox = defineModel('popoutReplyBox', {
+      type: Boolean,
+      default: false,
+    });
+
     return {
       uiSettings,
+      popoutReplyBox,
       updateUISettings,
       isEditorHotKeyEnabled,
       fetchSignatureFlagFromUISettings,
@@ -113,6 +115,7 @@ export default {
       showVariablesMenu: false,
       newConversationModalActive: false,
       showArticleSearchPopover: false,
+      hasRecordedAudio: false,
     };
   },
   computed: {
@@ -277,12 +280,6 @@ export default {
     hasAttachments() {
       return this.attachedFiles.length;
     },
-    hasRecordedAudio() {
-      return (
-        this.$refs.audioRecorderInput &&
-        this.$refs.audioRecorderInput.hasAudio()
-      );
-    },
     isRichEditorEnabled() {
       return this.isAWebWidgetInbox || this.isAnEmailChannel;
     },
@@ -362,7 +359,7 @@ export default {
         return AUDIO_FORMATS.MP3;
       }
       if (this.isAPIInbox) {
-        return AUDIO_FORMATS.OGG;
+        return AUDIO_FORMATS.MP3;
       }
       return AUDIO_FORMATS.WAV;
     },
@@ -463,12 +460,10 @@ export default {
       this.onNewConversationModalActive
     );
   },
-  destroyed() {
+  unmounted() {
     document.removeEventListener('paste', this.onPaste);
     document.removeEventListener('keydown', this.handleKeyEvents);
     emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
-  },
-  unmounted() {
     emitter.off(
       BUS_EVENTS.NEW_CONVERSATION_MODAL,
       this.onNewConversationModalActive
@@ -803,19 +798,14 @@ export default {
       this.attachedFiles = [];
       this.isRecordingAudio = false;
       this.resetReplyToMessage();
+      this.resetAudioRecorderInput();
     },
     clearEmailField() {
       this.ccEmails = '';
       this.bccEmails = '';
       this.toEmails = '';
     },
-    clearRecorder() {
+
-      this.isRecordingAudio = false;
-      // Only clear the recorded audio when we click toggle button.
-      this.attachedFiles = this.attachedFiles.filter(
-        file => !file?.isRecordedAudio
-      );
-    },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
     },
@@ -823,17 +813,18 @@ export default {
       this.isRecordingAudio = !this.isRecordingAudio;
       this.isRecorderAudioStopped = !this.isRecordingAudio;
       if (!this.isRecordingAudio) {
-        this.clearRecorder();
+        this.resetAudioRecorderInput();
       }
     },
     toggleAudioRecorderPlayPause() {
-      if (this.isRecordingAudio) {
+      if (!this.isRecordingAudio) {
-        if (!this.isRecorderAudioStopped) {
+        return;
-          this.isRecorderAudioStopped = true;
+      }
-          this.$refs.audioRecorderInput.stopRecording();
+      if (!this.isRecorderAudioStopped) {
-        } else if (this.isRecorderAudioStopped) {
+        this.isRecorderAudioStopped = true;
-          this.$refs.audioRecorderInput.playPause();
+        this.$refs.audioRecorderInput.stopRecording();
-        }
+      } else if (this.isRecorderAudioStopped) {
+        this.$refs.audioRecorderInput.playPause();
       }
     },
     hideEmojiPicker() {
@@ -860,13 +851,9 @@ export default {
     onRecordProgressChanged(duration) {
       this.recordingAudioDurationText = duration;
     },
-    onStateRecorderChanged(state) {
-      this.recordingAudioState = state;
-      if (state && 'notallowederror'.includes(state)) {
-        this.toggleAudioRecorder();
-      }
-    },
     onFinishRecorder(file) {
+      this.recordingAudioState = 'stopped';
+      this.hasRecordedAudio = true;
       // Added a new key isRecordedAudio to the file to find it's and recorded audio
       // Because to filter and show only non recorded audio and other attachments
       const autoRecordedFile = {
@@ -1067,6 +1054,16 @@ export default {
     toggleInsertArticle() {
       this.showArticleSearchPopover = !this.showArticleSearchPopover;
     },
+    resetAudioRecorderInput() {
+      this.recordingAudioDurationText = '00:00';
+      this.isRecordingAudio = false;
+      this.recordingAudioState = '';
+      this.hasRecordedAudio = false;
+      // Only clear the recorded audio when we click toggle button.
+      this.attachedFiles = this.attachedFiles.filter(
+        file => !file?.isRecordedAudio
+      );
+    },
   },
 };
 </script>
@@ -1081,15 +1078,15 @@ export default {
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       has-action-button
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-      @primaryAction="onClickSelfAssign"
+      @primary-action="onClickSelfAssign"
     />
     <ReplyTopPanel
       :mode="replyType"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :popout-reply-box="popoutReplyBox"
-      @setReplyMode="setReplyMode"
+      @set-reply-mode="setReplyMode"
-      @togglePopout="$emit('togglePopout')"
+      @toggle-popout="$emit('togglePopout')"
     />
     <ArticleSearchPopover
       v-if="showArticleSearchPopover && connectedPortalSlug"
@@ -1122,13 +1119,14 @@ export default {
         v-model:bcc-emails="bccEmails"
         v-model:to-emails="toEmails"
       />
-      <WootAudioRecorder
+      <AudioRecorder
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
-        @recorderProgressChanged="onRecordProgressChanged"
+        @recorder-progress-changed="onRecordProgressChanged"
-        @stateRecorderChanged="onStateRecorderChanged"
+        @finish-record="onFinishRecorder"
-        @finishRecord="onFinishRecorder"
+        @play="recordingAudioState = 'playing'"
+        @pause="recordingAudioState = 'paused'"
       />
       <ResizableTextArea
         v-else-if="!showRichContentEditor"
@@ -1140,8 +1138,8 @@ export default {
         :signature="signatureToApply"
         allow-signature
         :send-with-signature="sendWithSignature"
-        @typingOff="onTypingOff"
+        @typing-off="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-on="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -1159,21 +1157,25 @@ export default {
         :signature="signatureToApply"
         allow-signature
         :channel-type="channelType"
-        @typingOff="onTypingOff"
+        @typing-off="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-on="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
-        @toggleUserMention="toggleUserMention"
+        @toggle-user-mention="toggleUserMention"
-        @toggleCannedMenu="toggleCannedMenu"
+        @toggle-canned-menu="toggleCannedMenu"
-        @toggleVariablesMenu="toggleVariablesMenu"
+        @toggle-variables-menu="toggleVariablesMenu"
-        @clearSelection="clearEditorSelection"
+        @clear-selection="clearEditorSelection"
       />
     </div>
-    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
+    <div
+      v-if="hasAttachments && !showAudioRecorderEditor"
+      class="attachment-preview-box"
+      @paste="onPaste"
+    >
       <AttachmentPreview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        @removeAttachment="removeAttachment"
+        @remove-attachment="removeAttachment"
       />
     </div>
     <MessageSignatureMissingAlert
@@ -1203,16 +1205,16 @@ export default {
       :message="message"
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
-      @selectWhatsappTemplate="openWhatsappTemplateModal"
+      @select-whatsapp-template="openWhatsappTemplateModal"
-      @toggleEditor="toggleRichContentEditor"
+      @toggle-editor="toggleRichContentEditor"
-      @replaceText="replaceText"
+      @replace-text="replaceText"
-      @toggleInsertArticle="toggleInsertArticle"
+      @toggle-insert-article="toggleInsertArticle"
     />
     <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"
-      @onSend="onSendWhatsAppReply"
+      @on-send="onSendWhatsAppReply"
       @cancel="hideWhatsappTemplatesModal"
     />
 

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

@@ -17,6 +17,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:bccEmails', 'update:ccEmails', 'update:toEmails'],
   setup() {
     return { v$: useVuelidate() };
   },

app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue

@@ -9,6 +9,7 @@ export default {
       required: true,
     },
   },
+  emits: ['dismiss'],
 };
 </script>
 

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -11,6 +11,7 @@ export default {
       default: '',
     },
   },
+  emits: ['selectVariable'],
   computed: {
     ...mapGetters({
       customAttributes: 'attributes/getAttributes',
@@ -62,7 +63,7 @@ export default {
     v-if="items.length"
     type="variable"
     :items="items"
-    @mentionSelect="handleVariableClick"
+    @mention-select="handleVariableClick"
   />
 </template>
 

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -7,21 +7,30 @@ export default {
     TemplateParser,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     inboxId: {
       type: Number,
       default: undefined,
     },
-    show: {
-      type: Boolean,
-      default: true,
-    },
   },
+  emits: ['onSend', 'cancel', 'update:show'],
   data() {
     return {
       selectedWaTemplate: null,
     };
   },
   computed: {
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
     modalHeaderContent() {
       return this.selectedWaTemplate
         ? this.$t('WHATSAPP_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
@@ -47,9 +56,8 @@ export default {
 };
 </script>
 
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
-  <woot-modal :show.sync="show" :on-close="onClose" size="modal-big">
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
     <woot-modal-header
       :header-title="$t('WHATSAPP_TEMPLATES.MODAL.TITLE')"
       :header-content="modalHeaderContent"
@@ -58,13 +66,13 @@ export default {
       <TemplatesPicker
         v-if="!selectedWaTemplate"
         :inbox-id="inboxId"
-        @onSelect="pickTemplate"
+        @on-select="pickTemplate"
       />
       <TemplateParser
         v-else
         :template="selectedWaTemplate"
-        @resetTemplate="onResetTemplate"
+        @reset-template="onResetTemplate"
-        @sendMessage="onSendMessage"
+        @send-message="onSendMessage"
       />
     </div>
   </woot-modal>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -19,6 +19,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['sendMessage', 'resetTemplate'],
   setup(props, { emit }) {
     const processVariable = str => {
       return str.replace(/{{|}}/g, '');

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -9,6 +9,7 @@ export default {
       default: undefined,
     },
   },
+  emits: ['onSelect'],
   data() {
     return {
       query: '',

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -7,6 +7,7 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
   data() {
     return {
       show: false,
@@ -26,7 +27,7 @@ export default {
 <template>
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal full-width :show.sync="show" :on-close="onClose">
+    <woot-modal v-model:show="show" full-width :on-close="onClose">
       <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
   </div>

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -21,6 +21,7 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
   data() {
     return {
       show: false,
@@ -116,7 +117,7 @@ export default {
     </audio>
     <GalleryView
       v-if="show"
-      :show.sync="show"
+      v-model:show="show"
       :attachment="attachment"
       :all-attachments="filteredCurrentChatAttachments"
       @error="onImgError"

app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue

@@ -15,6 +15,7 @@ export default {
       default: '',
     },
   },
+  emits: ['error'],
   data() {
     return {
       hasImgStoryError: false,

app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue

@@ -31,6 +31,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <DyteVideoCall
     v-if="showDyteIntegration"

app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue

@@ -45,6 +45,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="showHead"

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -106,7 +106,7 @@ export default {
     </button>
     <GalleryView
       v-if="showGalleryViewer"
-      :show.sync="showGalleryViewer"
+      v-model:show="showGalleryViewer"
       :attachment="attachment"
       :all-attachments="availableAttachments"
       @error="onClose"