Feat: Show working hours on widget (#1823)

Feat: Display out of office message based on business hours

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>

app/javascript/widget/components/TeamAvailability.vue

@@ -1,15 +1,27 @@
 <template>
   <div class="px-4">
-    <div class="flex items-center justify-between mb-4">
+    <div
+      v-if="channelConfig.workingHoursEnabled"
+      class="flex items-center justify-between mb-4"
+    >
       <div class="text-black-700">
         <div class="text-base leading-5 font-medium mb-1">
-          {{ teamAvailabilityStatus }}
+          {{
+            isInBetweenTheWorkingHours
+              ? $t('TEAM_AVAILABILITY.ONLINE')
+              : $t('TEAM_AVAILABILITY.OFFLINE')
+          }}
         </div>
         <div class="text-xs leading-4 mt-1">
-          {{ replyTimeStatus }}
+          {{
+            isInBetweenTheWorkingHours ? replyTimeStatus : outOfOfficeMessage
+          }}
         </div>
       </div>
-      <available-agents :agents="availableAgents" />
+      <available-agents
+        v-if="isInBetweenTheWorkingHours"
+        :agents="availableAgents"
+      />
     </div>
     <woot-button
       class="font-medium"
@@ -27,9 +39,13 @@
 import { mapGetters } from 'vuex';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import { getContrastingTextColor } from 'shared/helpers/ColorHelper';
+import {
+  buildDateFromTime,
+  formatDigitToString,
+} from 'shared/helpers/DateHelper';
 import WootButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
-import teamAvailabilityMixin from 'widget/mixins/teamAvailabilityMixin';
+import compareAsc from 'date-fns/compareAsc';
 
 export default {
   name: 'TeamAvailability',
@@ -37,7 +53,7 @@ export default {
     AvailableAgents,
     WootButton,
   },
-  mixins: [configMixin, teamAvailabilityMixin],
+  mixins: [configMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -49,6 +65,53 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
+    isInBetweenTheWorkingHours() {
+      const {
+        closedAllDay,
+        openHour,
+        openMinute,
+        closeHour,
+        closeMinute,
+      } = this.currentDayAvailability;
+
+      if (closedAllDay) {
+        return false;
+      }
+
+      const { utcOffset } = this.channelConfig;
+      const startTime = buildDateFromTime(
+        formatDigitToString(openHour),
+        formatDigitToString(openMinute),
+        utcOffset
+      );
+      const endTime = buildDateFromTime(
+        formatDigitToString(closeHour),
+        formatDigitToString(closeMinute),
+        utcOffset
+      );
+
+      if (
+        compareAsc(new Date(), startTime) === 1 &&
+        compareAsc(endTime, new Date()) === 1
+      ) {
+        return true;
+      }
+
+      return false;
+    },
+    currentDayAvailability() {
+      const dayOfTheWeek = new Date().getDay();
+      const [workingHourConfig = {}] = this.channelConfig.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,
+      };
+    },
   },
   methods: {
     startConversation() {