From 7db7ae0ed86f44ee9f83fa7ca745088c1708b5f7 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <fayazara@gmail.com>
Date: Tue, 13 Aug 2024 19:04:55 +0530
Subject: [PATCH] chore: Replace widget config mixin with useConfig composable

---
 app/javascript/widget/App.vue                 |  10 +-
 .../widget/components/AgentMessage.vue        |   8 +-
 .../widget/components/ChatInputWrap.vue       |  12 +-
 .../widget/components/HeaderActions.vue       |  10 +-
 .../widget/components/PreChat/Form.vue        |  10 +-
 .../widget/components/TeamAvailability.vue    |  11 +-
 .../widget/components/UnreadMessage.vue       |  12 +-
 .../widget/components/UnreadMessageList.vue   |   2 -
 .../components/layouts/ViewWithHeader.vue     |   9 +-
 .../composables/specs/useConfig.spec.js       | 118 ++++++++++++++++++
 .../widget/composables/useConfig.js           | 104 +++++++++++++++
 app/javascript/widget/mixins/configMixin.js   |  47 -------
 .../widget/mixins/specs/configMixin.spec.js   |  74 -----------
 app/javascript/widget/views/Home.vue          |  10 +-
 app/javascript/widget/views/PreChatForm.vue   |  10 +-
 15 files changed, 302 insertions(+), 145 deletions(-)
 create mode 100644 app/javascript/widget/composables/specs/useConfig.spec.js
 create mode 100644 app/javascript/widget/composables/useConfig.js
 delete mode 100644 app/javascript/widget/mixins/configMixin.js
 delete mode 100644 app/javascript/widget/mixins/specs/configMixin.spec.js

diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 6645465c5..63cab0327 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -3,7 +3,7 @@ import { mapGetters, mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
 import addHours from 'date-fns/addHours';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
-import configMixin from './mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import availabilityMixin from 'widget/mixins/availability';
 import { getLocale } from './helpers/urlParamsHelper';
 import { isEmptyObject } from 'widget/helpers/utils';
@@ -27,7 +27,13 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
+  mixins: [availabilityMixin, routerMixin, darkModeMixin],
+  setup() {
+    const { shouldShowPreChatForm } = useConfig();
+    return {
+      shouldShowPreChatForm,
+    };
+  },
   data() {
     return {
       isMobile: false,
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index e7d592abd..1ca4ab011 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -8,7 +8,7 @@ import VideoBubble from 'widget/components/VideoBubble.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { useMessage } from '../composables/useMessage';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -43,9 +43,13 @@ export default {
     const { messageContentAttributes, hasAttachments } = useMessage(
       props.message
     );
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
     return {
       messageContentAttributes,
       hasAttachments,
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
     };
   },
   data() {
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index c68ec3fdf..9f89885c5 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
 import ChatSendButton from 'widget/components/ChatSendButton.vue';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
@@ -19,7 +19,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -30,7 +30,13 @@ export default {
       default: () => {},
     },
   },
-
+  setup() {
+    const { hasEmojiPickerEnabled, hasAttachmentsEnabled } = useConfig();
+    return {
+      hasEmojiPickerEnabled,
+      hasAttachmentsEnabled,
+    };
+  },
   data() {
     return {
       userInput: '',
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index df8b5fdbf..af65bd7f7 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -4,13 +4,13 @@ import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { CONVERSATION_STATUS } from 'shared/constants/messages';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
-  mixins: [configMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -21,6 +21,12 @@ export default {
       default: true,
     },
   },
+  setup() {
+    const { hasEndConversationEnabled } = useConfig();
+    return {
+      hasEndConversationEnabled,
+    };
+  },
   computed: {
     ...mapGetters({
       conversationAttributes: 'conversationAttributes/getConversationParams',
diff --git a/app/javascript/widget/components/PreChat/Form.vue b/app/javascript/widget/components/PreChat/Form.vue
index 596ba16d9..f144f00f2 100644
--- a/app/javascript/widget/components/PreChat/Form.vue
+++ b/app/javascript/widget/components/PreChat/Form.vue
@@ -8,20 +8,26 @@ import { getRegexp } from 'shared/helpers/Validators';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import routerMixin from 'widget/mixins/routerMixin';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 
 export default {
   components: {
     CustomButton,
     Spinner,
   },
-  mixins: [routerMixin, darkModeMixin, messageFormatterMixin, configMixin],
+  mixins: [routerMixin, darkModeMixin, messageFormatterMixin],
   props: {
     options: {
       type: Object,
       default: () => {},
     },
   },
+  setup() {
+    const { preChatFormEnabled } = useConfig();
+    return {
+      preChatFormEnabled,
+    };
+  },
   data() {
     return {
       locale: this.$root.$i18n.locale,
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index 18aaaccac..92f35b469 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
@@ -15,7 +15,7 @@ export default {
     AvailableAgents,
     FluentIcon,
   },
-  mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -26,7 +26,12 @@ export default {
       default: false,
     },
   },
-
+  setup() {
+    const { channelConfig } = useConfig();
+    return {
+      channelConfig,
+    };
+  },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
diff --git a/app/javascript/widget/components/UnreadMessage.vue b/app/javascript/widget/components/UnreadMessage.vue
index b90ad9011..b8d65719a 100644
--- a/app/javascript/widget/components/UnreadMessage.vue
+++ b/app/javascript/widget/components/UnreadMessage.vue
@@ -1,7 +1,7 @@
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { isEmptyObject } from 'widget/helpers/utils';
 import {
   ON_CAMPAIGN_MESSAGE_CLICK,
@@ -11,7 +11,7 @@ import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
   name: 'UnreadMessage',
   components: { Thumbnail },
-  mixins: [messageFormatterMixin, configMixin, darkModeMixin],
+  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     message: {
       type: String,
@@ -30,6 +30,14 @@ export default {
       default: null,
     },
   },
+  setup() {
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
+    return {
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
+    };
+  },
   computed: {
     companyName() {
       return `${this.$t('UNREAD_VIEW.COMPANY_FROM')} ${
diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue
index 54c3f4753..5270880a5 100644
--- a/app/javascript/widget/components/UnreadMessageList.vue
+++ b/app/javascript/widget/components/UnreadMessageList.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import configMixin from '../mixins/configMixin';
 import { ON_UNREAD_MESSAGE_CLICK } from '../constants/widgetBusEvents';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import UnreadMessage from 'widget/components/UnreadMessage.vue';
@@ -12,7 +11,6 @@ export default {
     FluentIcon,
     UnreadMessage,
   },
-  mixins: [configMixin],
   props: {
     messages: {
       type: Array,
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index 338344154..4bfc83013 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue
@@ -3,7 +3,7 @@ import Banner from '../Banner.vue';
 import Branding from 'shared/components/Branding.vue';
 import ChatHeader from '../ChatHeader.vue';
 import ChatHeaderExpanded from '../ChatHeaderExpanded.vue';
-import configMixin from '../../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
 
@@ -14,7 +14,12 @@ export default {
     ChatHeader,
     ChatHeaderExpanded,
   },
-  mixins: [configMixin],
+  setup() {
+    const { channelConfig } = useConfig();
+    return {
+      channelConfig,
+    };
+  },
   data() {
     return {
       showPopoutButton: false,
diff --git a/app/javascript/widget/composables/specs/useConfig.spec.js b/app/javascript/widget/composables/specs/useConfig.spec.js
new file mode 100644
index 000000000..fa1573755
--- /dev/null
+++ b/app/javascript/widget/composables/specs/useConfig.spec.js
@@ -0,0 +1,118 @@
+import { useConfig } from '../useConfig';
+
+describe('useConfig composable', () => {
+  beforeEach(() => {
+    global.window.chatwootWebChannel = {
+      avatarUrl: 'https://test.url',
+      hasAConnectedAgentBot: 'AgentBot',
+      enabledFeatures: [
+        'emoji_picker',
+        'attachments',
+        'end_conversation',
+        'use_inbox_avatar_for_bot',
+      ],
+      preChatFormOptions: {
+        pre_chat_message: '',
+        pre_chat_fields: [
+          {
+            label: 'Email Id',
+            name: 'emailAddress',
+            type: 'email',
+            field_type: 'standard',
+            required: false,
+            enabled: false,
+          },
+          {
+            label: 'Full name',
+            name: 'fullName',
+            type: 'text',
+            field_type: 'standard',
+            required: true,
+            enabled: true,
+          },
+        ],
+      },
+      preChatFormEnabled: true,
+    };
+  });
+
+  it('should return correct values for computed properties', () => {
+    const {
+      useInboxAvatarForBot,
+      hasAConnectedAgentBot,
+      inboxAvatarUrl,
+      channelConfig,
+      hasEmojiPickerEnabled,
+      hasAttachmentsEnabled,
+      hasEndConversationEnabled,
+      preChatFormEnabled,
+      preChatFormOptions,
+      shouldShowPreChatForm,
+    } = useConfig();
+
+    expect(useInboxAvatarForBot.value).toBe(true);
+    expect(hasAConnectedAgentBot.value).toBe(true);
+    expect(inboxAvatarUrl.value).toBe('https://test.url');
+
+    expect(channelConfig.value).toEqual({
+      avatarUrl: 'https://test.url',
+      hasAConnectedAgentBot: 'AgentBot',
+      enabledFeatures: [
+        'emoji_picker',
+        'attachments',
+        'end_conversation',
+        'use_inbox_avatar_for_bot',
+      ],
+      preChatFormOptions: {
+        pre_chat_message: '',
+        pre_chat_fields: [
+          {
+            label: 'Email Id',
+            name: 'emailAddress',
+            type: 'email',
+            field_type: 'standard',
+            required: false,
+            enabled: false,
+          },
+          {
+            label: 'Full name',
+            name: 'fullName',
+            type: 'text',
+            field_type: 'standard',
+            required: true,
+            enabled: true,
+          },
+        ],
+      },
+      preChatFormEnabled: true,
+    });
+    expect(hasEmojiPickerEnabled.value).toBe(true);
+    expect(hasAttachmentsEnabled.value).toBe(true);
+    expect(hasEndConversationEnabled.value).toBe(true);
+    expect(preChatFormEnabled.value).toBe(true);
+
+    expect(preChatFormOptions.value).toEqual({
+      preChatMessage: '',
+      preChatFields: [
+        {
+          label: 'Email Id',
+          name: 'emailAddress',
+          type: 'email',
+          field_type: 'standard',
+          required: false,
+          enabled: false,
+        },
+        {
+          label: 'Full name',
+          name: 'fullName',
+          type: 'text',
+          field_type: 'standard',
+          required: true,
+          enabled: true,
+        },
+      ],
+    });
+
+    expect(shouldShowPreChatForm.value).toBe(true);
+  });
+});
diff --git a/app/javascript/widget/composables/useConfig.js b/app/javascript/widget/composables/useConfig.js
new file mode 100644
index 000000000..a94410517
--- /dev/null
+++ b/app/javascript/widget/composables/useConfig.js
@@ -0,0 +1,104 @@
+import { computed } from 'vue';
+
+/**
+ * Composable for handling config-related computations.
+ * @returns {Object} An object containing computed properties for various configuration settings.
+ */
+export function useConfig() {
+  /**
+   * Computed property to get the channel config.
+   * @returns {Object} The channel configuration object.
+   */
+  const channelConfig = computed(() => window.chatwootWebChannel);
+
+  /**
+   * Computed property to check if the inbox avatar is enabled for the bot.
+   * @returns {Boolean} True if the inbox avatar is enabled for the bot, false otherwise.
+   */
+  const useInboxAvatarForBot = computed(() =>
+    channelConfig.value.enabledFeatures.includes('use_inbox_avatar_for_bot')
+  );
+
+  /**
+   * Computed property to check if the agent bot is connected.
+   * @returns {Boolean} True if the agent bot is connected, false otherwise.
+   */
+  const hasAConnectedAgentBot = computed(
+    () => !!channelConfig.value.hasAConnectedAgentBot
+  );
+
+  /**
+   * Computed property to get the inbox avatar URL.
+   * @returns {String} The inbox avatar URL.
+   */
+  const inboxAvatarUrl = computed(() => channelConfig.value.avatarUrl);
+
+  /**
+   * Computed property to check if the emoji picker is enabled.
+   * @returns {Boolean} True if the emoji picker is enabled, false otherwise.
+   */
+  const hasEmojiPickerEnabled = computed(() =>
+    channelConfig.value.enabledFeatures.includes('emoji_picker')
+  );
+
+  /**
+   * Computed property to check if attachments are enabled.
+   * @returns {Boolean} True if attachments are enabled, false otherwise.
+   */
+  const hasAttachmentsEnabled = computed(() =>
+    channelConfig.value.enabledFeatures.includes('attachments')
+  );
+
+  /**
+   * Computed property to check if end conversation is enabled.
+   * @returns {Boolean} True if end conversation is enabled, false otherwise.
+   */
+  const hasEndConversationEnabled = computed(() =>
+    channelConfig.value.enabledFeatures.includes('end_conversation')
+  );
+
+  /**
+   * Computed property to check if the pre-chat form is enabled.
+   * @returns {Boolean} True if the pre-chat form is enabled, false otherwise.
+   */
+  const preChatFormEnabled = computed(
+    () => channelConfig.value.preChatFormEnabled
+  );
+
+  /**
+   * Computed property to get the pre-chat form options.
+   * @returns {Object} An object containing pre-chat message and fields.
+   */
+  const preChatFormOptions = computed(() => {
+    const options = channelConfig.value.preChatFormOptions || {};
+    const preChatMessage = options.pre_chat_message || '';
+    const preChatFields = options.pre_chat_fields || [];
+    return {
+      preChatMessage,
+      preChatFields,
+    };
+  });
+
+  /**
+   * Computed property to determine if the pre-chat form should be shown.
+   * @returns {Boolean} True if the pre-chat form should be shown, false otherwise.
+   */
+  const shouldShowPreChatForm = computed(() => {
+    if (!preChatFormEnabled.value) return false;
+    const { preChatFields } = preChatFormOptions.value;
+    return preChatFields.some(field => field.enabled);
+  });
+
+  return {
+    useInboxAvatarForBot,
+    hasAConnectedAgentBot,
+    inboxAvatarUrl,
+    channelConfig,
+    hasEmojiPickerEnabled,
+    hasAttachmentsEnabled,
+    hasEndConversationEnabled,
+    preChatFormEnabled,
+    preChatFormOptions,
+    shouldShowPreChatForm,
+  };
+}
diff --git a/app/javascript/widget/mixins/configMixin.js b/app/javascript/widget/mixins/configMixin.js
deleted file mode 100644
index 7eb11e18b..000000000
--- a/app/javascript/widget/mixins/configMixin.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export default {
-  computed: {
-    useInboxAvatarForBot() {
-      return this.channelConfig.enabledFeatures.includes(
-        'use_inbox_avatar_for_bot'
-      );
-    },
-    hasAConnectedAgentBot() {
-      return !!window.chatwootWebChannel.hasAConnectedAgentBot;
-    },
-    inboxAvatarUrl() {
-      return window.chatwootWebChannel.avatarUrl;
-    },
-    channelConfig() {
-      return window.chatwootWebChannel;
-    },
-    hasEmojiPickerEnabled() {
-      return this.channelConfig.enabledFeatures.includes('emoji_picker');
-    },
-    hasAttachmentsEnabled() {
-      return this.channelConfig.enabledFeatures.includes('attachments');
-    },
-    hasEndConversationEnabled() {
-      return this.channelConfig.enabledFeatures.includes('end_conversation');
-    },
-    preChatFormEnabled() {
-      return window.chatwootWebChannel.preChatFormEnabled;
-    },
-    preChatFormOptions() {
-      let preChatMessage = '';
-      const options = window.chatwootWebChannel.preChatFormOptions || {};
-      preChatMessage = options.pre_chat_message;
-      const { pre_chat_fields: preChatFields = [] } = options;
-      return {
-        preChatMessage,
-        preChatFields,
-      };
-    },
-    shouldShowPreChatForm() {
-      const { preChatFields } = this.preChatFormOptions;
-      // Check if at least one enabled field in pre-chat fields
-      const hasEnabledFields =
-        preChatFields.filter(field => field.enabled).length > 0;
-      return this.preChatFormEnabled && hasEnabledFields;
-    },
-  },
-};
diff --git a/app/javascript/widget/mixins/specs/configMixin.spec.js b/app/javascript/widget/mixins/specs/configMixin.spec.js
deleted file mode 100644
index 1b209442d..000000000
--- a/app/javascript/widget/mixins/specs/configMixin.spec.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { createWrapper } from '@vue/test-utils';
-import configMixin from '../configMixin';
-import Vue from 'vue';
-const preChatFields = [
-  {
-    label: 'Email Id',
-    name: 'emailAddress',
-    type: 'email',
-    field_type: 'standard',
-    required: false,
-    enabled: false,
-  },
-  {
-    label: 'Full name',
-    name: 'fullName',
-    type: 'text',
-    field_type: 'standard',
-    required: true,
-    enabled: true,
-  },
-];
-global.chatwootWebChannel = {
-  avatarUrl: 'https://test.url',
-  hasAConnectedAgentBot: 'AgentBot',
-  enabledFeatures: [
-    'emoji_picker',
-    'attachments',
-    'end_conversation',
-    'use_inbox_avatar_for_bot',
-  ],
-  preChatFormOptions: { pre_chat_fields: preChatFields, pre_chat_message: '' },
-  preChatFormEnabled: true,
-};
-
-describe('configMixin', () => {
-  test('returns config', () => {
-    const Component = {
-      render() {},
-      title: 'TestComponent',
-      mixins: [configMixin],
-    };
-    const Constructor = Vue.extend(Component);
-    const vm = new Constructor().$mount();
-    const wrapper = createWrapper(vm);
-    expect(wrapper.vm.hasEmojiPickerEnabled).toBe(true);
-    expect(wrapper.vm.hasEndConversationEnabled).toBe(true);
-    expect(wrapper.vm.hasAttachmentsEnabled).toBe(true);
-    expect(wrapper.vm.hasAConnectedAgentBot).toBe(true);
-    expect(wrapper.vm.useInboxAvatarForBot).toBe(true);
-    expect(wrapper.vm.inboxAvatarUrl).toBe('https://test.url');
-
-    expect(wrapper.vm.channelConfig).toEqual({
-      avatarUrl: 'https://test.url',
-      hasAConnectedAgentBot: 'AgentBot',
-      enabledFeatures: [
-        'emoji_picker',
-        'attachments',
-        'end_conversation',
-        'use_inbox_avatar_for_bot',
-      ],
-      preChatFormOptions: {
-        pre_chat_message: '',
-        pre_chat_fields: preChatFields,
-      },
-      preChatFormEnabled: true,
-    });
-    expect(wrapper.vm.preChatFormOptions).toEqual({
-      preChatMessage: '',
-      preChatFields: preChatFields,
-    });
-    expect(wrapper.vm.preChatFormEnabled).toEqual(true);
-    expect(wrapper.vm.shouldShowPreChatForm).toEqual(true);
-  });
-});
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 5695f9e65..157187a7e 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -6,7 +6,7 @@ import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoad
 import { mapGetters } from 'vuex';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 import routerMixin from 'widget/mixins/routerMixin';
-import configMixin from 'widget/mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 
 export default {
   name: 'Home',
@@ -15,7 +15,13 @@ export default {
     TeamAvailability,
     ArticleCardSkeletonLoader,
   },
-  mixins: [configMixin, routerMixin, darkModeMixin],
+  mixins: [routerMixin, darkModeMixin],
+  setup() {
+    const { preChatFormEnabled } = useConfig();
+    return {
+      preChatFormEnabled,
+    };
+  },
   computed: {
     ...mapGetters({
       availableAgents: 'agent/availableAgents',
diff --git a/app/javascript/widget/views/PreChatForm.vue b/app/javascript/widget/views/PreChatForm.vue
index cb122a2f3..d14cac951 100644
--- a/app/javascript/widget/views/PreChatForm.vue
+++ b/app/javascript/widget/views/PreChatForm.vue
@@ -1,6 +1,6 @@
 <script>
 import PreChatForm from '../components/PreChat/Form.vue';
-import configMixin from '../mixins/configMixin';
+import { useConfig } from 'widget/composables/useConfig';
 import routerMixin from '../mixins/routerMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
 import { ON_CONVERSATION_CREATED } from '../constants/widgetBusEvents';
@@ -9,7 +9,13 @@ export default {
   components: {
     PreChatForm,
   },
-  mixins: [configMixin, routerMixin],
+  mixins: [routerMixin],
+  setup() {
+    const { preChatFormOptions } = useConfig();
+    return {
+      preChatFormOptions,
+    };
+  },
   mounted() {
     this.$emitter.on(ON_CONVERSATION_CREATED, () => {
       // Redirect to messages page after conversation is created