fix: Update business hour calculation (#4496)

app/javascript/widget/components/TeamAvailability.vue

@@ -58,6 +58,7 @@ export default {
       default: false,
     },
   },
+
   computed: {
     ...mapGetters({
       widgetColor: 'appConfig/getWidgetColor',

app/javascript/widget/mixins/availability.js

@@ -1,5 +1,5 @@
-import compareAsc from 'date-fns/compareAsc';
-import { buildDateFromTime } from 'shared/helpers/DateHelper';
+import { utcToZonedTime } from 'date-fns-tz';
+import { isTimeAfter } from 'shared/helpers/DateHelper';
 
 export default {
   computed: {
@@ -33,23 +33,32 @@ export default {
         closedAllDay,
         openAllDay,
       } = this.currentDayAvailability;
+
+      if (openAllDay || closedAllDay) {
+        return true;
+      }
+
       const { utcOffset } = this.channelConfig;
-
-      if (openAllDay) return true;
-
-      if (closedAllDay) return false;
-
-      const startTime = buildDateFromTime(openHour, openMinute, utcOffset);
-      const endTime = buildDateFromTime(closeHour, closeMinute, utcOffset);
-      const isBetween =
-        compareAsc(new Date(), startTime) === 1 &&
-        compareAsc(endTime, new Date()) === 1;
-
-      if (isBetween) return true;
-      return false;
+      const today = this.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;
     },
     currentDayAvailability() {
-      const dayOfTheWeek = new Date().getDay();
+      const { utcOffset } = this.channelConfig;
+      const dayOfTheWeek = this.getDateWithOffset(utcOffset).getDay();
       const [workingHourConfig = {}] = this.channelConfig.workingHours.filter(
         workingHour => workingHour.day_of_week === dayOfTheWeek
       );
@@ -63,8 +72,14 @@ export default {
       };
     },
     isInBusinessHours() {
-      const { workingHoursEnabled } = window.chatwootWebChannel;
+      const { workingHoursEnabled } = this.channelConfig;
       return workingHoursEnabled ? this.isInBetweenTheWorkingHours : true;
     },
   },
+
+  methods: {
+    getDateWithOffset(utcOffset) {
+      return utcToZonedTime(new Date().toISOString(), utcOffset);
+    },
+  },
 };

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

@@ -0,0 +1,60 @@
+import { createWrapper } from '@vue/test-utils';
+import availabilityMixin from '../availability';
+import Vue from 'vue';
+
+global.chatwootWebChannel = {
+  workingHoursEnabled: true,
+  workingHours: [
+    {
+      day_of_week: 3,
+      closed_all_day: false,
+      open_hour: 8,
+      open_minutes: 30,
+      close_hour: 17,
+      close_minutes: 35,
+      open_all_day: false,
+    },
+    {
+      day_of_week: 4,
+      closed_all_day: false,
+      open_hour: 8,
+      open_minutes: 30,
+      close_hour: 17,
+      close_minutes: 30,
+      open_all_day: false,
+    },
+  ],
+  utcOffset: '-07:00',
+};
+
+describe('availabilityMixin', () => {
+  it('returns valid isInBetweenWorkingHours if in different timezone', () => {
+    const Component = {
+      render() {},
+      mixins: [availabilityMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 06:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    expect(wrapper.vm.isInBetweenTheWorkingHours).toBe(true);
+    jest.useRealTimers();
+  });
+
+  it('returns valid isInBetweenWorkingHours if in same timezone', () => {
+    global.chatwootWebChannel.utcOffset = '+05:30';
+    const Component = {
+      render() {},
+      mixins: [availabilityMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 09:01:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const wrapper = createWrapper(new Constructor().$mount());
+    expect(wrapper.vm.isInBetweenTheWorkingHours).toBe(true);
+    jest.useRealTimers();
+  });
+});