chore: Replace availability mixin with useAvailability composable

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 'widget/composables/useAvailability';
 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',

app/javascript/widget/components/ChatHeader.vue

@@ -1,4 +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';
@@ -35,16 +36,9 @@ export default {
       default: () => {},
     },
   },
-  computed: {
-    isOnline() {
-      const { workingHoursEnabled } = this.channelConfig;
-      const anyAgentOnline = this.availableAgents.length > 0;
-
-      if (workingHoursEnabled) {
-        return this.isInBetweenTheWorkingHours;
-      }
-      return anyAgentOnline;
-    },
+  setup(props) {
+    const { isOnline } = useAvailability(props.availableAgents);
+    return { isOnline };
   },
   methods: {
     onBackButtonClick() {

app/javascript/widget/composables/useAvailability.js

@@ -0,0 +1,128 @@
+import { computed } from 'vue';
+import { utcToZonedTime } from 'date-fns-tz';
+import { isTimeAfter } from 'shared/helpers/DateHelper';
+
+/**
+ * Composable for handling availability-related computations.
+ * @param {Object} i18n - Vue i18n instance for translations.
+ * @returns {Object} An object containing computed properties and methods for availability management.
+ */
+export function useAvailability(availableAgents, i18n) {
+  const channelConfig = computed(() => window.chatwootWebChannel);
+  const replyTime = computed(() => window.chatwootWebChannel.replyTime);
+
+  const replyTimeStatus = computed(() => {
+    switch (replyTime.value) {
+      case 'in_a_few_minutes':
+        return i18n.t('REPLY_TIME.IN_A_FEW_MINUTES');
+      case 'in_a_few_hours':
+        return i18n.t('REPLY_TIME.IN_A_FEW_HOURS');
+      case 'in_a_day':
+        return i18n.t('REPLY_TIME.IN_A_DAY');
+      default:
+        return i18n.t('REPLY_TIME.IN_A_FEW_HOURS');
+    }
+  });
+
+  const replyWaitMessage = computed(() => {
+    const { workingHoursEnabled } = channelConfig.value;
+    if (workingHoursEnabled) {
+      return isOnline.value
+        ? replyTimeStatus.value
+        : `${i18n.t('REPLY_TIME.BACK_IN')} ${timeLeftToBackInOnline.value}`;
+    }
+    return isOnline.value
+      ? replyTimeStatus.value
+      : i18n.t('TEAM_AVAILABILITY.OFFLINE');
+  });
+
+  const outOfOfficeMessage = computed(
+    () => channelConfig.value.outOfOfficeMessage
+  );
+
+  const currentDayAvailability = computed(() => {
+    const { utcOffset } = channelConfig.value;
+    const dayOfTheWeek = getDateWithOffset(utcOffset).getDay();
+    const [workingHourConfig = {}] = channelConfig.value.workingHours.filter(
+      workingHour => workingHour.day_of_week === dayOfTheWeek
+    );
+    return {
+      closedAllDay: workingHourConfig.closed_all_day,
+      openHour: workingHourConfig.open_hour,
+      openMinute: workingHourConfig.open_minutes,
+      closeHour: workingHourConfig.close_hour,
+      closeMinute: workingHourConfig.close_minutes,
+      openAllDay: workingHourConfig.open_all_day,
+    };
+  });
+
+  const isInBetweenTheWorkingHours = computed(() => {
+    const {
+      openHour,
+      openMinute,
+      closeHour,
+      closeMinute,
+      closedAllDay,
+      openAllDay,
+    } = currentDayAvailability.value;
+
+    if (openAllDay) {
+      return true;
+    }
+
+    if (closedAllDay) {
+      return false;
+    }
+
+    const { utcOffset } = channelConfig.value;
+    const today = getDateWithOffset(utcOffset);
+    const currentHours = today.getHours();
+    const currentMinutes = today.getMinutes();
+    const isAfterStartTime = isTimeAfter(
+      currentHours,
+      currentMinutes,
+      openHour,
+      openMinute
+    );
+    const isBeforeEndTime = isTimeAfter(
+      closeHour,
+      closeMinute,
+      currentHours,
+      currentMinutes
+    );
+    return isAfterStartTime && isBeforeEndTime;
+  });
+
+  const isInBusinessHours = computed(() => {
+    const { workingHoursEnabled } = channelConfig.value;
+    return workingHoursEnabled ? isInBetweenTheWorkingHours.value : true;
+  });
+
+  const getDateWithOffset = utcOffset => {
+    return utcToZonedTime(new Date().toISOString(), utcOffset);
+  };
+
+  const isOnline = computed(() => {
+    if (availableAgents) {
+      const { workingHoursEnabled } = channelConfig.value;
+      const anyAgentOnline = availableAgents.length > 0;
+      if (workingHoursEnabled) {
+        return isInBetweenTheWorkingHours.value || anyAgentOnline;
+      }
+    }
+    return false;
+  });
+
+  return {
+    channelConfig,
+    replyTime,
+    replyTimeStatus,
+    replyWaitMessage,
+    outOfOfficeMessage,
+    currentDayAvailability,
+    isInBetweenTheWorkingHours,
+    isInBusinessHours,
+    isOnline,
+    getDateWithOffset,
+  };
+}