Merge branch 'develop' into upgrade-fb-api

.env.example

@@ -199,7 +199,7 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Rack Attack configuration
 ## To prevent and throttle abusive requests
 # ENABLE_RACK_ATTACK=true
-# RACK_ATTACK_LIMIT=300
+# RACK_ATTACK_IP_LIMIT=3000
 # ENABLE_RACK_ATTACK_WIDGET_API=true
 
 ## Running chatwoot as an API only server

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:storybook/recommended',
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser',
+    parser: 'babel-eslint',
     ecmaVersion: 2020,
     sourceType: 'module',
   },
@@ -24,16 +24,13 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
-    'vue/html-indent': 'off',
-    'vue/multi-word-component-names': 'off',
     'vue/max-attributes-per-line': [
       'error',
       {
-        singleline: {
-          max: 20,
-        },
+        singleline: 20,
         multiline: {
           max: 1,
+          allowFirstLine: false,
         },
       },
     ],
@@ -50,7 +47,6 @@ module.exports = {
       },
     ],
     'vue/no-v-html': 'off',
-    'vue/component-definition-name-casing': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
     'no-console': 'error',

.github/workflows/run_response_bot_spec.yml

@@ -69,12 +69,7 @@ jobs:
     # Run  Response Bot specs
     - name: Run backend tests
       run: |
-        bundle exec rspec \
-          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
-          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
-          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
-          --profile=10 \
-          --format documentation
+        bundle exec rspec spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 --profile=10 --format documentation
 
     - name: Upload rails log folder
       uses: actions/upload-artifact@v3

.rubocop.yml

@@ -58,7 +58,6 @@ Metrics/BlockLength:
 Metrics/ModuleLength:
   Exclude:
     - lib/seeders/message_seeder.rb
-    - spec/support/slack_stubs.rb
 Rails/ApplicationController:
   Exclude:
     - 'app/controllers/api/v1/widget/messages_controller.rb'

Gemfile

@@ -76,7 +76,6 @@ gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.19.0'
 gem 'administrate-field-active_storage'
-gem 'administrate-field-belongs_to_search'
 
 ##--- gems for pubsub service ---##
 # https://karolgalanciak.com/blog/2019/11/30/from-activerecord-callbacks-to-publish-slash-subscribe-pattern-and-event-driven-design/
@@ -159,7 +158,7 @@ gem 'lograge', '~> 0.13.0', require: false
 # worked with microsoft refresh token
 gem 'omniauth-oauth2'
 
-gem 'audited', '~> 5.4', '>= 5.4.0'
+gem 'audited', '~> 5.3'
 
 # need for google auth
 gem 'omniauth'

Gemfile.lock

@@ -116,18 +116,13 @@ GEM
     administrate-field-active_storage (0.4.2)
       administrate (>= 0.2.2)
       rails (>= 7.0)
-    administrate-field-belongs_to_search (0.8.0)
-      administrate (>= 0.3, < 1.0)
-      jbuilder (~> 2)
-      rails (>= 4.2, < 7.1)
-      selectize-rails (~> 0.6)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
     ast (2.4.2)
     attr_extras (7.1.0)
-    audited (5.4.0)
-      activerecord (>= 5.0, < 7.2)
+    audited (5.3.3)
+      activerecord (>= 5.0, < 7.1)
       request_store (~> 1.2)
     aws-eventstream (1.2.0)
     aws-partitions (1.760.0)
@@ -836,10 +831,9 @@ DEPENDENCIES
   acts-as-taggable-on
   administrate (>= 0.19.0)
   administrate-field-active_storage
-  administrate-field-belongs_to_search
   annotate
   attr_extras
-  audited (~> 5.4, >= 5.4.0)
+  audited (~> 5.3)
   aws-sdk-s3
   azure-storage-blob!
   barnes

VERSION_CW

@@ -1 +1 @@
-3.1.0
+2.17.0

VERSION_CWCTL

@@ -1 +1 @@
-2.4.0
+2.3.0

app/assets/stylesheets/administrate/application.scss

@@ -29,5 +29,3 @@
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';
-
-@import 'custom_styles';

app/assets/stylesheets/administrate/base/_forms.scss

@@ -24,6 +24,14 @@ select {
   font-size: $base-font-size;
 }
 
+input,
+select,
+textarea {
+  display: block;
+  font-family: $base-font-family;
+  font-size: 16px;
+}
+
 [type="color"],
 [type="date"],
 [type="datetime-local"],
