From 7bb8186e43b87cdcb8049beb24aa216b222072dd Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 10 Jun 2022 19:29:52 +0530
Subject: [PATCH] chore: Update self-closing tag eslint config (#4826)

* chore: Fix self-closing tag issues

* Fix merge conflicts

Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
---
 .eslintrc.js                                  | 36 ++++++++++++-------
 app/javascript/dashboard/App.vue              |  2 +-
 .../dashboard/components/ChatList.vue         |  7 ++--
 .../dashboard/components/ModalHeader.vue      |  2 +-
 .../components/NetworkNotification.vue        |  3 +-
 .../dashboard/components/SettingsSection.vue  |  2 +-
 .../dashboard/components/buttons/Button.vue   |  2 +-
 .../dashboard/components/ui/Banner.vue        |  3 +-
 .../dashboard/components/ui/Switch.vue        |  2 +-
 .../dashboard/components/ui/WootButton.vue    |  2 +-
 .../widgets/AutomationActionInput.vue         |  2 +-
 .../AutomationActionTeamMessageInput.vue      |  2 +-
 .../components/widgets/SettingIntroBanner.vue |  2 +-
 .../widgets/WootWriter/AudioRecorder.vue      |  2 +-
 .../components/widgets/WootWriter/Editor.vue  |  2 +-
 .../widgets/conversation/MessagesView.vue     |  3 +-
 .../WhatsappTemplates/TemplateParser.vue      |  2 +-
 .../widgets/conversation/bubble/Text.vue      |  2 +-
 .../widgets/forms/AvatarUploader.vue          |  2 +-
 .../components/widgets/forms/Input.vue        |  2 +-
 .../widgets/modal/ConfirmationModal.vue       |  2 +-
 .../contact/components/MergeContact.vue       |  4 +--
 .../widget-preview/components/WidgetBody.vue  |  2 +-
 .../components/WidgetFooter.vue               |  2 +-
 .../widget-preview/components/WidgetHead.vue  |  2 +-
 app/javascript/dashboard/routes/auth/Auth.vue |  2 +-
 .../dashboard/routes/auth/Confirmation.vue    |  2 +-
 .../dashboard/routes/auth/PasswordEdit.vue    |  3 +-
 .../dashboard/routes/auth/Signup.vue          |  5 ++-
 .../dashboard/routes/dashboard/Dashboard.vue  |  4 +--
 .../contacts/components/AddReminder.vue       |  3 +-
 .../conversation/ContactConversations.vue     |  2 +-
 .../conversation/ContactCustomAttributes.vue  |  4 +--
 .../conversation/ContactDetailsItem.vue       |  2 +-
 .../dashboard/conversation/ContactPanel.vue   |  3 +-
 .../conversation/ConversationView.vue         |  3 +-
 .../conversation/labels/LabelBox.vue          |  2 +-
 .../conversation/search/SearchMessageItem.vue |  2 +-
 .../components/NotificationPanel.vue          |  8 ++---
 .../components/NotificationPanelList.vue      |  4 +--
 .../components/NotificationTable.vue          |  3 +-
 .../dashboard/settings/SettingsHeader.vue     |  4 +--
 .../settings/SettingsSubPageHeader.vue        |  2 +-
 .../routes/dashboard/settings/Wrapper.vue     |  4 +--
 .../dashboard/settings/account/Index.vue      |  5 ++-
 .../dashboard/settings/agents/Index.vue       |  6 ++--
 .../settings/attributes/CustomAttribute.vue   |  8 ++---
 .../dashboard/settings/automation/Index.vue   | 11 +++---
 .../dashboard/settings/canned/Index.vue       |  8 ++---
 .../dashboard/settings/inbox/AddAgents.vue    |  3 +-
 .../dashboard/settings/inbox/FinishSetup.vue  | 15 +++-----
 .../settings/inbox/InboxChannels.vue          |  2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  6 ++--
 .../settings/inbox/PreChatForm/Settings.vue   |  4 +--
 .../dashboard/settings/inbox/channels/Sms.vue |  2 +-
 .../settings/inbox/channels/Whatsapp.vue      |  2 +-
 .../inbox/settingsPage/ConfigurationPage.vue  | 12 +++----
 .../MultipleIntegrationHooks.vue              |  3 +-
 .../integrations/IntegrationHelpText.vue      |  2 +-
 .../integrations/Webhooks/WebhookRow.vue      |  6 ++--
 .../dashboard/settings/labels/Index.vue       |  8 ++---
 .../dashboard/settings/profile/Index.vue      |  2 +-
 .../reports/components/ReportFilters.vue      |  2 +-
 .../components/overview/MetricCard.vue        |  2 +-
 .../settings/teams/AgentSelector.vue          |  2 +-
 .../dashboard/settings/teams/Create/Index.vue |  2 +-
 .../dashboard/settings/teams/Edit/Index.vue   |  2 +-
 .../routes/dashboard/settings/teams/Index.vue |  6 ++--
 .../dashboard/routes/login/Login.vue          |  3 +-
 app/javascript/shared/components/Button.vue   |  2 +-
 app/javascript/shared/components/Spinner.vue  |  2 +-
 .../ui/MultiselectDropdownItems.vue           |  3 +-
 .../ui/dropdown/DropdownDivider.vue           |  6 +---
 .../components/ui/dropdown/DropdownItem.vue   |  2 +-
 .../components/ui/dropdown/DropdownMenu.vue   |  2 +-
 .../ui/dropdown/DropdownSubMenu.vue           |  2 +-
 .../shared/mixins/specs/MockComponent.vue     |  2 +-
 app/javascript/survey/views/Response.vue      |  2 +-
 app/javascript/widget/App.vue                 |  2 +-
 .../widget/components/AgentMessageBubble.vue  | 13 +++----
 .../widget/components/AgentTypingBubble.vue   |  2 +-
 .../widget/components/ConversationWrap.vue    |  4 +--
 .../widget/components/UnreadMessage.vue       |  2 +-
 .../widget/components/UserAvatar.vue          |  2 +-
 .../components/dropdown/DropdownMenu.vue      |  6 ++--
 package.json                                  |  3 +-
 86 files changed, 151 insertions(+), 186 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index f30e21e03..e699f0fd4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,18 +19,32 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
-    'vue/max-attributes-per-line': ['error', {
-      'singleline': 20,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: 20,
+        multiline: {
+          max: 1,
+          allowFirstLine: false,
+        },
       },
-    }],
-    'vue/html-self-closing': 'off',
-    "vue/no-v-html": 'off',
+    ],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/no-v-html': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
-    'no-console': 'error'
+    'no-console': 'error',
   },
   settings: {
     'import/resolver': {
@@ -41,12 +55,10 @@ module.exports = {
   },
   env: {
     browser: true,
-    node: true,
     jest: true,
-    jasmine: true
+    node: true,
   },
   globals: {
-    __WEBPACK_ENV__: true,
     bus: true,
   },
 };
diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 1e262f1ff..7243e566e 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -2,7 +2,7 @@
   <div v-if="!authUIFlags.isFetching" id="app" class="app-wrapper app-root">
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <transition name="fade" mode="out-in">
-      <router-view></router-view>
+      <router-view />
     </transition>
     <add-account-modal
       :show="showAddAccountModal"
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 4a90bf7a1..90eaa7b86 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="conversations-list-wrap">
-    <slot></slot>
+    <slot />
     <div
       class="chat-list__top"
       :class="{ filter__applied: hasAppliedFiltersOrActiveFolders }"
@@ -53,8 +53,7 @@
           size="small"
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
-        >
-        </woot-button>
+        />
       </div>
     </div>
 
@@ -102,7 +101,7 @@
       />
 
       <div v-if="chatListLoading" class="text-center">
-        <span class="spinner"></span>
+        <span class="spinner" />
       </div>
 
       <woot-button
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index 9b80220a5..e0ce5f993 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/app/javascript/dashboard/components/ModalHeader.vue
@@ -7,7 +7,7 @@
     <p v-if="headerContent" class="small-12 column">
       {{ headerContent }}
     </p>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index 115a674a2..6f29dbb74 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -20,8 +20,7 @@
           color-scheme="warning"
           icon="dismiss-circle"
           @click="closeNotification"
-        >
-        </woot-button>
+        />
       </div>
     </div>
   </transition>
diff --git a/app/javascript/dashboard/components/SettingsSection.vue b/app/javascript/dashboard/components/SettingsSection.vue
index e700e9467..b3348ae04 100644
--- a/app/javascript/dashboard/components/SettingsSection.vue
+++ b/app/javascript/dashboard/components/SettingsSection.vue
@@ -13,7 +13,7 @@
       </p>
     </div>
     <div class="medium-6 small-12">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index 69dbc3658..733b84639 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -7,7 +7,7 @@
       :icon="icon"
     />
     <spinner v-if="isLoading" />
-    <slot></slot>
+    <slot />
   </button>
 </template>
 
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 227b0a37e..a1b612952 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -30,8 +30,7 @@
       icon="dismiss-circle"
       class-names="banner-action__button"
       @click="onClickClose"
-    >
-    </woot-button>
+    />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index b0bc32881..e15258c22 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -7,7 +7,7 @@
     :aria-checked="value.toString()"
     @click="onClick"
   >
-    <span aria-hidden="true" :class="{ active: value }"></span>
+    <span aria-hidden="true" :class="{ active: value }" />
   </button>
 </template>
 
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index 3d08ec928..e87c12e90 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -13,7 +13,7 @@
       :icon="icon"
       :icon-size="iconSize"
     />
-    <span v-if="$slots.default" class="button__content"><slot></slot></span>
+    <span v-if="$slots.default" class="button__content"><slot /></span>
   </button>
 </template>
 <script>
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index 8230c6963..248bb5b35 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -77,7 +77,7 @@
       rows="4"
       :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
       class="action-message"
-    ></textarea>
+    />
     <p
       v-if="v.action_params.$dirty && v.action_params.$error"
       class="filter-error"
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index cddaab713..61eb74f22 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -20,7 +20,7 @@
         rows="4"
         :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
         @input="updateValue"
-      ></textarea>
+      />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
index 557880056..a5e1cd871 100644
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
@@ -6,7 +6,7 @@
     <p v-if="headerContent" class="small-12 column">
       {{ headerContent }}
     </p>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 8796065ac..893bdcf3a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="audio-wave-wrapper">
-    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin"></audio>
+    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index 1ac0ec333..a21658a8a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -10,7 +10,7 @@
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
-    <div ref="editor"></div>
+    <div ref="editor" />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 3ebf59a54..e291ecffe 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -32,8 +32,7 @@
         class="sidebar-toggle--button"
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
-      >
-      </woot-button>
+      />
     </div>
     <ul class="conversation-panel">
       <transition name="slide-up">
diff --git a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
index d2307c55c..985c62138 100644
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -5,7 +5,7 @@
       rows="4"
       readonly
       class="template-input"
-    ></textarea>
+    />
     <div v-if="variables" class="template__variables-container">
       <p class="variables-label">
         {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index bf21d535e..87df4d281 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -6,7 +6,7 @@
       'hide--quoted': !showQuotedContent,
     }"
   >
-    <div v-dompurify-html="message" class="text-content"></div>
+    <div v-dompurify-html="message" class="text-content" />
     <button
       v-if="displayQuotedButton"
       class="quoted-text--button"
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index 768d9c119..5d1a325ea 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -22,7 +22,7 @@
         accept="image/png, image/jpeg, image/gif"
         @change="handleImageUpload"
       />
-      <slot></slot>
+      <slot />
     </label>
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
index f2c8044cd..0161240b8 100644
--- a/app/javascript/dashboard/components/widgets/forms/Input.vue
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -10,7 +10,7 @@
       @input="onChange"
       @blur="onBlur"
     />
-    <p v-if="helpText" class="help-text"></p>
+    <p v-if="helpText" class="help-text" />
     <span v-if="error" class="message">
       {{ error }}
     </span>
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 0c1472a84..18d8783ee 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
@@ -1,7 +1,7 @@
 <template>
   <modal :show.sync="show" :on-close="cancel">
     <div class="column content-box">
-      <woot-modal-header :header-title="title"> </woot-modal-header>
+      <woot-modal-header :header-title="title" />
       <div class="row modal-content">
         <div class="medium-12 columns">
           <p>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 2c886ac64..addc1c1e2 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -9,7 +9,7 @@
             color-scheme="success"
             small
             class="label--merge-warning"
-          ></woot-label>
+          />
         </label>
         <multiselect
           :value="primaryContact"
@@ -46,7 +46,7 @@
               color-scheme="alert"
               small
               class="label--merge-warning"
-            ></woot-label>
+            />
           </label>
           <multiselect
             v-model="childContact"
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
index 3bba815db..7114e3bf6 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetBody.vue
@@ -14,7 +14,7 @@
       </div>
       <div class="agent-message-wrap">
         <div class="agent-message">
-          <div class="avatar-wrap"></div>
+          <div class="avatar-wrap" />
           <div class="message-wrap">
             <div class="chat-bubble agent">
               <div class="message-content">
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index 1150b884e..8aa5c5925 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="footer-wrap">
-    <div class="input-area"></div>
+    <div class="input-area" />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
index 7857df8a4..6a08f2f55 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue
@@ -11,7 +11,7 @@
         <div v-if="!config.isExpanded">
           <div class="title-block text-base font-medium">
             <span class="mr-1">{{ config.websiteName }}</span>
-            <div v-if="config.isOnline" class="online-dot"></div>
+            <div v-if="config.isOnline" class="online-dot" />
           </div>
           <div class="text-xs mt-1 text-black-700">
             {{ responseTime }}
diff --git a/app/javascript/dashboard/routes/auth/Auth.vue b/app/javascript/dashboard/routes/auth/Auth.vue
index e829308fb..757bd6578 100644
--- a/app/javascript/dashboard/routes/auth/Auth.vue
+++ b/app/javascript/dashboard/routes/auth/Auth.vue
@@ -1,5 +1,5 @@
 <template>
   <div class="row auth-wrap login align-center">
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/auth/Confirmation.vue b/app/javascript/dashboard/routes/auth/Confirmation.vue
index 1abf16f1e..839744a08 100644
--- a/app/javascript/dashboard/routes/auth/Confirmation.vue
+++ b/app/javascript/dashboard/routes/auth/Confirmation.vue
@@ -1,5 +1,5 @@
 <template>
-  <loading-state :message="$t('CONFIRM_EMAIL')"></loading-state>
+  <loading-state :message="$t('CONFIRM_EMAIL')" />
 </template>
 <script>
 import LoadingState from '../../components/widgets/LoadingState';
diff --git a/app/javascript/dashboard/routes/auth/PasswordEdit.vue b/app/javascript/dashboard/routes/auth/PasswordEdit.vue
index 94380674f..b5d07cf8b 100644
--- a/app/javascript/dashboard/routes/auth/PasswordEdit.vue
+++ b/app/javascript/dashboard/routes/auth/PasswordEdit.vue
@@ -38,8 +38,7 @@
         :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
         :loading="newPasswordAPI.showLoading"
         button-class="expanded"
-      >
-      </woot-submit-button>
+      />
       <!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
     </div>
   </form>
diff --git a/app/javascript/dashboard/routes/auth/Signup.vue b/app/javascript/dashboard/routes/auth/Signup.vue
index a91ab5f12..ce892d765 100644
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -89,9 +89,8 @@
             :button-text="$t('REGISTER.SUBMIT')"
             :loading="isSignupInProgress"
             button-class="large expanded"
-          >
-          </woot-submit-button>
-          <p v-dompurify-html="termsLink" class="accept--terms"></p>
+          />
+          <p v-dompurify-html="termsLink" class="accept--terms" />
         </form>
         <div class="column text-center sigin--footer">
           <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index cfcaccfe5..f88aefe3a 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -8,9 +8,9 @@
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-add-label-popup="showAddLabelPopup"
-    ></sidebar>
+    />
     <section class="app-content columns" :class="contentClassName">
-      <router-view></router-view>
+      <router-view />
       <command-bar />
       <account-selector
         :show-account-modal="showAccountModal"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
index 0408d2c70..54e900c30 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
@@ -5,8 +5,7 @@
         v-model="content"
         class="input--reminder"
         @keydown.enter.shift.exact="onAdd"
-      >
-      </textarea>
+      />
       <div class="select-wrap">
         <div class="select">
           <div class="input-group">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index c4a4b9117..0ae756c8a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -17,7 +17,7 @@
         />
       </div>
     </div>
-    <spinner v-else></spinner>
+    <spinner v-else />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
index a9a809385..bf3ee8140 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactCustomAttributes.vue
@@ -9,9 +9,7 @@
         {{ attribute }}
       </div>
       <div>
-        <span
-          v-dompurify-html="valueWithLink(customAttributes[attribute])"
-        ></span>
+        <span v-dompurify-html="valueWithLink(customAttributes[attribute])" />
       </div>
     </div>
     <p v-if="!listOfAttributes.length">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
index c2987fe9c..e19d2990d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue
@@ -4,7 +4,7 @@
       <span class="item__title">
         {{ title }}
       </span>
-      <slot name="button"></slot>
+      <slot name="button" />
     </h4>
     <div v-if="value" class="conv-details--item__value">
       <slot>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 294f2b6ba..d7318ce56 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -50,8 +50,7 @@
               <conversation-info
                 :conversation-attributes="conversationAdditionalAttributes"
                 :contact-attributes="contactAdditionalAttributes"
-              >
-              </conversation-info>
+              />
             </accordion-item>
           </div>
           <div v-else-if="element.name === 'contact_attributes'">
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index 5f8d3b6f8..13515ac21 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -14,8 +14,7 @@
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
       @contact-panel-toggle="onToggleContactPanel"
-    >
-    </conversation-box>
+    />
   </section>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index bf0bd3692..57c6d211c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-    <spinner v-else></spinner>
+    <spinner v-else />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
index 9064110db..ee66d2646 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
@@ -14,7 +14,7 @@
         </div>
         <span class="timestamp">{{ readableTime }} </span>
       </div>
-      <p v-dompurify-html="prepareContent(content)" class="message-content"></p>
+      <p v-dompurify-html="prepareContent(content)" class="message-content" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
index b3ebdd23a..ee31d94b2 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
@@ -64,8 +64,7 @@
             icon="chevron-left"
             :disabled="inFirstPage"
             @click="onClickPreviousPage"
-          >
-          </woot-button>
+          />
         </div>
         <span class="page-count"> {{ currentPage }} - {{ lastPage }} </span>
         <div class="flex-view">
@@ -76,8 +75,7 @@
             icon="chevron-right"
             :disabled="inLastPage"
             @click="onClickNextPage"
-          >
-          </woot-button>
+          />
           <woot-button
             size="medium"
             variant="clear"
@@ -95,7 +93,7 @@
           </woot-button>
         </div>
       </div>
-      <div v-else></div>
+      <div v-else />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
index 215e001fc..06c87d1b9 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue
@@ -13,8 +13,8 @@
         <div
           v-if="!notificationItem.read_at"
           class="notification-unread--indicator"
-        ></div>
-        <div v-else class="empty flex-view"></div>
+        />
+        <div v-else class="empty flex-view" />
         <div class="notification-content--wrap w-full flex-space-between">
           <div class="flex-space-between">
             <div class="title-wrap flex-view ">
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
index 77fa640a1..cd9c9b3d8 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
@@ -6,8 +6,7 @@
       :button-text="$t('NOTIFICATIONS_PAGE.MARK_ALL_DONE')"
       :loading="isUpdating"
       @click="onMarkAllDoneClick"
-    >
-    </woot-submit-button>
+    />
 
     <table class="woot-table notifications-table">
       <tbody v-show="!isLoading">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 064bf1191..808516185 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="settings-header">
     <h1 class="page-title">
-      <woot-sidemenu-icon></woot-sidemenu-icon>
+      <woot-sidemenu-icon />
       <back-button
         v-if="showBackButton"
         :button-label="backButtonLabel"
         :back-url="backUrl"
       />
       <fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
-      <slot></slot>
+      <slot />
       <span>{{ headerTitle }}</span>
     </h1>
     <router-link
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
index ea6a6e86b..e5451873c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
@@ -3,7 +3,7 @@
     <h2 class="page-sub-title">
       {{ headerTitle }}
     </h2>
-    <p v-dompurify-html="headerContent" class="small-12 column"></p>
+    <p v-dompurify-html="headerContent" class="small-12 column" />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 4842c0244..d781a7420 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
@@ -10,9 +10,9 @@
       :show-new-button="showNewButton"
     />
     <keep-alive v-if="keepAlive">
-      <router-view></router-view>
+      <router-view />
     </keep-alive>
-    <router-view v-else></router-view>
+    <router-view v-else />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 37639d9f8..9a23ceb1e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -89,7 +89,7 @@
           </p>
         </div>
         <div class="columns small-9 medium-5">
-          <woot-code :script="getAccountId"></woot-code>
+          <woot-code :script="getAccountId" />
         </div>
       </div>
       <div class="current-version">
@@ -107,8 +107,7 @@
         class="button nice success button--fixed-right-top"
         :button-text="$t('GENERAL_SETTINGS.SUBMIT')"
         :loading="isUpdating"
-      >
-      </woot-submit-button>
+      />
     </form>
 
     <woot-loading-state v-if="uiFlags.isFetchingItem" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index d58ca76fa..1622ec14e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -66,8 +66,7 @@
                       icon="edit"
                       class-names="grey-btn"
                       @click="openEditPopup(agent)"
-                    >
-                    </woot-button>
+                    />
                     <woot-button
                       v-if="showDeleteAction(agent)"
                       v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
@@ -78,8 +77,7 @@
                       class-names="grey-btn"
                       :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"
-                    >
-                    </woot-button>
+                    />
                   </div>
                 </td>
               </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index f89bb6eb2..f71adc4fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -57,8 +57,7 @@
                   class-names="grey-btn"
                   icon="edit"
                   @click="openEditPopup(attribute)"
-                >
-                </woot-button>
+                />
                 <woot-button
                   v-tooltip.top="$t('ATTRIBUTES_MGMT.LIST.BUTTONS.DELETE')"
                   variant="smooth"
@@ -67,8 +66,7 @@
                   icon="dismiss-circle"
                   class-names="grey-btn"
                   @click="openDelete(attribute)"
-                >
-                </woot-button>
+                />
               </td>
             </tr>
           </tbody>
@@ -76,7 +74,7 @@
       </div>
     </div>
     <div class="small-4 columns">
-      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')"></span>
+      <span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
     </div>
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <edit-attribute
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 60f3c6dde..bad916e83 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -50,8 +50,7 @@
                   :is-loading="loading[automation.id]"
                   icon="edit"
                   @click="openEditPopup(automation)"
-                >
-                </woot-button>
+                />
                 <woot-button
                   v-tooltip.top="$t('AUTOMATION.CLONE.TOOLTIP')"
                   variant="smooth"
@@ -61,8 +60,7 @@
                   :is-loading="loading[automation.id]"
                   icon="copy"
                   @click="cloneAutomation(automation.id)"
-                >
-                </woot-button>
+                />
                 <woot-button
                   v-tooltip.top="$t('AUTOMATION.FORM.DELETE')"
                   variant="smooth"
@@ -72,8 +70,7 @@
                   class-names="grey-btn"
                   :is-loading="loading[automation.id]"
                   @click="openDeletePopup(automation, index)"
-                >
-                </woot-button>
+                />
               </td>
             </tr>
           </tbody>
@@ -81,7 +78,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
       </div>
     </div>
     <woot-modal
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index bde14d385..b35ee4e82 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -56,8 +56,7 @@
                   color-scheme="secondary"
                   icon="edit"
                   @click="openEditPopup(cannedItem)"
-                >
-                </woot-button>
+                />
                 <woot-button
                   v-tooltip.top="$t('CANNED_MGMT.DELETE.BUTTON_TEXT')"
                   variant="smooth"
@@ -67,8 +66,7 @@
                   class-names="grey-btn"
                   :is-loading="loading[cannedItem.id]"
                   @click="openDeletePopup(cannedItem, index)"
-                >
-                </woot-button>
+                />
               </td>
             </tr>
           </tbody>
@@ -76,7 +74,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
       </div>
     </div>
     <!-- Add Agent -->
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index b42e5e9c3..93c6e52c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -25,8 +25,7 @@
               :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
               :placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
               @select="$v.selectedAgents.$touch"
-            >
-            </multiselect>
+            />
             <span v-if="$v.selectedAgents.$error" class="message">
               {{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
             </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index 270c28fc6..e4fda7269 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -10,40 +10,35 @@
           <woot-code
             v-if="currentInbox.web_widget_script"
             :script="currentInbox.web_widget_script"
-          >
-          </woot-code>
+          />
         </div>
         <div class="medium-6 small-offset-3">
           <woot-code
             v-if="isATwilioInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
-          >
-          </woot-code>
+          />
         </div>
         <div class="medium-6 small-offset-3">
           <woot-code
             v-if="isALineInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
-          >
-          </woot-code>
+          />
         </div>
         <div class="medium-6 small-offset-3">
           <woot-code
             v-if="isASmsInbox"
             lang="html"
             :script="currentInbox.callback_webhook_url"
-          >
-          </woot-code>
+          />
         </div>
         <div class="medium-6 small-offset-3">
           <woot-code
             v-if="isAEmailInbox"
             lang="html"
             :script="currentInbox.forward_to_email"
-          >
-          </woot-code>
+          />
         </div>
         <div class="footer">
           <router-link
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
index 18bd8a6af..a17faa9cc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -5,7 +5,7 @@
       :global-config="globalConfig"
       :items="items"
     />
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index d5abbaaf5..5ac72be93 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -77,8 +77,7 @@
                       icon="settings"
                       color-scheme="secondary"
                       class-names="grey-btn"
-                    >
-                    </woot-button>
+                    />
                   </router-link>
 
                   <woot-button
@@ -91,8 +90,7 @@
                     :is-loading="loading[item.id]"
                     icon="dismiss-circle"
                     @click="openDelete(item)"
-                  >
-                  </woot-button>
+                  />
                 </div>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
index 15bed8dfa..0e6891910 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
@@ -31,8 +31,8 @@
           <table class="table table-striped w-full">
             <thead class="thead-dark">
               <tr>
-                <th scope="col"></th>
-                <th scope="col"></th>
+                <th scope="col" />
+                <th scope="col" />
                 <th scope="col">
                   {{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS_HEADER.KEY') }}
                 </th>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index b669ad27d..514ea1181 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -17,7 +17,7 @@
         </select>
       </label>
     </div>
-    <twilio v-if="provider === 'twilio'" type="sms"></twilio>
+    <twilio v-if="provider === 'twilio'" type="sms" />
     <bandwidth-sms v-else />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
index d6f13c426..dadce2d3b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
@@ -18,7 +18,7 @@
       </label>
     </div>
 
-    <twilio v-if="provider === 'twilio'" type="whatsapp"></twilio>
+    <twilio v-if="provider === 'twilio'" type="whatsapp" />
     <three-sixty-dialog-whatsapp v-else />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index cc8746fed..3a7a61760 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -4,7 +4,7 @@
       :title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
       :sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
     >
-      <woot-code :script="inbox.callback_webhook_url" lang="html"></woot-code>
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
     </settings-section>
   </div>
   <div v-else-if="isALineChannel" class="settings--content">
@@ -12,7 +12,7 @@
       :title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
       :sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
     >
-      <woot-code :script="inbox.callback_webhook_url" lang="html"></woot-code>
+      <woot-code :script="inbox.callback_webhook_url" lang="html" />
     </settings-section>
   </div>
   <div v-else-if="isAWebWidgetInbox">
@@ -21,14 +21,14 @@
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
       >
-        <woot-code :script="inbox.web_widget_script"></woot-code>
+        <woot-code :script="inbox.web_widget_script" />
       </settings-section>
 
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_VERIFICATION')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_DESCRIPTION')"
       >
-        <woot-code :script="inbox.hmac_token"></woot-code>
+        <woot-code :script="inbox.hmac_token" />
       </settings-section>
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
@@ -53,7 +53,7 @@
       :title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
       :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
     >
-      <woot-code :script="inbox.inbox_identifier"></woot-code>
+      <woot-code :script="inbox.inbox_identifier" />
     </settings-section>
   </div>
   <div v-else-if="isAnEmailChannel">
@@ -62,7 +62,7 @@
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
         :sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
       >
-        <woot-code :script="inbox.forward_to_email"></woot-code>
+        <woot-code :script="inbox.forward_to_email" />
       </settings-section>
     </div>
     <imap-settings :inbox="inbox" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 19ec1d597..7268606fe 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -31,8 +31,7 @@
                 icon="dismiss-circle"
                 class-names="grey-btn"
                 @click="$emit('delete', hook)"
-              >
-              </woot-button>
+              />
             </td>
           </tr>
         </tbody>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
index c99f8827d..2e6d00dac 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHelpText.vue
@@ -6,7 +6,7 @@
         <p>
           <span
             v-dompurify-html="$t('INTEGRATION_SETTINGS.SLACK.HELP_TEXT.BODY')"
-          ></span>
+          />
         </p>
       </div>
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
index 0e754d93d..5c4640ca2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
@@ -17,8 +17,7 @@
         color-scheme="secondary"
         icon="edit"
         @click="$emit('edit', webhook)"
-      >
-      </woot-button>
+      />
       <woot-button
         v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')"
         variant="smooth"
@@ -26,8 +25,7 @@
         size="tiny"
         icon="dismiss-circle"
         @click="$emit('delete', webhook, index)"
-      >
-      </woot-button>
+      />
     </td>
   </tr>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 66de41a00..66f763524 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -52,8 +52,7 @@
                   :is-loading="loading[label.id]"
                   icon="edit"
                   @click="openEditPopup(label)"
-                >
-                </woot-button>
+                />
                 <woot-button
                   v-tooltip.top="$t('LABEL_MGMT.FORM.DELETE')"
                   variant="smooth"
@@ -63,8 +62,7 @@
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
-                >
-                </woot-button>
+                />
               </td>
             </tr>
           </tbody>
@@ -72,7 +70,7 @@
       </div>
 
       <div class="small-4 columns">
-        <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')"></span>
+        <span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')" />
       </div>
     </div>
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 850130f08..53152f09d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -87,7 +87,7 @@
         </p>
       </div>
       <div class="columns small-9 medium-5">
-        <woot-code :script="currentUser.access_token"></woot-code>
+        <woot-code :script="currentUser.access_token" />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index c0b87e19b..0ad8fb710 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -76,7 +76,7 @@
                 reports-option__item
                 reports-option__label--swatch
               "
-            ></div>
+            />
             <span class="reports-option__desc">
               <span class="reports-option__title">
                 {{ props.option.title }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
index 5dd81f5ac..04394b151 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
@@ -7,7 +7,7 @@
       </span>
     </div>
     <div v-if="!isLoading" class="card-body row">
-      <slot></slot>
+      <slot />
     </div>
     <div v-else-if="isLoading" class="conversation-metric-loader">
       <spinner />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
index 6a0bb7e21..aa4dd2e20 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/AgentSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="add-agents__header"></div>
+    <div class="add-agents__header" />
     <table class="woot-table">
       <thead>
         <tr>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
index 33f6b3c3f..3009ac570 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row content-box full-height">
     <woot-wizard class="small-3 columns" :items="items" />
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
index f85042003..49aa09d70 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row content-box full-height">
     <woot-wizard class="small-3 columns" :items="items" />
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index c9bea40f6..b1d0ca7ec 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -33,8 +33,7 @@
                       color-scheme="secondary"
                       class-names="grey-btn"
                       icon="settings"
-                    >
-                    </woot-button>
+                    />
                   </router-link>
                   <woot-button
                     v-if="isAdmin"
@@ -46,8 +45,7 @@
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     @click="openDelete(item)"
-                  >
-                  </woot-button>
+                  />
                 </div>
               </td>
             </tr>
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
index 428974af7..c0626a87c 100644
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@@ -45,8 +45,7 @@
               :button-text="$t('LOGIN.SUBMIT')"
               :loading="loginApi.showLoading"
               button-class="large expanded"
-            >
-            </woot-submit-button>
+            />
           </div>
         </form>
         <div class="column text-center sigin__footer">
diff --git a/app/javascript/shared/components/Button.vue b/app/javascript/shared/components/Button.vue
index 3f85fe57a..142561114 100644
--- a/app/javascript/shared/components/Button.vue
+++ b/app/javascript/shared/components/Button.vue
@@ -5,7 +5,7 @@
     :disabled="disabled"
     @click="onClick"
   >
-    <slot></slot>
+    <slot />
   </button>
 </template>
 <script>
diff --git a/app/javascript/shared/components/Spinner.vue b/app/javascript/shared/components/Spinner.vue
index 2da912dee..8c5bc9071 100644
--- a/app/javascript/shared/components/Spinner.vue
+++ b/app/javascript/shared/components/Spinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="spinner" :class="size"></span>
+  <span class="spinner" :class="size" />
 </template>
 <script>
 export default {
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index fbd4c91bf..8aadcb7cb 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -43,8 +43,7 @@
                   <fluent-icon
                     v-if="option.id === (selectedItem && selectedItem.id)"
                     icon="checkmark"
-                  >
-                  </fluent-icon>
+                  />
                 </div>
               </div>
             </woot-button>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
index 3240275d9..6654830a5 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -1,9 +1,5 @@
 <template>
-  <li
-    class="dropdown-menu--divider"
-    :tabindex="null"
-    :aria-disabled="true"
-  ></li>
+  <li class="dropdown-menu--divider" :tabindex="null" :aria-disabled="true" />
 </template>
 <script>
 export default {};
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 225b67b1d..34ec42f27 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -7,7 +7,7 @@
     :tabindex="disabled ? null : -1"
     :aria-disabled="disabled"
   >
-    <slot></slot>
+    <slot />
   </li>
 </template>
 <script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index 2f72a824c..c2211ae2c 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -4,7 +4,7 @@
     class="dropdown menu vertical"
     :class="[placement && `dropdown--${placement}`]"
   >
-    <slot></slot>
+    <slot />
   </ul>
 </template>
 <script>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
index 2055ffc5e..7a1318404 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue
@@ -2,7 +2,7 @@
   <li class="sub-menu-container">
     <ul class="sub-menu-li-container">
       <woot-dropdown-header :title="title" />
-      <slot></slot>
+      <slot />
     </ul>
   </li>
 </template>
diff --git a/app/javascript/shared/mixins/specs/MockComponent.vue b/app/javascript/shared/mixins/specs/MockComponent.vue
index 1d1012c3a..050205f70 100644
--- a/app/javascript/shared/mixins/specs/MockComponent.vue
+++ b/app/javascript/shared/mixins/specs/MockComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="test"></div>
+  <div class="test" />
 </template>
 
 <script>
diff --git a/app/javascript/survey/views/Response.vue b/app/javascript/survey/views/Response.vue
index d855c253c..6ec4ec100 100644
--- a/app/javascript/survey/views/Response.vue
+++ b/app/javascript/survey/views/Response.vue
@@ -45,7 +45,7 @@
         />
       </div>
       <div class="mb-3">
-        <branding></branding>
+        <branding />
       </div>
     </div>
   </div>
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index f31ba57ad..0af28295a 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -15,7 +15,7 @@
       'is-flat-design': isWidgetStyleFlat,
     }"
   >
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 0695292a7..3c51de944 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -11,7 +11,7 @@
         v-dompurify-html="formatMessage(message, false)"
         class="message-content"
         :class="$dm('text-black-900', 'dark:text-slate-50')"
-      ></div>
+      />
       <email-input
         v-if="isTemplateEmail"
         :message-id="messageId"
@@ -24,8 +24,7 @@
         :options="messageContentAttributes.items"
         :hide-fields="!!messageContentAttributes.submitted_values"
         @click="onOptionSelect"
-      >
-      </chat-options>
+      />
     </div>
     <chat-form
       v-if="isForm && !messageContentAttributes.submitted_values"
@@ -33,8 +32,7 @@
       :button-label="messageContentAttributes.button_label"
       :submitted-values="messageContentAttributes.submitted_values"
       @submit="onFormSubmit"
-    >
-    </chat-form>
+    />
     <div v-if="isCards">
       <chat-card
         v-for="item in messageContentAttributes.items"
@@ -43,11 +41,10 @@
         :title="item.title"
         :description="item.description"
         :actions="item.actions"
-      >
-      </chat-card>
+      />
     </div>
     <div v-if="isArticle">
-      <chat-article :items="messageContentAttributes.items"></chat-article>
+      <chat-article :items="messageContentAttributes.items" />
     </div>
     <customer-satisfaction
       v-if="isCSAT"
diff --git a/app/javascript/widget/components/AgentTypingBubble.vue b/app/javascript/widget/components/AgentTypingBubble.vue
index 8e93be85c..fffca9f79 100644
--- a/app/javascript/widget/components/AgentTypingBubble.vue
+++ b/app/javascript/widget/components/AgentTypingBubble.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="agent-message-wrap">
     <div class="agent-message">
-      <div class="avatar-wrap"></div>
+      <div class="avatar-wrap" />
       <div class="message-wrap">
         <div
           class="typing-bubble chat-bubble agent"
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 813325fcd..07b7a61e6 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -2,14 +2,14 @@
   <div class="conversation--container">
     <div class="conversation-wrap" :class="{ 'is-typing': isAgentTyping }">
       <div v-if="isFetchingList" class="message--loader">
-        <spinner></spinner>
+        <spinner />
       </div>
       <div
         v-for="groupedMessage in groupedMessages"
         :key="groupedMessage.date"
         class="messages-wrap"
       >
-        <date-separator :date="groupedMessage.date"></date-separator>
+        <date-separator :date="groupedMessage.date" />
         <chat-message
           v-for="message in groupedMessage.messages"
           :key="message.id"
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index f7494aec4..84a1114ff 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -18,7 +18,7 @@
       <div
         v-dompurify-html="formatMessage(message, false)"
         class="message-content"
-      ></div>
+      />
     </button>
   </div>
 </template>
diff --git a/app/javascript/widget/components/UserAvatar.vue b/app/javascript/widget/components/UserAvatar.vue
index f7399bcd6..c6120b3ce 100755
--- a/app/javascript/widget/components/UserAvatar.vue
+++ b/app/javascript/widget/components/UserAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="user-avatar" :class="size" :style="getBgImage"></div>
+  <div class="user-avatar" :class="size" :style="getBgImage" />
 </template>
 <script>
 /**
diff --git a/app/javascript/widget/components/dropdown/DropdownMenu.vue b/app/javascript/widget/components/dropdown/DropdownMenu.vue
index 1bccb7147..85db8ad21 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenu.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative">
     <button class="z-10 focus:outline-none select-none" @click="toggleMenu">
-      <slot name="button"></slot>
+      <slot name="button" />
     </button>
 
     <!-- to close when clicked on space around it-->
@@ -10,7 +10,7 @@
       tabindex="-1"
       class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
       @click="toggleMenu"
-    ></button>
+    />
 
     <!--dropdown menu-->
     <transition
@@ -26,7 +26,7 @@
         class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
         :class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
       >
-        <slot name="content"></slot>
+        <slot name="content" />
       </div>
     </transition>
   </div>
diff --git a/package.json b/package.json
index dcfd8d5db..a33a9045d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "2.5.0",
   "license": "MIT",
   "scripts": {
-    "eslint": "eslint app/**/*.{js,vue} --fix",
+    "eslint": "eslint app/**/*.{js,vue}",
+    "eslint:fix": "eslint app/**/*.{js,vue} --fix",
     "pretest": "rimraf .jest-cache",
     "test": "jest  -w 1 --no-cache",
     "test:watch": "jest -w 1 --watch --no-cache",