fix: Update the translation for the text used in isTyping method (c…

…hatwoot#10384)

This fix consists of translating the message when another user is typing on the other side.
---
Co-authored-by: Pranav <[email protected]>
Co-authored-by: Pranav <[email protected]>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -138,10 +138,9 @@ export default {
     },
     typingUserNames() {
       const userList = this.typingUsersList;
-
       if (this.isAnyoneTyping) {
-        const userListAsName = getTypingUsersText(userList);
-        return userListAsName;
+        const [i18nKey, params] = getTypingUsersText(userList);
+        return this.$t(i18nKey, params);
       }
 
       return '';

app/javascript/dashboard/helper/commons.js

@@ -27,19 +27,20 @@ export const isJSONValid = value => {
 
 export const getTypingUsersText = (users = []) => {
   const count = users.length;
+  const [firstUser, secondUser] = users;
+
   if (count === 1) {
-    const [user] = users;
-    return `${user.name} is typing`;
+    return ['TYPING.ONE', { user: firstUser.name }];
   }
 
   if (count === 2) {
-    const [first, second] = users;
-    return `${first.name} and ${second.name} are typing`;
+    return [
+      'TYPING.TWO',
+      { user: firstUser.name, secondUser: secondUser.name },
+    ];
   }
 
-  const [user] = users;
-  const rest = users.length - 1;
-  return `${user.name} and ${rest} others are typing`;
+  return ['TYPING.MULTIPLE', { user: firstUser.name, count: count - 1 }];
 };
 
 export const createPendingMessage = data => {

app/javascript/dashboard/helper/specs/commons.spec.js

@@ -8,15 +8,16 @@ import {
 
 describe('#getTypingUsersText', () => {
   it('returns the correct text is there is only one typing user', () => {
-    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual(
-      'Pranav is typing'
-    );
+    expect(getTypingUsersText([{ name: 'Pranav' }])).toEqual([
+      'TYPING.ONE',
+      { user: 'Pranav' },
+    ]);
   });
 
   it('returns the correct text is there are two typing users', () => {
     expect(
       getTypingUsersText([{ name: 'Pranav' }, { name: 'Nithin' }])
-    ).toEqual('Pranav and Nithin are typing');
+    ).toEqual(['TYPING.TWO', { user: 'Pranav', secondUser: 'Nithin' }]);
   });
 
   it('returns the correct text is there are more than two users are typing', () => {
@@ -27,7 +28,7 @@ describe('#getTypingUsersText', () => {
         { name: 'Subin' },
         { name: 'Sojan' },
       ])
-    ).toEqual('Pranav and 3 others are typing');
+    ).toEqual(['TYPING.MULTIPLE', { user: 'Pranav', count: 3 }]);
   });
 });
 

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Original Content",
     "TRANSLATED_CONTENT": "Translated Content",
     "NO_TRANSLATIONS_AVAILABLE": "No translations are available for this content"
+  },
+  "TYPING": {
+    "ONE": "{user} is typing",
+    "TWO": "{user} and {secondUser} are typing",
+    "MULTIPLE": "{user} and {count} others are typing"
   }
 }

app/javascript/dashboard/i18n/locale/pt_BR/conversation.json

@@ -335,5 +335,10 @@
     "ORIGINAL_CONTENT": "Conteúdo original",
     "TRANSLATED_CONTENT": "Conteúdo traduzido",
     "NO_TRANSLATIONS_AVAILABLE": "Nenhuma tradução está disponível para este conteúdo"
+  },
+  "TYPING": {
+    "ONE": "{user} está digitando",
+    "TWO": "{user} e {secondUser} estão digitando",
+    "MULTIPLE": "{user} e {count} outros estão digitando"
   }
 }