LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Sivin Varghese
2023-05-12 19:25:51 +05:30
committed by GitHub
parent abdf00d2cf
commit 198cd9b28d
9 changed files with 834 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/shared/helpers/DateHelper.js
View File

@@ -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);
};

14
app/javascript/shared/helpers/specs/DateHelper.spec.js
View File

@@ -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');
});
});

8
app/javascript/widget/components/ChatHeader.vue
View File

@@ -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() {

14
app/javascript/widget/components/TeamAvailability.vue
View File

@@ -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() {

12
app/javascript/widget/i18n/locale/en.json
View File

@@ -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",

11
app/javascript/widget/mixins/availability.js
View File

@@ -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;
},

242
app/javascript/widget/mixins/nextAvailabilityTime.js Normal file
View File

@@ -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
);
},
},
};

544
app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js Normal file
View File

@@ -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');
});
});

1
app/views/widgets/show.html.erb
View File

@@ -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') %>
}