From 198cd9b28d5137e9069f749e6d9b7f9b3809fba3 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 12 May 2023 19:25:51 +0530
Subject: [PATCH] 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/shared/helpers/DateHelper.js   |   7 +
 .../shared/helpers/specs/DateHelper.spec.js   |  14 +
 .../widget/components/ChatHeader.vue          |   8 +-
 .../widget/components/TeamAvailability.vue    |  14 +-
 app/javascript/widget/i18n/locale/en.json     |  12 +-
 app/javascript/widget/mixins/availability.js  |  11 +
 .../widget/mixins/nextAvailabilityTime.js     | 242 ++++++++
 .../mixins/specs/nextAvailabilityTime.spec.js | 544 ++++++++++++++++++
 app/views/widgets/show.html.erb               |   1 +
 9 files changed, 834 insertions(+), 19 deletions(-)
 create mode 100644 app/javascript/widget/mixins/nextAvailabilityTime.js
 create mode 100644 app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js

diff --git a/app/javascript/shared/helpers/DateHelper.js b/app/javascript/shared/helpers/DateHelper.js
index 15638c5a8..c8b0f231b 100644
--- a/app/javascript/shared/helpers/DateHelper.js
+++ b/app/javascript/shared/helpers/DateHelper.js
@@ -30,3 +30,10 @@ export const isTimeAfter = (h1, m1, h2, m2) => {
 
   return true;
 };
+
+export const generateRelativeTime = (value, unit, languageCode) => {
+  const rtf = new Intl.RelativeTimeFormat(languageCode, {
+    numeric: 'auto',
+  });
+  return rtf.format(value, unit);
+};
diff --git a/app/javascript/shared/helpers/specs/DateHelper.spec.js b/app/javascript/shared/helpers/specs/DateHelper.spec.js
index c67c1a27b..030910a3d 100644
--- a/app/javascript/shared/helpers/specs/DateHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/DateHelper.spec.js
@@ -3,6 +3,7 @@ import {
   formatUnixDate,
   formatDigitToString,
   isTimeAfter,
+  generateRelativeTime,
 } from '../DateHelper';
 
 describe('#DateHelper', () => {
@@ -62,3 +63,16 @@ describe('#isTimeAfter', () => {
     expect(isTimeAfter(11, 59, 12, 0)).toEqual(false);
   });
 });
