fix: Widget away text translations

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

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

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

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