diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json index 83b442e5139c..afb049aa528b 100644 --- a/app/javascript/widget/i18n/locale/en.json +++ b/app/javascript/widget/i18n/locale/en.json @@ -20,7 +20,11 @@ "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", - "BACK_IN": "We will be back online" + "WILL_BE_BACK": "We will be back online {time}", + "BACK_IN": "We will be back online in {time}", + "BACK_AT": "We will be back online at {time}", + "BACK_ON": "We will be back online on {day}", + "BACK_IN_SOME_TIME": "We will be back online in some time" }, "DAY_NAMES": [ "Sunday", diff --git a/app/javascript/widget/mixins/availability.js b/app/javascript/widget/mixins/availability.js index 746a5e09522b..7dd8725d7dfe 100644 --- a/app/javascript/widget/mixins/availability.js +++ b/app/javascript/widget/mixins/availability.js @@ -26,7 +26,7 @@ export default { if (workingHoursEnabled) { return this.isOnline ? this.replyTimeStatus - : `${this.$t('REPLY_TIME.BACK_IN')} ${this.timeLeftToBackInOnline}`; + : this.timeLeftToBackInOnline; } return this.isOnline ? this.replyTimeStatus diff --git a/app/javascript/widget/mixins/nextAvailabilityTime.js b/app/javascript/widget/mixins/nextAvailabilityTime.js index 55797d2823cd..2e839598176d 100644 --- a/app/javascript/widget/mixins/nextAvailabilityTime.js +++ b/app/javascript/widget/mixins/nextAvailabilityTime.js @@ -111,7 +111,11 @@ export default { }, exactTimeInAmPm() { return `${ - this.timeSlot.day === this.currentDay ? `at ${this.timeSlot.from}` : '' + this.timeSlot.day === this.currentDay + ? this.$t('REPLY_TIME.BACK_AT', { + time: this.timeSlot.from, + }) + : '' }`; }, hoursAndMinutesLeft() { @@ -121,24 +125,14 @@ export default { if (hoursLeft > 0) { const roundedUpHoursLeft = minutesLeft > 0 ? hoursLeft + 1 : hoursLeft; - const hourRelative = generateRelativeTime( - roundedUpHoursLeft, - 'hour', - this.languageCode - ); - timeLeftChars.push(`${hourRelative}`); + timeLeftChars.push(`${roundedUpHoursLeft} hours`); } 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}`); + timeLeftChars.push(`${roundedUpMinLeft} minutes`); } return timeLeftChars.join(' '); @@ -149,9 +143,11 @@ export default { return this.exactTimeInAmPm; } if (hoursLeft > 0 || minutesLeft > 0) { - return this.hoursAndMinutesLeft; + return this.$t('REPLY_TIME.BACK_IN', { + time: this.hoursAndMinutesLeft, + }); } - return 'in some time'; + return this.$t('REPLY_TIME.BACK_IN_SOME_TIME'); }, timeLeftToBackInOnline() { if ( @@ -163,14 +159,19 @@ export default { 'days', this.languageCode ); - return `${hourRelative}`; + return this.$t('REPLY_TIME.WILL_BE_BACK', { + time: hourRelative, + }); } if ( this.dayDiff >= 1 && this.presentHour >= this.currentDayTimings.closeHour ) { - return `on ${this.dayNameOfNextWorkingDay}`; + return this.$t('REPLY_TIME.BACK_ON', { + day: this.dayNameOfNextWorkingDay, + }); } + return this.hoursAndMinutesToBack; }, }, diff --git a/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js index 78eef4438ec6..28663e06c2d9 100644 --- a/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js +++ b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js @@ -1,6 +1,13 @@ import { createWrapper } from '@vue/test-utils'; import nextAvailabilityTimeMixin from '../nextAvailabilityTime'; import Vue from 'vue'; +import i18n from 'widget/i18n'; +import VueI18n from 'vue-i18n'; +Vue.use(VueI18n); +const i18nConfig = new VueI18n({ + locale: 'en', + messages: i18n, +}); describe('nextAvailabilityTimeMixin', () => { const chatwootWebChannel = { @@ -383,6 +390,7 @@ describe('nextAvailabilityTimeMixin', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -410,13 +418,16 @@ describe('nextAvailabilityTimeMixin', () => { 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'); + expect(wrapper.vm.timeLeftToBackInOnline).toBe( + 'We will be back online in 30 minutes' + ); }); it('should return in 3 hours', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -441,13 +452,16 @@ describe('nextAvailabilityTimeMixin', () => { 'Saturday', ]; chatwootWebChannel.workingHours[4].open_hour = 19; - expect(wrapper.vm.timeLeftToBackInOnline).toBe('in 2 hours'); + expect(wrapper.vm.timeLeftToBackInOnline).toBe( + 'We will be back online in 2 hours' + ); }); it('should return at 10:00 AM', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -472,13 +486,16 @@ describe('nextAvailabilityTimeMixin', () => { 'Saturday', ]; chatwootWebChannel.workingHours[4].open_hour = 10; - expect(wrapper.vm.timeLeftToBackInOnline).toBe('at 10:00 AM'); + expect(wrapper.vm.timeLeftToBackInOnline).toBe( + 'We will be back online at 10:00 AM' + ); }); it('should return tomorrow', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -504,13 +521,16 @@ describe('nextAvailabilityTimeMixin', () => { ]; chatwootWebChannel.workingHours[4].open_hour = 9; chatwootWebChannel.workingHours[4].close_hour = 16; - expect(wrapper.vm.timeLeftToBackInOnline).toBe('tomorrow'); + expect(wrapper.vm.timeLeftToBackInOnline).toBe( + 'We will be back online tomorrow' + ); }); it('should return on Saturday', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -538,6 +558,8 @@ describe('nextAvailabilityTimeMixin', () => { 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'); + expect(wrapper.vm.timeLeftToBackInOnline).toBe( + 'We will be back online on Saturday' + ); }); });