Fix: Update offline message in widget by availability (#1879)

Feat: Display out of office message based on business hours

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>

app/javascript/widget/components/TeamAvailability.vue

@@ -1,27 +1,19 @@
 <template>
   <div class="px-4">
-    <div
-      v-if="channelConfig.workingHoursEnabled"
-      class="flex items-center justify-between mb-4"
-    >
+    <div class="flex items-center justify-between mb-4">
       <div class="text-black-700">
         <div class="text-base leading-5 font-medium mb-1">
           {{
-            isInBetweenTheWorkingHours
+            isOnline
               ? $t('TEAM_AVAILABILITY.ONLINE')
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
         <div class="text-xs leading-4 mt-1">
-          {{
-            isInBetweenTheWorkingHours ? replyTimeStatus : outOfOfficeMessage
-          }}
+          {{ replyWaitMeessage }}
         </div>
       </div>
-      <available-agents
-        v-if="isInBetweenTheWorkingHours"
-        :agents="availableAgents"
-      />
+      <available-agents v-if="isOnline" :agents="availableAgents" />
     </div>
     <woot-button
       class="font-medium"
@@ -39,13 +31,9 @@
 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 compareAsc from 'date-fns/compareAsc';
+import availabilityMixin from 'widget/mixins/availability';
 
 export default {
   name: 'TeamAvailability',
@@ -53,7 +41,7 @@ export default {
     AvailableAgents,
     WootButton,
   },
-  mixins: [configMixin],
+  mixins: [configMixin, availabilityMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -65,52 +53,25 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
-    isInBetweenTheWorkingHours() {
-      const {
-        closedAllDay,
-        openHour,
-        openMinute,
-        closeHour,
-        closeMinute,
-      } = this.currentDayAvailability;
+    isOnline() {
+      const { workingHoursEnabled } = this.channelConfig;
+      const anyAgentOnline = this.availableAgents.length > 0;
 
-      if (closedAllDay) {
-        return false;
+      if (workingHoursEnabled) {
+        return this.isInBetweenTheWorkingHours;
       }
-
-      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;
+      return anyAgentOnline;
     },
-    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,
-      };
+    replyWaitMeessage() {
+      const { workingHoursEnabled } = this.channelConfig;
+
+      if (this.isOnline) {
+        return this.replyTimeStatus;
+      }
+      if (workingHoursEnabled) {
+        return this.outOfOfficeMessage;
+      }
+      return this.$t('TEAM_AVAILABILITY.OFFLINE');
     },
   },
   methods: {