From 32291f4f7d0dd4262ff0ef0932d5a7417556a3d8 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 22 Jul 2022 13:14:17 +0530
Subject: [PATCH] fix: Update browser_language logic to include all languages
 (#5090)

---
 .../api/v1/widget/base_controller.rb          |   5 +-
 .../advancedFilterItems/languages.js          | 714 ++++++++++++++++--
 .../{ => specs}/advancedFilterItems.spec.js   |   4 +-
 .../specs/languages.spec.js                   |  10 +
 .../dashboard/i18n/locale/en/contact.json     |   1 +
 .../conversation/ConversationInfo.vue         |  10 +
 6 files changed, 688 insertions(+), 56 deletions(-)
 rename app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/{ => specs}/advancedFilterItems.spec.js (71%)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/languages.spec.js

diff --git a/app/controllers/api/v1/widget/base_controller.rb b/app/controllers/api/v1/widget/base_controller.rb
index d854114c4324..9ec702e6c347 100644
--- a/app/controllers/api/v1/widget/base_controller.rb
+++ b/app/controllers/api/v1/widget/base_controller.rb
@@ -36,9 +36,10 @@ def conversation_params
       contact_id: @contact.id,
       contact_inbox_id: @contact_inbox.id,
       additional_attributes: {
+        browser_language: browser.accept_language&.first&.code,
         browser: browser_params,
-        referer: permitted_params[:message][:referer_url],
-        initiated_at: timestamp_params
+        initiated_at: timestamp_params,
+        referer: permitted_params[:message][:referer_url]
       },
       custom_attributes: permitted_params[:custom_attributes].presence || {}
     }
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
index 093eda3b94eb..31529f0c76b6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
@@ -1,132 +1,742 @@
 const languages = [
   {
-    id: 'eng',
-    name: 'English (en)',
+    name: 'Abkhazian',
+    id: 'ab',
   },
   {
+    name: 'Afar',
+    id: 'aa',
+  },
+  {
+    name: 'Afrikaans',
+    id: 'af',
+  },
+  {
+    name: 'Akan',
+    id: 'ak',
+  },
+  {
+    name: 'Albanian',
+    id: 'sq',
+  },
+  {
+    name: 'Amharic',
+    id: 'am',
+  },
+  {
+    name: 'Arabic',
     id: 'ar',
-    name: 'العربية (ar)',
   },
   {
+    name: 'Aragonese',
+    id: 'an',
+  },
+  {
+    name: 'Armenian',
+    id: 'hy',
+  },
+  {
+    name: 'Assamese',
+    id: 'as',
+  },
+  {
+    name: 'Avaric',
+    id: 'av',
+  },
+  {
+    name: 'Avestan',
+    id: 'ae',
+  },
+  {
+    name: 'Aymara',
+    id: 'ay',
+  },
+  {
+    name: 'Azerbaijani',
+    id: 'az',
+  },
+  {
+    name: 'Bambara',
+    id: 'bm',
+  },
+  {
+    name: 'Bashkir',
+    id: 'ba',
+  },
+  {
+    name: 'Basque',
+    id: 'eu',
+  },
+  {
+    name: 'Belarusian',
+    id: 'be',
+  },
+  {
+    name: 'Bengali',
+    id: 'bn',
+  },
+  {
+    name: 'Bislama',
+    id: 'bi',
+  },
+  {
+    name: 'Bosnian',
+    id: 'bs',
+  },
+  {
+    name: 'Breton',
+    id: 'br',
+  },
+  {
+    name: 'Bulgarian',
+    id: 'bg',
+  },
+  {
+    name: 'Burmese',
+    id: 'my',
+  },
+  {
+    name: 'Catalan',
+    id: 'ca',
+  },
+  {
+    name: 'Chamorro',
+    id: 'ch',
+  },
+  {
+    name: 'Chechen',
+    id: 'ce',
+  },
+  {
+    name: 'Chichewa',
+    id: 'ny',
+  },
+  {
+    name: 'Chinese',
+    id: 'zh',
+  },
+  {
+    name: 'Church Slavonic',
+    id: 'cu',
+  },
+  {
+    name: 'Chuvash',
+    id: 'cv',
+  },
+  {
+    name: 'Cornish',
+    id: 'kw',
+  },
+  {
+    name: 'Corsican',
+    id: 'co',
+  },
+  {
+    name: 'Cree',
+    id: 'cr',
+  },
+  {
+    name: 'Croatian',
+    id: 'hr',
+  },
+  {
+    name: 'Czech',
+    id: 'cs',
+  },
+  {
+    name: 'Danish',
+    id: 'da',
+  },
+  {
+    name: 'Divehi',
+    id: 'dv',
+  },
+  {
+    name: 'Dutch',
     id: 'nl',
-    name: 'Nederlands (nl)',
   },
   {
+    name: 'Dzongkha',
+    id: 'dz',
+  },
+  {
+    name: 'English',
+    id: 'en',
+  },
+  {
+    name: 'Esperanto',
+    id: 'eo',
+  },
+  {
+    name: 'Estonian',
+    id: 'et',
+  },
+  {
+    name: 'Ewe',
+    id: 'ee',
+  },
+  {
+    name: 'Faroese',
+    id: 'fo',
+  },
+  {
+    name: 'Fijian',
+    id: 'fj',
+  },
+  {
+    name: 'Finnish',
+    id: 'fi',
+  },
+  {
+    name: 'French',
     id: 'fr',
-    name: 'Français (fr)',
   },
   {
+    name: 'Western Frisian',
+    id: 'fy',
+  },
+  {
+    name: 'Fulah',
+    id: 'ff',
+  },
+  {
+    name: 'Gaelic',
+    id: 'gd',
+  },
+  {
+    name: 'Galician',
+    id: 'gl',
+  },
+  {
+    name: 'Ganda',
+    id: 'lg',
+  },
+  {
+    name: 'Georgian',
+    id: 'ka',
+  },
+  {
+    name: 'German',
     id: 'de',
-    name: 'Deutsch (de)',
   },
   {
-    id: 'हिन्दी (hi)',
-    name: 'hi',
+    name: 'Greek',
+    id: 'el',
+  },
+  {
+    name: 'Kalaallisut',
+    id: 'kl',
+  },
+  {
+    name: 'Guarani',
+    id: 'gn',
+  },
+  {
+    name: 'Gujarati',
+    id: 'gu',
+  },
+  {
+    name: 'Haitian',
+    id: 'ht',
+  },
+  {
+    name: 'Hausa',
+    id: 'ha',
   },
   {
+    name: 'Hebrew',
+    id: 'he',
+  },
+  {
+    name: 'Herero',
+    id: 'hz',
+  },
+  {
+    name: 'Hindi',
+    id: 'hi',
+  },
+  {
+    name: 'Hiri Motu',
+    id: 'ho',
+  },
+  {
+    name: 'Hungarian',
+    id: 'hu',
+  },
+  {
+    name: 'Icelandic',
+    id: 'is',
+  },
+  {
+    name: 'Ido',
+    id: 'io',
+  },
+  {
+    name: 'Igbo',
+    id: 'ig',
+  },
+  {
+    name: 'Indonesian',
+    id: 'id',
+  },
+  {
+    name: 'Interlingua',
+    id: 'ia',
+  },
+  {
+    name: 'Interlingue',
+    id: 'ie',
+  },
+  {
+    name: 'Inuktitut',
+    id: 'iu',
+  },
+  {
+    name: 'Inupiaq',
+    id: 'ik',
+  },
+  {
+    name: 'Irish',
+    id: 'ga',
+  },
+  {
+    name: 'Italian',
     id: 'it',
-    name: 'Italiano (it)',
   },
   {
+    name: 'Japanese',
     id: 'ja',
-    name: '日本語 (ja)',
   },
   {
+    name: 'Javanese',
+    id: 'jv',
+  },
+  {
+    name: 'Kannada',
+    id: 'kn',
+  },
+  {
+    name: 'Kanuri',
+    id: 'kr',
+  },
+  {
+    name: 'Kashmiri',
+    id: 'ks',
+  },
+  {
+    name: 'Kazakh',
+    id: 'kk',
+  },
+  {
+    name: 'Central Khmer',
+    id: 'km',
+  },
+  {
+    name: 'Kikuyu',
+    id: 'ki',
+  },
+  {
+    name: 'Kinyarwanda',
+    id: 'rw',
+  },
+  {
+    name: 'Kirghiz',
+    id: 'ky',
+  },
+  {
+    name: 'Komi',
+    id: 'kv',
+  },
+  {
+    name: 'Kongo',
+    id: 'kg',
+  },
+  {
+    name: 'Korean',
     id: 'ko',
-    name: '한국어 (ko)',
   },
   {
+    name: 'Kuanyama',
+    id: 'kj',
+  },
+  {
+    name: 'Kurdish',
+    id: 'ku',
+  },
+  {
+    name: 'Lao',
+    id: 'lo',
+  },
+  {
+    name: 'Latin',
+    id: 'la',
+  },
+  {
+    name: 'Latvian',
+    id: 'lv',
+  },
+  {
+    name: 'Limburgan',
+    id: 'li',
+  },
+  {
+    name: 'Lingala',
+    id: 'ln',
+  },
+  {
+    name: 'Lithuanian',
+    id: 'lt',
+  },
+  {
+    name: 'Luba-Katanga',
+    id: 'lu',
+  },
+  {
+    name: 'Luxembourgish',
+    id: 'lb',
+  },
+  {
+    name: 'Macedonian',
+    id: 'mk',
+  },
+  {
+    name: 'Malagasy',
+    id: 'mg',
+  },
+  {
+    name: 'Malay',
+    id: 'ms',
+  },
+  {
+    name: 'Malayalam',
+    id: 'ml',
+  },
+  {
+    name: 'Maltese',
+    id: 'mt',
+  },
+  {
+    name: 'Manx',
+    id: 'gv',
+  },
+  {
+    name: 'Maori',
+    id: 'mi',
+  },
+  {
+    name: 'Marathi',
+    id: 'mr',
+  },
+  {
+    name: 'Marshallese',
+    id: 'mh',
+  },
+  {
+    name: 'Mongolian',
+    id: 'mn',
+  },
+  {
+    name: 'Nauru',
+    id: 'na',
+  },
+  {
+    name: 'Navajo',
+    id: 'nv',
+  },
+  {
+    name: 'North Ndebele',
+    id: 'nd',
+  },
+  {
+    name: 'South Ndebele',
+    id: 'nr',
+  },
+  {
+    name: 'Ndonga',
+    id: 'ng',
+  },
+  {
+    name: 'Nepali',
+    id: 'ne',
+  },
+  {
+    name: 'Norwegian',
+    id: 'no',
+  },
+  {
+    name: 'Norwegian Bokmål',
+    id: 'nb',
+  },
+  {
+    name: 'Norwegian Nynorsk',
+    id: 'nn',
+  },
+  {
+    name: 'Sichuan Yi',
+    id: 'ii',
+  },
+  {
+    name: 'Occitan',
+    id: 'oc',
+  },
+  {
+    name: 'Ojibwa',
+    id: 'oj',
+  },
+  {
+    name: 'Oriya',
+    id: 'or',
+  },
+  {
+    name: 'Oromo',
+    id: 'om',
+  },
+  {
+    name: 'Ossetian',
+    id: 'os',
+  },
+  {
+    name: 'Pali',
+    id: 'pi',
+  },
+  {
+    name: 'Pashto, Pushto',
+    id: 'ps',
+  },
+  {
+    name: 'Persian',
+    id: 'fa',
+  },
+  {
+    name: 'Polish',
+    id: 'pl',
+  },
+  {
+    name: 'Portuguese',
     id: 'pt',
-    name: 'Português (pt)',
   },
   {
+    name: 'Punjabi',
+    id: 'pa',
+  },
+  {
+    name: 'Quechua',
+    id: 'qu',
+  },
+  {
+    name: 'Romanian',
+    id: 'ro',
+  },
+  {
+    name: 'Romansh',
+    id: 'rm',
+  },
+  {
+    name: 'Rundi',
+    id: 'rn',
+  },
+  {
+    name: 'Russian',
     id: 'ru',
-    name: 'русский (ru)',
   },
   {
-    id: 'zh',
-    name: '中文 (zh)',
+    name: 'Northern Sami',
+    id: 'se',
+  },
+  {
+    name: 'Samoan',
+    id: 'sm',
+  },
+  {
+    name: 'Sango',
+    id: 'sg',
+  },
+  {
+    name: 'Sanskrit',
+    id: 'sa',
+  },
+  {
+    name: 'Sardinian',
+    id: 'sc',
+  },
+  {
+    name: 'Serbian',
+    id: 'sr',
+  },
+  {
+    name: 'Shona',
+    id: 'sn',
+  },
+  {
+    name: 'Sindhi',
+    id: 'sd',
+  },
+  {
+    name: 'Sinhala',
+    id: 'si',
+  },
+  {
+    name: 'Slovak',
+    id: 'sk',
+  },
+  {
+    name: 'Slovenian',
+    id: 'sl',
   },
   {
+    name: 'Somali',
+    id: 'so',
+  },
+  {
+    name: 'Southern Sotho',
+    id: 'st',
+  },
+  {
+    name: 'Spanish',
     id: 'es',
-    name: 'Español (es)',
   },
   {
-    id: 'ml',
-    name: 'മലയാളം (ml)',
+    name: 'Sundanese',
+    id: 'su',
   },
   {
-    id: 'ca',
-    name: 'Català (ca)',
+    name: 'Swahili',
+    id: 'sw',
   },
   {
-    id: 'el',
-    name: 'ελληνικά (el)',
+    name: 'Swati',
+    id: 'ss',
   },
   {
-    id: 'pt-BR',
-    name: 'Português Brasileiro (pt-BR)',
+    name: 'Swedish',
+    id: 'sv',
   },
   {
-    id: 'ro',
-    name: 'Română (ro)',
+    name: 'Tagalog',
+    id: 'tl',
   },
   {
+    name: 'Tahitian',
+    id: 'ty',
+  },
+  {
+    name: 'Tajik',
+    id: 'tg',
+  },
+  {
+    name: 'Tamil',
     id: 'ta',
-    name: 'தமிழ் (ta)',
   },
   {
-    id: 'fa',
-    name: 'فارسی (fa)',
+    name: 'Tatar',
+    id: 'tt',
   },
   {
-    id: 'zh-TW',
-    name: '中文 (台湾) (zh-TW)',
+    name: 'Telugu',
+    id: 'te',
   },
   {
-    id: 'vi',
-    name: 'Tiếng Việt (vi)',
+    name: 'Thai',
+    id: 'th',
   },
   {
-    id: 'da',
-    name: 'dansk (da)',
+    name: 'Tibetan',
+    id: 'bo',
   },
   {
+    name: 'Tigrinya',
+    id: 'ti',
+  },
+  {
+    name: 'Tonga',
+    id: 'to',
+  },
+  {
+    name: 'Tsonga',
+    id: 'ts',
+  },
+  {
+    name: 'Tswana',
+    id: 'tn',
+  },
+  {
+    name: 'Turkish',
     id: 'tr',
-    name: 'Türkçe (tr)',
   },
   {
-    id: 'cs',
-    name: 'čeština (cs)',
+    name: 'Turkmen',
+    id: 'tk',
   },
   {
-    id: 'fi',
-    name: 'suomi, suomen kieli (fi)',
+    name: 'Twi',
+    id: 'tw',
   },
   {
-    id: 'id',
-    name: 'Bahasa Indonesia (id)',
+    name: 'Uighur',
+    id: 'ug',
   },
   {
-    id: 'sv',
-    name: 'Svenska (sv)',
+    name: 'Ukrainian',
+    id: 'uk',
   },
   {
-    id: 'hu',
-    name: 'magyar nyelv (hu)',
+    name: 'Urdu',
+    id: 'ur',
   },
   {
-    id: 'no',
-    name: 'norsk (no)',
+    name: 'Uzbek',
+    id: 'uz',
   },
   {
-    id: 'zh-CN',
-    name: '中文 (zh-CN)',
+    name: 'Venda',
+    id: 've',
   },
   {
-    id: 'pl',
-    name: 'język polski (pl)',
+    name: 'Vietnamese',
+    id: 'vi',
+  },
+  {
+    name: 'Volapük',
+    id: 'vo',
+  },
+  {
+    name: 'Walloon',
+    id: 'wa',
+  },
+  {
+    name: 'Welsh',
+    id: 'cy',
+  },
+  {
+    name: 'Wolof',
+    id: 'wo',
+  },
+  {
+    name: 'Xhosa',
+    id: 'xh',
+  },
+  {
+    name: 'Yiddish',
+    id: 'yi',
+  },
+  {
+    name: 'Yoruba',
+    id: 'yo',
+  },
+  {
+    name: 'Zhuang, Chuang',
+    id: 'za',
+  },
+  {
+    name: 'Zulu',
+    id: 'zu',
   },
 ];
 
