Merge branch 'develop' into chore-repalce-configMixin-with-useConfig-composable

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,

app/javascript/widget/components/AgentMessage.vue

@@ -8,8 +8,8 @@ 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 messageMixin from '../mixins/messageMixin';
+import { useConfig } from 'widget/composables/useConfig';
+import { useMessage } from '../composables/useMessage';
 import { isASubmittedFormMessage } from 'shared/helpers/MessageTypeHelper';
 import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 import ReplyToChip from 'widget/components/ReplyToChip.vue';
@@ -28,7 +28,7 @@ export default {
     MessageReplyButton,
     ReplyToChip,
   },
-  mixins: [configMixin, messageMixin, darkModeMixin],
+  mixins: [darkModeMixin],
   props: {
     message: {
       type: Object,
@@ -39,6 +39,19 @@ export default {
       default: () => {},
     },
   },
+  setup(props) {
+    const { messageContentAttributes, hasAttachments } = useMessage(
+      props.message
+    );
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
+    return {
+      messageContentAttributes,
+      hasAttachments,
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
+    };
+  },
   data() {
     return {
       hasImageError: false,

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: '',

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',

app/javascript/widget/components/PreChat/Form.vue

@@ -8,14 +8,14 @@ import { getRegexp } from 'shared/helpers/Validators';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 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, configMixin],
+  mixins: [routerMixin, darkModeMixin, messageFormatterMixin],
   props: {
     options: {
       type: Object,
@@ -23,8 +23,10 @@ export default {
     },
   },
   setup() {
+    const { preChatFormEnabled } = useConfig();
     const { formatMessage } = useMessageFormatter();
     return {
+      preChatFormEnabled,
       formatMessage,
     };
   },

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',

app/javascript/widget/components/UnreadMessage.vue

@@ -1,7 +1,7 @@
 <script>
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 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: [configMixin, darkModeMixin],
+  mixins: [messageFormatterMixin, darkModeMixin],
   props: {
     message: {
       type: String,
@@ -31,8 +31,12 @@ export default {
     },
   },
   setup() {
+    const { useInboxAvatarForBot, inboxAvatarUrl, channelConfig } = useConfig();
     const { formatMessage } = useMessageFormatter();
     return {
+      useInboxAvatarForBot,
+      inboxAvatarUrl,
+      channelConfig,
       formatMessage,
     };
   },

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,

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,

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);
+  });
+});

app/javascript/widget/composables/useConfig.js

@@ -0,0 +1,81 @@
+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);
+
+  const createFeatureChecker = feature =>
+    computed(() => channelConfig.value.enabledFeatures.includes(feature));
+
+  // Use the helper function for feature checks
+  const useInboxAvatarForBot = createFeatureChecker('use_inbox_avatar_for_bot');
+  const hasEmojiPickerEnabled = createFeatureChecker('emoji_picker');
+  const hasAttachmentsEnabled = createFeatureChecker('attachments');
+  const hasEndConversationEnabled = createFeatureChecker('end_conversation');
+
+  /**
+   * 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 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,
+  };
+}

app/javascript/widget/mixins/configMixin.js

@@ -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;
-    },
-  },
-};

app/javascript/widget/mixins/specs/configMixin.spec.js

@@ -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);
-  });
-});

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',

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