chore: Replace availability mixin

app/javascript/widget/components/ChatHeader.vue

@@ -1,6 +1,6 @@
 <script>
-import availabilityMixin from 'widget/mixins/availability';
-import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
+import { useAvailability } from 'widget/composables/useAvailability';
+import { useNextAvailabilityTime } from 'widget/composables/useNextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
 import routerMixin from 'widget/mixins/routerMixin';
@@ -12,7 +12,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
+  mixins: [routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -30,21 +30,25 @@ export default {
       type: Boolean,
       default: false,
     },
-    availableAgents: {
-      type: Array,
-      default: () => {},
-    },
   },
-  computed: {
-    isOnline() {
-      const { workingHoursEnabled } = this.channelConfig;
-      const anyAgentOnline = this.availableAgents.length > 0;
-
-      if (workingHoursEnabled) {
-        return this.isInBetweenTheWorkingHours;
-      }
-      return anyAgentOnline;
-    },
+  setup() {
+    const {
+      isOnline,
+      channelConfig,
+      isInBetweenTheWorkingHours,
+      replyWaitMessage,
+    } = useAvailability();
+    const { setTimeSlot } = useNextAvailabilityTime();
+    return {
+      isOnline,
+      channelConfig,
+      isInBetweenTheWorkingHours,
+      replyWaitMessage,
+      setTimeSlot,
+    };
+  },
+  mounted() {
+    this.setTimeSlot();
   },
   methods: {
     onBackButtonClick() {

app/javascript/widget/components/TeamAvailability.vue

@@ -1,10 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
-import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
+import { useNextAvailabilityTime } from 'widget/composables/useNextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
-import availabilityMixin from 'widget/mixins/availability';
+import { useAvailability } from 'widget/composables/useAvailability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
@@ -15,7 +15,7 @@ export default {
     AvailableAgents,
     FluentIcon,
   },
-  mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
+  mixins: [configMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -26,7 +26,11 @@ export default {
       default: false,
     },
   },
-
+  setup() {
+    const { isInBetweenTheWorkingHours, replyWaitMessage } = useAvailability();
+    const { setTimeSlot } = useNextAvailabilityTime();
+    return { setTimeSlot, isInBetweenTheWorkingHours, replyWaitMessage };
+  },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
@@ -44,6 +48,9 @@ export default {
       return anyAgentOnline;
     },
   },
+  mounted() {
+    this.setTimeSlot();
+  },
   methods: {
     startConversation() {
       this.$emit('startConversation');