feat: Display reply time in widget (#1349)

Fixes #1132

app/javascript/widget/mixins/agentMixin.js

@@ -1,24 +0,0 @@
-export default {
-  methods: {
-    getAvailableAgentsText(agents) {
-      const count = agents.length;
-      if (count === 1) {
-        const [agent] = agents;
-        return `${agent.name} ${this.$t('AGENT_AVAILABILITY.IS_AVAILABLE')}`;
-      }
-
-      if (count === 2) {
-        const [first, second] = agents;
-        return `${first.name} ${this.$t('AGENT_AVAILABILITY.AND')} ${
-          second.name
-        } ${this.$t('AGENT_AVAILABILITY.ARE_AVAILABLE')}`;
-      }
-
-      const [agent] = agents;
-      const rest = agents.length - 1;
-      return `${agent.name} ${this.$t(
-        'AGENT_AVAILABILITY.AND'
-      )} ${rest} ${this.$t('AGENT_AVAILABILITY.OTHERS_ARE_AVAILABLE')}`;
-    },
-  },
-};

app/javascript/widget/mixins/configMixin.js

@@ -21,5 +21,20 @@ export default {
     hasAttachmentsEnabled() {
       return this.channelConfig.enabledFeatures.includes('attachments');
     },
+    replyTime() {
+      return window.chatwootWebChannel.replyTime;
+    },
+    replyTimeStatus() {
+      switch (this.replyTime) {
+        case 'in_a_few_minutes':
+          return this.$t('REPLY_TIME.IN_A_FEW_MINUTES');
+        case 'in_a_few_hours':
+          return this.$t('REPLY_TIME.IN_A_FEW_HOURS');
+        case 'in_a_day':
+          return this.$t('REPLY_TIME.IN_A_DAY');
+        default:
+          return this.$t('REPLY_TIME.IN_A_FEW_HOURS');
+      }
+    },
   },
 };

app/javascript/widget/mixins/specs/agentMixin.spec.js

@@ -1,49 +0,0 @@
-import { createWrapper } from '@vue/test-utils';
-import agentMixin from '../agentMixin';
-import Vue from 'vue';
-
-const translations = {
-  'AGENT_AVAILABILITY.IS_AVAILABLE': 'is available',
-  'AGENT_AVAILABILITY.ARE_AVAILABLE': 'are available',
-  'AGENT_AVAILABILITY.OTHERS_ARE_AVAILABLE': 'others are available',
-  'AGENT_AVAILABILITY.AND': 'and',
-};
-
-const TestComponent = {
-  render() {},
-  title: 'TestComponent',
-  mixins: [agentMixin],
-  methods: {
-    $t(key) {
-      return translations[key];
-    },
-  },
-};
-
-describe('agentMixin', () => {
-  test('returns correct text', () => {
-    const Constructor = Vue.extend(TestComponent);
-    const vm = new Constructor().$mount();
-    const wrapper = createWrapper(vm);
-
-    expect(wrapper.vm.getAvailableAgentsText([{ name: 'Pranav' }])).toEqual(
-      'Pranav is available'
-    );
-
-    expect(
-      wrapper.vm.getAvailableAgentsText([
-        { name: 'Pranav' },
-        { name: 'Nithin' },
-      ])
-    ).toEqual('Pranav and Nithin are available');
-
-    expect(
-      wrapper.vm.getAvailableAgentsText([
-        { name: 'Pranav' },
-        { name: 'Nithin' },
-        { name: 'Subin' },
-        { name: 'Sojan' },
-      ])
-    ).toEqual('Pranav and 3 others are available');
-  });
-});

app/javascript/widget/mixins/teamAvailabilityMixin.js

@@ -0,0 +1,10 @@
+export default {
+  computed: {
+    teamAvailabilityStatus() {
+      if (this.availableAgents.length) {
+        return this.$t('TEAM_AVAILABILITY.ONLINE');
+      }
+      return this.$t('TEAM_AVAILABILITY.OFFLINE');
+    },
+  },
+};