Files
chatwoot/app/javascript/widget/mixins/availability.js
Sivin Varghese 198cd9b28d 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>
2023-05-12 19:25:51 +05:30

101 lines
2.9 KiB
JavaScript

import { utcToZonedTime } from 'date-fns-tz';
import { isTimeAfter } from 'shared/helpers/DateHelper';
export default {
computed: {
channelConfig() {
return window.chatwootWebChannel;
},
replyTime() {
return window.chatwootWebChannel.replyTime;
},
replyTimeStatus() {
switch (this.replyTime) {
case 'in_a_few_minutes':
return this.$t('REPLY_TIME.IN_A_FEW_MINUTES');
case 'in_a_few_hours':
return this.$t('REPLY_TIME.IN_A_FEW_HOURS');
case 'in_a_day':
return this.$t('REPLY_TIME.IN_A_DAY');
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;
},
isInBetweenTheWorkingHours() {
const {
openHour,
openMinute,
closeHour,
closeMinute,
closedAllDay,
openAllDay,
} = this.currentDayAvailability;
if (openAllDay) {
return true;
}
if (closedAllDay) {
return false;
}
const { utcOffset } = this.channelConfig;
const today = this.getDateWithOffset(utcOffset);
const currentHours = today.getHours();
const currentMinutes = today.getMinutes();
const isAfterStartTime = isTimeAfter(
currentHours,
currentMinutes,
openHour,
openMinute
);
const isBeforeEndTime = isTimeAfter(
closeHour,
closeMinute,
currentHours,
currentMinutes
);
return isAfterStartTime && isBeforeEndTime;
},
currentDayAvailability() {
const { utcOffset } = this.channelConfig;
const dayOfTheWeek = this.getDateWithOffset(utcOffset).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,
openAllDay: workingHourConfig.open_all_day,
};
},
isInBusinessHours() {
const { workingHoursEnabled } = this.channelConfig;
return workingHoursEnabled ? this.isInBetweenTheWorkingHours : true;
},
},
methods: {
getDateWithOffset(utcOffset) {
return utcToZonedTime(new Date().toISOString(), utcOffset);
},
},
};