+
+describe('#generateRelativeTime', () => {
+  it('should return correct relative time', () => {
+    expect(generateRelativeTime(-1, 'day', 'en')).toEqual('yesterday');
+    expect(generateRelativeTime(1, 'day', 'en')).toEqual('tomorrow');
+    expect(generateRelativeTime(1, 'hour', 'en')).toEqual('in 1 hour');
+    expect(generateRelativeTime(-1, 'hour', 'en')).toEqual('1 hour ago');
+    expect(generateRelativeTime(1, 'minute', 'en')).toEqual('in 1 minute');
+    expect(generateRelativeTime(-1, 'minute', 'en')).toEqual('1 minute ago');
+    expect(generateRelativeTime(1, 'second', 'en')).toEqual('in 1 second');
+    expect(generateRelativeTime(-1, 'second', 'en')).toEqual('1 second ago');
+  });
+});
diff --git a/app/javascript/widget/components/ChatHeader.vue b/app/javascript/widget/components/ChatHeader.vue
index 906c98d14..f6a8aecd8 100644
--- a/app/javascript/widget/components/ChatHeader.vue
+++ b/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() {
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index a3a6b0c02..8305c7a4e 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/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() {
diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json
index 0c286263d..de94b33a3 100644
--- a/app/javascript/widget/i18n/locale/en.json
+++ b/app/javascript/widget/i18n/locale/en.json
@@ -19,8 +19,18 @@
   "REPLY_TIME": {
     "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
     "IN_A_FEW_HOURS": "Typically replies in a few hours",
-    "IN_A_DAY": "Typically replies in a day"
+    "IN_A_DAY": "Typically replies in a day",
+    "BACK_IN": "We will be back online"
   },
+  "DAY_NAMES": [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ],
   "START_CONVERSATION": "Start Conversation",
   "END_CONVERSATION": "End Conversation",
   "CONTINUE_CONVERSATION": "Continue conversation",
diff --git a/app/javascript/widget/mixins/availability.js b/app/javascript/widget/mixins/availability.js
index 56f33b214..746a5e095 100644
--- a/app/javascript/widget/mixins/availability.js
+++ b/app/javascript/widget/mixins/availability.js
@@ -21,6 +21,17 @@ export default {
           return this.$t('REPLY_TIME.IN_A_FEW_HOURS');
       }
     },
+    replyWaitMessage() {
+      const { workingHoursEnabled } = this.channelConfig;
+      if (workingHoursEnabled) {
+        return this.isOnline
+          ? this.replyTimeStatus
+          : `${this.$t('REPLY_TIME.BACK_IN')} ${this.timeLeftToBackInOnline}`;
+      }
+      return this.isOnline
+        ? this.replyTimeStatus
+        : this.$t('TEAM_AVAILABILITY.OFFLINE');
+    },
     outOfOfficeMessage() {
       return this.channelConfig.outOfOfficeMessage;
     },
diff --git a/app/javascript/widget/mixins/nextAvailabilityTime.js b/app/javascript/widget/mixins/nextAvailabilityTime.js
new file mode 100644
index 000000000..55797d282
--- /dev/null
+++ b/app/javascript/widget/mixins/nextAvailabilityTime.js
@@ -0,0 +1,242 @@
+import {
+  timeSlotParse,
+  defaultTimeSlot,
+} from 'dashboard/routes/dashboard/settings/inbox/helpers/businessHour.js';
+import { utcToZonedTime } from 'date-fns-tz';
+import { generateRelativeTime } from 'shared/helpers/DateHelper';
+
+const MINUTE_ROUNDING_FACTOR = 5;
+
+export default {
+  data() {
+    return {
+      dayNames: this.$t('DAY_NAMES'),
+      timeSlots: [...defaultTimeSlot],
+      timeSlot: {},
+    };
+  },
+  computed: {
+    channelConfig() {
+      return window.chatwootWebChannel;
+    },
+    workingHours() {
+      return this.channelConfig.workingHours;
+    },
+    newDateWithTimeZone() {
+      return utcToZonedTime(new Date(), this.timeZoneValue);
+    },
+    presentHour() {
+      return this.newDateWithTimeZone.getHours();
+    },
+    presentMinute() {
+      return this.newDateWithTimeZone.getMinutes();
+    },
+    currentDay() {
+      const date = this.newDateWithTimeZone;
+      const day = date.getDay();
+      const currentDay = Object.keys(this.dayNames).find(
+        key => this.dayNames[key] === this.dayNames[day]
+      );
+      return Number(currentDay);
+    },
+    timeZoneValue() {
+      return this.channelConfig.timezone;
+    },
+    languageCode() {
+      return window.chatwootWebChannel.locale;
+    },
+    currentDayWorkingHours() {
+      return this.workingHours.find(
+        slot => slot.day_of_week === this.currentDay
+      );
+    },
+    nextDayWorkingHours() {
+      let nextDay = this.getNextDay(this.currentDay);
+      let nextWorkingHour = this.getNextWorkingHour(nextDay);
+
+      // It gets the next working hour for the next day. If there is no working hour for the next day,
+      // it keeps iterating through the days of the week until it finds the next working hour.
+      while (!nextWorkingHour) {
+        nextDay = this.getNextDay(nextDay);
+        nextWorkingHour = this.getNextWorkingHour(nextDay);
+      }
+      return nextWorkingHour;
+    },
+    currentDayTimings() {
+      const {
+        open_hour: openHour,
+        open_minutes: openMinute,
+        close_hour: closeHour,
+      } = this.currentDayWorkingHours ?? {};
+      return {
+        openHour,
+        openMinute,
+        closeHour,
+      };
+    },
+    nextDayTimings() {
+      const { open_hour: openHour, open_minutes: openMinute } =
+        this.nextDayWorkingHours ?? {};
+      return {
+        openHour,
+        openMinute,
+      };
+    },
+    dayDiff() {
+      // Here this is used to get the difference between current day and next working day
+      const nextDay = this.nextDayWorkingHours.day_of_week;
+      const totalDays = 6;
+      return nextDay > this.currentDay
+        ? nextDay - this.currentDay - 1
+        : totalDays - this.currentDay + nextDay;
+    },
+    dayNameOfNextWorkingDay() {
+      return this.dayNames[this.nextDayWorkingHours.day_of_week];
+    },
+    hoursAndMinutesBackInOnline() {
+      if (this.presentHour >= this.currentDayTimings.closeHour) {
+        return this.getHoursAndMinutesUntilNextDayOpen(
+          this.nextDayWorkingHours.open_all_day
+            ? 0
+            : this.nextDayTimings.openHour,
+          this.nextDayTimings.openMinute,
+          this.currentDayTimings.closeHour
+        );
+      }
+      return this.getHoursAndMinutesUntilNextDayOpen(
+        this.currentDayTimings.openHour,
+        this.currentDayTimings.openMinute,
+        this.currentDayTimings.closeHour
+      );
+    },
+    exactTimeInAmPm() {
+      return `${
+        this.timeSlot.day === this.currentDay ? `at ${this.timeSlot.from}` : ''
+      }`;
+    },
+    hoursAndMinutesLeft() {
+      const { hoursLeft, minutesLeft } = this.hoursAndMinutesBackInOnline;
+
+      const timeLeftChars = [];
+
+      if (hoursLeft > 0) {
+        const roundedUpHoursLeft = minutesLeft > 0 ? hoursLeft + 1 : hoursLeft;
+        const hourRelative = generateRelativeTime(
+          roundedUpHoursLeft,
+          'hour',
+          this.languageCode
+        );
+        timeLeftChars.push(`${hourRelative}`);
+      }
+
+      if (minutesLeft > 0 && hoursLeft === 0) {
+        const roundedUpMinLeft =
+          Math.ceil(minutesLeft / MINUTE_ROUNDING_FACTOR) *
+          MINUTE_ROUNDING_FACTOR;
+        const minRelative = generateRelativeTime(
+          roundedUpMinLeft,
+          'minutes',
+          this.languageCode
+        );
+        timeLeftChars.push(`${minRelative}`);
+      }
+
+      return timeLeftChars.join(' ');
+    },
+    hoursAndMinutesToBack() {
+      const { hoursLeft, minutesLeft } = this.hoursAndMinutesBackInOnline;
+      if (hoursLeft >= 3) {
+        return this.exactTimeInAmPm;
+      }
+      if (hoursLeft > 0 || minutesLeft > 0) {
+        return this.hoursAndMinutesLeft;
+      }
+      return 'in some time';
+    },
+    timeLeftToBackInOnline() {
+      if (
+        this.hoursAndMinutesBackInOnline.hoursLeft >= 24 ||
+        (this.timeSlot.day !== this.currentDay && this.dayDiff === 0)
+      ) {
+        const hourRelative = generateRelativeTime(
+          this.dayDiff + 1,
+          'days',
+          this.languageCode
+        );
+        return `${hourRelative}`;
+      }
+      if (
+        this.dayDiff >= 1 &&
+        this.presentHour >= this.currentDayTimings.closeHour
+      ) {
+        return `on ${this.dayNameOfNextWorkingDay}`;
+      }
+      return this.hoursAndMinutesToBack;
+    },
+  },
+  mounted() {
+    this.setTimeSlot();
+  },
+  methods: {
+    getNextDay(day) {
+      // This code calculates the next day of the week based on the current day. If the current day is Saturday (6), then the next day will be Sunday (0).
+      return (day + 1) % 7;
+    },
+    getNextWorkingHour(day) {
+      const workingHour = this.workingHours.find(
+        slot => slot.day_of_week === day
+      );
+      if (workingHour && !workingHour.closed_all_day) {
+        return workingHour;
+      }
+      return null;
+    },
+    getHoursAndMinutesUntilNextDayOpen(
+      openHour, // If the present time is after the closing time of the current day, then the openHour will be the opening hour of the next day else it will be the opening hour of the current day.
+      openMinutes, // If the present time is after the closing time of the current day, then the openMinutes will be the opening minutes of the next day else it will be the opening minutes of the current day.
+      closeHour // The closeHour will be the closing hour of the current day. It will be used to calculate the time remaining until the next day's opening hours.
+    ) {
+      // This code calculates the time remaining until the next day's opening hours,
+      // given the current time, the opening hours, and the closing hours of the current day.
+      if (closeHour < openHour) {
+        openHour += 24;
+      }
+      let diffMinutes =
+        openHour * 60 +
+        openMinutes -
+        (this.presentHour * 60 + this.presentMinute);
+      diffMinutes = diffMinutes < 0 ? diffMinutes + 24 * 60 : diffMinutes;
+      const [hoursLeft, minutesLeft] = [
+        Math.floor(diffMinutes / 60),
+        diffMinutes % 60,
+      ];
+
+      // It returns the remaining time in hours and minutes as an object with keys hours and minutes.
+      return { hoursLeft, minutesLeft };
+    },
+    setTimeSlot() {
+      // It checks if the working hours feature is enabled for the store.
+
+      const timeSlots = this.workingHours;
+
+      // If the present hour is after the closing hour of the current day,
+      // then the next day's working hours will be used to calculate the time remaining until the next day's opening hours,
+      // else the current day's working hours will be used
+      const currentSlot =
+        this.presentHour >= this.currentDayTimings.closeHour
+          ? this.nextDayWorkingHours
+          : this.currentDayWorkingHours;
+
+      // It parses the working hours to get the time slots in AM/PM format.
+      const slots = timeSlotParse(timeSlots).length
+        ? timeSlotParse(timeSlots)
+        : defaultTimeSlot;
+      this.timeSlots = slots;
+
+      // It finds the time slot for the current slot.
+      this.timeSlot = this.timeSlots.find(
+        slot => slot.day === currentSlot.day_of_week
+      );
+    },
+  },
+};
diff --git a/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js
new file mode 100644
index 000000000..149fdba59
--- /dev/null
+++ b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js
@@ -0,0 +1,544 @@
+import { createWrapper } from '@vue/test-utils';
+import nextAvailabilityTimeMixin from '../nextAvailabilityTime';
+import Vue from 'vue';
+
+describe('nextAvailabilityTimeMixin', () => {
+  const chatwootWebChannel = {
+    workingHoursEnabled: true,
+    workingHours: [
+      {
+        day_of_week: 0,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 1,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 2,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 3,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 4,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 5,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+      {
+        day_of_week: 6,
+        open_hour: 9,
+        closed_all_day: false,
+        open_minutes: 0,
+        close_hour: 17,
+      },
+    ],
+  };
+
+  beforeAll(() => {
+    window.chatwootWebChannel = chatwootWebChannel;
+  });
+
+  afterAll(() => {
+    delete window.chatwootWebChannel;
+  });
+
+  beforeEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should return day names', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    expect(wrapper.vm.dayNames).toEqual([
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ]);
+  });
+
+  it('should return channelConfig', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    expect(wrapper.vm.channelConfig).toEqual(chatwootWebChannel);
+  });
+
+  it('should return workingHours', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    expect(wrapper.vm.workingHours).toEqual(chatwootWebChannel.workingHours);
+  });
+
+  it('should return currentDayWorkingHours', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const currentDay = new Date().getDay();
+    const expectedWorkingHours = chatwootWebChannel.workingHours.find(
+      slot => slot.day_of_week === currentDay
+    );
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    expect(wrapper.vm.currentDayWorkingHours).toEqual(expectedWorkingHours);
+  });
+
+  it('should return nextDayWorkingHours', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const currentDay = new Date().getDay();
+    const nextDay = currentDay === 6 ? 0 : currentDay + 1;
+    const expectedWorkingHours = chatwootWebChannel.workingHours.find(
+      slot => slot.day_of_week === nextDay
+    );
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    expect(wrapper.vm.nextDayWorkingHours).toEqual(expectedWorkingHours);
+  });
+
+  it('should return presentHour', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    expect(wrapper.vm.presentHour).toBe(new Date().getHours());
+  });
+
+  it('should return presentMinute', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    expect(wrapper.vm.presentMinute).toBe(new Date().getMinutes());
+  });
+
+  it('should return currentDay', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const date = new Date();
+    const day = date.getDay();
+    const currentDay = Object.keys(wrapper.vm.dayNames).find(
+      key => wrapper.vm.dayNames[key] === wrapper.vm.dayNames[day]
+    );
+    expect(wrapper.vm.currentDay).toBe(Number(currentDay));
+  });
+
+  it('should return currentDayTimings', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const {
+      open_hour: openHour,
+      open_minutes: openMinute,
+      close_hour: closeHour,
+    } = wrapper.vm.currentDayWorkingHours;
+    expect(wrapper.vm.currentDayTimings).toEqual({
+      openHour,
+      openMinute,
+      closeHour,
+    });
+  });
+
+  it('should return nextDayTimings', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const {
+      open_hour: openHour,
+      open_minutes: openMinute,
+    } = wrapper.vm.nextDayWorkingHours;
+
+    expect(wrapper.vm.nextDayTimings).toEqual({
+      openHour,
+      openMinute,
+    });
+  });
+
+  it('should return dayDiff', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const currentDay = wrapper.vm.currentDay;
+    const nextDay = wrapper.vm.nextDayWorkingHours.day_of_week;
+    const totalDays = 6;
+    const expectedDayDiff =
+      nextDay > currentDay
+        ? nextDay - currentDay - 1
+        : totalDays - currentDay + nextDay;
+
+    expect(wrapper.vm.dayDiff).toEqual(expectedDayDiff);
+  });
+
+  it('should return dayNameOfNextWorkingDay', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const nextDay = wrapper.vm.nextDayWorkingHours.day_of_week;
+    const expectedDayName = wrapper.vm.dayNames[nextDay];
+    expect(wrapper.vm.dayNameOfNextWorkingDay).toEqual(expectedDayName);
+  });
+
+  it('should return hoursAndMinutesBackInOnline', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    const currentDayCloseHour =
+      chatwootWebChannel.workingHours[wrapper.vm.currentDay].close_hour;
+    const nextDayOpenHour =
+      chatwootWebChannel.workingHours[
+        wrapper.vm.currentDay === 6 ? 0 : wrapper.vm.currentDay + 1
+      ].open_hour;
+    const nextDayOpenMinute =
+      chatwootWebChannel.workingHours[
+        wrapper.vm.currentDay === 6 ? 0 : wrapper.vm.currentDay + 1
+      ].open_minutes;
+    const expectedHoursAndMinutes = wrapper.vm.getHoursAndMinutesUntilNextDayOpen(
+      nextDayOpenHour,
+      nextDayOpenMinute,
+      currentDayCloseHour
+    );
+    expect(wrapper.vm.hoursAndMinutesBackInOnline).toEqual(
+      expectedHoursAndMinutes
+    );
+  });
+
+  it('should return getNextDay', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    expect(wrapper.vm.getNextDay(6)).toBe(0);
+  });
+
+  it('should return in 30 minutes', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.timeSlot = {
+      day: 4,
+      from: '12:00 AM',
+      openAllDay: false,
+      to: '08:00 AM',
+      valid: true,
+    };
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+
+    chatwootWebChannel.workingHours[4].open_hour = 18;
+    chatwootWebChannel.workingHours[4].open_minutes = 0;
+    chatwootWebChannel.workingHours[4].close_hour = 23;
+    expect(wrapper.vm.timeLeftToBackInOnline).toBe('in 30 minutes');
+  });
+
+  it('should return in 3 hours', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.timeSlot = {
+      day: 4,
+      from: '12:00 PM',
+      openAllDay: false,
+      to: '11:30 PM',
+      valid: true,
+    };
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    chatwootWebChannel.workingHours[4].open_hour = 19;
+    expect(wrapper.vm.timeLeftToBackInOnline).toBe('in 2 hours');
+  });
+
+  it('should return at 10:00 AM', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.timeSlot = {
+      day: 4,
+      from: '10:00 AM',
+      openAllDay: false,
+      to: '11:00 AM',
+      valid: true,
+    };
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    chatwootWebChannel.workingHours[4].open_hour = 10;
+    expect(wrapper.vm.timeLeftToBackInOnline).toBe('at 10:00 AM');
+  });
+
+  it('should return tomorrow', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.timeSlot = {
+      day: 0,
+      from: '12:00 AM',
+      openAllDay: false,
+      to: '08:00 AM',
+      valid: true,
+    };
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+    chatwootWebChannel.workingHours[4].open_hour = 9;
+    chatwootWebChannel.workingHours[4].close_hour = 16;
+    expect(wrapper.vm.timeLeftToBackInOnline).toBe('tomorrow');
+  });
+
+  it('should return on Saturday', () => {
+    const Component = {
+      render() {},
+      mixins: [nextAvailabilityTimeMixin],
+    };
+    jest
+      .useFakeTimers('modern')
+      .setSystemTime(new Date('Thu Apr 14 2022 23:04:46 GMT+0530'));
+    const Constructor = Vue.extend(Component);
+    const vm = new Constructor().$mount();
+    const wrapper = createWrapper(vm);
+    wrapper.vm.timeSlot = {
+      day: 0,
+      from: '12:00 AM',
+      openAllDay: false,
+      to: '08:00 AM',
+      valid: true,
+    };
+    wrapper.vm.dayNames = [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ];
+
+    chatwootWebChannel.workingHours[4].open_hour = 9;
+    chatwootWebChannel.workingHours[4].close_hour = 16;
+    chatwootWebChannel.workingHours[5].closed_all_day = true;
+    expect(wrapper.vm.timeLeftToBackInOnline).toBe('on Saturday');
+  });
+});
diff --git a/app/views/widgets/show.html.erb b/app/views/widgets/show.html.erb
index baa7c6ac1..d5d047074 100644
--- a/app/views/widgets/show.html.erb
+++ b/app/views/widgets/show.html.erb
@@ -24,6 +24,7 @@
         workingHours: <%= @web_widget.inbox.working_hours.to_json.html_safe %>,
         outOfOfficeMessage: <%= @web_widget.inbox.out_of_office_message.to_json.html_safe %>,
         utcOffset: '<%= ActiveSupport::TimeZone[@web_widget.inbox.timezone].now.formatted_offset %>',
+        timezone: '<%= @web_widget.inbox.timezone %>',
         allowMessagesAfterResolved: <%= @web_widget.inbox.allow_messages_after_resolved %>,
         disableBranding: <%= @web_widget.inbox.account.feature_enabled?('disable_branding') %>
       }