Running version

.circleci/config.yml

@@ -74,7 +74,7 @@ jobs:
           name: yarn
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
 
-      # Store yarn / webpacker cache
+      # Store yarn cache
       - save_cache:
           key: chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
           paths:

.devcontainer/scripts/setup.sh

@@ -3,10 +3,10 @@ sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
 sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
 sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.dev/" .env
-sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
-# uncomment the webpacker env variable
-sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
-# fix the error with webpacker
+sed -i -e "/DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
+# uncomment the dev server env variable
+sed -i -e '/DEV_SERVER_PUBLIC/s/^# //' .env
+# fix the error with dev server
 echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
 
 # codespaces make the ports public

.env.example

@@ -223,7 +223,7 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # if you want to use letter_opener for local emails
 # LETTER_OPENER=true
 # meant to be used in github codespaces
-# WEBPACKER_DEV_SERVER_PUBLIC=
+# DEV_SERVER_PUBLIC=
 
 # If you want to use official mobile app,
 # the notifications would be relayed via a Chatwoot server

.eslintrc.js

@@ -7,11 +7,10 @@ module.exports = {
     'plugin:cypress/recommended',
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser',
-    ecmaVersion: 2020,
+    ecmaVersion: 2022,
     sourceType: 'module',
   },
-  plugins: ['html', 'prettier', 'babel'],
+  plugins: ['html', 'prettier'],
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',
@@ -56,13 +55,6 @@ module.exports = {
     'import/extensions': ['off'],
     'no-console': 'error',
   },
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: 'config/webpack/resolve.js',
-      },
-    },
-  },
   env: {
     browser: true,
     jest: true,

.gitignore

@@ -75,4 +75,12 @@ yalc.lock
 yarn-debug.log*
 .yarn-integrity
 
-/storybook-static
+/storybook-static
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+

.storybook/preview.js

@@ -2,7 +2,6 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -14,7 +13,6 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -32,7 +30,7 @@ addDecorator(() => ({
   template: '<story/>',
   i18n: i18nConfig,
   store,
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$root._i18n = this.$i18n;
   },
 }));

Gemfile

@@ -64,7 +64,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails'
 gem 'foreman'
 gem 'puma'
-gem 'webpacker'
+gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
 

Gemfile.lock

@@ -216,6 +216,7 @@ GEM
       railties (>= 3.2)
     down (5.4.0)
       addressable (~> 2.8)
+    dry-cli (1.0.0)
     ecma-re-validator (0.4.0)
       regexp_parser (~> 2.2)
     elastic-apm (4.6.2)
@@ -277,7 +278,7 @@ GEM
     gli (2.21.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    gmail_xoauth (0.4.3)
+    gmail_xoauth (0.4.2)
       oauth (>= 0.3.6)
     google-apis-core (0.11.0)
       addressable (~> 2.5, >= 2.5.1)
@@ -570,7 +571,7 @@ GEM
       rack (>= 1.2.0)
     rack-protection (3.1.0)
       rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
@@ -708,7 +709,6 @@ GEM
       activerecord (>= 4)
       activesupport (>= 4)
     selectize-rails (0.12.6)
-    semantic_range (3.0.0)
     sentry-rails (5.14.0)
       railties (>= 5.0)
       sentry-ruby (~> 5.14.0)
@@ -794,7 +794,14 @@ GEM
     valid_email2 (4.0.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.3)
+    version_gem (1.1.2)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.5.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -810,11 +817,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -957,10 +959,10 @@ DEPENDENCIES
   tzinfo-data
   uglifier
   valid_email2
+  vite_rails
   web-console (>= 4.2.1)
   web-push
   webmock
-  webpacker
   wisper (= 2.0.0)
   working_hours
 

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2024 Chatwoot Inc.
+Copyright (c) 2017-2021 Chatwoot Inc.
 
 Portions of this software are licensed as follows:
 

Procfile.dev

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

Procfile.test

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

app/assets/stylesheets/administrate/custom_styles.scss

@@ -9,7 +9,7 @@
   padding: 4px 12px;
 
   .icon-container {
-    margin-right: 2px;
+    margin-right: 4px;
 
   }
 

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

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

app/builders/account_builder.rb

@@ -2,7 +2,7 @@
 
 class AccountBuilder
   include CustomExceptions::Account
-  pattr_initialize [:account_name, :email!, :confirmed, :user, :user_full_name, :user_password, :super_admin, :locale]
+  pattr_initialize [:account_name!, :email!, :confirmed, :user, :user_full_name, :user_password, :super_admin, :locale]
 
   def perform
     if @user.nil?
@@ -21,16 +21,6 @@ class AccountBuilder
 
   private
 
-  def user_full_name
-    # the empty string ensures that not-null constraint is not violated
-    @user_full_name || ''
-  end
-
-  def account_name
-    # the empty string ensures that not-null constraint is not violated
-    @account_name || ''
-  end
-
   def validate_email
     address = ValidEmail2::Address.new(@email)
     if address.valid? # && !address.disposable?
@@ -49,7 +39,7 @@ class AccountBuilder
   end
 
   def create_account
-    @account = Account.create!(name: account_name, locale: I18n.locale)
+    @account = Account.create!(name: @account_name, locale: I18n.locale)
     Current.account = @account
   end
 
@@ -74,7 +64,7 @@ class AccountBuilder
     @user = User.new(email: @email,
                      password: user_password,
                      password_confirmation: user_password,
-                     name: user_full_name)
+                     name: @user_full_name)
     @user.type = 'SuperAdmin' if @super_admin
     @user.confirm if @confirmed
     @user.save!

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

@@ -2,7 +2,7 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
   RESULTS_PER_PAGE = 15
   include DateRangeHelper
 
-  before_action :fetch_notification, only: [:update, :destroy, :snooze, :unread]
+  before_action :fetch_notification, only: [:update, :destroy, :snooze]
   before_action :set_primary_actor, only: [:read_all]
   before_action :set_current_page, only: [:index]
 
@@ -29,11 +29,6 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
     render json: @notification
   end
 
-  def unread
-    @notification.update(read_at: nil)
-    render json: @notification
-  end
-
   def destroy
     @notification.destroy
     head :ok

app/controllers/api/v1/accounts_controller.rb

@@ -5,13 +5,11 @@ class Api::V1::AccountsController < Api::BaseController
   skip_before_action :authenticate_user!, :set_current_user, :handle_with_exception,
                      only: [:create], raise: false
   before_action :check_signup_enabled, only: [:create]
-  before_action :ensure_account_name, only: [:create]
   before_action :validate_captcha, only: [:create]
   before_action :fetch_account, except: [:create]
   before_action :check_authorization, except: [:create]
 
   rescue_from CustomExceptions::Account::InvalidEmail,
-              CustomExceptions::Account::InvalidParams,
               CustomExceptions::Account::UserExists,
               CustomExceptions::Account::UserErrors,
               with: :render_error_response
@@ -55,17 +53,6 @@ class Api::V1::AccountsController < Api::BaseController
 
   private
 
-  def ensure_account_name
-    # ensure that account_name and user_full_name is present
-    # this is becuase the account builder and the models validations are not triggered
-    # this change is to align the behaviour with the v2 accounts controller
-    # since these values are not required directly there
-    return if account_params[:account_name].present?
-    return if account_params[:user_full_name].present?
-
-    raise CustomExceptions::Account::InvalidParams.new({})
-  end
-
   def get_cache_keys
     {
       label: fetch_value_for_key(params[:id], Label.name.underscore),

app/controllers/api/v1/profiles_controller.rb

@@ -31,11 +31,6 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
-  def resend_confirmation
-    @user.send_confirmation_instructions unless @user.confirmed?
-    head :ok
-  end
-
   private
 
   def set_user

app/controllers/api/v2/accounts_controller.rb

@@ -1,48 +0,0 @@
-class Api::V2::AccountsController < Api::BaseController
-  include AuthHelper
-
-  skip_before_action :authenticate_user!, :set_current_user, :handle_with_exception,
-                     only: [:create], raise: false
-  before_action :check_signup_enabled, only: [:create]
-  before_action :validate_captcha, only: [:create]
-  before_action :fetch_account, except: [:create]
-  before_action :check_authorization, except: [:create]
-
-  rescue_from CustomExceptions::Account::InvalidEmail,
-              CustomExceptions::Account::UserExists,
-              CustomExceptions::Account::UserErrors,
-              with: :render_error_response
-
-  def create
-    @user, @account = AccountBuilder.new(
-      email: account_params[:email],
-      user_password: account_params[:password],
-      user: current_user
-    ).perform
-    if @user
-      send_auth_headers(@user)
-      render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
-    else
-      render_error_response(CustomExceptions::Account::SignupFailed.new({}))
-    end
-  end
-
-  private
-
-  def fetch_account
-    @account = current_user.accounts.find(params[:id])
-    @current_account_user = @account.account_users.find_by(user_id: current_user.id)
-  end
-
-  def account_params
-    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
-  end
-
-  def check_signup_enabled
-    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
-  end
-
-  def validate_captcha
-    raise ActionController::InvalidAuthenticityToken, 'Invalid Captcha' unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
-  end
-end

app/controllers/super_admin/app_configs_controller.rb

@@ -22,24 +22,19 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       i.value = value
       i.save!
     end
-    redirect_to super_admin_settings_path, notice: "App Configs - #{@config.titleize} updated successfully"
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: 'App Configs updated successfully'
+    # rubocop:enable Rails/I18nLocaleTexts
   end
 
   private
 
   def set_config
-    @config = params[:config] || 'general'
+    @config = params[:config]
   end
 
   def allowed_configs
-    @allowed_configs = case @config
-                       when 'facebook'
-                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-                       when 'email'
-                         ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP]
-                       end
+    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
   end
 end
 

app/helpers/super_admin/account_features_helper.rb

@@ -1,9 +0,0 @@
-module SuperAdmin::AccountFeaturesHelper
-  def self.account_features
-    YAML.safe_load(Rails.root.join('config/features.yml').read).freeze
-  end
-
-  def self.account_premium_features
-    account_features.filter { |feature| feature['premium'] }.pluck('name')
-  end
-end

app/javascript/dashboard/App.vue

@@ -2,13 +2,12 @@
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="currentAccountId">
-      <pending-email-verification-banner />
       <payment-pending-banner />
       <upgrade-banner />
     </template>
@@ -33,7 +32,6 @@ import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
-import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
@@ -54,7 +52,6 @@ export default {
     PaymentPendingBanner,
     WootSnackbarBox,
     UpgradeBanner,
-    PendingEmailVerificationBanner,
   },
 
   mixins: [rtlMixin],

app/javascript/dashboard/api/auth.js

@@ -29,12 +29,11 @@ export default {
     return fetchPromise;
   },
   hasAuthCookie() {
-    return !!Cookies.get('cw_d_session_info');
+    return !!Cookies.getJSON('cw_d_session_info');
   },
   getAuthData() {
     if (this.hasAuthCookie()) {
-      const savedAuthInfo = Cookies.get('cw_d_session_info');
-      return JSON.parse(savedAuthInfo || '{}');
+      return Cookies.getJSON('cw_d_session_info');
     }
     return false;
   },
@@ -98,8 +97,4 @@ export default {
       },
     });
   },
-  resendConfirmation() {
-    const urlData = endPoints('resendConfirmation');
-    return axios.post(urlData.url);
-  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -47,10 +47,6 @@ const endPoints = {
   setActiveAccount: {
     url: '/api/v1/profile/set_active_account',
   },
-
-  resendConfirmation: {
-    url: '/api/v1/profile/resend_confirmation',
-  },
 };
 
 export default page => {

app/javascript/dashboard/api/notifications.js

@@ -25,17 +25,9 @@ class NotificationsAPI extends ApiClient {
     });
   }
 
-  unRead(id) {
-    return axios.post(`${this.url}/${id}/unread`);
-  }
-
   readAll() {
     return axios.post(`${this.url}/read_all`);
   }
-
-  delete(id) {
-    return axios.delete(`${this.url}/${id}`);
-  }
 }
 
 export default new NotificationsAPI();

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

