chore: review fixes

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

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

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

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