+export const getLanguageName = (languageCode = '') => {
+  const languageObj =
+    languages.find(language => language.id === languageCode) || {};
+  return languageObj.name || '';
+};
+
 export default languages;
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/advancedFilterItems.spec.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/advancedFilterItems.spec.js
similarity index 71%
rename from app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/advancedFilterItems.spec.js
rename to app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/advancedFilterItems.spec.js
index 69eafa994872..2132ebaf2c57 100644
--- a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/advancedFilterItems.spec.js
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/advancedFilterItems.spec.js
@@ -1,5 +1,5 @@
-import defaultFilters from './index';
-import { filterAttributeGroups } from './index';
+import defaultFilters from '../index';
+import { filterAttributeGroups } from '../index';
 
 describe('#filterItems', () => {
   it('Matches the correct filterItems', () => {
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/languages.spec.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/languages.spec.js
new file mode 100644
index 000000000000..52bc981fd852
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/specs/languages.spec.js
@@ -0,0 +1,10 @@
+import { getLanguageName } from '../languages';
+
+describe('#getLanguageName', () => {
+  it('Returns correct language name', () => {
+    expect(getLanguageName('es')).toEqual('Spanish');
+    expect(getLanguageName()).toEqual('');
+    expect(getLanguageName('rrr')).toEqual('');
+    expect(getLanguageName('')).toEqual('');
+  });
+});
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 2833e37d8578..0bc399ba1ec8 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -6,6 +6,7 @@
     "COPY_SUCCESSFUL": "Copied to clipboard successfully",
     "COMPANY": "Company",
     "LOCATION": "Location",
+    "BROWSER_LANGUAGE": "Browser Language",
     "CONVERSATION_TITLE": "Conversation Details",
     "VIEW_PROFILE": "View Profile",
     "BROWSER": "Browser",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 07883b08a4f1..16a41cc945e2 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -6,6 +6,12 @@
       :value="initiatedAt.timestamp"
       class="conversation--attribute"
     />
+    <contact-details-item
+      v-if="browserLanguage"
+      :title="$t('CONTACT_PANEL.BROWSER_LANGUAGE')"
+      :value="browserLanguage"
+      class="conversation--attribute"
+    />
     <contact-details-item
       v-if="referer"
       :title="$t('CONTACT_PANEL.INITIATED_FROM')"
@@ -44,6 +50,7 @@
 </template>
 
 <script>
+import { getLanguageName } from '../../../components/widgets/conversation/advancedFilterItems/languages';
 import ContactDetailsItem from './ContactDetailsItem.vue';
 import CustomAttributes from './customAttributes/CustomAttributes.vue';
 import CustomAttributeSelector from './customAttributes/CustomAttributeSelector.vue';
@@ -103,6 +110,9 @@ export default {
       } = this.conversationAttributes.browser;
       return `${browserName} ${browserVersion}`;
     },
+    browserLanguage() {
+      return getLanguageName(this.conversationAttributes.browser_language);
+    },
     platformName() {
       if (!this.conversationAttributes.browser) {
         return '';