@@ -1,4 +1,4 @@
-@import '~vue2-datepicker/scss/index';
+@import 'vue2-datepicker/scss/index';
 
 .date-picker {
   &.no-margin {

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

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

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -1,623 +0,0 @@
-//  Foundation for Sites Settings
-//  -----------------------------
-//
-//  Table of Contents:
-//
-//   1. Global
-//   2. Breakpoints
-//   3. The Grid
-//   4. Base Typography
-//   5. Typography Helpers
-//   6. Abide
-//   7. Accordion
-//   8. Accordion Menu
-//   9. Badge
-//  10. Breadcrumbs
-//  11. Button
-//  12. Button Group
-//  13. Callout
-//  14. Card
-//  15. Close Button
-//  16. Drilldown
-//  17. Dropdown
-//  18. Dropdown Menu
-//  19. Forms
-//  20. Label
-//  21. Media Object
-//  22. Menu
-//  23. Meter
-//  24. Off-canvas
-//  25. Orbit
-//  26. Pagination
-//  27. Progress Bar
-//  28. Responsive Embed
-//  29. Reveal
-//  30. Slider
-//  31. Switch
-//  32. Table
-//  33. Tabs
-//  34. Thumbnail
-//  35. Title Bar
-//  36. Tooltip
-//  37. Top Bar
-
-@import '~foundation-sites/scss/util/util';
-// 1. Global
-// ---------
-
-// Disable contrast warnings in Foundation.
-$contrast-warnings: false;
-
-$global-font-size: 16px;
-$global-width: 100%;
-$global-lineheight: 1.5;
-$foundation-palette: (primary: $color-woot,
-  secondary: #5d7592,
-  success: #44ce4b,
-  warning: #ffc532,
-  alert: #ff382d);
-$light-gray: #c0ccda;
-$medium-gray: #8492a6;
-$dark-gray: $color-gray;
-$black: #000;
-$white: #fff;
-$body-background: $white;
-$body-font-color: $color-body;
-$body-font-family: 'PlusJakarta',
--apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
-$body-antialiased: true;
-$global-margin: $space-small;
-$global-padding: $space-small;
-$global-weight-normal: normal;
-$global-weight-bold: bold;
-$global-radius: 0;
-$global-text-direction: ltr;
-$global-flexbox: false;
-$print-transparent-backgrounds: true;
-
-@include add-foundation-colors;
-
-// 2. Breakpoints
-// --------------
-
-$breakpoints: (small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1400px,
-  xxxlarge: 1600px,
-);
-$print-breakpoint: large;
-$breakpoint-classes: (small medium large);
-
-// 3. The Grid
-// -----------
-
-$grid-row-width: $global-width;
-$grid-column-count: 12;
-$grid-column-gutter: (small: $zero,
-  medium: $zero);
-$grid-column-align-edge: true;
-$block-grid-max: 8;
-
-// 4. Base Typography
-// ------------------
-
-$header-font-family: $body-font-family;
-$header-font-weight: $font-weight-medium;
-$header-font-style: normal;
-$font-family-monospace: $body-font-family;
-$header-color: $color-heading;
-$header-lineheight: 1.4;
-$header-margin-bottom: 0.3125rem;
-$header-styles: (small: ("h1": ("font-size": 24),
-    "h2": ("font-size": 20),
-    "h3": ("font-size": 19),
-    "h4": ("font-size": 18),
-    "h5": ("font-size": 17),
-    "h6": ("font-size": 16)),
-  medium: ("h1": ("font-size": 48),
-    "h2": ("font-size": 40),
-    "h3": ("font-size": 31),
-    "h4": ("font-size": 25),
-    "h5": ("font-size": 20),
-    "h6": ("font-size": 16)));
-$header-text-rendering: optimizeLegibility;
-$small-font-size: 80%;
-$header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.65;
-$paragraph-margin-bottom: var(--space-small);
-$paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
-$anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
-$anchor-text-decoration: none;
-$anchor-text-decoration-hover: none;
-$hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
-$hr-margin: rem-calc(20) auto;
-$list-lineheight: $paragraph-lineheight;
-$list-margin-bottom: $paragraph-margin-bottom;
-$list-style-type: disc;
-$list-style-position: outside;
-$list-side-margin: 0.78125rem;
-$list-nested-side-margin: 0.78125rem;
-$defnlist-margin-bottom: 0.6875rem;
-$defnlist-term-weight: $global-weight-bold;
-$defnlist-term-margin-bottom: 0.1875rem;
-$blockquote-color: $dark-gray;
-$blockquote-padding: rem-calc(9 20 0 19);
-$blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
-$keystroke-font: $font-family-monospace;
-$keystroke-color: $black;
-$keystroke-background: $light-gray;
-$keystroke-padding: rem-calc(2 4 0);
-$keystroke-radius: $global-radius;
-$abbr-underline: 1px dotted $black;
-
-// 5. Typography Helpers
-// ---------------------
-
-$lead-font-size: $global-font-size * 1.25;
-$lead-lineheight: 1.6;
-$subheader-lineheight: 1.4;
-$subheader-color: $dark-gray;
-$subheader-font-weight: $global-weight-normal;
-$subheader-margin-top: 0.125rem;
-$subheader-margin-bottom: 0.3125rem;
-$stat-font-size: 1.5625rem;
-
-// 6. Abide
-// --------
-
-$abide-inputs: true;
-$abide-labels: true;
-$input-background-invalid: get-color(alert);
-$form-label-color-invalid: get-color(alert);
-$input-error-color: get-color(alert);
-$input-error-font-size: rem-calc(12);
-$input-error-font-weight: $global-weight-bold;
-
-// 7. Accordion
-// ------------
-
-$accordion-background: $white;
-$accordion-plusminus: true;
-$accordion-title-font-size: rem-calc(12);
-$accordion-item-color: $primary-color;
-$accordion-item-background-hover: $light-gray;
-$accordion-item-padding: 0.78125rem 0.625rem;
-$accordion-content-background: $white;
-$accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: $body-font-color;
-$accordion-content-padding: 0.625rem;
-
-// 8. Accordion Menu
-// -----------------
-
-$accordionmenu-arrows: true;
-$accordionmenu-arrow-color: $primary-color;
-$accordionmenu-arrow-size: 6px;
-
-// 9. Badge
-// --------
-
-$badge-background: $primary-color;
-$badge-color: $white;
-$badge-color-alt: $black;
-$badge-palette: $foundation-palette;
-$badge-padding: var(--space-smaller);
-$badge-minwidth: 2.1em;
-$badge-font-size: var(--font-size-nano);
-
-// 10. Breadcrumbs
-// ---------------
-
-$breadcrumbs-margin: 0 0 $global-margin 0;
-$breadcrumbs-item-font-size: rem-calc(11);
-$breadcrumbs-item-color: $primary-color;
-$breadcrumbs-item-color-current: $black;
-$breadcrumbs-item-color-disabled: $medium-gray;
-$breadcrumbs-item-margin: 0.46875rem;
-$breadcrumbs-item-uppercase: true;
-$breadcrumbs-item-slash: true;
-
-// 11. Button
-// ----------
-
-$button-padding: var(--space-smaller) 1em;
-$button-margin: 0 0 $global-margin 0;
-$button-fill: solid;
-$button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
-$button-color-alt: $white;
-$button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
-  small: var(--font-size-mini),
-  default: var(--font-size-small),
-  large: var(--font-size-medium));
-$button-palette: $foundation-palette;
-$button-opacity-disabled: 0.4;
-$button-background-hover-lightness: -20%;
-$button-hollow-hover-lightness: -50%;
-$button-transition: background-color 0.25s ease-out,
-color 0.25s ease-out;
-
-// 12. Button Group
-// ----------------
-
-$buttongroup-margin: 0;
-$buttongroup-spacing: 0;
-$buttongroup-child-selector: '.button';
-$buttongroup-expand-max: 6;
-$buttongroup-radius-on-each: false;
-
-// 13. Callout
-// -----------
-
-$callout-background: $white;
-$callout-background-fade: 85%;
-$callout-border: 1px solid rgba($black, 0.25);
-$callout-margin: 0 0 0.625rem 0;
-$callout-padding: 0.625rem;
-$callout-font-color: $body-font-color;
-$callout-font-color-alt: $body-background;
-$callout-radius: $global-radius;
-$callout-link-tint: 30%;
-
-// 14. Card
-// --------
-
-$card-background: $white;
-$card-font-color: $body-font-color;
-$card-divider-background: $light-gray;
-$card-border: 1px solid var(--color-border);
-$card-shadow: var(--shadow-small);
-$card-border-radius: var(--border-radius-normal);
-$card-padding: var(--space-small);
-$card-margin: $global-margin;
-
-// 15. Close Button
-// ----------------
-
-$closebutton-position: right top;
-$closebutton-offset-horizontal: (small: 0.66rem,
-  medium: 1rem);
-$closebutton-offset-vertical: (small: 0.33em,
-  medium: 0.5rem);
-$closebutton-size: (small: 1.5em,
-  medium: 2em);
-$closebutton-lineheight: 1;
-$closebutton-color: $dark-gray;
-$closebutton-color-hover: $black;
-
-// 16. Drilldown
-// -------------
-
-$drilldown-transition: transform 0.15s linear;
-$drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
-$drilldown-arrow-size: 6px;
-$drilldown-background: $white;
-
-// 17. Dropdown
-// ------------
-
-$dropdown-padding: 0.625rem;
-$dropdown-background: $body-background;
-$dropdown-border: 1px solid $medium-gray;
-$dropdown-font-size: 0.625rem;
-$dropdown-width: 300px;
-$dropdown-radius: $global-radius;
-$dropdown-sizes: (tiny: 100px,
-  small: 200px,
-  large: 400px);
-
-// 18. Dropdown Menu
-// -----------------
-
-$dropdownmenu-arrows: true;
-$dropdownmenu-arrow-color: $anchor-color;
-$dropdownmenu-arrow-size: 6px;
-$dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-border: 1px solid $medium-gray;
-
-// 19. Forms
-// ---------
-
-$fieldset-border: 1px solid $light-gray;
-$fieldset-padding: $space-two;
-$fieldset-margin: $space-one $zero;
-$legend-padding: rem-calc(0 3);
-$form-spacing: $space-normal;
-$helptext-color: $color-body;
-$helptext-font-size: $font-size-small;
-$helptext-font-style: italic;
-$input-prefix-color: $color-body;
-$input-prefix-background: var(--b-100);
-$input-prefix-border: 1px solid $color-border;
-$input-prefix-padding: 0.625rem;
-$form-label-color: $color-body;
-$form-label-font-size: rem-calc(14);
-$form-label-font-weight: $font-weight-medium;
-$form-label-line-height: 1.8;
-$select-background: $white;
-$select-triangle-color: $dark-gray;
-$select-radius: var(--border-radius-normal);
-$input-color: $color-body;
-$input-placeholder-color: $light-gray;
-$input-font-family: inherit;
-$input-font-size: $font-size-default;
-$input-font-weight: $global-weight-normal;
-$input-background: $white;
-$input-background-focus: $white;
-$input-background-disabled: $light-gray;
-$input-border: 1px solid var(--s-200);
-$input-border-focus: 1px solid lighten($primary-color, 15%);
-$input-shadow: 0;
-$input-shadow-focus: 0;
-$input-cursor-disabled: not-allowed;
-$input-transition: border-color 0.25s ease-in-out;
-$input-number-spinners: true;
-$input-radius: var(--border-radius-normal);
-$form-button-radius: var(--border-radius-normal);
-
-// 20. Label
-// ---------
-
-$label-background: $white;
-$label-color: $black;
-$label-color-alt: $black;
-$label-palette: $foundation-palette;
-$label-font-size: $font-size-mini;
-$label-padding: $space-smaller $space-small;
-$label-radius: var(--border-radius-small);
-
-// 21. Media Object
-// ----------------
-
-$mediaobject-margin-bottom: $global-margin;
-$mediaobject-section-padding: $global-padding;
-$mediaobject-image-width-stacked: 100%;
-
-// 22. Menu
-// --------
-
-$menu-margin: 0;
-$menu-margin-nested: $space-medium;
-$menu-item-padding: $space-slab;
-$menu-item-color-active: $white;
-$menu-item-background-active: $color-background;
-$menu-icon-spacing: 0.15625rem;
-$menu-item-background-hover: $light-gray;
-$menu-border: $light-gray;
-
-// 23. Meter
-// ---------
-
-$meter-height: 0.625rem;
-$meter-radius: $global-radius;
-$meter-background: $medium-gray;
-$meter-fill-good: $success-color;
-$meter-fill-medium: $warning-color;
-$meter-fill-bad: $alert-color;
-
-// 24. Off-canvas
-// --------------
-
-$offcanvas-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-vertical-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-background: $light-gray;
-$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
-$offcanvas-push-zindex: 1;
-$offcanvas-overlap-zindex: 10;
-$offcanvas-reveal-zindex: 1;
-$offcanvas-transition-length: 0.5s;
-$offcanvas-transition-timing: ease;
-$offcanvas-fixed-reveal: true;
-$offcanvas-exit-background: rgba($white, 0.25);
-$maincontent-class: 'off-canvas-content';
-
-// 25. Orbit
-// ---------
-
-$orbit-bullet-background: $medium-gray;
-$orbit-bullet-background-active: $dark-gray;
-$orbit-bullet-diameter: 0.75rem;
-$orbit-bullet-margin: 0.0625rem;
-$orbit-bullet-margin-top: 0.5rem;
-$orbit-bullet-margin-bottom: 0.5rem;
-$orbit-caption-background: rgba($black, 0.5);
-$orbit-caption-padding: 0.625rem;
-$orbit-control-background-hover: rgba($black, 0.5);
-$orbit-control-padding: 0.625rem;
-$orbit-control-zindex: 10;
-
-// 26. Pagination
-// --------------
-
-$pagination-font-size: rem-calc(14);
-$pagination-margin-bottom: $global-margin;
-$pagination-item-color: $black;
-$pagination-item-padding: rem-calc(3 10);
-$pagination-item-spacing: rem-calc(1);
-$pagination-radius: $global-radius;
-$pagination-item-background-hover: $light-gray;
-$pagination-item-background-current: $primary-color;
-$pagination-item-color-current: $white;
-$pagination-item-color-disabled: $medium-gray;
-$pagination-ellipsis-color: $black;
-$pagination-mobile-items: false;
-$pagination-mobile-current-item: false;
-$pagination-arrows: true;
-
-// 27. Progress Bar
-// ----------------
-
-$progress-height: 0.625rem;
-$progress-background: $medium-gray;
-$progress-margin-bottom: $global-margin;
-$progress-meter-background: $primary-color;
-$progress-radius: $global-radius;
-
-// 28. Responsive Embed
-// --------------------
-
-$responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: (default: 4 by 3,
-  widescreen: 16 by 9);
-
-// 29. Reveal
-// ----------
-
-$reveal-background: $white;
-$reveal-width: 600px;
-$reveal-max-width: $global-width;
-$reveal-padding: $global-padding;
-$reveal-border: 1px solid $medium-gray;
-$reveal-radius: $global-radius;
-$reveal-zindex: 1005;
-$reveal-overlay-background: rgba($black, 0.45);
-
-// 30. Slider
-// ----------
-
-$slider-width-vertical: 0.3125rem;
-$slider-transition: all 0.2s ease-in-out;
-$slider-height: 0.3125rem;
-$slider-background: $light-gray;
-$slider-fill-background: $medium-gray;
-$slider-handle-height: 0.875rem;
-$slider-handle-width: 0.875rem;
-$slider-handle-background: $primary-color;
-$slider-opacity-disabled: 0.25;
-$slider-radius: $global-radius;
-
-// 31. Switch
-// ----------
-
-$switch-background: $light-gray;
-$switch-background-active: $primary-color;
-$switch-height: $space-two;
-$switch-height-tiny: $space-slab;
-$switch-height-small: $space-normal;
-$switch-height-large: $space-large;
-$switch-radius: $space-large;
-$switch-margin: $global-margin;
-$switch-paddle-background: $white;
-$switch-paddle-offset: $space-micro;
-$switch-paddle-radius: $space-large;
-$switch-paddle-transition: all 0.15s ease-out;
-
-// 32. Table
-// ---------
-
-$table-background: transparent;
-$table-color-scale: 5%;
-$table-border: 1px solid transparent;
-$table-padding: rem-calc(8 10 10);
-$table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background,
-  $table-color-scale + $table-hover-scale);
-$table-is-striped: false;
-$table-striped-background: smart-scale($table-background, $table-color-scale);
-$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
-$table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
-$table-head-font-color: $body-font-color;
-$table-foot-font-color: $body-font-color;
-$show-header-for-stacked: false;
-
-// 33. Tabs
-// --------
-
-$tab-margin: 0;
-
-$tab-background: transparent;
-$tab-background-active: transparent;
-$tab-item-font-size: $font-size-small;
-$tab-item-background-hover: transparent;
-$tab-item-padding: $space-one $zero;
-$tab-color: $primary-color;
-$tab-active-color: $primary-color;
-$tab-expand-max: 6;
-$tab-content-background: transparent;
-$tab-content-border: transparent;
-$tab-content-color: foreground($tab-background, $primary-color);
-$tab-content-padding: 0.625rem;
-
-// 34. Thumbnail
-// -------------
-
-$thumbnail-border: solid 4px $white;
-$thumbnail-margin-bottom: $global-margin;
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
-$thumbnail-transition: box-shadow 200ms ease-out;
-$thumbnail-radius: $global-radius;
-
-// 35. Title Bar
-// -------------
-
-$titlebar-background: $black;
-$titlebar-color: $white;
-$titlebar-padding: 0.3125rem;
-$titlebar-text-font-weight: bold;
-$titlebar-icon-color: $white;
-$titlebar-icon-color-hover: $medium-gray;
-$titlebar-icon-spacing: 0.15625rem;
-
-// 36. Tooltip
-// -----------
-
-$has-tip-font-weight: $global-weight-bold;
-$has-tip-border-bottom: dotted 1px $dark-gray;
-$tooltip-background-color: $black;
-$tooltip-color: $white;
-$tooltip-padding: 0.46875rem;
-$tooltip-font-size: $font-size-mini;
-$tooltip-pip-width: 0.46875rem;
-$tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-radius: $global-radius;
-
-// 37. Top Bar
-// -----------
-
-$topbar-padding: 0.3125;
-$topbar-background: $light-gray;
-$topbar-submenu-background: $topbar-background;
-$topbar-title-spacing: 0.3125 0.625rem 0.3125 0;
-$topbar-input-width: 200px;
-$topbar-unstack-breakpoint: medium;
-
-
-// Internal variable that contains the flex justifying options
-$-zf-flex-justify: -zf-flex-justify($global-text-direction);
-
-$menu-items-padding: $space-one;
-$xy-grid: false;

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -2,11 +2,6 @@
   @apply bg-slate-25 dark:bg-slate-800;
 }
 
