Feature: As an end-user, I should be able to see the list of agents in the widget. (#461)

Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>

app/javascript/widget/helpers/specs/utils.spec.js

@@ -0,0 +1,26 @@
+import { getAvailableAgentsText } from '../utils';
+
+describe('#getAvailableAgentsText', () => {
+  it('returns the correct text is there is only one online agent', () => {
+    expect(getAvailableAgentsText([{ name: 'Pranav' }])).toEqual(
+      'Pranav is available'
+    );
+  });
+
+  it('returns the correct text is there are two online agents', () => {
+    expect(
+      getAvailableAgentsText([{ name: 'Pranav' }, { name: 'Nithin' }])
+    ).toEqual('Pranav and Nithin is available');
+  });
+
+  it('returns the correct text is there are more than two online agents', () => {
+    expect(
+      getAvailableAgentsText([
+        { name: 'Pranav' },
+        { name: 'Nithin' },
+        { name: 'Subin' },
+        { name: 'Sojan' },
+      ])
+    ).toEqual('Pranav and 3 others are available');
+  });
+});

app/javascript/widget/helpers/utils.js

@@ -18,3 +18,20 @@ export const IFrameHelper = {
     );
   },
 };
+
+export const getAvailableAgentsText = (agents = []) => {
+  const count = agents.length;
+  if (count === 1) {
+    const [agent] = agents;
+    return `${agent.name} is available`;
+  }
+
+  if (count === 2) {
+    const [first, second] = agents;
+    return `${first.name} and ${second.name} is available`;
+  }
+
+  const [agent] = agents;
+  const rest = agents.length - 1;
+  return `${agent.name} and ${rest} others are available`;
+};