@@ -43,7 +51,6 @@ textarea {
   background-color: $white;
   border: $base-border;
   border-radius: $base-border-radius;
-  font-family: $base-font-family;
   padding: 0.5em;
   transition: border-color $base-duration $base-timing;
   width: 100%;

app/assets/stylesheets/administrate/components/_attributes.scss

@@ -4,8 +4,8 @@
   float: left;
   margin-bottom: $base-spacing;
   margin-top: 0.25em;
-  text-align: left;
-  width: calc(16% - 1rem);
+  text-align: right;
+  width: calc(15% - 1rem);
 }
 
 .preserve-whitespace {
@@ -17,7 +17,7 @@
   float: left;
   margin-bottom: $base-spacing;
   margin-left: 2rem;
-  width: calc(84% - 1rem);
+  width: calc(85% - 1rem);
 }
 
 .attribute--nested {

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -10,7 +10,7 @@ input[type="submit"],
   color: $white;
   cursor: pointer;
   display: inline-block;
-  font-size: $font-size-small;
+  font-size: $font-size-default;
   -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-medium;
   line-height: 1;

app/assets/stylesheets/administrate/components/_main-content.scss

@@ -1,18 +1,13 @@
 .main-content {
   font-size: $font-size-default;
-  left: 21rem;
+  left: 23rem;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 .main-content__body {
-  font-size: $font-size-small;
   padding: $space-two;
-
-  table {
-    font-size: $font-size-small;
-  }
 }
 
 .main-content__header {
@@ -25,7 +20,7 @@
 }
 
 .main-content__page-title {
-  font-size: $font-size-medium;
+  font-size: $font-size-large;
   font-weight: $font-weight-medium;
   margin-right: auto;
 }

app/assets/stylesheets/administrate/components/_navigation.scss

@@ -1,12 +1,7 @@
 .logo-brand {
   margin-bottom: $space-normal;
   padding: $space-normal $space-smaller $space-small;
-  text-align: left;
-
-  img {
-    margin-bottom: $space-smaller;
-    max-height: 3rem;
-  }
+  text-align: center;
 }
 
 .navigation {
@@ -24,13 +19,12 @@
   padding: $space-normal;
   position: fixed;
   top: 0;
-  width: 21rem;
+  width: 23rem;
   z-index: 1023;
 
   li {
     align-items: center;
     display: flex;
-    font-size: $font-size-small;
 
     a {
       color: $color-gray;
@@ -41,10 +35,6 @@
       min-width: $space-medium;
     }
   }
-
-  hr {
-    margin: $space-slab;
-  }
 }
 
 .navigation__link {
@@ -53,7 +43,7 @@
   display: block;
   line-height: 1;
   margin-bottom: $space-smaller;
-  padding: $space-small;
+  padding: $space-one;
 
   &:hover {
     color: $blue;

app/assets/stylesheets/administrate/custom_styles.scss

@@ -1,24 +0,0 @@
-// custom styles for the dashboard
-
-.feature-cell {
-  background: $color-extra-light-blue;
-  border-radius: 10px;
-  float: left;
-  margin-left: 8px;
-  margin-top: 6px;
-  padding: 4px 12px;
-
-  .icon-container {
-    margin-right: 4px;
-
-  }
-
-  .value-container {
-    margin-left: 6px;
-  }
-}
-
-
-.feature-container {
-  max-width: 100rem;
-}

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

@@ -4,7 +4,7 @@ $base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe
   sans-serif !default;
 $heading-font-family: $base-font-family !default;
 
-$base-font-size: 14px !default;
+$base-font-size: 16px !default;
 
 $base-line-height: 1.5 !default;
 $heading-line-height: 1.2 !default;

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

@@ -78,6 +78,11 @@ $conv-header-height: 4rem;
 $inbox-thumb-size: 4.8rem;
 
 
+// Spinner
+$spinkit-spinner-color: $color-white !default;
+$spinkit-spinner-margin: 0 0 0 1.6rem !default;
+$spinkit-size: 1.6rem !default;
+
 // Snackbar default
 $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;

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

@@ -1,21 +0,0 @@
-class Api::V1::Accounts::ContactInboxesController < Api::V1::Accounts::BaseController
-  before_action :ensure_inbox
-
-  def filter
-    contact_inbox = @inbox.contact_inboxes.where(inbox_id: permitted_params[:inbox_id], source_id: permitted_params[:source_id])
-    return head :not_found if contact_inbox.empty?
-
-    @contact = contact_inbox.first.contact
-  end
-
-  private
-
-  def ensure_inbox
-    @inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
-    authorize @inbox, :show?
-  end
-
-  def permitted_params
-    params.permit(:inbox_id, :source_id)
-  end
-end

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

@@ -25,8 +25,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     render json: { error: 'Specify search string with parameter q' }, status: :unprocessable_entity if params[:q].blank? && return
 
     contacts = resolved_contacts.where(
-      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search
-        OR contacts.additional_attributes->>\'company_name\' ILIKE :search',
+      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search',
       search: "%#{params[:q].strip}%"
     )
     @contacts_count = contacts.count

app/controllers/api/v1/integrations/webhooks_controller.rb

@@ -1,15 +1,7 @@
 class Api::V1::Integrations::WebhooksController < ApplicationController
   def create
-    builder = Integrations::Slack::IncomingMessageBuilder.new(permitted_params)
+    builder = Integrations::Slack::IncomingMessageBuilder.new(params)
     response = builder.perform
     render json: response
   end
-
-  private
-
-  # TODO: This is a temporary solution to permit all params for slack unfurling job.
-  # We should only permit the params that we use. Handle all the params based on events and send it to the respective services.
-  def permitted_params
-    params.permit!
-  end
 end

app/controllers/api/v1/upload_controller.rb

@@ -1,4 +1,4 @@
-class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
+class Api::V1::UploadController < Api::BaseController
   def create
     file_blob = ActiveStorage::Blob.create_and_upload!(
       key: nil,

app/controllers/concerns/request_exception_handler.rb

@@ -9,14 +9,11 @@ module RequestExceptionHandler
 
   def handle_with_exception
     yield
-  rescue ActiveRecord::RecordNotFound => e
-    log_handled_error(e)
+  rescue ActiveRecord::RecordNotFound
     render_not_found_error('Resource could not be found')
-  rescue Pundit::NotAuthorizedError => e
-    log_handled_error(e)
+  rescue Pundit::NotAuthorizedError
     render_unauthorized('You are not authorized to do this action')
   rescue ActionController::ParameterMissing => e
-    log_handled_error(e)
     render_could_not_create_error(e.message)
   ensure
     # to address the thread variable leak issues in Puma/Thin webserver
@@ -44,7 +41,6 @@ module RequestExceptionHandler
   end
 
   def render_record_invalid(exception)
-    log_handled_error(exception)
     render json: {
       message: exception.record.errors.full_messages.join(', '),
       attributes: exception.record.errors.attribute_names
@@ -52,11 +48,6 @@ module RequestExceptionHandler
   end
 
   def render_error_response(exception)
-    log_handled_error(exception)
     render json: exception.to_hash, status: exception.http_status
   end
-
-  def log_handled_error(exception)
-    logger.info("Handled error: #{exception.inspect}")
-  end
 end

app/controllers/dashboard_controller.rb

@@ -55,7 +55,7 @@ class DashboardController < ActionController::Base
       VAPID_PUBLIC_KEY: VapidService.public_key,
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
-      FACEBOOK_API_VERSION: 'v14.0',
+      FACEBOOK_API_VERSION: 'v17.0',
       IS_ENTERPRISE: ChatwootApp.enterprise?,
       AZURE_APP_ID: ENV.fetch('AZURE_APP_ID', ''),
       GIT_SHA: GIT_HASH

app/controllers/public/api/v1/inboxes/conversations_controller.rb

@@ -33,7 +33,7 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
   end
 
   def create_conversation
-    ConversationBuilder.new(params: conversation_params, contact_inbox: @contact_inbox).perform
+    ::Conversation.create!(conversation_params)
   end
 
   def trigger_typing_event(event)
@@ -41,6 +41,11 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
   end
 
   def conversation_params
-    params.permit(custom_attributes: {})
+    {
+      account_id: @contact_inbox.contact.account_id,
+      inbox_id: @contact_inbox.inbox_id,
+      contact_id: @contact_inbox.contact_id,
+      contact_inbox_id: @contact_inbox.id
+    }
   end
 end

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -44,7 +44,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort, :status)
+    params.permit(:query, :locale, :sort)
   end
 
   def permitted_params

app/controllers/public/api/v1/portals/base_controller.rb

@@ -1,6 +1,5 @@
 class Public::Api::V1::Portals::BaseController < PublicController
   before_action :show_plain_layout
-  before_action :set_color_scheme
   around_action :set_locale
   after_action :allow_iframe_requests
 
@@ -10,14 +9,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
     @is_plain_layout_enabled = params[:show_plain_layout] == 'true'
   end
 
-  def set_color_scheme
-    @theme = if %w[dark light].include?(params[:theme])
-               params[:theme]
-             else
-               ''
-             end
-  end
-
   def set_locale(&)
     switch_locale_with_portal(&) if params[:locale].present?
     switch_locale_with_article(&) if params[:article_slug].present?

app/controllers/slack_uploads_controller.rb

@@ -1,27 +0,0 @@
-class SlackUploadsController < ApplicationController
-  include Rails.application.routes.url_helpers
-  before_action :set_blob, only: [:show]
-
-  def show
-    if @blob
-      redirect_to blob_url
-    else
-      redirect_to avatar_url
-    end
-  end
-
-  private
-
-  def set_blob
-    @blob = ActiveStorage::Blob.find_by(key: params[:blob_key])
-  end
-
-  def blob_url
-    url_for(@blob.representation(resize_to_fill: [250, nil]))
-  end
-
-  def avatar_url
-    base_url = ENV.fetch('FRONTEND_URL', nil)
-    "#{base_url}/integrations/slack/#{params[:sender_type]}.png"
-  end
-end

app/controllers/super_admin/instance_statuses_controller.rb

@@ -6,7 +6,6 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
     postgres_status
     redis_metrics
     chatwoot_edition
-    instance_meta
   end
 
   def chatwoot_edition
@@ -19,10 +18,6 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
                                    end
   end
 
-  def instance_meta
-    @metrics['Database Migrations'] = ActiveRecord::Base.connection.migration_context.needs_migration? ? 'pending' : 'completed'
-  end
-
   def chatwoot_version
     @metrics['Chatwoot version'] = Chatwoot.config[:version]
   end

app/dashboards/account_dashboard.rb

@@ -18,8 +18,8 @@ class AccountDashboard < Administrate::BaseDashboard
                                end
 
   ATTRIBUTE_TYPES = {
-    id: Field::Number.with_options(searchable: true),
-    name: Field::String.with_options(searchable: true),
+    id: Field::Number,
+    name: Field::String,
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
     users: CountField,

app/dashboards/account_user_dashboard.rb

@@ -8,9 +8,9 @@ class AccountUserDashboard < Administrate::BaseDashboard
   # which determines how the attribute is displayed
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
-    account: Field::BelongsToSearch.with_options(class_name: 'Account', searchable: true, searchable_field: [:name, :id], order: 'id DESC'),
-    user: Field::BelongsToSearch.with_options(class_name: 'User', searchable: true, searchable_field: [:name, :email, :id], order: 'id DESC'),
-    inviter: Field::BelongsToSearch.with_options(class_name: 'User', searchable: true, searchable_field: [:name, :email, :id], order: 'id DESC'),
+    account: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
+    user: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
+    inviter: Field::BelongsTo.with_options(class_name: 'User', searchable: true, searchable_field: 'name'),
     id: Field::Number,
     role: Field::Select.with_options(collection: AccountUser.roles.keys),
     created_at: Field::DateTime,

app/dashboards/user_dashboard.rb

@@ -9,7 +9,7 @@ class UserDashboard < Administrate::BaseDashboard
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
     account_users: Field::HasMany,
-    id: Field::Number.with_options(searchable: true),
+    id: Field::Number,
     avatar_url: AvatarField,
     avatar: Field::ActiveStorage.with_options(
       destroy_url: proc do |_namespace, _resource, attachment|
@@ -28,9 +28,9 @@ class UserDashboard < Administrate::BaseDashboard
     confirmed_at: Field::DateTime,
     confirmation_sent_at: Field::DateTime,
     unconfirmed_email: Field::String,
-    name: Field::String.with_options(searchable: true),
+    name: Field::String,
     display_name: Field::String,
-    email: Field::String.with_options(searchable: true),
+    email: Field::String,
     tokens: Field::String.with_options(searchable: false),
     created_at: Field::DateTime,
     updated_at: Field::DateTime,

app/helpers/portal_helper.rb

@@ -1,11 +0,0 @@
-module PortalHelper
-  def generate_portal_bg_color(portal_color, theme)
-    base_color = theme == 'dark' ? 'black' : 'white'
-    "color-mix(in srgb, #{portal_color} 10%, #{base_color})"
-  end
-
-  def generate_portal_bg(portal_color, theme)
-    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
-    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
-  end
-end

app/javascript/dashboard/App.vue

@@ -26,14 +26,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
+import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
 import LoadingState from './components/widgets/LoadingState.vue';
-import NetworkNotification from './components/NetworkNotification.vue';
+import NetworkNotification from './components/NetworkNotification';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import vueActionCable from './helper/actionCable';
-import WootSnackbarBox from './components/SnackbarContainer.vue';
+import WootSnackbarBox from './components/SnackbarContainer';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import {
@@ -111,8 +111,10 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
-      const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        this.getAccount(this.currentAccountId);
+      const {
+        locale,
+        latest_chatwoot_version: latestChatwootVersion,
+      } = this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
       this.updateRTLDirectionView(locale);

app/javascript/dashboard/api/ApiClient.js

@@ -15,8 +15,9 @@ class ApiClient {
 
   // eslint-disable-next-line class-methods-use-this
   get accountIdFromRoute() {
-    const isInsideAccountScopedURLs =
-      window.location.pathname.includes('/app/accounts');
+    const isInsideAccountScopedURLs = window.location.pathname.includes(
+      '/app/accounts'
+    );
 
     if (isInsideAccountScopedURLs) {
       return window.location.pathname.split('/')[3];

app/javascript/dashboard/api/contacts.js

@@ -53,7 +53,6 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
-  // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;
     return axios.post(requestURL, queryPayload);

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -1,5 +1,6 @@
 import accountAPI from '../account';
 import ApiClient from '../../ApiClient';
+import describeWithAPIMock from '../../specs/apiSpecHelper';
 
 describe('#enterpriseAccountAPI', () => {
   it('creates correct instance', () => {
@@ -12,33 +13,17 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('checkout');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#checkout', () => {
       accountAPI.checkout();
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/checkout'
       );
     });
 
     it('#subscription', () => {
       accountAPI.subscription();
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/subscription'
       );
     });

app/javascript/dashboard/api/reports.js

@@ -31,7 +31,6 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {
       params: {

app/javascript/dashboard/api/specs/account.spec.js

@@ -1,5 +1,6 @@
 import accountAPI from '../account';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -12,28 +13,12 @@ describe('#accountAPI', () => {
     expect(accountAPI).toHaveProperty('createAccount');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#createAccount', () => {
       accountAPI.createAccount({
         name: 'Chatwoot',
       });
-      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
+      expect(context.axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
         name: 'Chatwoot',
       });
     });

app/javascript/dashboard/api/specs/accountActions.spec.js

@@ -1,5 +1,6 @@
 import accountActionsAPI from '../accountActions';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -7,26 +8,10 @@ describe('#ContactsAPI', () => {
     expect(accountActionsAPI).toHaveProperty('merge');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#merge', () => {
       accountActionsAPI.merge(1, 2);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/actions/contact_merge',
         {
           base_contact_id: 1,

app/javascript/dashboard/api/specs/apiSpecHelper.js

@@ -0,0 +1,27 @@
+function apiSpecHelper() {
+  beforeEach(() => {
+    this.originalAxios = window.axios;
+    this.axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+    window.axios = this.axiosMock;
+  });
+
+  afterEach(() => {
+    window.axios = this.originalAxios;
+  });
+}
+// https://stackoverflow.com/a/59344023/3901856
+const sharedWrapper = describe('sharedWrapper', () => {});
+export default function describeWithAPIMock(skillName, testFn) {
+  return describe(skillName, function configureContext() {
+    function Context() {}
+    Context.prototype = sharedWrapper.ctx;
+    this.ctx = new Context();
+    apiSpecHelper.call(this);
+    testFn.call(this, this);
+  });
+}

app/javascript/dashboard/api/specs/article.spec.js

@@ -1,5 +1,6 @@
 import articlesAPI from '../helpCenter/articles';
 import ApiClient from 'dashboard/api/helpCenter/portals';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#PortalAPI', () => {
   it('creates correct instance', () => {
@@ -11,23 +12,7 @@ describe('#PortalAPI', () => {
     expect(articlesAPI).toHaveProperty('delete');
     expect(articlesAPI).toHaveProperty('getArticles');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getArticles', () => {
       articlesAPI.getArticles({
         pageNumber: 1,
@@ -36,62 +21,30 @@ describe('#PortalAPI', () => {
         status: 'published',
         author_id: '1',
       });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
       );
     });
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getArticle', () => {
       articlesAPI.getArticle({
         id: 1,
         portalSlug: 'room-rental',
       });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#updateArticle', () => {
       articlesAPI.updateArticle({
         articleId: 1,
         portalSlug: 'room-rental',
         articleObj: { title: 'Update shipping address' },
       });
-      expect(axiosMock.patch).toHaveBeenCalledWith(
+      expect(context.axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1',
         {
           title: 'Update shipping address',
@@ -99,29 +52,13 @@ describe('#PortalAPI', () => {
       );
     });
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#deleteArticle', () => {
       articlesAPI.deleteArticle({
         articleId: 1,
         portalSlug: 'room-rental',
       });
-      expect(axiosMock.delete).toHaveBeenCalledWith(
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });

app/javascript/dashboard/api/specs/assignableAgents.spec.js

@@ -1,30 +1,18 @@
 import assignableAgentsAPI from '../assignableAgents';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#AssignableAgentsAPI', () => {
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getAssignableAgents', () => {
       assignableAgentsAPI.get([1]);
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
-        params: {
-          inbox_ids: [1],
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/assignable_agents',
+        {
+          params: {
+            inbox_ids: [1],
+          },
+        }
+      );
     });
   });
 });

app/javascript/dashboard/api/specs/channel/fbChannel.spec.js

@@ -1,5 +1,6 @@
 import fbChannel from '../../channel/fbChannel';
 import ApiClient from '../../ApiClient';
+import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#FBChannel', () => {
   it('creates correct instance', () => {
@@ -10,26 +11,10 @@ describe('#FBChannel', () => {
     expect(fbChannel).toHaveProperty('update');
     expect(fbChannel).toHaveProperty('delete');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#create', () => {
       fbChannel.create({ omniauthToken: 'ASFM131CSF@#@$', appId: 'chatwoot' });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/register_facebook_page',
         {
           omniauthToken: 'ASFM131CSF@#@$',
@@ -42,7 +27,7 @@ describe('#FBChannel', () => {
         omniauthToken: 'ASFM131CSF@#@$',
         inboxId: 1,
       });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/reauthorize_page',
         {
           omniauth_token: 'ASFM131CSF@#@$',

app/javascript/dashboard/api/specs/contacts.spec.js

@@ -1,5 +1,6 @@
 import contactAPI, { buildContactParams } from '../contacts';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -14,67 +15,56 @@ describe('#ContactsAPI', () => {
     expect(contactAPI).toHaveProperty('destroyAvatar');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#get', () => {
       contactAPI.get(1, 'name', 'customer-support');
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts?include_contact_inboxes=false&page=1&sort=name&labels[]=customer-support'
       );
     });
 
     it('#getConversations', () => {
       contactAPI.getConversations(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/conversations'
       );
     });
 
     it('#getContactableInboxes', () => {
       contactAPI.getContactableInboxes(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/contactable_inboxes'
       );
     });
 
     it('#getContactLabels', () => {
       contactAPI.getContactLabels(1);
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/contacts/1/labels');
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/contacts/1/labels'
+      );
     });
 
     it('#updateContactLabels', () => {
       const labels = ['support-query'];
       contactAPI.updateContactLabels(1, labels);
-      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/contacts/1/labels', {
-        labels,
-      });
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/contacts/1/labels',
+        {
+          labels,
+        }
+      );
     });
 
     it('#search', () => {
       contactAPI.search('leads', 1, 'date', 'customer-support');
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support'
       );
     });
 
     it('#destroyCustomAttributes', () => {
       contactAPI.destroyCustomAttributes(1, ['cloudCustomer']);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/1/destroy_custom_attributes',
         {
           custom_attributes: ['cloudCustomer'],
@@ -85,7 +75,7 @@ describe('#ContactsAPI', () => {
     it('#importContacts', () => {
       const file = 'file';
       contactAPI.importContacts(file);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/import',
         expect.any(FormData),
         {
@@ -106,7 +96,7 @@ describe('#ContactsAPI', () => {
         ],
       };
       contactAPI.filter(1, 'name', queryPayload);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/filter?include_contact_inboxes=false&page=1&sort=name',
         queryPayload
       );
@@ -114,7 +104,7 @@ describe('#ContactsAPI', () => {
 
     it('#destroyAvatar', () => {
       contactAPI.destroyAvatar(1);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/contacts/1/avatar'
       );
     });

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -1,5 +1,6 @@
 import conversationsAPI from '../conversations';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ConversationApi', () => {
   it('creates correct instance', () => {
@@ -13,26 +14,10 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('updateLabels');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getLabels', () => {
       conversationsAPI.getLabels(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels'
       );
     });
@@ -40,7 +25,7 @@ describe('#ConversationApi', () => {
     it('#updateLabels', () => {
       const labels = ['support-query'];
       conversationsAPI.updateLabels(1, labels);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels',
         {
           labels,

app/javascript/dashboard/api/specs/csatReports.spec.js

@@ -1,5 +1,6 @@
 import csatReportsAPI from '../csatReports';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -8,26 +9,10 @@ describe('#Reports API', () => {
     expect(csatReportsAPI).toHaveProperty('get');
     expect(csatReportsAPI).toHaveProperty('getMetrics');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#get', () => {
       csatReportsAPI.get({ page: 1, from: 1622485800, to: 1623695400 });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses',
         {
           params: {
@@ -41,7 +26,7 @@ describe('#Reports API', () => {
     });
     it('#getMetrics', () => {
       csatReportsAPI.getMetrics({ from: 1622485800, to: 1623695400 });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/metrics',
         {
           params: { since: 1622485800, until: 1623695400 },
@@ -54,7 +39,7 @@ describe('#Reports API', () => {
         to: 1623695400,
         user_ids: 1,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/download',
         {
           params: {

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -1,5 +1,6 @@
 import conversationAPI from '../../inbox/conversation';
 import ApiClient from '../../ApiClient';
+import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -21,23 +22,7 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('filter');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#get conversations', () => {
       conversationAPI.get({
         inboxId: 1,
@@ -47,16 +32,19 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
-        params: {
-          inbox_id: 1,
-          team_id: 1,
-          status: 'open',
-          assignee_type: 'me',
-          page: 1,
-          labels: [],
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/conversations',
+        {
+          params: {
+            inbox_id: 1,
+            team_id: 1,
+            status: 'open',
+            assignee_type: 'me',
+            page: 1,
+            labels: [],
+          },
+        }
+      );
     });
 
     it('#search', () => {
@@ -65,7 +53,7 @@ describe('#ConversationAPI', () => {
         page: 1,
       });
 
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/search',
         {
           params: {
@@ -78,7 +66,7 @@ describe('#ConversationAPI', () => {
 
     it('#toggleStatus', () => {
       conversationAPI.toggleStatus({ conversationId: 12, status: 'online' });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_status`,
         {
           status: 'online',
@@ -89,7 +77,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignAgent', () => {
       conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments?assignee_id=34`,
         {}
       );
@@ -97,7 +85,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignTeam', () => {
       conversationAPI.assignTeam({ conversationId: 12, teamId: 1 });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments`,
         {
           team_id: 1,
@@ -107,7 +95,7 @@ describe('#ConversationAPI', () => {
 
     it('#markMessageRead', () => {
       conversationAPI.markMessageRead({ id: 12 });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/update_last_seen`
       );
     });
@@ -117,7 +105,7 @@ describe('#ConversationAPI', () => {
         conversationId: 12,
         status: 'typing_on',
       });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_typing_status`,
         {
           typing_status: 'typing_on',
@@ -127,14 +115,14 @@ describe('#ConversationAPI', () => {
 
     it('#mute', () => {
       conversationAPI.mute(45);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/mute'
       );
     });
 
     it('#unmute', () => {
       conversationAPI.unmute(45);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/unmute'
       );
     });
@@ -147,15 +135,18 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations/meta', {
-        params: {
-          inbox_id: 1,
-          team_id: 1,
-          status: 'open',
-          assignee_type: 'me',
-          labels: [],
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/conversations/meta',
+        {
+          params: {
+            inbox_id: 1,
+            team_id: 1,
+            status: 'open',
+            assignee_type: 'me',
+            labels: [],
+          },
+        }
+      );
     });
 
     it('#sendEmailTranscript', () => {
@@ -163,7 +154,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         email: 'john@acme.inc',
       });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/transcript',
         {
           email: 'john@acme.inc',
@@ -176,7 +167,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         customAttributes: { order_d: '1001' },
       });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/custom_attributes',
         {
           custom_attributes: { order_d: '1001' },
@@ -211,7 +202,9 @@ describe('#ConversationAPI', () => {
         },
       };
       conversationAPI.filter(payload);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(
+        context.axiosMock.post
+      ).toHaveBeenCalledWith(
         '/api/v1/conversations/filter',
         payload.queryData,
         { params: { page: payload.page } }
@@ -220,7 +213,7 @@ describe('#ConversationAPI', () => {
 
     it('#getAllAttachments', () => {
       conversationAPI.getAllAttachments(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/attachments'
       );
     });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -1,5 +1,6 @@
 import messageAPI, { buildCreatePayload } from '../../inbox/message';
 import ApiClient from '../../ApiClient';
+import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -12,29 +13,13 @@ describe('#ConversationAPI', () => {
     expect(messageAPI).toHaveProperty('getPreviousMessages');
   });
 
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getPreviousMessages', () => {
       messageAPI.getPreviousMessages({
         conversationId: 12,
         before: 4573,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         `/api/v1/conversations/12/messages`,
         {
           params: {
@@ -50,6 +35,7 @@ describe('#ConversationAPI', () => {
         message: 'test content',
         echoId: 12,
         isPrivate: true,
+
         files: [new Blob(['test-content'], { type: 'application/pdf' })],
       });
       expect(formPayload).toBeInstanceOf(FormData);
@@ -72,10 +58,8 @@ describe('#ConversationAPI', () => {
         private: false,
         echo_id: 12,
         content_attributes: { in_reply_to: 12 },
-        cc_emails: '',
         bcc_emails: '',
-        to_emails: '',
-        template_params: undefined,
+        cc_emails: '',
       });
     });
   });

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -1,5 +1,6 @@
 import inboxesAPI from '../inboxes';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#InboxesAPI', () => {
   it('creates correct instance', () => {
@@ -13,32 +14,19 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
   });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getCampaigns', () => {
       inboxesAPI.getCampaigns(2);
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/inboxes/2/campaigns');
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/campaigns'
+      );
     });
 
     it('#deleteInboxAvatar', () => {
       inboxesAPI.deleteInboxAvatar(2);
-      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/avatar'
+      );
     });
   });
 });

app/javascript/dashboard/api/specs/integrations.spec.js

@@ -1,5 +1,6 @@
 import integrationAPI from '../integrations';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#integrationAPI', () => {
   it('creates correct instance', () => {
@@ -15,27 +16,11 @@ describe('#integrationAPI', () => {
     expect(integrationAPI).toHaveProperty('listAllSlackChannels');
     expect(integrationAPI).toHaveProperty('deleteHook');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#connectSlack', () => {
       const code = 'SDNFJNSDFNDSJN';
       integrationAPI.connectSlack(code);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           code,
@@ -46,7 +31,7 @@ describe('#integrationAPI', () => {
     it('#updateSlack', () => {
       const updateObj = { referenceId: 'SDFSDGSVE' };
       integrationAPI.updateSlack(updateObj);
-      expect(axiosMock.patch).toHaveBeenCalledWith(
+      expect(context.axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           reference_id: updateObj.referenceId,
@@ -56,14 +41,16 @@ describe('#integrationAPI', () => {
 
     it('#listAllSlackChannels', () => {
       integrationAPI.listAllSlackChannels();
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/integrations/slack/list_all_channels'
       );
     });
 
     it('#delete', () => {
       integrationAPI.delete(2);
-      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/integrations/2');
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/integrations/2'
+      );
     });
 
     it('#createHook', () => {
@@ -72,7 +59,7 @@ describe('#integrationAPI', () => {
         settings: { api_key: 'SDFSDGSVE' },
       };
       integrationAPI.createHook(hookData);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks',
         hookData
       );
@@ -80,7 +67,7 @@ describe('#integrationAPI', () => {
 
     it('#deleteHook', () => {
       integrationAPI.deleteHook(2);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
+      expect(context.axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks/2'
       );
     });

app/javascript/dashboard/api/specs/integrations/dyte.spec.js

@@ -1,5 +1,6 @@
 import DyteAPIClient from '../../integrations/dyte';
 import ApiClient from '../../ApiClient';
+import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -8,26 +9,10 @@ describe('#accountAPI', () => {
     expect(DyteAPIClient).toHaveProperty('addParticipantToMeeting');
   });
 
-  describe('createAMeeting', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('createAMeeting', context => {
     it('creates a valid request', () => {
       DyteAPIClient.createAMeeting(1);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/create_a_meeting',
         {
           conversation_id: 1,
@@ -36,26 +21,10 @@ describe('#accountAPI', () => {
     });
   });
 
-  describe('addParticipantToMeeting', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('addParticipantToMeeting', context => {
     it('creates a valid request', () => {
       DyteAPIClient.addParticipantToMeeting(1);
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/add_participant_to_meeting',
         {
           message_id: 1,

app/javascript/dashboard/api/specs/notifications.spec.js

@@ -1,5 +1,6 @@
 import notificationsAPI from '../notifications';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#NotificationAPI', () => {
   it('creates correct instance', () => {
@@ -10,47 +11,31 @@ describe('#NotificationAPI', () => {
     expect(notificationsAPI).toHaveProperty('read');
     expect(notificationsAPI).toHaveProperty('readAll');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#get', () => {
       notificationsAPI.get(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications?page=1'
       );
     });
 
     it('#getNotifications', () => {
       notificationsAPI.getNotifications(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/1/notifications'
       );
     });
 
     it('#getUnreadCount', () => {
       notificationsAPI.getUnreadCount();
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/unread_count'
       );
     });
 
     it('#read', () => {
       notificationsAPI.read(48670, 'Conversation');
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all',
         {
           primary_actor_id: 'Conversation',
@@ -61,7 +46,7 @@ describe('#NotificationAPI', () => {
 
     it('#readAll', () => {
       notificationsAPI.readAll();
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all'
       );
     });

app/javascript/dashboard/api/specs/reports.spec.js

@@ -1,5 +1,6 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -17,30 +18,14 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('getInboxReports');
     expect(reportsAPI).toHaveProperty('getTeamReports');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getAccountReports', () => {
       reportsAPI.getReports({
         metric: 'conversations_count',
         from: 1621103400,
         to: 1621621800,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
+      expect(context.axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
           metric: 'conversations_count',
           since: 1621103400,
@@ -53,17 +38,20 @@ describe('#Reports API', () => {
 
     it('#getAccountSummary', () => {
       reportsAPI.getSummary(1621103400, 1621621800);
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/summary', {
-        params: {
-          business_hours: undefined,
-          group_by: undefined,
-          id: undefined,
-          since: 1621103400,
-          timezone_offset: -0,
-          type: 'account',
-          until: 1621621800,
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/summary',
+        {
+          params: {
+            business_hours: undefined,
+            group_by: undefined,
+            id: undefined,
+            since: 1621103400,
+            timezone_offset: -0,
+            type: 'account',
+            until: 1621621800,
+          },
+        }
+      );
     });
 
     it('#getAgentReports', () => {
@@ -72,48 +60,60 @@ describe('#Reports API', () => {
         to: 1621621800,
         businessHours: true,
       });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/agents', {
-        params: {
-          since: 1621103400,
-          until: 1621621800,
-          business_hours: true,
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/agents',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+            business_hours: true,
+          },
+        }
+      );
     });
 
     it('#getLabelReports', () => {
       reportsAPI.getLabelReports({ from: 1621103400, to: 1621621800 });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/labels', {
-        params: {
-          since: 1621103400,
-          until: 1621621800,
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/labels',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+          },
+        }
+      );
     });
 
     it('#getInboxReports', () => {
       reportsAPI.getInboxReports({ from: 1621103400, to: 1621621800 });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/inboxes', {
-        params: {
-          since: 1621103400,
-          until: 1621621800,
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/inboxes',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+          },
+        }
+      );
     });
 
     it('#getTeamReports', () => {
       reportsAPI.getTeamReports({ from: 1621103400, to: 1621621800 });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/teams', {
-        params: {
-          since: 1621103400,
-          until: 1621621800,
-        },
-      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/teams',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+          },
+        }
+      );
     });
 
     it('#getConversationMetric', () => {
       reportsAPI.getConversationMetric('account');
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/conversations',
         {
           params: {

app/javascript/dashboard/api/specs/teams.spec.js

@@ -1,5 +1,6 @@
 import teamsAPI from '../teams';
 import ApiClient from '../ApiClient';
+import describeWithAPIMock from './apiSpecHelper';
 
 describe('#TeamsAPI', () => {
   it('creates correct instance', () => {
@@ -13,33 +14,17 @@ describe('#TeamsAPI', () => {
     expect(teamsAPI).toHaveProperty('addAgents');
     expect(teamsAPI).toHaveProperty('updateAgents');
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
+  describeWithAPIMock('API calls', context => {
     it('#getAgents', () => {
       teamsAPI.getAgents({ teamId: 1 });
-      expect(axiosMock.get).toHaveBeenCalledWith(
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members'
       );
     });
 
     it('#addAgents', () => {
       teamsAPI.addAgents({ teamId: 1, agentsList: { user_ids: [1, 10, 21] } });
-      expect(axiosMock.post).toHaveBeenCalledWith(
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: { user_ids: [1, 10, 21] },
@@ -53,7 +38,7 @@ describe('#TeamsAPI', () => {
         teamId: 1,
         agentsList,
       });
-      expect(axiosMock.patch).toHaveBeenCalledWith(
+      expect(context.axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: agentsList,

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

@@ -81,6 +81,11 @@ $conv-header-height: 2.5rem;
 $inbox-thumb-size: 3rem;
 
 
+// Spinner
+$spinkit-spinner-color: $color-white !default;
+$spinkit-spinner-margin: 0 0 0 1rem !default;
+$spinkit-size: 1rem !default;
+
 // Snackbar default
 $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -149,11 +149,15 @@
 }
 
 .multiselect-wrap--small {
+  .multiselect__tags,
+  .multiselect__input {
+    @apply items-center flex;
+  }
 
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm h-10 min-h-[2.5rem];
   }
 
   .multiselect__input {
@@ -161,15 +165,11 @@
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-1 px-0.5;
   }
 
   .multiselect__placeholder {
-    @apply m-0 py-2 px-0.5;
-  }
-
-  .multiselect__tag {
-    @apply py-[6px] my-[1px];
+    @apply m-0 py-1 px-0.5;
   }
 
   .multiselect__select {
@@ -181,6 +181,9 @@
     @apply bg-transparent;
   }
 
+  .multiselect__tags-wrap {
+    @apply flex-shrink-0;
+  }
 }
 
 .multiselect-wrap--medium {

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

@@ -9,6 +9,7 @@
 @import 'shared/assets/stylesheets/border-radius';
 @import 'variables';
 
+@import '~spinkit/scss/spinners/7-three-bounce';
 @import 'vue-multiselect/dist/vue-multiselect.min.css';
 @import '~shared/assets/stylesheets/ionicons';
 

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

@@ -2,6 +2,10 @@
   transition: box-shadow 0.35s $swift-ease-out-function,
     height 2s $swift-ease-out-function;
 
+  &.is-focused {
+    box-shadow: var(--shadow);
+  }
+
   .reply-box__top {
     .icon {
       color: $medium-gray;
@@ -43,6 +47,8 @@
   }
 
   &.is-private {
+    @apply bg-yellow-100 dark:bg-yellow-800;
+
     .reply-box__top {
       @apply bg-yellow-100 dark:bg-yellow-800;
 

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 
 export default {
   components: {

app/javascript/dashboard/components/ChatList.vue

@@ -10,8 +10,7 @@
     <div
       class="flex items-center justify-between py-0 px-4"
       :class="{
-        'pb-3 border-b border-slate-75 dark:border-slate-700':
-          hasAppliedFiltersOrActiveFolders,
+        'pb-3 border-b border-slate-75 dark:border-slate-700': hasAppliedFiltersOrActiveFolders,
       }"
     >
       <div class="flex max-w-[85%] justify-center items-center">
@@ -25,7 +24,9 @@
           v-if="!hasAppliedFiltersOrActiveFolders"
           class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
         >
-          {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
+          {{
+            this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
+          }}
         </span>
       </div>
       <div class="flex items-center gap-1">
@@ -192,17 +193,17 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
-import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
-import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationCard from './widgets/conversation/ConversationCard.vue';
+import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter';
+import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter';
+import ChatTypeTabs from './widgets/ChatTypeTabs';
+import ConversationCard from './widgets/conversation/ConversationCard';
 import timeMixin from '../mixins/time';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
+import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
@@ -641,8 +642,10 @@ export default {
     },
     handleKeyEvents(e) {
       if (hasPressedAltAndJKey(e)) {
-        const { allConversations, activeConversationIndex } =
-          this.getKeyboardListenerParams();
+        const {
+          allConversations,
+          activeConversationIndex,
+        } = this.getKeyboardListenerParams();
         if (activeConversationIndex === -1) {
           allConversations[0].click();
         }

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -13,10 +13,10 @@
       />
       <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>
         <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
         </woot-button>
       </div>
     </form>

app/javascript/dashboard/components/MaskedText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text--container">
-    <woot-button size="small" class="button--text" @click="onCopy">
+    <woot-button size="small" class=" button--text" @click="onCopy">
       {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
     </woot-button>
     <woot-button

app/javascript/dashboard/components/Modal.vue

@@ -66,9 +66,9 @@ export default {
         'right-aligned': 'right-aligned',
       };
 
-      return `modal-mask skip-context-menu ${
-        modalClassNameMap[this.modalType] || ''
-      }`;
+      return `modal-mask skip-context-menu ${modalClassNameMap[
+        this.modalType
+      ] || ''}`;
     },
   },
   mounted() {

app/javascript/dashboard/components/SettingsSection.vue

@@ -2,8 +2,7 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
-        showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import WootSnackbar from './Snackbar.vue';
+import WootSnackbar from './Snackbar';
 
 export default {
   components: {

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

@@ -72,8 +72,10 @@ export default {
       const { custom_attributes: subscription } = account;
       if (!subscription) return EMPTY_SUBSCRIPTION_INFO;
 
-      const { subscription_status: status, subscription_ends_on: endsOn } =
-        subscription;
+      const {
+        subscription_status: status,
+        subscription_ends_on: endsOn,
+      } = subscription;
 
       return { status, endsOn: new Date(endsOn) };
     },

app/javascript/dashboard/components/app/versionCheckHelper.js

@@ -1,4 +1,4 @@
-import semver from 'semver';
+const semver = require('semver');
 
 export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
   if (!semver.valid(latestVersion)) {

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'shared/components/Spinner';
 
 export default {
   components: {

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -10,7 +10,7 @@
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
-        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+        {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="isResolved"
@@ -21,7 +21,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="showOpenButton"
@@ -31,7 +31,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-if="showAdditionalActions"
@@ -57,7 +57,7 @@
             icon="snooze"
             @click="() => openSnoozeModal()"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item v-if="!isPending">
@@ -68,7 +68,7 @@
             icon="book-clock"
             @click="() => toggleStatus(STATUS_TYPE.PENDING)"
           >
-            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
         </woot-dropdown-item>
       </woot-dropdown-menu>
@@ -90,7 +90,7 @@ import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import {
   hasPressedAltAndEKey,

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

@@ -49,11 +49,11 @@
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
-import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
+import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
 import wootConstants from 'dashboard/constants/globals';
 
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;

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

@@ -35,8 +35,8 @@ import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
-import PrimarySidebar from './sidebarComponents/Primary.vue';
-import SecondarySidebar from './sidebarComponents/Secondary.vue';
+import PrimarySidebar from './sidebarComponents/Primary';
+import SecondarySidebar from './sidebarComponents/Secondary';
 import {
   hasPressedAltAndCKey,
   hasPressedAltAndRKey,

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

@@ -34,8 +34,8 @@
             <woot-submit-button
               :disabled="
                 $v.accountName.$invalid ||
-                $v.accountName.$invalid ||
-                uiFlags.isCreating
+                  $v.accountName.$invalid ||
+                  uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
               :loading="uiFlags.isCreating"

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

@@ -16,7 +16,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from '../../widgets/Thumbnail.vue';
+import Thumbnail from '../../widgets/Thumbnail';
 
 export default {
   components: {

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

@@ -3,8 +3,7 @@
     <button
       class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
-          isNotificationPanelActive,
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
       }"
       @click="openNotificationPanel"
     >

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

@@ -109,9 +109,9 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
 
 export default {
   components: {

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

@@ -39,11 +39,11 @@
   </div>
 </template>
 <script>
-import Logo from './Logo.vue';
-import PrimaryNavItem from './PrimaryNavItem.vue';
-import OptionsMenu from './OptionsMenu.vue';
-import AgentDetails from './AgentDetails.vue';
-import NotificationBell from './NotificationBell.vue';
+import Logo from './Logo';
+import PrimaryNavItem from './PrimaryNavItem';
+import OptionsMenu from './OptionsMenu';
+import AgentDetails from './AgentDetails';
+import NotificationBell from './NotificationBell';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';

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

@@ -9,8 +9,7 @@
       class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
       :class="{
         'bg-woot-25 dark:bg-slate-800': isActive,
-        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
-          shouldTruncate,
+        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
       }"
       @click="navigate"
     >
@@ -45,8 +44,7 @@
             class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
-              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
-                shouldTruncate,
+              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
             }"
           >
             {{ label }}

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

@@ -35,8 +35,7 @@
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600': isActiveView,
           'bg-slate-50 dark:bg-slate-700': !isActiveView,
         }"
       >
@@ -98,7 +97,7 @@ import {
   getInboxWarningIconClass,
 } from 'dashboard/helper/inbox';
 
-import SecondaryChildNavItem from './SecondaryChildNavItem.vue';
+import SecondaryChildNavItem from './SecondaryChildNavItem';
 import {
   isOnMentionsView,
   isOnUnattendedView,

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

@@ -53,24 +53,16 @@ export default {
       const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
       const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
       return !isBeforeAMonth
-        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
-            this.createdAtTimeAgo
-          }`
-        : `${this.$t(
-            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
-          )} ${this.dateFormat(this.createdAtTimestamp)}`;
+        ? `Created ${this.createdAtTimeAgo}`
+        : `Created at: ${this.dateFormat(this.createdAtTimestamp)}`;
     },
     lastActivity() {
       const lastActivityTimeDiff =
         Date.now() - this.lastActivityTimestamp * 1000;
       const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
       return !isNotActive
-        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
-            this.lastActivityAtTimeAgo
-          }`
-        : `${this.$t(
-            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
+        ? `Last activity ${this.lastActivityAtTimeAgo}`
+        : `Last activity: ${this.dateFormat(this.lastActivityTimestamp)}`;
     },
     tooltipText() {
       return `${this.createdAt}

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

@@ -28,8 +28,8 @@
   </button>
 </template>
 <script>
-import Spinner from 'shared/components/Spinner.vue';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import Spinner from 'shared/components/Spinner';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 
 export default {
   name: 'WootButton',

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

@@ -1,6 +1,6 @@
 <template>
   <div class="animation-container margin-top-1">
-    <div class="ai-typing--wrap">
+    <div class="ai-typing--wrap ">
       <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
       <label>
         {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.AI_WRITING') }}

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

@@ -108,7 +108,7 @@
 <script>
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
 import AutomationActionFileInput from './AutomationFileInput.vue';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 export default {
   components: {
     AutomationActionTeamMessageInput,

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

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'shared/components/Spinner';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {

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

@@ -7,7 +7,7 @@
   />
 </template>
 <script>
-import ChannelSelector from '../ChannelSelector.vue';
+import ChannelSelector from '../ChannelSelector';
 export default {
   components: { ChannelSelector },
   props: {

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

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
+import LoadingState from 'dashboard/components/widgets/LoadingState';
 export default {
   components: {
     LoadingState,

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div
@@ -256,9 +255,7 @@ export default {
           value === 'conversation_attribute' ||
           value === 'contact_attribute'
         ) {
-          // eslint-disable-next-line vue/no-mutating-props
           this.value.custom_attribute_type = this.customAttributeType;
-          // eslint-disable-next-line vue/no-mutating-props
         } else this.value.custom_attribute_type = '';
       },
       immediate: true,

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

@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
 import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import {

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

@@ -42,7 +42,7 @@
  * Badge - Chat source indication { fb / telegram }
  * Username - Username for avatar
  */
-import Avatar from './Avatar.vue';
+import Avatar from './Avatar';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 export default {

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

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script>
-import Thumbnail from './Thumbnail.vue';
+import Thumbnail from './Thumbnail';
 
 export default {
   components: {

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

@@ -23,7 +23,6 @@
       @change="onFileChange"
     />
     <div ref="editor" />
-    <slot name="footer" />
   </div>
 </template>
 
@@ -42,13 +41,9 @@ import {
   triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 
-import TagAgents from '../conversation/TagAgents.vue';
-import CannedResponse from '../conversation/CannedResponse.vue';
-import VariableList from '../conversation/VariableList.vue';
-import {
-  appendSignature,
-  removeSignature,
-} from 'dashboard/helper/editorHelper';
+import TagAgents from '../conversation/TagAgents';
+import CannedResponse from '../conversation/CannedResponse';
+import VariableList from '../conversation/VariableList';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
@@ -73,9 +68,7 @@ import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 const createState = (
   content,
   placeholder,
-  // eslint-disable-next-line default-param-last
   plugins = [],
-  // eslint-disable-next-line default-param-last
   methods = {},
   enabledMenuOptions
 ) => {
@@ -107,10 +100,6 @@ export default {
     enableCannedResponses: { type: Boolean, default: true },
     variables: { type: Object, default: () => ({}) },
     enabledMenuOptions: { type: Array, default: () => [] },
-    signature: { type: String, default: '' },
-    // allowSignature is a kill switch, ensuring no signature methods
-    // are triggered except when this flag is true
-    allowSignature: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -231,12 +220,6 @@ export default {
         }),
       ];
     },
-    sendWithSignature() {
-      // this is considered the source of truth, we watch this property
-      // on change, we toggle the signature in the editor
-      const { send_with_signature: isEnabled } = this.uiSettings;
-      return isEnabled && this.allowSignature && !this.isPrivate;
-    },
   },
   watch: {
     showUserMentions(updatedValue) {
@@ -261,6 +244,7 @@ export default {
     isPrivate() {
       this.reloadState(this.value);
     },
+
     updateSelectionWith(newValue, oldValue) {
       if (!this.editorView) {
         return null;
@@ -279,12 +263,6 @@ export default {
       }
       return null;
     },
-    sendWithSignature(newValue) {
-      // see if the allowSignature flag is true
-      if (this.allowSignature) {
-        this.toggleSignatureInEditor(newValue);
-      }
-    },
   },
   created() {
     this.state = createState(
@@ -298,7 +276,7 @@ export default {
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditor(this.value);
+    this.focusEditorInputField();
   },
   methods: {
     reloadState(content = this.value) {
@@ -310,75 +288,7 @@ export default {
         this.editorMenuOptions
       );
       this.editorView.updateState(this.state);
-
-      this.focusEditor(content);
-    },
-    focusEditor(content) {
-      if (this.isBodyEmpty(content) && this.sendWithSignature) {
-        // reload state can be called when switching between conversations, or when drafts is loaded
-        // these drafts can also have a signature, so we need to check if the body is empty
-        // and handle things accordingly
-        this.handleEmptyBodyWithSignature();
-      } else {
-        // this is in the else block, handleEmptyBodyWithSignature also has a call to the focus method
-        // the position is set to start, because the signature is added at the end of the body
-        this.focusEditorInputField('end');
-      }
-    },
-    toggleSignatureInEditor(signatureEnabled) {
-      // The toggleSignatureInEditor gets the new value from the
-      // watcher, this means that if the value is true, the signature
-      // is supposed to be added, else we remove it.
-      if (signatureEnabled) {
-        this.addSignature();
-      } else {
-        this.removeSignature();
-      }
-    },
-    addSignature() {
-      let content = this.value;
-      // see if the content is empty, if it is before appending the signature
-      // we need to add a paragraph node and move the cursor at the start of the editor
-      const contentWasEmpty = this.isBodyEmpty(content);
-      content = appendSignature(content, this.signature);
-      // need to reload first, ensuring that the editorView is updated
-      this.reloadState(content);
-
-      if (contentWasEmpty) {
-        this.handleEmptyBodyWithSignature();
-      }
-    },
-    removeSignature() {
-      if (!this.signature) return;
-      let content = this.value;
-      content = removeSignature(content, this.signature);
-      // reload the state, ensuring that the editorView is updated
-      this.reloadState(content);
-    },
-    isBodyEmpty(content) {
-      // if content is undefined, we assume that the body is empty
-      if (!content) return true;
-
-      // if the signature is present, we need to remove it before checking
-      // note that we don't update the editorView, so this is safe
-      const bodyWithoutSignature = this.signature
-        ? removeSignature(content, this.signature)
-        : content;
-
-      // trimming should remove all the whitespaces, so we can check the length
-      return bodyWithoutSignature.trim().length === 0;
-    },
-    handleEmptyBodyWithSignature() {
-      const { schema, tr } = this.state;
-
-      // create a paragraph node and
-      // start a transaction to append it at the end
-      const paragraph = schema.nodes.paragraph.create();
-      const paragraphTransaction = tr.insert(0, paragraph);
-      this.editorView.dispatch(paragraphTransaction);
-
-      // Set the focus at the start of the input field
-      this.focusEditorInputField('start');
+      this.focusEditorInputField();
     },
     createEditorView() {
       this.editorView = new EditorView(this.$refs.editor, {
@@ -423,11 +333,9 @@ export default {
         this.focusEditorInputField();
       }
     },
-    focusEditorInputField(pos = 'end') {
+    focusEditorInputField() {
       const { tr } = this.editorView.state;
-
-      const selection =
-        pos === 'end' ? Selection.atEnd(tr.doc) : Selection.atStart(tr.doc);
+      const selection = Selection.atEnd(tr.doc);
 
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
@@ -673,10 +581,6 @@ export default {
 
 .ProseMirror-prompt {
   @apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
-
-  h5 {
-    @apply dark:text-slate-25 text-slate-800;
-  }
 }
 
 .is-private {
@@ -712,6 +616,6 @@ export default {
 }
 
 .editor-warning__message {
-  @apply text-red-400 dark:text-red-400 text-sm font-normal pt-1 pb-0 px-0;
+  @apply text-red-400 dark:text-red-400 font-normal pt-1 pb-0 px-0;
 }
 </style>

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

@@ -32,9 +32,7 @@ const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const createState = (
   content,
   placeholder,
-  // eslint-disable-next-line default-param-last
   plugins = [],
-  // eslint-disable-next-line default-param-last
   methods = {},
   enabledMenuOptions
 ) => {

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

@@ -134,7 +134,7 @@ import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
 } from 'shared/constants/messages';
-import VideoCallButton from '../VideoCallButton.vue';
+import VideoCallButton from '../VideoCallButton';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
 import { REPLY_EDITOR_MODES } from './constants';
 import { mapGetters } from 'vuex';
@@ -288,7 +288,7 @@ export default {
       }
     },
     showMessageSignatureButton() {
-      return !this.isOnPrivateNote;
+      return !this.isOnPrivateNote && this.isAnEmailChannel;
     },
     sendWithSignature() {
       const { send_with_signature: isEnabled } = this.uiSettings;

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

@@ -1,6 +1,8 @@
 <template>
   <div
-    :class="`status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`"
+    :class="
+      `status-badge status-badge__${status} rounded-full w-2.5 h-2.5 mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-flex`
+    "
   />
 </template>
 <script>

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

@@ -16,7 +16,7 @@
     >
       <div class="items-center flex justify-between last:mt-4">
         <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          $t('CHAT_LIST.CHAT_SORT.STATUS')
+          this.$t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <filter-item
           type="status"
@@ -28,7 +28,7 @@
       </div>
       <div class="items-center flex justify-between last:mt-4">
         <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
-          $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
+          this.$t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <filter-item
           type="sort"
@@ -46,7 +46,7 @@
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
-import FilterItem from './FilterItem.vue';
+import FilterItem from './FilterItem';
 
 export default {
   components: {

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

@@ -58,11 +58,11 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel.vue';
-import ConversationHeader from './ConversationHeader.vue';
+import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
+import ConversationHeader from './ConversationHeader';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
-import EmptyState from './EmptyState/EmptyState.vue';
-import MessagesView from './MessagesView.vue';
+import EmptyState from './EmptyState/EmptyState';
+import MessagesView from './MessagesView';
 
 export default {
   components: {

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

@@ -87,7 +87,7 @@
             class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
             :icon="attachmentIcon"
           />
-          {{ $t(`${attachmentMessageContent}`) }}
+          {{ this.$t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
@@ -103,7 +103,7 @@
           icon="info"
         />
         <span>
-          {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+          {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
       <div class="conversation--meta flex flex-col absolute right-4 top-4">
@@ -147,16 +147,16 @@
 import { mapGetters } from 'vuex';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import Thumbnail from '../Thumbnail.vue';
+import Thumbnail from '../Thumbnail';
 import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
 import router from '../../../routes';
 import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
-import InboxName from '../InboxName.vue';
+import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
 const ATTACHMENT_ICONS = {

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

@@ -73,12 +73,12 @@
 import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
-import BackButton from '../BackButton.vue';
+import BackButton from '../BackButton';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
-import InboxName from '../InboxName.vue';
-import MoreActions from './MoreActions.vue';
-import Thumbnail from '../Thumbnail.vue';
+import InboxName from '../InboxName';
+import MoreActions from './MoreActions';
+import Thumbnail from '../Thumbnail';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { conversationReopenTime } from 'dashboard/helper/snoozeHelpers';

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <woot-modal :show.sync="show" :on-close="onCancel">
     <div class="h-auto overflow-auto flex flex-col">

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

@@ -37,8 +37,8 @@
 import { mapGetters } from 'vuex';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import accountMixin from 'dashboard/mixins/account';
-import OnboardingView from '../OnboardingView.vue';
-import EmptyStateMessage from './EmptyStateMessage.vue';
+import OnboardingView from '../OnboardingView';
+import EmptyStateMessage from './EmptyStateMessage';
 
 export default {
   components: {

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import Hotkey from 'dashboard/components/base/Hotkey.vue';
+import Hotkey from 'dashboard/components/base/Hotkey';
 
 export default {
   components: {