-.flex-center {
-  @include flex-align(center, middle);
-  display: flex;
-}
-
 .bottom-space-fix {
   margin-bottom: auto;
 }

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

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

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

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

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

@@ -15,36 +15,13 @@
 @import 'variables';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
 @import 'formulate';
 @import 'date-picker';
 
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-everything($flex: true);
-
-@include foundation-prototype-text-utilities;
-@include foundation-prototype-text-transformation;
-@include foundation-prototype-text-decoration;
-@include foundation-prototype-font-styling;
-@include foundation-prototype-list-style-type;
-@include foundation-prototype-rounded;
-@include foundation-prototype-bordered;
-@include foundation-prototype-shadow;
-@include foundation-prototype-separator;
-@include foundation-prototype-overflow;
-@include foundation-prototype-display;
-@include foundation-prototype-position;
-@include foundation-prototype-border-box;
-@include foundation-prototype-border-none;
-@include foundation-prototype-sizing;
-@include foundation-prototype-spacing;
-
 @import 'typography';
 @import 'layout';
 @import 'animations';
-@import 'foundation-custom';
 @import 'rtl';
 
 @import 'widgets/buttons';
@@ -52,15 +29,11 @@
 @import 'widgets/conversation-card';
 @import 'widgets/conversation-view';
 @import 'widgets/forms';
-@import 'widgets/login';
 @import 'widgets/modal';
 @import 'widgets/reply-box';
 @import 'widgets/report';
-@import 'widgets/search-box';
-@import 'widgets/sidemenu';
 @import 'widgets/snackbar';
 @import 'widgets/states';
-@import 'widgets/status-bar';
 @import 'widgets/tabs';
 @import 'widgets/woot-tables';
 
