Composable replacement with mixin in Widget App.vue

app/javascript/dashboard/composables/useAvailability.js

@@ -5,9 +5,10 @@ import { isTimeAfter } from 'shared/helpers/DateHelper';
 /**
  * Composable for handling availability-related computations.
  * @param {Object} i18n - Vue i18n instance for translations.
+ * @param {Object} availableAgents - Available agents object.
  * @returns {Object} An object containing computed properties and methods for availability management.
  */
-export function useAvailability(i18n) {
+export function useAvailability(availableAgents, i18n) {
   const channelConfig = computed(() => window.chatwootWebChannel);
   const replyTime = computed(() => window.chatwootWebChannel.replyTime);
 
@@ -24,6 +25,15 @@ export function useAvailability(i18n) {
     }
   });
 
+  const isOnline = computed(() => {
+    const { workingHoursEnabled } = channelConfig.value;
+    const anyAgentOnline = availableAgents.value.length > 0;
+    if (workingHoursEnabled) {
+      return isInBetweenTheWorkingHours.value;
+    }
+    return anyAgentOnline;
+  });
+
   const replyWaitMessage = computed(() => {
     const { workingHoursEnabled } = channelConfig.value;
     if (workingHoursEnabled) {
@@ -111,6 +121,7 @@ export function useAvailability(i18n) {
     currentDayAvailability,
     isInBetweenTheWorkingHours,
     isInBusinessHours,
+    isOnline,
     getDateWithOffset,
   };
 }

app/javascript/widget/App.vue

@@ -4,7 +4,7 @@ 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 availabilityMixin from 'widget/mixins/availability';
+import { useAvailability } from '../dashboard/composables/useAvailability.js';
 import { getLocale } from './helpers/urlParamsHelper';
 import { isEmptyObject } from 'widget/helpers/utils';
 import Spinner from 'shared/components/Spinner.vue';
@@ -27,13 +27,17 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
+  mixins: [configMixin, routerMixin, darkModeMixin],
   data() {
     return {
       isMobile: false,
       campaignsSnoozedTill: undefined,
     };
   },
+  setup() {
+    const { isInBusinessHours } = useAvailability();
+    return { isInBusinessHours };
+  },
   computed: {
     ...mapGetters({
       activeCampaign: 'campaign/getActiveCampaign',