diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index 7501306ea..e12dc4909 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -22,7 +22,7 @@ import ReportStatsCard from './widgets/ReportStatsCard.vue';
import SidemenuIcon from './SidemenuIcon.vue';
import Spinner from 'shared/components/Spinner.vue';
import SubmitButton from './buttons/FormSubmitButton.vue';
-import Tabs from './ui/Tabs/Tabs.jsx';
+import Tabs from './ui/Tabs/Tabs';
import TabsItem from './ui/Tabs/TabsItem.vue';
import Thumbnail from './widgets/Thumbnail.vue';
diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.jsx b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
similarity index 84%
rename from app/javascript/dashboard/components/ui/Tabs/Tabs.jsx
rename to app/javascript/dashboard/components/ui/Tabs/Tabs.js
index cae81b91f..7f01008a9 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.jsx
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
@@ -1,4 +1,6 @@
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'WootTabs',
props: {
index: {
@@ -73,19 +75,25 @@ export default {
});
const leftButton = this.createScrollButton(createElement, 'left');
const rightButton = this.createScrollButton(createElement, 'right');
- return (
-
- {leftButton}
-
- {rightButton}
-
+ },
+ },
+ [
+ leftButton,
+ createElement(
+ 'ul',
+ {
+ class: { tabs: true, 'tabs--with-scroll': this.hasScroll },
+ },
+ Tabs
+ ),
+ rightButton,
+ ]
);
},
-};
+});
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 2e19fe361..3973810e0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -164,7 +164,7 @@ import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel
import ReplyEmailHead from './ReplyEmailHead.vue';
import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
-import MessageSignatureMissingAlert from './MessageSignatureMissingAlert';
+import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
import Banner from 'dashboard/components/ui/Banner.vue';
import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
diff --git a/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
index e31a37dcd..07a524a1c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
+++ b/app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
@@ -1,4 +1,4 @@
-import emailValidator from '@vuelidate/validators/email';
+import { email as emailValidator } from '@vuelidate/validators';
export const validEmailsByComma = value => {
if (!value.length) return true;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 4cc556ae8..97ab0abe9 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -240,7 +240,7 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import ReplyEmailHead from 'dashboard/components/widgets/conversation/ReplyEmailHead.vue';
import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
-import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert';
+import MessageSignatureMissingAlert from 'dashboard/components/widgets/conversation/MessageSignatureMissingAlert.vue';
import InboxDropdownItem from 'dashboard/components/widgets/InboxDropdownItem.vue';
import WhatsappTemplates from './WhatsappTemplates.vue';
import alertMixin from 'shared/mixins/alertMixin';
@@ -250,7 +250,7 @@ import { getInboxSource } from 'dashboard/helper/inbox';
import { required, requiredIf } from '@vuelidate/validators';
import inboxMixin from 'shared/mixins/inboxMixin';
import FileUpload from 'vue-upload-component';
-import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
+import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview.vue';
import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
import {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
index 46691ef19..8d89d3f6d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
@@ -420,7 +420,7 @@ export default {