From 9dd40532a764e6ecd43f3339bd05361e85f57edf Mon Sep 17 00:00:00 2001 From: Muhsin Keloth Date: Wed, 13 Mar 2024 13:00:25 +0530 Subject: [PATCH] chore: review fixes --- app/javascript/widget/i18n/locale/en.json | 9 ++--- app/javascript/widget/mixins/availability.js | 2 +- .../widget/mixins/nextAvailabilityTime.js | 33 +++++++++---------- .../mixins/specs/nextAvailabilityTime.spec.js | 23 ++++++++++--- 4 files changed, 39 insertions(+), 28 deletions(-) diff --git a/app/javascript/widget/i18n/locale/en.json b/app/javascript/widget/i18n/locale/en.json index 69f759430..afb049aa5 100644 --- a/app/javascript/widget/i18n/locale/en.json +++ b/app/javascript/widget/i18n/locale/en.json @@ -20,10 +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", - "BACK_AT": "at", - "BACK_ON": "on", - "BACK_IN_SOME_TIME": "in some time" + "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 746a5e095..7dd8725d7 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 94576522a..2e8395981 100644 --- a/app/javascript/widget/mixins/nextAvailabilityTime.js +++ b/app/javascript/widget/mixins/nextAvailabilityTime.js @@ -112,7 +112,9 @@ export default { exactTimeInAmPm() { return `${ this.timeSlot.day === this.currentDay - ? `${this.$t('REPLY_TIME.BACK_AT')} ${this.timeSlot.from}` + ? this.$t('REPLY_TIME.BACK_AT', { + time: this.timeSlot.from, + }) : '' }`; }, @@ -123,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(' '); @@ -151,7 +143,9 @@ export default { return this.exactTimeInAmPm; } if (hoursLeft > 0 || minutesLeft > 0) { - return this.hoursAndMinutesLeft; + return this.$t('REPLY_TIME.BACK_IN', { + time: this.hoursAndMinutesLeft, + }); } return this.$t('REPLY_TIME.BACK_IN_SOME_TIME'); }, @@ -165,16 +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 `${this.$t('REPLY_TIME.BACK_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 6356431bf..28663e06c 100644 --- a/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js +++ b/app/javascript/widget/mixins/specs/nextAvailabilityTime.spec.js @@ -390,6 +390,7 @@ describe('nextAvailabilityTimeMixin', () => { const Component = { render() {}, mixins: [nextAvailabilityTimeMixin], + i18n: i18nConfig, }; jest .useFakeTimers('modern') @@ -417,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') @@ -448,7 +452,9 @@ 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', () => { @@ -480,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') @@ -512,7 +521,9 @@ 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', () => { @@ -547,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' + ); }); });