@@ -69,7 +42,6 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
-@import '~shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
 .tooltip {

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

@@ -10,21 +10,14 @@
 @import 'variables';
 
 @import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-prototype-spacing;
-@include foundation-everything($flex: true);
 
 @import 'typography';
 @import 'layout';
 @import 'animations';
 
-@import 'foundation-custom';
 @import 'widgets/buttons';
 @import 'widgets/forms';
 

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

@@ -1,66 +0,0 @@
-.auth-wrap {
-  width: 100%;
-}
-
-// Outside login wrapper
-.login {
-  @include full-height;
-  overflow-y: auto;
-  padding-top: $space-larger * 1.2;
-
-  .login__hero {
-    margin-bottom: $space-larger;
-
-    .hero__logo {
-      width: 180px;
-    }
-
-    .hero__title {
-      font-weight: $font-weight-light;
-      margin-top: $space-larger;
-    }
-
-    .hero__sub {
-      color: $medium-gray;
-      font-size: $font-size-medium;
-    }
-  }
-
-  // Login box
-  .login-box {
-    @include background-white;
-    @include border-normal;
-    @include elegant-card;
-
-    border-radius: $space-smaller;
-    padding: $space-large;
-
-    label {
-      color: $color-gray;
-      font-size: $font-size-default;
-
-      input {
-        font-size: $font-size-default;
-        height: $space-larger;
-        padding: $space-slab;
-      }
-
-      .error {
-        font-size: $font-size-small;
-      }
-    }
-
-    .button {
-      height: $space-larger;
-    }
-  }
-
-  .sigin__footer {
-    font-size: $font-size-default;
-    padding: $space-medium;
-
-    > a {
-      font-weight: $font-weight-bold;
-    }
-  }
-}

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

@@ -1,7 +1,5 @@
 .modal-mask {
-  // @include flex;
-  // @include flex-align(center, middle);
-  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark  z-[9990] h-full left-0 fixed top-0 w-full;
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
 .page-top-bar {
@@ -45,8 +43,6 @@
   }
 
   .modal-footer {
-    // @include flex;
-    // @include flex-align($x: flex-end, $y: middle);
     @apply flex justify-end items-center py-2 px-0 gap-2;
 
     &.justify-content-end {

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -8,7 +8,7 @@
 
   .reply-box__top {
     .icon {
-      color: $medium-gray;
+      color: var(--slate-500);
       cursor: pointer;
       font-size: $font-size-medium;
       margin-right: $space-small;
@@ -34,7 +34,7 @@
       resize: none;
     }
 
-    > textarea {
+    >textarea {
       @include ghost-input();
       background: transparent;
       margin: 0;
@@ -52,7 +52,7 @@
     .reply-box__top {
       @apply bg-yellow-100 dark:bg-yellow-800;
 
-      > input {
+      >input {
         @apply bg-yellow-100 dark:bg-yellow-800;
       }
     }

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

@@ -1,45 +1,10 @@
-.side-menu {
-  i {
-    margin-right: var(--space-smaller);
-    min-width: var(--space-two);
-  }
-}
-
-.sidebar {
-  z-index: 1024 - 1;
-
-  //logo
-  .logo {
-    img {
-      max-height: 108px;
-      padding: $woot-logo-padding;
-    }
-  }
-
-  .nested {
-    a {
-      font-size: var(--font-size-small);
-      margin-bottom: var(--space-micro);
-      margin-top: var(--space-micro);
-
-      .inbox-icon {
-        display: inline-block;
-        margin-right: var(--space-micro);
-        min-width: var(--space-normal);
-        text-align: center;
-      }
-    }
-  }
-}
-
 // bottom-nav
 .bottom-nav {
   @include flex;
   @include space-between-column;
   @include border-normal-top;
   flex-direction: column;
-  padding: var(--space-one) var(--space-normal) var(--space-one)
-    var(--space-one);
+  padding: var(--space-one) var(--space-normal) var(--space-one) var(--space-one);
   position: relative;
 
   &:hover {

app/javascript/dashboard/components/ChatList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="{
       hide: !showConversationList,
       'list--full-width': isOnExpandedLayout,

app/javascript/dashboard/components/CustomAttribute.vue

@@ -13,7 +13,7 @@
         <div class="flex items-center justify-between w-full">
           <span
             class="attribute-name"
-            :class="{ error: $v.editedValue.$error }"
+            :class="{ error: v$.editedValue.$error }"
           >
             {{ label }}
           </span>
@@ -39,8 +39,8 @@
             :type="inputType"
             class="input-group-field"
             autofocus="true"
-            :class="{ error: $v.editedValue.$error }"
-            @blur="$v.editedValue.$touch"
+            :class="{ error: v$.editedValue.$error }"
+            @blur="v$.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
           <div class="input-group-button">
@@ -122,12 +122,13 @@
 
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from 'vuelidate/lib/validators';
+import { required, url } from '@vuelidate/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
 const DATE_FORMAT = 'yyyy-MM-dd';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -149,6 +150,9 @@ export default {
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isEditing: false,
@@ -206,13 +210,13 @@ export default {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
     shouldShowErrorMessage() {
-      return this.$v.editedValue.$error;
+      return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.$v.editedValue.url) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (!this.$v.editedValue.regexValidation) {
+      if (!this.v$.editedValue.regexValidation) {
         return this.regexCue
           ? this.regexCue
           : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -280,8 +284,8 @@ export default {
         this.attributeType === 'date'
           ? parseISO(this.editedValue)
           : this.editedValue;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.isEditing = false;
@@ -302,11 +306,14 @@ export default {
 .checkbox-wrap {
   @apply flex items-center;
 }
+
 .checkbox {
   @apply my-0 mr-2 ml-0;
 }
+
 .attribute-name {
   @apply w-full text-slate-800 dark:text-slate-100;
+
   &.error {
     @apply text-red-400 dark:text-red-500;
   }
@@ -323,6 +330,7 @@ export default {
     .value {
       @apply bg-slate-50 dark:bg-slate-700 mb-0;
     }
+
     .edit-button {
       @apply block;
     }
@@ -332,10 +340,12 @@ export default {
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
+
     .selector-name {
       @apply ml-0;
     }
   }
+
   .name {
     @apply ml-0;
   }

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

@@ -1,43 +0,0 @@
-<template>
-  <banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    action-button-icon="mail"
-    has-action-button
-    @click="resendVerificationEmail"
-  />
-</template>
-
-<script>
-import Banner from 'dashboard/components/ui/Banner.vue';
-import { mapGetters } from 'vuex';
-import accountMixin from 'dashboard/mixins/account';
-import alertMixin from 'shared/mixins/alertMixin';
-
-export default {
-  components: { Banner },
-  mixins: [accountMixin, alertMixin],
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-    }),
-    bannerMessage() {
-      return this.$t('APP_GLOBAL.EMAIL_VERIFICATION_PENDING');
-    },
-    actionButtonMessage() {
-      return this.$t('APP_GLOBAL.RESEND_VERIFICATION_MAIL');
-    },
-    shouldShowBanner() {
-      return !this.currentUser.confirmed;
-    },
-  },
-  methods: {
-    resendVerificationEmail() {
-      this.$store.dispatch('resendConfirmation');
-      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/index.js

@@ -1,29 +1,29 @@
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
-import Button from './ui/WootButton';
-import Code from './Code';
-import ColorPicker from './widgets/ColorPicker';
+import Button from './ui/WootButton.vue';
+import Code from './Code.vue';
+import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
 import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
-import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import FeatureToggle from './widgets/FeatureToggle';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import FeatureToggle from './widgets/FeatureToggle.vue';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import PhoneInput from './widgets/forms/PhoneInput.vue';
-import Label from './ui/Label';
-import LoadingState from './widgets/LoadingState';
-import Modal from './Modal';
-import ModalHeader from './ModalHeader';
-import ReportStatsCard from './widgets/ReportStatsCard';
-import SidemenuIcon from './SidemenuIcon';
-import Spinner from 'shared/components/Spinner';
-import SubmitButton from './buttons/FormSubmitButton';
+import Label from './ui/Label.vue';
+import LoadingState from './widgets/LoadingState.vue';
+import Modal from './Modal.vue';
+import ModalHeader from './ModalHeader.vue';
+import ReportStatsCard from './widgets/ReportStatsCard.vue';
+import SidemenuIcon from './SidemenuIcon.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from './buttons/FormSubmitButton.vue';
 import Tabs from './ui/Tabs/Tabs';
-import TabsItem from './ui/Tabs/TabsItem';
+import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';
 
 const WootUIKit = {

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

@@ -19,13 +19,13 @@
 
       <form class="flex flex-col w-full" @submit.prevent="addAccount">
         <div class="w-full">
-          <label :class="{ error: $v.accountName.$error }">
+          <label :class="{ error: v$.accountName.$error }">
             {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
             <input
               v-model.trim="accountName"
               type="text"
               :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="$v.accountName.$touch"
+              @input="v$.accountName.$touch"
             />
           </label>
         </div>
@@ -33,8 +33,8 @@
           <div class="w-full">
             <woot-submit-button
               :disabled="
-                $v.accountName.$invalid ||
-                $v.accountName.$invalid ||
+                v$.accountName.$invalid ||
+                v$.accountName.$invalid ||
                 uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
@@ -49,9 +49,10 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [alertMixin],
@@ -65,6 +66,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    class="banner flex items-center h-12 gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center"
     :class="bannerClasses"
   >
     <span class="banner-message">
@@ -18,7 +18,7 @@
       <woot-button
         v-if="hasActionButton"
         size="tiny"
-        :icon="actionButtonIcon"
+        icon="arrow-right"
         :variant="actionButtonVariant"
         color-scheme="primary"
         class-names="banner-action__button"
@@ -67,10 +67,6 @@ export default {
       type: String,
       default: '',
     },
-    actionButtonIcon: {
-      type: String,
-      default: 'arrow-right',
-    },
     colorScheme: {
       type: String,
       default: '',

app/javascript/dashboard/components/ui/Tabs/Tabs.js

@@ -1,4 +1,6 @@
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'WootTabs',
   props: {
     index: {
@@ -73,19 +75,25 @@ export default {
       });
     const leftButton = this.createScrollButton(createElement, 'left');
     const rightButton = this.createScrollButton(createElement, 'right');
-    return (
-      <div
-        class={{
+    return createElement(
+      'div',
+      {
+        class: {
           'tabs--container--with-border': this.border,
           'tabs--container': true,
-        }}
-      >
-        {leftButton}
-        <ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
-          {Tabs}
-        </ul>
-        {rightButton}
-      </div>
+        },
+      },
+      [
+        leftButton,
+        createElement(
+          'ul',
+          {
+            class: { tabs: true, 'tabs--with-scroll': this.hasScroll },
+          },
+          Tabs
+        ),
+        rightButton,
+      ]
     );
   },
-};
+});

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

@@ -12,11 +12,11 @@
         <woot-input
           v-model="value"
           type="text"
-          :class="{ error: $v.value.$error }"
+          :class="{ error: v$.value.$error }"
           :placeholder="
             $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
           "
-          @blur="$v.value.$touch"
+          @blur="v$.value.$touch"
         />
       </div>
       <div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
@@ -27,7 +27,7 @@
           <woot-button variant="clear" @click.prevent="onDismiss">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
           </woot-button>
-          <woot-button :is-disabled="$v.value.$invalid">
+          <woot-button :is-disabled="v$.value.$invalid">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
           </woot-button>
         </div>
@@ -37,15 +37,19 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import aiMixin from 'dashboard/mixins/aiMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [aiMixin, alertMixin, uiSettingsMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       value: '',

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

@@ -53,8 +53,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/mixins';
 
 .colorpicker {
   position: relative;

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

@@ -705,10 +705,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
+@import '@chatwoot/prosemirror-schema/src/styles/base.scss';
 
 .ProseMirror-menubar-wrapper {
   @apply flex flex-col;
+
   .ProseMirror-menubar {
     min-height: var(--space-two) !important;
     @apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
@@ -717,6 +718,7 @@ export default {
       @apply bg-slate-75 dark:bg-slate-800;
     }
   }
+
   > .ProseMirror {
     @apply p-0 break-words text-slate-800 dark:text-slate-100;
 

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

@@ -41,7 +41,7 @@
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           :grouped-filters="true"
-          :v="$v.appliedFilters.$each[i]"
+          :v="v$.appliedFilters.$each[i]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -80,7 +80,7 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -89,6 +89,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -117,6 +118,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     appliedFilters: {
       required,
@@ -347,8 +351,8 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$store.dispatch(
         'setConversationFilters',
         JSON.parse(JSON.stringify(this.appliedFilters))

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

@@ -6,7 +6,6 @@
     <conversation-header
       v-if="currentChat.id"
       :chat="currentChat"
-      :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout"
       @contact-panel-toggle="onToggleContactPanel"
@@ -31,7 +30,6 @@
       <messages-view
         v-if="currentChat.id"
         :inbox-id="inboxId"
-        :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
@@ -82,10 +80,6 @@ export default {
       default: '',
       required: false,
     },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
     isContactPanelOpen: {
       type: Boolean,
       default: true,

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

@@ -87,7 +87,6 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { conversationReopenTime } from 'dashboard/helper/snoozeHelpers';
-import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
@@ -110,10 +109,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     ...mapGetters({
@@ -128,9 +123,6 @@ export default {
         params: { accountId, inbox_id: inboxId, label, teamId },
         name,
       } = this.$route;
-      if (this.isInboxView) {
-        return frontendURL(`accounts/${accountId}/inbox`);
-      }
       return conversationListPageURL({
         accountId,
         inboxId,

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

@@ -45,14 +45,14 @@
             }}</label>
           </div>
           <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: $v.email.$error }">
+            <label :class="{ error: v$.email.$error }">
               <input
                 v-model.trim="email"
                 type="text"
                 :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="$v.email.$touch"
+                @input="v$.email.$touch"
               />
-              <span v-if="$v.email.$error" class="message">
+              <span v-if="v$.email.$error" class="message">
                 {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
               </span>
             </label>
@@ -73,8 +73,10 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { required, minLength, email } from '@vuelidate/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
   mixins: [alertMixin],
   props: {
@@ -87,6 +89,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -108,7 +113,7 @@ export default {
     isFormValid() {
       if (this.selectedType) {
         if (this.sentToOtherEmailAddress) {
-          return !!this.email && !this.$v.email.$error;
+          return !!this.email && !this.v$.email.$error;
         }
         return true;
       }

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

@@ -12,10 +12,7 @@
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
-        :class="
-          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
-        "
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -145,10 +142,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    isInboxView: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {

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

@@ -164,7 +164,7 @@ import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel
 import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
-import MessageSignatureMissingAlert from './MessageSignatureMissingAlert';
+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';
@@ -198,7 +198,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: {
@@ -1208,6 +1208,7 @@ export default {
     @apply bg-yellow-50 dark:bg-yellow-200;
   }
 }
+
 .send-button {
   @apply mb-0;
 }
@@ -1228,6 +1229,7 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
+
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

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

@@ -1,15 +1,15 @@
 <template>
   <div>
     <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.toEmailsVal.$model"
+            v-model.trim="v$.toEmailsVal.$model"
             type="text"
-            :class="{ error: $v.toEmailsVal.$error }"
+            :class="{ error: v$.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -17,15 +17,15 @@
       </div>
     </div>
     <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.ccEmailsVal.$model"
+            v-model.trim="v$.ccEmailsVal.$model"
             type="text"
-            :class="{ error: $v.ccEmailsVal.$error }"
+            :class="{ error: v$.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -39,20 +39,20 @@
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
         </woot-button>
       </div>
-      <span v-if="$v.ccEmailsVal.$error" class="message">
+      <span v-if="v$.ccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
       </span>
     </div>
     <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.bccEmailsVal.$model"
+            v-model.trim="v$.bccEmailsVal.$model"
             type="text"
-            :class="{ error: $v.bccEmailsVal.$error }"
+            :class="{ error: v$.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
             "
@@ -60,7 +60,7 @@
           />
         </div>
       </div>
-      <span v-if="$v.bccEmailsVal.$error" class="message">
+      <span v-if="v$.bccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
       </span>
     </div>
@@ -137,7 +137,7 @@ export default {
       this.showBcc = true;
     },
     onBlur() {
-      this.$v.$touch();
+      this.v$.$touch();
       this.$emit('update:bccEmails', this.bccEmailsVal);
       this.$emit('update:ccEmails', this.ccEmailsVal);
       this.$emit('update:toEmails', this.toEmailsVal);
@@ -149,12 +149,14 @@ export default {
 .input-group-wrap .message {
   @apply text-sm text-red-500 dark:text-red-500;
 }
+
 .input-group {
   @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
   }
+
   .input-group-field::v-deep input {
     @apply mb-0 border-transparent;
   }
@@ -162,6 +164,7 @@ export default {
 
 .input-group.error {
   @apply border-b-red-500 dark:border-b-red-500;
+
   .input-group-label {
     @apply text-red-500 dark:text-red-500;
   }

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

@@ -45,7 +45,9 @@ const allKeysRequired = value => {
   const keys = Object.keys(value);
   return keys.every(key => value[key]);
 };
-import { requiredIf } from 'vuelidate/lib/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import { requiredIf } from '@vuelidate/validators';
 export default {
   props: {
     template: {
@@ -53,6 +55,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     processedParams: {
       requiredIfKeysPresent: requiredIf('variables'),
@@ -149,9 +154,11 @@ footer {
     @apply ml-2.5;
   }
 }
+
 .error {
   @apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
 }
+
 .template-input {
   @apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
 }

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

@@ -46,7 +46,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';
 
 .file {
   display: flex;

app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js

@@ -1,4 +1,4 @@
-import emailValidator from 'vuelidate/lib/validators/email';
+import { email as emailValidator } from '@vuelidate/validators';
 
 export const validEmailsByComma = value => {
   if (!value.length) return true;

app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue

@@ -6,12 +6,12 @@
       <woot-input
         v-model="value"
         type="text"
-        :class="{ error: $v.value.$error }"
+        :class="{ error: v$.value.$error }"
         :placeholder="confirmPlaceHolderText"
-        @blur="$v.value.$touch"
+        @blur="v$.value.$touch"
       />
       <div class="button-wrapper">
-        <woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
+        <woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
           {{ confirmText }}
         </woot-button>
         <woot-button class="clear" @click.prevent="closeModal">
@@ -23,14 +23,14 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import Modal from '../../Modal.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     Modal,
   },
-
   props: {
     show: {
       type: Boolean,
@@ -61,6 +61,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       value: '',

app/javascript/dashboard/featureFlags.js

@@ -17,5 +17,4 @@ export const FEATURE_FLAGS = {
   VOICE_RECORDER: 'voice_recorder',
   AUDIT_LOGS: 'audit_logs',
   INSERT_ARTICLE_IN_REPLY: 'insert_article_in_reply',
-  INBOX_VIEW: 'inbox_view',
 };

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -102,12 +102,3 @@ export const OPEN_AI_EVENTS = Object.freeze({
 export const GENERAL_EVENTS = Object.freeze({
   COMMAND_BAR: 'Used commandbar',
 });
-
-export const INBOX_EVENTS = Object.freeze({
-  OPEN_CONVERSATION_VIA_INBOX: 'Opened conversation via inbox',
-  MARK_NOTIFICATION_AS_READ: 'Marked notification as read',
-  MARK_ALL_NOTIFICATIONS_AS_READ: 'Marked all notifications as read',
-  MARK_NOTIFICATION_AS_UNREAD: 'Marked notification as unread',
-  DELETE_NOTIFICATION: 'Deleted notification',
-  DELETE_ALL_NOTIFICATIONS: 'Deleted all notifications',
-});

app/javascript/dashboard/i18n/locale/en/inbox.json

@@ -1,47 +0,0 @@
-{
-  "INBOX": {
-    "LIST": {
-      "TITLE": "Inbox",
-      "DISPLAY_DROPDOWN": "Display",
-      "LOADING": "Fetching notifications",
-      "EOF": "All notifications loaded 🎉",
-      "404": "There are no active notifications in this group.",
-      "NOTE": "Notifications from all subscribed inboxes"
-    },
-    "ACTION_HEADER": {
-      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
-    },
-    "TYPES": {
-      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
-      "CONVERSATION_CREATION": "New conversation created",
-      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
-      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
-    },
-    "MENU_ITEM": {
-      "MARK_AS_READ": "Mark as read",
-      "MARK_AS_UNREAD": "Mark as unread",
-      "SNOOZE": "Snooze",
-      "DELETE": "Delete",
-      "MARK_ALL_READ": "Mark all as read",
-      "DELETE_ALL": "Delete all",
-      "DELETE_ALL_READ": "Delete all read"
-    },
-    "DISPLAY_MENU": {
-      "SORT": "Sort",
-      "DISPLAY": "Display :",
-      "SORT_OPTIONS": {
-        "NEWEST": "Newest",
-        "OLDEST": "Oldest",
-        "PRIORITY": "Priority"
-      },
-      "DISPLAY_OPTIONS": {
-        "SNOOZED": "Snoozed",
-        "READ": "Read",
-        "LABELS": "Labels",
-        "CONVERSATION_ID": "Conversation ID"
-      }
-    }
-  }
-}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -29,7 +29,6 @@ import settings from './settings.json';
 import signup from './signup.json';
 import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
-import inbox from './inbox.json';
 
 export default {
   ...advancedFilters,
@@ -63,5 +62,4 @@ export default {
   ...signup,
   ...teamsSettings,
   ...whatsappTemplates,
-  ...inbox,
 };

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -156,9 +156,6 @@
     "TRIAL_MESSAGE": "days trial remaining.",
     "TRAIL_BUTTON": "Buy Now",
     "DELETED_USER": "Deleted User",
-    "EMAIL_VERIFICATION_PENDING": "It seems that you haven't verified your email address yet. Please check your inbox for the verification email.",
-    "RESEND_VERIFICATION_MAIL": "Resend verification email",
-    "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
     "ACCOUNT_SUSPENDED": {
       "TITLE": "Account Suspended",
       "MESSAGE": "Your account is suspended. Please reach out to the support team for more information."
@@ -196,7 +193,6 @@
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "SWITCH": "Switch",
     "CONVERSATIONS": "Conversations",
-    "INBOX": "Inbox",
     "ALL_CONVERSATIONS": "All Conversations",
     "MENTIONED_CONVERSATIONS": "Mentions",
     "PARTICIPATING_CONVERSATIONS": "Participating",

app/javascript/dashboard/mixins/automations/methodsMixin.js

@@ -150,8 +150,8 @@ export default {
       }
     },
     submitAutomation() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       const automation = generateAutomationPayload(this.automation);
       this.$emit('saveAutomation', automation, this.mode);
     },

app/javascript/dashboard/mixins/automations/validationsMixin.js

@@ -1,6 +1,10 @@
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     automation: {
       name: {

app/javascript/dashboard/mixins/specs/time.spec.js

@@ -52,77 +52,19 @@ describe('#dateFormat', () => {
 });
 
 describe('#shortTimestamp', () => {
-  // Test cases when withAgo is false or not provided
-  it('returns correct value without ago', () => {
+  it('returns correct value', () => {
     expect(TimeMixin.methods.shortTimestamp('less than a minute ago')).toEqual(
       'now'
     );
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago')).toEqual('12m');
-    expect(TimeMixin.methods.shortTimestamp('a minute ago')).toEqual('1m');
-    expect(TimeMixin.methods.shortTimestamp('an hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago')).toEqual('1h');
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago')).toEqual('2h');
-    expect(TimeMixin.methods.shortTimestamp('1 day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('a day ago')).toEqual('1d');
-    expect(TimeMixin.methods.shortTimestamp('3 days ago')).toEqual('3d');
-    expect(TimeMixin.methods.shortTimestamp('a month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('1 month ago')).toEqual('1mo');
-    expect(TimeMixin.methods.shortTimestamp('2 months ago')).toEqual('2mo');
-    expect(TimeMixin.methods.shortTimestamp('a year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('1 year ago')).toEqual('1y');
-    expect(TimeMixin.methods.shortTimestamp('4 years ago')).toEqual('4y');
-  });
-
-  // Test cases when withAgo is true
-  it('returns correct value with ago', () => {
-    expect(
-      TimeMixin.methods.shortTimestamp('less than a minute ago', true)
-    ).toEqual('now');
-    expect(TimeMixin.methods.shortTimestamp('1 minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('12 minutes ago', true)).toEqual(
-      '12m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a minute ago', true)).toEqual(
-      '1m ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('an hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 hour ago', true)).toEqual(
-      '1h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 hours ago', true)).toEqual(
-      '2h ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a day ago', true)).toEqual(
-      '1d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('3 days ago', true)).toEqual(
-      '3d ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 month ago', true)).toEqual(
-      '1mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('2 months ago', true)).toEqual(
-      '2mo ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('a year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('1 year ago', true)).toEqual(
-      '1y ago'
-    );
-    expect(TimeMixin.methods.shortTimestamp('4 years ago', true)).toEqual(
-      '4y ago'
-    );
+    expect(TimeMixin.methods.shortTimestamp(' minute ago')).toEqual('m');
+    expect(TimeMixin.methods.shortTimestamp(' minutes ago')).toEqual('m');
+    expect(TimeMixin.methods.shortTimestamp(' hour ago')).toEqual('h');
+    expect(TimeMixin.methods.shortTimestamp(' hours ago')).toEqual('h');
+    expect(TimeMixin.methods.shortTimestamp(' day ago')).toEqual('d');
+    expect(TimeMixin.methods.shortTimestamp(' days ago')).toEqual('d');
+    expect(TimeMixin.methods.shortTimestamp(' month ago')).toEqual('mo');
+    expect(TimeMixin.methods.shortTimestamp(' months ago')).toEqual('mo');
+    expect(TimeMixin.methods.shortTimestamp(' year ago')).toEqual('y');
+    expect(TimeMixin.methods.shortTimestamp(' years ago')).toEqual('y');
   });
 });

app/javascript/dashboard/mixins/time.js

@@ -28,36 +28,25 @@ export default {
       const unixTime = fromUnixTime(time);
       return format(unixTime, dateFormat);
     },
-    shortTimestamp(time, withAgo = false) {
-      // This function takes a time string and converts it to a short time string
-      // with the following format: 1m, 1h, 1d, 1mo, 1y
-      // The function also takes an optional boolean parameter withAgo
-      // which will add the word "ago" to the end of the time string
-      const suffix = withAgo ? ' ago' : '';
-      const timeMappings = {
-        'less than a minute ago': 'now',
-        'a minute ago': `1m${suffix}`,
-        'an hour ago': `1h${suffix}`,
-        'a day ago': `1d${suffix}`,
-        'a month ago': `1mo${suffix}`,
-        'a year ago': `1y${suffix}`,
-      };
-      // Check if the time string is one of the specific cases
-      if (timeMappings[time]) {
-        return timeMappings[time];
-      }
+    shortTimestamp(time) {
       const convertToShortTime = time
         .replace(/about|over|almost|/g, '')
-        .replace(' minute ago', `m${suffix}`)
-        .replace(' minutes ago', `m${suffix}`)
-        .replace(' hour ago', `h${suffix}`)
-        .replace(' hours ago', `h${suffix}`)
-        .replace(' day ago', `d${suffix}`)
-        .replace(' days ago', `d${suffix}`)
-        .replace(' month ago', `mo${suffix}`)
-        .replace(' months ago', `mo${suffix}`)
-        .replace(' year ago', `y${suffix}`)
-        .replace(' years ago', `y${suffix}`);
+        .replace('less than a minute ago', 'now')
+        .replace(' minute ago', 'm')
+        .replace(' minutes ago', 'm')
+        .replace('a minute ago', 'm')
+        .replace('an hour ago', 'h')
+        .replace(' hour ago', 'h')
+        .replace(' hours ago', 'h')
+        .replace(' day ago', 'd')
+        .replace('a day ago', 'd')
+        .replace(' days ago', 'd')
+        .replace('a month ago', 'mo')
+        .replace(' months ago', 'mo')
+        .replace(' month ago', 'mo')
+        .replace('a year ago', 'y')
+        .replace(' year ago', 'y')
+        .replace(' years ago', 'y');
       return convertToShortTime;
     },
   },

app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue

@@ -8,12 +8,12 @@
     <form class="w-full" @submit.prevent="addCustomAttribute">
       <woot-input
         v-model.trim="attributeName"
-        :class="{ error: $v.attributeName.$error }"
+        :class="{ error: v$.attributeName.$error }"
         class="w-full"
         :error="attributeNameError"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
-        @input="$v.attributeName.$touch"
+        @input="v$.attributeName.$touch"
       />
       <woot-input
         v-model.trim="attributeValue"
@@ -23,7 +23,7 @@
       />
       <div class="flex justify-end items-center py-2 px-0 gap-2">
         <woot-button
-          :is-disabled="$v.attributeName.$invalid || isCreating"
+          :is-disabled="v$.attributeName.$invalid || isCreating"
           :is-loading="isCreating"
         >
           {{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
@@ -39,7 +39,8 @@
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -56,6 +57,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       attributeValue: '',
@@ -70,7 +74,7 @@ export default {
   },
   computed: {
     attributeNameError() {
-      if (this.$v.attributeName.$error) {
+      if (this.v$.attributeName.$error) {
         return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
       }
       return '';

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -4,7 +4,7 @@
       <div>
         <div
           class="mt-1 multiselect-wrap--medium"
-          :class="{ error: $v.parentContact.$error }"
+          :class="{ error: v$.parentContact.$error }"
         >
           <label class="multiselect__label">
             {{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
@@ -52,7 +52,7 @@
               {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
             </span>
           </multiselect>
-          <span v-if="$v.parentContact.$error" class="message">
+          <span v-if="v$.parentContact.$error" class="message">
             {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
           </span>
         </div>
@@ -115,7 +115,8 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
 import ContactDropdownItem from './ContactDropdownItem.vue';
@@ -141,6 +142,10 @@ export default {
       default: () => [],
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
   validations: {
     primaryContact: {
       required,
@@ -165,8 +170,8 @@ export default {
       this.$emit('search', query);
     },
     onSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.$emit('submit', this.parentContact.id);

app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue

@@ -45,7 +45,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables.scss';
+@import 'dashboard/assets/scss/variables.scss';
+
 .footer-wrap {
   width: 100%;
   display: flex;

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -41,7 +41,7 @@
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :v="$v.appliedFilters.$each[i]"
+          :v="v$.appliedFilters.$each[i]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -90,7 +90,7 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
 import countries from 'shared/constants/countries.js';
 import { mapGetters } from 'vuex';
@@ -98,6 +98,8 @@ import { filterAttributeGroups } from '../contactFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
   components: {
     FilterInputBox,
@@ -125,6 +127,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     appliedFilters: {
       required,
@@ -314,8 +319,8 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$store.dispatch(
         'contacts/setContactFilters',
         JSON.parse(JSON.stringify(this.appliedFilters))

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -27,7 +27,7 @@
   </section>
 </template>
 
-<script>
+<script lang="jsx">
 import { mixin as clickaway } from 'vue-clickaway';
 import { VeTable } from 'vue-easytable';
 import { getCountryFlag } from 'dashboard/helper/flag';

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -18,38 +18,38 @@
     </div>
     <div>
       <div class="w-full">
-        <label :class="{ error: $v.name.$error }">
+        <label :class="{ error: v$.name.$error }">
           {{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
           <input
             v-model.trim="name"
             type="text"
             :placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
-            @input="$v.name.$touch"
+            @input="v$.name.$touch"
           />
         </label>
 
-        <label :class="{ error: $v.email.$error }">
+        <label :class="{ error: v$.email.$error }">
           {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
           <input
             v-model.trim="email"
             type="text"
             :placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
-            @input="$v.email.$touch"
+            @input="v$.email.$touch"
           />
-          <span v-if="$v.email.$error" class="message">
+          <span v-if="v$.email.$error" class="message">
             {{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
           </span>
         </label>
       </div>
     </div>
     <div class="w-full">
-      <label :class="{ error: $v.description.$error }">
+      <label :class="{ error: v$.description.$error }">
         {{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
         <textarea
           v-model.trim="description"
           type="text"
           :placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
-          @input="$v.description.$touch"
+          @input="v$.description.$touch"
         />
       </label>
     </div>
@@ -67,7 +67,7 @@
             :error="isPhoneNumberNotValid"
             :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
             @input="onPhoneNumberInputChange"
-            @blur="$v.phoneNumber.$touch"
+            @blur="v$.phoneNumber.$touch"
             @setCode="setPhoneCode"
           />
           <span v-if="isPhoneNumberNotValid" class="message">
@@ -151,10 +151,11 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
-import { required, email } from 'vuelidate/lib/validators';
+import { required, email } from '@vuelidate/validators';
 import countries from 'shared/constants/countries.js';
 import { isPhoneNumberValid } from 'shared/helpers/Validators';
 import parsePhoneNumber from 'libphonenumber-js';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [alertMixin],
@@ -172,6 +173,9 @@ export default {
       default: () => {},
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       countries: countries,
@@ -364,8 +368,8 @@ export default {
       }
     },
     async handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid || this.isPhoneNumberNotValid) {
+      this.v$.$touch();
+      if (this.v$.$invalid || this.isPhoneNumberNotValid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -13,7 +13,7 @@
           </label>
           <div
             class="multiselect-wrap--small"
-            :class="{ 'has-multi-select-error': $v.targetInbox.$error }"
+            :class="{ 'has-multi-select-error': v$.targetInbox.$error }"
           >
             <multiselect
               v-model="targetInbox"
@@ -47,8 +47,8 @@
               </template>
             </multiselect>
           </div>
-          <label :class="{ error: $v.targetInbox.$error }">
-            <span v-if="$v.targetInbox.$error" class="message">
+          <label :class="{ error: v$.targetInbox.$error }">
+            <span v-if="v$.targetInbox.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
             </span>
           </label>
@@ -76,15 +76,15 @@
       </div>
       <div v-if="isAnEmailInbox" class="w-full">
         <div class="w-full">
-          <label :class="{ error: $v.subject.$error }">
+          <label :class="{ error: v$.subject.$error }">
             {{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
             <input
               v-model="subject"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
-              @input="$v.subject.$touch"
+              @input="v$.subject.$touch"
             />
-            <span v-if="$v.subject.$error" class="message">
+            <span v-if="v$.subject.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
             </span>
           </label>
@@ -112,13 +112,13 @@
               <woot-message-editor
                 v-model="message"
                 class="message-editor"
-                :class="{ editor_warning: $v.message.$error }"
+                :class="{ editor_warning: v$.message.$error }"
                 :enable-variables="true"
                 :signature="signatureToApply"
                 :allow-signature="true"
                 :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
                 @toggle-canned-menu="toggleCannedMenu"
-                @blur="$v.message.$touch"
+                @blur="v$.message.$touch"
               >
                 <template #footer>
                   <message-signature-missing-alert
@@ -138,7 +138,7 @@
                   </div>
                 </template>
               </woot-message-editor>
-              <span v-if="$v.message.$error" class="editor-warning__message">
+              <span v-if="v$.message.$error" class="editor-warning__message">
                 {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
               </span>
             </div>
@@ -149,16 +149,16 @@
             @on-select-template="toggleWaTemplate"
             @on-send="onSendWhatsAppReply"
           />
-          <label v-else :class="{ error: $v.message.$error }">
+          <label v-else :class="{ error: v$.message.$error }">
             {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
             <textarea
               v-model="message"
               class="min-h-[5rem]"
               type="text"
               :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
-              @input="$v.message.$touch"
+              @input="v$.message.$touch"
             />
-            <span v-if="$v.message.$error" class="message">
+            <span v-if="v$.message.$error" class="message">
               {{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
             </span>
           </label>
@@ -240,17 +240,17 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
 import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
-import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert';
+import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue';
 import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
 import WhatsappTemplates from './WhatsappTemplates.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { getInboxSource } from 'dashboard/helper/inbox';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import FileUpload from 'vue-upload-component';
-import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
+import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
 import {
@@ -258,6 +258,7 @@ import {
   removeSignature,
 } from 'dashboard/helper/editorHelper';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -286,6 +287,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -494,8 +498,8 @@ export default {
     },
     onFormSubmit() {
       const isFromWhatsApp = false;
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       this.createConversation({
@@ -571,6 +575,7 @@ export default {
 .file-uploads {
   @apply text-start;
 }
+
 .multiselect-wrap--small.has-multi-select-error {
   ::v-deep {
     .multiselect__tags {
@@ -583,9 +588,11 @@ export default {
   .mention--box {
     @apply left-0 m-auto right-0 top-auto h-fit;
   }
+
   .multiselect .multiselect__content .multiselect__option span {
     @apply inline-flex w-6 text-slate-600 dark:text-slate-400;
   }
+
   .multiselect .multiselect__content .multiselect__option {
     @apply py-0.5 px-1;
   }

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,28 +1,9 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
-const ConversationView = () => import('./ConversationView');
-const InboxView = () => import('../inbox/InboxView.vue');
+const ConversationView = () => import('./ConversationView.vue');
 
 export default {
   routes: [
-    {
-      path: frontendURL('accounts/:accountId/inbox'),
-      name: 'inbox',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: () => {
-        return { inboxId: 0 };
-      },
-    },
-    {
-      path: frontendURL('accounts/:accountId/inbox/:conversation_id'),
-      name: 'inbox_view_conversation',
-      roles: ['administrator', 'agent'],
-      component: InboxView,
-      props: route => {
-        return { inboxId: 0, conversationId: route.params.conversation_id };
-      },
-    },
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',

app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue

@@ -8,11 +8,11 @@
           :label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
           type="text"
           :error="
-            $v.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+            v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
           "
-          :class="{ error: $v.name.$error }"
+          :class="{ error: v$.name.$error }"
           :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="$v.name.$touch"
+          @blur="v$.name.$touch"
         />
 
         <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
@@ -29,9 +29,10 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import alertMixin from 'shared/mixins/alertMixin';
 import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [alertMixin],
@@ -49,7 +50,9 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       show: true,
@@ -59,7 +62,7 @@ export default {
 
   computed: {
     isButtonDisabled() {
-      return this.$v.name.$invalid;
+      return this.v$.name.$invalid;
     },
   },
 
@@ -75,8 +78,8 @@ export default {
       this.$emit('close');
     },
     async saveCustomViews() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue

@@ -7,7 +7,7 @@
     />
     <form class="w-full" @submit.prevent="onCreate">
       <div class="w-full">
-        <label :class="{ error: $v.selectedLocale.$error }">
+        <label :class="{ error: v$.selectedLocale.$error }">
           {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
           <select v-model="selectedLocale">
             <option
@@ -18,7 +18,7 @@
               {{ locale.name }}-{{ locale.code }}
             </option>
           </select>
-          <span v-if="$v.selectedLocale.$error" class="message">
+          <span v-if="v$.selectedLocale.$error" class="message">
             {{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
           </span>
         </label>
@@ -41,9 +41,11 @@
 <script>
 import Modal from 'dashboard/components/Modal.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import allLocales from 'shared/constants/locales.js';
 import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
   components: {
     Modal,
@@ -59,6 +61,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       selectedLocale: '',
@@ -94,8 +99,8 @@ export default {
   },
   methods: {
     async onCreate() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       const updatedLocales = this.addedLocales;
@@ -137,6 +142,7 @@ export default {
   input {
     margin-bottom: 0;
   }
+
   .message {
     margin-top: 0;
   }

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 z-50 bg-white dark:bg-slate-900"
+    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 z-10 bg-white dark:bg-slate-900"
   >
     <div class="flex items-center">
       <woot-sidemenu-icon />

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -59,7 +59,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import UpgradePage from './UpgradePage';
+import UpgradePage from './UpgradePage.vue';
 import { frontendURL } from '../../../../helper/URLHelper';
 import Sidebar from 'dashboard/components/layout/Sidebar.vue';
 import { BUS_EVENTS } from 'shared/constants/busEvents';

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue

@@ -42,35 +42,35 @@
         <div class="mb-4">
           <woot-input
             v-model.trim="name"
-            :class="{ error: $v.name.$error }"
+            :class="{ error: v$.name.$error }"
             :error="nameError"
             :label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
             :help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
-            @blur="$v.name.$touch"
+            @blur="v$.name.$touch"
             @input="onNameChange"
           />
         </div>
         <div class="mb-4">
           <woot-input
             v-model.trim="slug"
-            :class="{ error: $v.slug.$error }"
+            :class="{ error: v$.slug.$error }"
             :error="slugError"
             :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
             :help-text="domainHelpText"
-            @blur="$v.slug.$touch"
+            @blur="v$.slug.$touch"
           />
         </div>
         <div class="mb-4">
           <woot-input
             v-model.trim="domain"
-            :class="{ error: $v.domain.$error }"
+            :class="{ error: v$.domain.$error }"
             :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
             :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
             :help-text="domainExampleHelpText"
             :error="domainError"
-            @blur="$v.domain.$touch"
+            @blur="v$.domain.$touch"
           />
         </div>
       </div>
@@ -78,7 +78,7 @@
     <div class="flex-end">
       <woot-button
         :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
+        :is-disabled="v$.$invalid"
         @click="onSubmitClick"
       >
         {{ submitButtonText }}
@@ -88,8 +88,9 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { isDomain } from 'shared/helpers/Validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import alertMixin from 'shared/mixins/alertMixin';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
@@ -118,6 +119,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -144,19 +148,19 @@ export default {
   },
   computed: {
     nameError() {
-      if (this.$v.name.$error) {
+      if (this.v$.name.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
       }
       return '';
     },
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
     },
     domainError() {
-      if (this.$v.domain.$error) {
+      if (this.v$.domain.$error) {
         return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
       }
       return '';
@@ -192,8 +196,8 @@ export default {
       this.slug = convertToCategorySlug(this.name);
     },
     onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
 
@@ -251,6 +255,7 @@ export default {
   input {
     @apply mb-1;
   }
+
   .help-text {
     @apply mb-0;
   }

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue

@@ -47,12 +47,12 @@
             "
             :help-text="homepageExampleHelpText"
             :error="
-              $v.homePageLink.$error
+              v$.homePageLink.$error
                 ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
                 : ''
             "
-            :class="{ error: $v.homePageLink.$error }"
-            @blur="$v.homePageLink.$touch"
+            :class="{ error: v$.homePageLink.$error }"
+            @blur="v$.homePageLink.$touch"
           />
         </div>
       </div>
@@ -60,7 +60,7 @@
     <div class="flex-end">
       <woot-button
         :is-loading="isSubmitting"
-        :is-disabled="$v.$invalid"
+        :is-disabled="v$.$invalid"
         @click="onSubmitClick"
       >
         {{
@@ -74,8 +74,9 @@
 </template>
 
 <script>
-import { url } from 'vuelidate/lib/validators';
+import { url } from '@vuelidate/validators';
 import { getRandomColor } from 'dashboard/helper/labelColor';
+import { useVuelidate } from '@vuelidate/core';
 
 import alertMixin from 'shared/mixins/alertMixin';
 import wootConstants from 'dashboard/constants/globals';
@@ -83,7 +84,6 @@ import wootConstants from 'dashboard/constants/globals';
 const { EXAMPLE_URL } = wootConstants;
 
 export default {
-  components: {},
   mixins: [alertMixin],
   props: {
     portal: {
@@ -95,6 +95,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       color: '#000',
@@ -132,8 +135,8 @@ export default {
       }
     },
     onSubmitClick() {
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       const portal = {
@@ -158,9 +161,11 @@ export default {
   input {
     @apply mb-1;
   }
+
   .help-text {
     @apply mb-0;
   }
+
   .colorpicker--selected {
     @apply mb-0;
   }

app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js

@@ -1,30 +1,32 @@
-import HelpCenterLayout from './components/HelpCenterLayout';
+import HelpCenterLayout from './components/HelpCenterLayout.vue';
 import { getPortalRoute } from './helpers/routeHelper';
 
-const ListAllPortals = () => import('./pages/portals/ListAllPortals');
-const NewPortal = () => import('./pages/portals/NewPortal');
+const ListAllPortals = () => import('./pages/portals/ListAllPortals.vue');
+const NewPortal = () => import('./pages/portals/NewPortal.vue');
 
-const EditPortal = () => import('./pages/portals/EditPortal');
-const EditPortalBasic = () => import('./pages/portals/EditPortalBasic');
+const EditPortal = () => import('./pages/portals/EditPortal.vue');
+const EditPortalBasic = () => import('./pages/portals/EditPortalBasic.vue');
 const EditPortalCustomization = () =>
-  import('./pages/portals/EditPortalCustomization');
+  import('./pages/portals/EditPortalCustomization.vue');
 const EditPortalLocales = () => import('./pages/portals/EditPortalLocales.vue');
-const ShowPortal = () => import('./pages/portals/ShowPortal');
-const PortalDetails = () => import('./pages/portals/PortalDetails');
-const PortalCustomization = () => import('./pages/portals/PortalCustomization');
+const ShowPortal = () => import('./pages/portals/ShowPortal.vue');
+const PortalDetails = () => import('./pages/portals/PortalDetails.vue');
+const PortalCustomization = () =>
+  import('./pages/portals/PortalCustomization.vue');
 const PortalSettingsFinish = () =>
-  import('./pages/portals/PortalSettingsFinish');
+  import('./pages/portals/PortalSettingsFinish.vue');
 
-const ListAllCategories = () => import('./pages/categories/ListAllCategories');
-const NewCategory = () => import('./pages/categories/NewCategory');
-const EditCategory = () => import('./pages/categories/EditCategory');
+const ListAllCategories = () =>
+  import('./pages/categories/ListAllCategories.vue');
+const NewCategory = () => import('./pages/categories/NewCategory.vue');
+const EditCategory = () => import('./pages/categories/EditCategory.vue');
 const ListCategoryArticles = () =>
-  import('./pages/articles/ListCategoryArticles');
-const ListAllArticles = () => import('./pages/articles/ListAllArticles');
+  import('./pages/articles/ListCategoryArticles.vue');
+const ListAllArticles = () => import('./pages/articles/ListAllArticles.vue');
 const DefaultPortalArticles = () =>
-  import('./pages/articles/DefaultPortalArticles');
-const NewArticle = () => import('./pages/articles/NewArticle');
-const EditArticle = () => import('./pages/articles/EditArticle');
+  import('./pages/articles/DefaultPortalArticles.vue');
+const NewArticle = () => import('./pages/articles/NewArticle.vue');
+const EditArticle = () => import('./pages/articles/EditArticle.vue');
 
 const portalRoutes = [
   {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -25,20 +25,20 @@
           :label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
-          :has-error="$v.name.$error"
+          :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           @name-change="onNameChange"
           @icon-change="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"
-          :class="{ error: $v.slug.$error }"
+          :class="{ error: v$.slug.$error }"
           class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
-          @input="$v.slug.$touch"
+          @input="v$.slug.$touch"
         />
         <label>
           {{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
@@ -68,10 +68,11 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: { CategoryNameIconInput },
@@ -94,6 +95,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       name: '',
@@ -118,7 +122,7 @@ export default {
         : this.portalSlug;
     },
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -148,8 +152,8 @@ export default {
         description,
         locale,
       };
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -25,7 +25,7 @@
           :label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
-          :has-error="$v.name.$error"
+          :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           :existing-name="category.name"
           :saved-icon="category.icon"
@@ -34,13 +34,13 @@
         />
         <woot-input
           v-model.trim="slug"
-          :class="{ error: $v.slug.$error }"
+          :class="{ error: v$.slug.$error }"
           class="w-full"
           :error="slugError"
           :label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
           :placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
           :help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
-          @input="$v.slug.$touch"
+          @input="v$.slug.$touch"
         />
         <label>
           {{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
@@ -70,10 +70,11 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
 import CategoryNameIconInput from './NameEmojiInput.vue';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: { CategoryNameIconInput },
@@ -100,6 +101,9 @@ export default {
       default: '',
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       id: this.category.id,
@@ -120,7 +124,7 @@ export default {
   },
   computed: {
     slugError() {
-      if (this.$v.slug.$error) {
+      if (this.v$.slug.$error) {
         return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
       }
       return '';
@@ -159,8 +163,8 @@ export default {
         slug,
         description,
       };
-      this.$v.$touch();
-      if (this.$v.$invalid) {
+      this.v$.$touch();
+      if (this.v$.$invalid) {
         return;
       }
       try {
@@ -190,6 +194,7 @@ export default {
 .article-info {
   width: 100%;
   margin: 0 0 var(--space-normal);
+
   .value {
     color: var(--s-600);
   }

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -38,7 +38,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: { EmojiInput },

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -1,131 +0,0 @@
-<template>
-  <div
-    class="flex flex-col h-full w-full ltr:border-r border-slate-50 dark:border-slate-800/50"
-    :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
-  >
-    <inbox-list-header />
-    <div
-      ref="notificationList"
-      class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
-    >
-      <inbox-card
-        v-for="notificationItem in records"
-        :key="notificationItem.id"
-        :notification-item="notificationItem"
-        @mark-notification-as-read="markNotificationAsRead"
-        @mark-notification-as-unread="markNotificationAsUnRead"
-        @delete-notification="deleteNotification"
-      />
-      <div v-if="uiFlags.isFetching" class="text-center">
-        <span class="spinner mt-4 mb-4" />
-      </div>
-      <p
-        v-if="showEndOfList"
-        class="text-center text-slate-300 dark:text-slate-400 p-4"
-      >
-        {{ $t('INBOX.LIST.EOF') }}
-      </p>
-      <intersection-observer
-        v-if="!showEndOfList && !uiFlags.isFetching"
-        :options="infiniteLoaderOptions"
-        @observed="loadMoreNotifications"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import InboxCard from './components/InboxCard.vue';
-import InboxListHeader from './components/InboxListHeader.vue';
-import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
-export default {
-  components: {
-    InboxCard,
-    InboxListHeader,
-    IntersectionObserver,
-  },
-  props: {
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
-    isOnExpandedLayout: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      infiniteLoaderOptions: {
-        root: this.$refs.notificationList,
-        rootMargin: '100px 0px 100px 0px',
-      },
-      page: 1,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-      meta: 'notifications/getMeta',
-      records: 'notifications/getNotifications',
-      uiFlags: 'notifications/getUIFlags',
-    }),
-    showEndOfList() {
-      return this.uiFlags.isAllNotificationsLoaded && !this.uiFlags.isFetching;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('notifications/clear');
-    this.$store.dispatch('notifications/index', { page: 1 });
-  },
-  methods: {
-    redirectToInbox() {
-      if (!this.conversationId) return;
-      if (this.$route.name === 'inbox') return;
-      this.$router.push({ name: 'inbox' });
-    },
-    onMarkAllDoneClick() {
-      this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
-      this.$store.dispatch('notifications/readAll');
-    },
-    loadMoreNotifications() {
-      if (this.uiFlags.isAllNotificationsLoaded) return;
-      this.$store.dispatch('notifications/index', { page: this.page + 1 });
-      this.page += 1;
-    },
-    markNotificationAsRead(notification) {
-      this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_READ);
-      const {
-        id,
-        primary_actor_id: primaryActorId,
-        primary_actor_type: primaryActorType,
-      } = notification;
-      this.$store.dispatch('notifications/read', {
-        id,
-        primaryActorId,
-        primaryActorType,
-        unreadCount: this.meta.unreadCount,
-      });
-    },
-    markNotificationAsUnRead(notification) {
-      this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_UNREAD);
-      this.redirectToInbox();
-      const { id } = notification;
-      this.$store.dispatch('notifications/unread', {
-        id,
-      });
-    },
-    deleteNotification(notification) {
-      this.$track(INBOX_EVENTS.DELETE_NOTIFICATION);
-      this.redirectToInbox();
-      this.$store.dispatch('notifications/delete', {
-        notification,
-        unread_count: this.meta.unreadCount,
-        count: this.meta.count,
-      });
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -1,206 +0,0 @@
-<template>
-  <section class="flex w-full h-full bg-white dark:bg-slate-900">
-    <inbox-list
-      v-show="showConversationList"
-      :conversation-id="conversationId"
-      :is-on-expanded-layout="isOnExpandedLayout"
-    />
-    <div v-if="showInboxMessageView" class="flex flex-col w-full h-full">
-      <inbox-item-header
-        :total-length="totalNotifications"
-        :current-index="activeNotificationIndex"
-        @next="onClickNext"
-        @prev="onClickPrev"
-      />
-      <conversation-box
-        class="h-[calc(100%-56px)]"
-        is-inbox-view
-        :inbox-id="inboxId"
-        :is-contact-panel-open="isContactPanelOpen"
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @contact-panel-toggle="onToggleContactPanel"
-      />
-    </div>
-    <div
-      v-if="!showInboxMessageView && !isOnExpandedLayout"
-      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full flex items-center"
-    >
-      <span v-if="uiFlags.isFetching" class="spinner mt-4 mb-4" />
-      <div v-else class="flex flex-row items-center gap-1">
-        <fluent-icon
-          icon="mail-inbox"
-          size="18"
-          class="text-slate-700 dark:text-slate-400"
-        />
-        <span class="text-slate-700 text-sm font-medium dark:text-slate-400">
-          {{ $t('INBOX.LIST.NOTE') }}
-        </span>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import InboxList from './InboxList.vue';
-import InboxItemHeader from './components/InboxItemHeader.vue';
-import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
-import wootConstants from 'dashboard/constants/globals';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-
-export default {
-  components: {
-    InboxList,
-    InboxItemHeader,
-    ConversationBox,
-  },
-  mixins: [uiSettingsMixin],
-  props: {
-    inboxId: {
-      type: [String, Number],
-      default: 0,
-    },
-    conversationId: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  computed: {
-    ...mapGetters({
-      currentAccountId: 'getCurrentAccountId',
-      notifications: 'notifications/getNotifications',
-      currentChat: 'getSelectedChat',
-      allConversation: 'getAllConversations',
-      uiFlags: 'notifications/getUIFlags',
-    }),
-    isInboxViewEnabled() {
-      return this.$store.getters['accounts/isFeatureEnabledGlobally'](
-        this.currentAccountId,
-        FEATURE_FLAGS.INBOX_VIEW
-      );
-    },
-    showConversationList() {
-      return this.isOnExpandedLayout ? !this.conversationId : true;
-    },
-    isFetchingInitialData() {
-      return this.uiFlags.isFetching && !this.notifications.length;
-    },
-    showInboxMessageView() {
-      return (
-        Boolean(this.conversationId) &&
-        Boolean(this.currentChat.id) &&
-        !this.isFetchingInitialData
-      );
-    },
-    totalNotifications() {
-      return this.notifications?.length ?? 0;
-    },
-    activeNotificationIndex() {
-      const conversationId = Number(this.conversationId);
-      const notificationIndex = this.notifications.findIndex(
-        n => n.primary_actor.id === conversationId
-      );
-      return notificationIndex >= 0 ? notificationIndex + 1 : 0;
-    },
-    isOnExpandedLayout() {
-      const {
-        LAYOUT_TYPES: { CONDENSED },
-      } = wootConstants;
-      const { conversation_display_type: conversationDisplayType = CONDENSED } =
-        this.uiSettings;
-      return conversationDisplayType !== CONDENSED;
-    },
-    isContactPanelOpen() {
-      if (this.currentChat.id) {
-        const { is_contact_sidebar_open: isContactSidebarOpen } =
-          this.uiSettings;
-        return isContactSidebarOpen;
-      }
-      return false;
-    },
-  },
-  watch: {
-    conversationId: {
-      immediate: true,
-      handler() {
-        this.fetchConversationById();
-      },
-    },
-  },
-  mounted() {
-    // Open inbox view if inbox view feature is enabled, else redirect to dashboard
-    // TODO: Remove this code once inbox view feature is enabled for all accounts
-    if (!this.isInboxViewEnabled) {
-      this.$router.push({
-        name: 'home',
-      });
-    }
-  },
-  methods: {
-    async fetchConversationById() {
-      if (!this.conversationId) return;
-      const chat = this.findConversation();
-      if (!chat) {
-        await this.$store.dispatch('getConversation', this.conversationId);
-      }
-      this.setActiveChat();
-    },
-    setActiveChat() {
-      const selectedConversation = this.findConversation();
-      if (!selectedConversation) return;
-      this.$store
-        .dispatch('setActiveChat', { data: selectedConversation })
-        .then(() => {
-          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
-        });
-    },
-    findConversation() {
-      const conversationId = Number(this.conversationId);
-      return this.allConversation.find(c => c.id === conversationId);
-    },
-    navigateToConversation(activeIndex, direction) {
-      const indexOffset = direction === 'next' ? 0 : -2;
-      const targetNotification = this.notifications[activeIndex + indexOffset];
-      if (targetNotification) {
-        const {
-          id,
-          primary_actor_id: primaryActorId,
-          primary_actor_type: primaryActorType,
-          primary_actor: { id: conversationId, meta: { unreadCount } = {} },
-          notification_type: notificationType,
-        } = targetNotification;
-
-        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
-          notificationType,
-        });
-
-        this.$store.dispatch('notifications/read', {
-          id,
-          primaryActorId,
-          primaryActorType,
-          unreadCount,
-        });
-
-        this.$router.push({
-          name: 'inbox_view_conversation',
-          params: { conversation_id: conversationId },
-        });
-      }
-    },
-    onClickNext() {
-      this.navigateToConversation(this.activeNotificationIndex, 'next');
-    },
-    onClickPrev() {
-      this.navigateToConversation(this.activeNotificationIndex, 'prev');
-    },
-    onToggleContactPanel() {
-      this.updateUISettings({
-        is_contact_sidebar_open: !this.isContactPanelOpen,
-      });
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue

@@ -1,218 +0,0 @@
-<template>
-  <div
-    role="button"
-    class="flex flex-col pl-5 pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
-    :class="
-      isInboxCardActive
-        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
-        : 'bg-white dark:bg-slate-900'
-    "
-    @contextmenu="openContextMenu($event)"
-    @click="openConversation(notificationItem)"
-  >
-    <div class="flex relative items-center justify-between w-full">
-      <div
-        v-if="isUnread"
-        class="absolute -left-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
-      />
-      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
-
-      <div class="flex gap-2">
-        <PriorityIcon :priority="primaryActor.priority" />
-        <StatusIcon :status="primaryActor.status" />
-      </div>
-    </div>
-
-    <div class="flex flex-row justify-between items-center w-full">
-      <div class="flex gap-1.5 items-center max-w-[calc(100%-70px)]">
-        <Thumbnail
-          v-if="assigneeMeta"
-          :src="assigneeMeta.thumbnail"
-          :username="assigneeMeta.name"
-          size="20px"
-        />
-        <div class="flex min-w-0">
-          <span
-            class="font-medium text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-          >
-            <span class="font-normal text-sm">
-              {{ pushTitle }}
-            </span>
-          </span>
-        </div>
-      </div>
-      <span
-        class="font-medium max-w-[60px] text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
-      >
-        {{ lastActivityAt }}
-      </span>
-    </div>
-    <inbox-context-menu
-      v-if="isContextMenuOpen"
-      :context-menu-position="contextMenuPosition"
-      :menu-items="menuItems"
-      @close="closeContextMenu"
-      @click="handleAction"
-    />
-  </div>
-</template>
-<script>
-import PriorityIcon from './PriorityIcon.vue';
-import StatusIcon from './StatusIcon.vue';
-import InboxNameAndId from './InboxNameAndId.vue';
-import InboxContextMenu from './InboxContextMenu.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import timeMixin from 'dashboard/mixins/time';
-import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-export default {
-  components: {
-    PriorityIcon,
-    InboxContextMenu,
-    StatusIcon,
-    InboxNameAndId,
-    Thumbnail,
-  },
-  mixins: [timeMixin],
-  props: {
-    notificationItem: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data() {
-    return {
-      isContextMenuOpen: false,
-      contextMenuPosition: { x: null, y: null },
-    };
-  },
-  computed: {
-    primaryActor() {
-      return this.notificationItem?.primary_actor;
-    },
-    isInboxCardActive() {
-      return this.$route.params.conversation_id === this.primaryActor?.id;
-    },
-    inbox() {
-      return this.$store.getters['inboxes/getInbox'](
-        this.primaryActor.inbox_id
-      );
-    },
-    isUnread() {
-      return !this.notificationItem?.read_at;
-    },
-    meta() {
-      return this.primaryActor?.meta;
-    },
-    assigneeMeta() {
-      return this.meta?.assignee;
-    },
-    pushTitle() {
-      return this.$t(
-        `INBOX.TYPES.${this.notificationItem.notification_type.toUpperCase()}`
-      );
-    },
-    lastActivityAt() {
-      const dynamicTime = this.dynamicTime(
-        this.notificationItem?.last_activity_at
-      );
-      return this.shortTimestamp(dynamicTime, true);
-    },
-    menuItems() {
-      const items = [
-        {
-          key: 'delete',
-          label: this.$t('INBOX.MENU_ITEM.DELETE'),
-        },
-      ];
-
-      if (!this.isUnread) {
-        items.push({
-          key: 'mark_as_unread',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
-        });
-      } else {
-        items.push({
-          key: 'mark_as_read',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
-        });
-      }
-      return items;
-    },
-  },
-  unmounted() {
-    this.closeContextMenu();
-  },
-  methods: {
-    openConversation(notification) {
-      const {
-        id,
-        primary_actor_id: primaryActorId,
-        primary_actor_type: primaryActorType,
-        primary_actor: { id: conversationId, inbox_id: inboxId },
-        notification_type: notificationType,
-      } = notification;
-
-      if (this.$route.params.conversation_id !== conversationId) {
-        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
-          notificationType,
-        });
-
-        this.$store.dispatch('notifications/read', {
-          id,
-          primaryActorId,
-          primaryActorType,
-          unreadCount: this.meta.unreadCount,
-        });
-
-        this.$router.push({
-          name: 'inbox_view_conversation',
-          params: { inboxId, conversation_id: conversationId },
-        });
-      }
-    },
-    closeContextMenu() {
-      this.isContextMenuOpen = false;
-      this.contextMenuPosition = { x: null, y: null };
-    },
-    openContextMenu(e) {
-      this.closeContextMenu();
-      e.preventDefault();
-      this.contextMenuPosition = {
-        x: e.pageX || e.clientX,
-        y: e.pageY || e.clientY,
-      };
-      this.isContextMenuOpen = true;
-    },
-    handleAction(key) {
-      switch (key) {
-        case 'mark_as_read':
-          this.$emit('mark-notification-as-read', this.notificationItem);
-          break;
-        case 'mark_as_unread':
-          this.$emit('mark-notification-as-unread', this.notificationItem);
-          break;
-        case 'delete':
-          this.$emit('delete-notification', this.notificationItem);
-          break;
-        default:
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.click-animation {
-  animation: click-animation 0.3s ease-in-out;
-}
-@keyframes click-animation {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.99);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-</style>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue

@@ -1,46 +0,0 @@
-<template>
-  <woot-context-menu
-    :x="contextMenuPosition.x"
-    :y="contextMenuPosition.y"
-    @close="handleClose"
-  >
-    <div
-      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-500 rounded-xl"
-    >
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-  </woot-context-menu>
-</template>
-
-<script>
-import MenuItem from './MenuItem.vue';
-export default {
-  components: {
-    MenuItem,
-  },
-  props: {
-    contextMenuPosition: {
-      type: Object,
-      default: () => ({}),
-    },
-    menuItems: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  methods: {
-    handleClose() {
-      this.$emit('close');
-    },
-    onMenuItemClick(key) {
-      this.$emit('click', key);
-      this.handleClose();
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue

@@ -1,169 +0,0 @@
-<template>
-  <div
-    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
-  >
-    <div class="flex items-center justify-between h-11 p-3 rounded-t-lg">
-      <div class="flex gap-1.5">
-        <fluent-icon
-          icon="arrow-sort"
-          type="outline"
-          size="16"
-          class="text-slate-700 dark:text-slate-100"
-        />
-        <span class="font-medium text-xs text-slate-800 dark:text-slate-100">
-          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
-        </span>
-      </div>
-      <div class="relative">
-        <div
-          role="button"
-          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
-          @click="openSortMenu"
-        >
-          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
-            {{ activeSortOption }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <div
-          v-if="showSortMenu"
-          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
-        >
-          <div
-            v-for="option in sortOptions"
-            :key="option.key"
-            role="button"
-            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
-            :class="
-              activeSort === option.key ? 'bg-woot-50 dark:bg-woot-700/50' : ''
-            "
-            @click.stop="onSortOptionClick(option.key)"
-          >
-            <span
-              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
-              :class="
-                activeSort === option.key
-                  ? 'text-woot-600 dark:text-woot-600'
-                  : 'text-slate-600 dark:text-slate-300'
-              "
-            >
-              {{ option.name }}
-            </span>
-            <fluent-icon
-              v-if="activeSort === option.key"
-              icon="checkmark"
-              size="14"
-              class="text-woot-600 dark:text-woot-600"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div>
-      <span
-        class="font-medium text-xs py-4 px-3 text-slate-400 dark:text-slate-400"
-      >
-        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
-      </span>
-      <div
-        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
-      >
-        <div
-          v-for="option in displayOptions"
-          :key="option.id"
-          class="flex items-center px-3 py-2 gap-1.5 h-9"
-        >
-          <input
-            :id="option.value"
-            type="checkbox"
-            :name="option.value"
-            :checked="option.selected"
-            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
-            @change="updateDisplayOption(option)"
-          />
-          <label
-            :for="option.value"
-            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
-          >
-            {{ option.name }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      showSortMenu: false,
-      displayOptions: [
-        {
-          id: 1,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.SNOOZED'),
-          value: 'snoozed',
-          selected: false,
-        },
-        {
-          id: 2,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.READ'),
-          value: 'read',
-          selected: true,
-        },
-        {
-          id: 3,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.LABELS'),
-          value: 'labels',
-          selected: false,
-        },
-        {
-          id: 4,
-          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.CONVERSATION_ID'),
-          value: 'conversationId',
-          selected: false,
-        },
-      ],
-      sortOptions: [
-        {
-          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.NEWEST'),
-          key: 'newest',
-        },
-        {
-          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.OLDEST'),
-          key: 'oldest',
-        },
-        {
-          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.PRIORITY'),
-          key: 'priority',
-        },
-      ],
-      activeSort: 'newest',
-    };
-  },
-  computed: {
-    activeSortOption() {
-      return this.sortOptions.find(option => option.key === this.activeSort)
-        .name;
-    },
-  },
-  methods: {
-    updateDisplayOption(option) {
-      option.selected = !option.selected;
-      // TODO: Update the display options
-    },
-    openSortMenu() {
-      this.showSortMenu = !this.showSortMenu;
-    },
-    onSortOptionClick(key) {
-      this.activeSort = key;
-      this.showSortMenu = false;
-      // TODO: Update the sort options
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="flex gap-2 py-2 pl-4 h-14 pr-2 justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
-  >
-    <pagination-button
-      :total-length="totalLength"
-      :current-index="currentIndex"
-      @next="onClickNext"
-      @prev="onClickPrev"
-    />
-    <div class="flex items-center gap-2">
-      <woot-button
-        variant="hollow"
-        size="small"
-        color-scheme="secondary"
-        icon="snooze"
-        @click="onSnooze"
-      >
-        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
-      </woot-button>
-      <woot-button
-        icon="delete"
-        size="small"
-        color-scheme="secondary"
-        variant="hollow"
-        @click="onDelete"
-      >
-        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-<script>
-import PaginationButton from './PaginationButton.vue';
-
-export default {
-  components: {
-    PaginationButton,
-  },
-  props: {
-    totalLength: {
-      type: Number,
-      default: 0,
-    },
-    currentIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  methods: {
-    onSnooze() {},
-    onDelete() {},
-    onClickNext() {
-      this.$emit('next');
-    },
-    onClickPrev() {
-      this.$emit('prev');
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -1,84 +0,0 @@
-<template>
-  <div
-    class="flex w-full pl-4 pr-2 py-2 h-14 justify-between items-center border-b border-slate-50 dark:border-slate-800/50"
-  >
-    <div class="flex items-center gap-1.5">
-      <h1 class="font-medium text-slate-900 dark:text-slate-25 text-xl">
-        {{ $t('INBOX.LIST.TITLE') }}
-      </h1>
-      <div class="relative">
-        <div
-          role="button"
-          class="flex gap-1 items-center py-1 px-2 border border-slate-100 dark:border-slate-700/50 rounded-md"
-          @click="openInboxDisplayMenu"
-        >
-          <span
-            class="text-slate-600 dark:text-slate-200 text-xs text-center font-medium"
-          >
-            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
-          </span>
-          <fluent-icon
-            icon="chevron-down"
-            size="12"
-            class="text-slate-600 dark:text-slate-200"
-          />
-        </div>
-        <inbox-display-menu
-          v-if="showInboxDisplayMenu"
-          v-on-clickaway="openInboxDisplayMenu"
-          class="absolute top-8"
-        />
-      </div>
-    </div>
-    <div class="flex relative gap-1 items-center">
-      <!-- <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="filter"
-        @click="openInboxFilter"
-      /> -->
-      <woot-button
-        variant="clear"
-        size="small"
-        color-scheme="secondary"
-        icon="mail-inbox"
-        @click="openInboxOptionsMenu"
-      />
-      <inbox-option-menu
-        v-if="showInboxOptionMenu"
-        v-on-clickaway="openInboxOptionsMenu"
-        class="absolute top-9"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mixin as clickaway } from 'vue-clickaway';
-import InboxOptionMenu from './InboxOptionMenu.vue';
-import InboxDisplayMenu from './InboxDisplayMenu.vue';
-export default {
-  components: {
-    InboxOptionMenu,
-    InboxDisplayMenu,
-  },
-  mixins: [clickaway],
-  data() {
-    return {
-      showInboxDisplayMenu: false,
-      showInboxOptionMenu: false,
-    };
-  },
-  methods: {
-    openInboxDisplayMenu() {
-      this.showInboxDisplayMenu = !this.showInboxDisplayMenu;
-    },
-    openInboxOptionsMenu() {
-      this.showInboxOptionMenu = !this.showInboxOptionMenu;
-    },
-  },
-};
-</script>
-
-<style></style>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxNameAndId.vue

@@ -1,44 +0,0 @@
-<script>
-import { getInboxClassByType } from 'dashboard/helper/inbox';
-
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-    conversationId: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    inboxIcon() {
-      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
-      const classByType = getInboxClassByType(type, phoneNumber);
-      return classByType;
-    },
-  },
-};
-</script>
-<template>
-  <div
-    class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
-  >
-    <div v-if="inbox" class="flex items-center gap-0.5 py-0.5 px-1.5">
-      <fluent-icon
-        class="text-slate-600 dark:text-slate-300"
-        :icon="inboxIcon"
-        size="14"
-      />
-      <span class="font-medium text-slate-600 dark:text-slate-200 text-xs">
-        {{ inbox.name }}
-      </span>
-    </div>
-    <div class="flex items-center py-0.5 px-1.5">
-      <span class="font-medium text-slate-600 dark:text-slate-200 text-xs">
-        {{ conversationId }}
-      </span>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue

@@ -1,72 +0,0 @@
-<template>
-  <div
-    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-500 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
-  >
-    <div class="flex flex-col">
-      <menu-item
-        v-for="item in menuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-    <div class="flex flex-col">
-      <menu-item
-        v-for="item in commonMenuItems"
-        :key="item.key"
-        :label="item.label"
-        @click="onMenuItemClick(item.key)"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import MenuItem from './MenuItem.vue';
-export default {
-  components: {
-    MenuItem,
-  },
-  data() {
-    return {
-      menuItems: [
-        {
-          key: 'mark_as_read',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
-        },
-        {
-          key: 'mark_as_unread',
-          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
-        },
-        {
-          key: 'snooze',
-          label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
-        },
-        {
-          key: 'delete',
-          label: this.$t('INBOX.MENU_ITEM.DELETE'),
-        },
-      ],
-      commonMenuItems: [
-        {
-          key: 'mark_all_read',
-          label: this.$t('INBOX.MENU_ITEM.MARK_ALL_READ'),
-        },
-        {
-          key: 'delete_all',
-          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL'),
-        },
-        {
-          key: 'delete_all_read',
-          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL_READ'),
-        },
-      ],
-    };
-  },
-  methods: {
-    onMenuItemClick(key) {
-      this.$emit('option-click', key);
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { defineProps, defineEmits } from 'vue';
-
-defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-});
-
-const emits = defineEmits(['click']);
-
-const onMenuItemClick = () => {
-  emits('click');
-};
-</script>
-<template>
-  <div
-    role="button"
-    class="py-1 px-2 w-full h-8 font-medium text-xs text-slate-800 dark:text-slate-100 flex items-center whitespace-nowrap text-ellipsis overflow-hidden hover:text-woot-600 dark:hover:text-woot-500 cursor-pointer rounded-md"
-    @click.stop="onMenuItemClick"
-  >
-    {{ label }}
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/inbox/components/PaginationButton.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="flex gap-2 items-center">
-    <div class="flex gap-1 items-center">
-      <woot-button
-        size="tiny"
-        variant="hollow"
-        color-scheme="secondary"
-        icon="chevron-up"
-        :disabled="isUpDisabled"
-        @click="handleUpClick"
-      />
-      <woot-button
-        size="tiny"
-        variant="hollow"
-        color-scheme="secondary"
-        icon="chevron-down"
-        :disabled="isDownDisabled"
-        @click="handleDownClick"
-      />
-    </div>
-    <div class="flex items-center gap-1 whitespace-nowrap">
-      <span class="text-sm font-medium text-gray-600">
-        {{ totalLength <= 1 ? '1' : currentIndex }}
-      </span>
-      <span
-        v-if="totalLength > 1"
-        class="text-sm text-slate-400 relative -top-px"
-      >
-        /
-      </span>
-      <span v-if="totalLength > 1" class="text-sm text-slate-400">
-        {{ totalLength }}
-      </span>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    totalLength: {
-      type: Number,
-      default: 0,
-    },
-    currentIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    isUpDisabled() {
-      return this.currentIndex === 1;
-    },
-    isDownDisabled() {
-      return this.currentIndex === this.totalLength || this.totalLength <= 1;
-    },
-  },
-  methods: {
-    handleUpClick() {
-      if (this.currentIndex > 1) {
-        this.$emit('prev');
-      }
-    },
-    handleDownClick() {
-      if (this.currentIndex < this.totalLength) {
-        this.$emit('next');
-      }
-    },
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/inbox/components/PriorityIcon.vue

@@ -1,80 +0,0 @@
-<script>
-import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
-export default {
-  props: {
-    priority: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_PRIORITY,
-    };
-  },
-};
-</script>
-
-<template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      class="h-4 w-4"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
-      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
-      <rect x="16" y="4" width="4" height="16" rx="1" fill="#FFC291" />
-    </svg>
-
-    <!-- Low Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
-      class="h-4 w-4"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
-      <rect x="10" y="8" width="4" height="12" rx="1" fill="#DDDDDD" />
-      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      class="h-4 w-4"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
-      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
-      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      class="h-4 w-4"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="4" y="12" width="4" height="8" rx="1" fill="#E5484D" />
-      <rect x="10" y="8" width="4" height="12" rx="1" fill="#E5484D" />
-      <rect x="16" y="4" width="4" height="16" rx="1" fill="#E5484D" />
-    </svg>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/inbox/components/StatusIcon.vue

@@ -1,86 +0,0 @@
-<template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- Pending -->
-    <svg
-      v-if="status === CONVERSATION_STATUS.PENDING"
-      class="h-3.5 w-3.5"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.1 0.0449978V1.8558C4.5486 2.2986 1.8 5.328 1.8 9C1.8 12.9762 5.0238 16.2 9 16.2C10.6641 16.2 12.195 15.6357 13.4154 14.688L14.6961 15.9687C13.1445 17.2377 11.16 18 9 18C4.0293 18 0 13.9707 0 9C0 4.3335 3.5523 0.495898 8.1 0.0449978ZM17.955 9.9C17.775 11.7099 17.0604 13.3623 15.9687 14.6952L14.688 13.4154C15.462 12.4191 15.9804 11.2149 16.1442 9.9H17.9559H17.955ZM9.9018 0.0449978C14.1534 0.467098 17.5338 3.8484 17.9568 8.1H16.1451C15.7392 4.8438 13.158 2.2626 9.9018 1.8558V0.0440979V0.0449978Z"
-        class="fill-[#B9BBC6]"
-      />
-    </svg>
-    <!-- Open -->
-    <svg
-      v-if="status === CONVERSATION_STATUS.OPEN"
-      class="h-3.5 w-3.5"
-      width="19"
-      height="19"
-      viewBox="0 0 19 19"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.375 18.875C4.19733 18.875 0 14.6776 0 9.5C0 4.32233 4.19733 0.125 9.375 0.125C14.5526 0.125 18.75 4.32233 18.75 9.5C18.75 14.6776 14.5526 18.875 9.375 18.875ZM9.375 17C13.5172 17 16.875 13.6422 16.875 9.5C16.875 5.35786 13.5172 2 9.375 2C5.23286 2 1.875 5.35786 1.875 9.5C1.875 13.6422 5.23286 17 9.375 17Z"
-        class="fill-[#ED8A5C]"
-      />
-    </svg>
-
-    <!-- Snoozed -->
-    <svg
-      v-if="status === CONVERSATION_STATUS.SNOOZED"
-      class="h-3.5 w-3.5"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9 18C4.0293 18 0 13.9707 0 9C0 4.0293 4.0293 0 9 0C13.9707 0 18 4.0293 18 9C18 13.9707 13.9707 18 9 18ZM2.9961 12.9825C3.58766 13.8676 4.36812 14.6105 5.28129 15.1577C6.19446 15.7049 7.21761 16.0428 8.27707 16.147C9.33652 16.2513 10.4059 16.1193 11.4082 15.7606C12.4105 15.4019 13.3208 14.8254 14.0736 14.0726C14.8263 13.3198 15.4027 12.4094 15.7613 11.4071C16.12 10.4047 16.2518 9.33532 16.1475 8.27588C16.0431 7.21644 15.7052 6.19332 15.1579 5.2802C14.6106 4.36707 13.8676 3.58668 12.9825 2.9952C13.3706 4.3796 13.383 5.84237 13.0186 7.23318C12.6542 8.62399 11.926 9.89269 10.9089 10.9089C9.89277 11.9258 8.62423 12.6539 7.23359 13.0183C5.84296 13.3828 4.38037 13.3704 2.9961 12.9825Z"
-        class="fill-[#0B68CB]"
-      />
-    </svg>
-
-    <!-- Resolved -->
-    <svg
-      v-if="status === CONVERSATION_STATUS.RESOLVED"
-      class="h-3.5 w-3.5"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="3 3 17.92 17.92"
-    >
-      <path
-        d="M11.96 20.92C7.01152 20.92 3 16.9084 3 11.96C3 7.01152 7.01152 3 11.96 3C16.9084 3 20.92 7.01152 20.92 11.96C20.92 16.9084 16.9084 20.92 11.96 20.92ZM11.96 19.128C15.9188 19.128 19.128 15.9188 19.128 11.96C19.128 8.00122 15.9188 4.792 11.96 4.792C8.00122 4.792 4.792 8.00122 4.792 11.96C4.792 15.9188 8.00122 19.128 11.96 19.128Z"
-        class="fill-[#5BB98C]"
-      />
-      <path
-        d="M11.9599 17.9333C15.2589 17.9333 17.9332 15.2589 17.9332 11.96C17.9332 8.66098 15.2589 5.98663 11.9599 5.98663C8.66092 5.98663 5.98657 8.66098 5.98657 11.96C5.98657 15.2589 8.66092 17.9333 11.9599 17.9333Z"
-        class="fill-[#5BB98C]"
-      />
-    </svg>
-  </div>
-</template>
-
-<script>
-import { CONVERSATION_STATUS } from 'shared/constants/messages';
-
-export default {
-  props: {
-    status: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_STATUS,
-    };
-  },
-};
-</script>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -188,7 +188,6 @@ export default {
         notificationType,
       });
       this.$store.dispatch('notifications/read', {
-        id: notification.id,
         primaryActorId,
         primaryActorType,
         unreadCount: this.meta.unreadCount,

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue

@@ -130,7 +130,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/mixins';
 
 .notification--title {
   @apply text-sm m-0 text-slate-800 dark:text-slate-100;

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue

@@ -58,7 +58,6 @@ export default {
         notificationType,
       });
       this.$store.dispatch('notifications/read', {
-        id: notification.id,
         primaryActorId,
         primaryActorType,
         unreadCount: this.meta.unreadCount,