feat: Show next available day/hour and minutes on widget (#6902)

* feat: Show next available hour and minutes on widget

* chore: Adds spec

* chore: Show days

* chore: Code clean up

* chore: Review fixes

* chore: Minor fixes

* chore: Review suggestion fixes

* chore: Minor fixes

* Added timezone to widget payload

* chore: Adds time zone

* chore: Review fixes

* chore: Adds comments

* chore: Rounded up min with nearest multiple of 5

* chore: Review fixes

* chore: Review fixes

* chore: Review fixes

* chore: Review fixes

* chore: Fix specs

* chore: Review fixes

* chore: Fix specs

* chore: Review fixes

* chore: Moved day names to i18n

* chore: Review fixes

* chore: Fix specs

---------

Co-authored-by: Tejaswini Chile <tejaswini@chatwoot.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/widget/components/ChatHeader.vue

@@ -46,6 +46,7 @@
 import { mapGetters } from 'vuex';
 
 import availabilityMixin from 'widget/mixins/availability';
+import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions';
 import routerMixin from 'widget/mixins/routerMixin';
@@ -57,7 +58,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [availabilityMixin, routerMixin, darkMixin],
+  mixins: [nextAvailabilityTime, availabilityMixin, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -93,11 +94,6 @@ export default {
       }
       return anyAgentOnline;
     },
-    replyWaitMessage() {
-      return this.isOnline
-        ? this.replyTimeStatus
-        : this.$t('TEAM_AVAILABILITY.OFFLINE');
-    },
   },
   methods: {
     onBackButtonClick() {

app/javascript/widget/components/TeamAvailability.vue

@@ -35,6 +35,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
+import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
 import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import CustomButton from 'shared/components/Button';
 import configMixin from 'widget/mixins/configMixin';
@@ -47,7 +48,7 @@ export default {
     AvailableAgents,
     CustomButton,
   },
-  mixins: [configMixin, availabilityMixin, darkMixin],
+  mixins: [configMixin, nextAvailabilityTime, availabilityMixin, darkMixin],
   props: {
     availableAgents: {
       type: Array,
@@ -75,17 +76,6 @@ export default {
       }
       return anyAgentOnline;
     },
-    replyWaitMessage() {
-      const { workingHoursEnabled } = this.channelConfig;
-
-      if (this.isOnline) {
-        return this.replyTimeStatus;
-      }
-      if (workingHoursEnabled) {
-        return this.outOfOfficeMessage;
-      }
-      return '';
-    },
   },
   methods: {
     startConversation() {