chore: integrate the composable replacing the mixing in pages and components

app/javascript/widget/components/ChatHeader.vue

@@ -1,6 +1,5 @@
 <script>
 import { useAvailability } from 'widget/composables/useAvailability';
-import availabilityMixin from 'widget/mixins/availability';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions.vue';
@@ -13,7 +12,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -37,8 +36,10 @@ export default {
     },
   },
   setup(props) {
-    const { isOnline } = useAvailability(props.availableAgents);
-    return { isOnline };
+    const { isOnline, replyWaitMessage } = useAvailability(
+      props.availableAgents
+    );
+    return { isOnline, replyWaitMessage };
   },
   methods: {
     onBackButtonClick() {

app/javascript/widget/components/TeamAvailability.vue

@@ -4,7 +4,7 @@ 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 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, nextAvailabilityTime],
   props: {
     availableAgents: {
       type: Array,
@@ -26,7 +26,12 @@ export default {
       default: false,
     },
   },
-
+  setup(props) {
+    const { isOnline, replyWaitMessage } = useAvailability(
+      props.availableAgents
+    );
+    return { isOnline, replyWaitMessage };
+  },
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',
@@ -34,15 +39,6 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
-    isOnline() {
-      const { workingHoursEnabled } = this.channelConfig;
-      const anyAgentOnline = this.availableAgents.length > 0;
-
-      if (workingHoursEnabled) {
-        return this.isInBetweenTheWorkingHours;
-      }
-      return anyAgentOnline;
-    },
   },
   methods: {
     startConversation() {