diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index 4cb645577..e63a40656 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -274,6 +274,12 @@ "TITLE": "Set your availability", "SUBTITLE": "Set your availability on your livechat widget", "WEEKLY_TITLE": "Set your weekly hours", + "TIMEZONE_LABEL": "Select timezone", + "UPDATE": "Update business hours settings", + "TOGGLE_AVAILABILITY": "Enable business availability for this inbox", + "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for vistors", + "UNAVAILABLE_MESSAGE_DEFAULT": "We are unavailable at the moment. Leave a message we will respond once we are back.", + "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours vistors can be warned with a message and a pre-chat form.", "DAY": { "ENABLE": "Enable availability for this day", "UNAVAILABLE": "Unavailable", diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue index 81ea650d7..83d6b57f6 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue @@ -254,6 +254,9 @@
+
+ +
@@ -266,12 +269,14 @@ import SettingsSection from '../../../../components/SettingsSection'; import inboxMixin from 'shared/mixins/inboxMixin'; import FacebookReauthorize from './facebook/Reauthorize'; import PreChatFormSettings from './PreChatForm/Settings'; +import WeeklyAvailability from './components/WeeklyAvailability'; export default { components: { SettingsSection, FacebookReauthorize, PreChatFormSettings, + WeeklyAvailability, }, mixins: [alertMixin, configMixin, inboxMixin], data() { @@ -329,6 +334,10 @@ export default { key: 'preChatForm', name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'), }, + { + key: 'businesshours', + name: this.$t('INBOX_MGMT.TABS.BUSINESS_HOURS'), + }, { key: 'configuration', name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'), diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue index 6e2cbb151..9e6338605 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue @@ -92,11 +92,13 @@ export default { ...this.timeSlot, from: timeSlots[0], to: timeSlots[16], + valid: true, } : { ...this.timeSlot, from: '', to: '', + valid: false, }; this.$emit('update', newSlot); }, @@ -106,9 +108,12 @@ export default { return this.timeSlot.from; }, set(value) { + const fromDate = parse(value, 'hh:mm a', new Date()); + const valid = differenceInMinutes(this.toDate, fromDate) / 60 > 0; this.$emit('update', { ...this.timeSlot, from: value, + valid, }); }, }, @@ -117,10 +122,21 @@ export default { return this.timeSlot.to; }, set(value) { - this.$emit('update', { - ...this.timeSlot, - to: value, - }); + const toDate = parse(value, 'hh:mm a', new Date()); + if (value === '12:00 AM') { + this.$emit('update', { + ...this.timeSlot, + to: value, + valid: true, + }); + } else { + const valid = differenceInMinutes(toDate, this.fromDate) / 60 > 0; + this.$emit('update', { + ...this.timeSlot, + to: value, + valid, + }); + } }, }, fromDate() { @@ -130,10 +146,14 @@ export default { return parse(this.toTime, 'hh:mm a', new Date()); }, totalHours() { - return differenceInMinutes(this.toDate, this.fromDate) / 60; + const totalHours = differenceInMinutes(this.toDate, this.fromDate) / 60; + if (this.toTime === '12:00 AM') { + return 24 + totalHours; + } + return totalHours; }, hasError() { - return this.totalHours < 0; + return !this.timeSlot.valid; }, }, }; @@ -157,8 +177,8 @@ export default { display: flex; align-items: center; justify-content: space-between; - padding: var(--space-normal); - height: var(--space-larger); + padding: var(--space-small) 0; + min-height: var(--space-larger); box-sizing: content-box; border-bottom: 1px solid var(--color-border-light); } @@ -213,7 +233,7 @@ export default { } .date-error { - padding: var(--space-small) 0; + padding-top: var(--space-smaller); } .error { diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue new file mode 100644 index 000000000..4107c5151 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue @@ -0,0 +1,193 @@ +