Chore: Add translated languages to account settings (#826)

* Add available languages in account settings

Co-authored-by: Sojan <sojan@pepalo.com>

app/controllers/api/v1/widget/base_controller.rb

@@ -18,6 +18,7 @@ class Api::V1::Widget::BaseController < ApplicationController
   def set_web_widget
     @web_widget = ::Channel::WebWidget.find_by!(website_token: permitted_params[:website_token])
     @account = @web_widget.account
+    switch_locale @account
   end
 
   def set_contact

app/controllers/application_controller.rb

@@ -24,9 +24,14 @@ class ApplicationController < ActionController::Base
     elsif @resource&.is_a?(AgentBot)
       account_accessible_for_bot?(account)
     end
+    switch_locale account
     account
   end
 
+  def switch_locale(account)
+    I18n.locale = (I18n.available_locales.map(&:to_s).include?(account.locale) ? account.locale : nil) || I18n.default_locale
+  end
+
   def account_accessible_for_user?(account)
     render_unauthorized('You are not authorized to access this account') unless account.account_users.find_by(user_id: current_user.id)
   end

app/helpers/application_helper.rb

@@ -1,2 +1,5 @@
 module ApplicationHelper
+  def available_locales_with_name
+    LANGUAGES_CONFIG.map { |_key, val| val.slice(:name, :iso_639_1_code) }
+  end
 end

app/javascript/dashboard/i18n/ca.js

@@ -1,37 +0,0 @@
-import en from './locale/ca';
-
-export default {
-  ...en,
-  APP_GLOBAL: {
-    TRIAL_MESSAGE: 'dies de prova restants.',
-    TRAIL_BUTTON: 'Comprar ara',
-  },
-  COMPONENTS: {
-    CODE: {
-      BUTTON_TEXT: 'Copiar',
-      COPY_SUCCESSFUL: 'Codi copiat al porta-retalls correctament',
-    },
-    FILE_BUBBLE: {
-      DOWNLOAD: 'Descarrega',
-      UPLOADING: "S'està pujant...",
-    },
-  },
-  CONFIRM_EMAIL: "S'està verificant...",
-  SETTINGS: {
-    INBOXES: {
-      NEW_INBOX: "Afegeix una safata d'entrada",
-    },
-  },
-  SIDEBAR: {
-    CONVERSATIONS: 'Conversacions',
-    REPORTS: 'Informes',
-    SETTINGS: 'Configuració',
-    HOME: 'Inici',
-    AGENTS: 'Agents',
-    INBOXES: "Safates d'entrada",
-    CANNED_RESPONSES: 'Respostes Predeterminades',
-    BILLING: 'Facturació',
-    INTEGRATIONS: 'Integracions',
-    ACCOUNT_SETTINGS: 'Configuració del compte',
-  },
-};

app/javascript/dashboard/i18n/de.js

@@ -1,41 +0,0 @@
-import de from './locale/de';
-
-export default {
-  ...de,
-  APP_GLOBAL: {
-    TRIAL_MESSAGE: 'verbleibende Tage Probezeit.',
-    TRAIL_BUTTON: 'Kaufe jetzt',
-  },
-  COMPONENTS: {
-    CODE: {
-      BUTTON_TEXT: 'Kopieren',
-      COPY_SUCCESSFUL: 'Code erfolgreich in die Zwischenablage kopiert',
-    },
-    FILE_BUBBLE: {
-      DOWNLOAD: 'Herunterladen',
-      UPLOADING: 'Hochladen...',
-    },
-
-    FORM_BUBBLE: {
-      SUBMIT: 'Einreichen',
-    },
-  },
-  CONFIRM_EMAIL: 'Überprüfen...',
-  SETTINGS: {
-    INBOXES: {
-      NEW_INBOX: 'Posteingang hinzufügen',
-    },
-  },
-  SIDEBAR: {
-    CONVERSATIONS: 'Gespräche',
-    REPORTS: 'Berichte',
-    SETTINGS: 'Die Einstellungen',
-    HOME: 'Zuhause',
-    AGENTS: 'Agenten',
-    INBOXES: 'Posteingänge',
-    CANNED_RESPONSES: 'Vorgefertigte Antworten',
-    BILLING: 'Abrechnung',
-    INTEGRATIONS: 'Integrationen',
-    ACCOUNT_SETTINGS: 'Kontoeinstellungen',
-  },
-};

app/javascript/dashboard/i18n/en.js

@@ -1,40 +0,0 @@
-import en from './locale/en';
-
-export default {
-  ...en,
-  APP_GLOBAL: {
-    TRIAL_MESSAGE: 'days trial remaining.',
-    TRAIL_BUTTON: 'Buy Now',
-  },
-  COMPONENTS: {
-    CODE: {
-      BUTTON_TEXT: 'Copy',
-      COPY_SUCCESSFUL: 'Code copied to clipboard successfully',
-    },
-    FILE_BUBBLE: {
-      DOWNLOAD: 'Download',
-      UPLOADING: 'Uploading...',
-    },
-    FORM_BUBBLE: {
-      SUBMIT: 'Submit',
-    },
-  },
-  CONFIRM_EMAIL: 'Verifying...',
-  SETTINGS: {
-    INBOXES: {
-      NEW_INBOX: 'Add Inbox',
-    },
-  },
-  SIDEBAR: {
-    CONVERSATIONS: 'Conversations',
-    REPORTS: 'Reports',
-    SETTINGS: 'Settings',
-    HOME: 'Home',
-    AGENTS: 'Agents',
-    INBOXES: 'Inboxes',
-    CANNED_RESPONSES: 'Canned Responses',
-    BILLING: 'Billing',
-    INTEGRATIONS: 'Integrations',
-    ACCOUNT_SETTINGS: 'Account Settings',
-  },
-};

app/javascript/dashboard/i18n/es.js

@@ -1,37 +0,0 @@
-import en from './locale/es';
-
-export default {
-  ...en,
-  APP_GLOBAL: {
-    TRIAL_MESSAGE: 'días de prueba restantes.',
-    TRAIL_BUTTON: 'Comprar ahora',
-  },
-  COMPONENTS: {
-    CODE: {
-      BUTTON_TEXT: 'Copiar',
-      COPY_SUCCESSFUL: 'Código copiado al portapapeles correctamente',
-    },
-    FILE_BUBBLE: {
-      DOWNLOAD: 'Descarga',
-      UPLOADING: 'Se está subiendo...',
-    },
-  },
-  CONFIRM_EMAIL: 'Se está verificando...',
-  SETTINGS: {
-    INBOXES: {
-      NEW_INBOX: 'Añadir bandeja de entrada',
-    },
-  },
-  SIDEBAR: {
-    CONVERSATIONS: 'Conversaciones',
-    REPORTS: 'Informes',
-    SETTINGS: 'Configuración',
-    HOME: 'Inicio',
-    AGENTS: 'Agentes',
-    INBOXES: 'Bandejas de entrada',
-    CANNED_RESPONSES: 'Respuestas Predeterminadas',
-    BILLING: 'Facturación',
-    INTEGRATIONS: 'Integraciones',
-    ACCOUNT_SETTINGS: 'Configuración de la cuenta',
-  },
-};

app/javascript/dashboard/i18n/index.js

@@ -1,11 +1,15 @@
-import ca from './ca';
+import ca from './locale/ca';
-import en from './en';
+import de from './locale/de';
-import de from './de';
+import el from './locale/el';
-import ml from './ml';
+import en from './locale/en';
+import ml from './locale/ml';
+import pt from './locale/pt';
 
 export default {
   ca,
   de,
+  el,
   en,
   ml,
+  pt,
 };

app/javascript/dashboard/i18n/locale/ca/settings.json

@@ -58,5 +58,37 @@
   "SIDEBAR_ITEMS": {
     "PROFILE_SETTINGS": "Configuració del Perfil",
     "LOGOUT": "Sortir"
+  },
+  "APP_GLOBAL": {
+    "TRIAL_MESSAGE": "dies de prova restants.",
+    "TRAIL_BUTTON": "Comprar ara"
+  },
+  "COMPONENTS": {
+    "CODE": {
+      "BUTTON_TEXT": "Copiar",
+      "COPY_SUCCESSFUL": "Codi copiat al porta-retalls correctament"
+    },
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Descarrega",
+      "UPLOADING": "S'està pujant..."
+    }
+  },
+  "CONFIRM_EMAIL": "S'està verificant...",
+  "SETTINGS": {
+    "INBOXES": {
+      "NEW_INBOX": "Afegeix una safata d'entrada"
+    }
+  },
+  "SIDEBAR": {
+    "CONVERSATIONS": "Conversacions",
+    "REPORTS": "Informes",
+    "SETTINGS": "Configuració",
+    "HOME": "Inici",
+    "AGENTS": "Agents",
+    "INBOXES": "Safates d'entrada",
+    "CANNED_RESPONSES": "Respostes Predeterminades",
+    "BILLING": "Facturació",
+    "INTEGRATIONS": "Integracions",
+    "ACCOUNT_SETTINGS": "Configuració del compte"
   }
 }

app/javascript/dashboard/i18n/locale/de/settings.json

@@ -58,5 +58,41 @@
   "SIDEBAR_ITEMS": {
     "PROFILE_SETTINGS": "Profileinstellungen",
     "LOGOUT": "Ausloggen"
+  },
+  "APP_GLOBAL": {
+    "TRIAL_MESSAGE": "verbleibende Tage Probezeit.",
+    "TRAIL_BUTTON": "Kaufe jetzt"
+  },
+  "COMPONENTS": {
+    "CODE": {
+      "BUTTON_TEXT": "Kopieren",
+      "COPY_SUCCESSFUL": "Code erfolgreich in die Zwischenablage kopiert"
+    },
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Herunterladen",
+      "UPLOADING": "Hochladen..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Einreichen"
+    }
+  },
+  "CONFIRM_EMAIL": "Überprüfen...",
+  "SETTINGS": {
+    "INBOXES": {
+      "NEW_INBOX": "Posteingang hinzufügen"
+    }
+  },
+  "SIDEBAR": {
+    "CONVERSATIONS": "Gespräche",
+    "REPORTS": "Berichte",
+    "SETTINGS": "Die Einstellungen",
+    "HOME": "Zuhause",
+    "AGENTS": "Agenten",
+    "INBOXES": "Posteingänge",
+    "CANNED_RESPONSES": "Vorgefertigte Antworten",
+    "BILLING": "Abrechnung",
+    "INTEGRATIONS": "Integrationen",
+    "ACCOUNT_SETTINGS": "Kontoeinstellungen"
   }
+
 }

app/javascript/dashboard/i18n/locale/el/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import { default as _agentMgmt } from './agentMgmt.json';
+import { default as _billing } from './billing.json';
+import { default as _cannedMgmt } from './cannedMgmt.json';
+import { default as _chatlist } from './chatlist.json';
+import { default as _contact } from './contact.json';
+import { default as _conversation } from './conversation.json';
+import { default as _inboxMgmt } from './inboxMgmt.json';
+import { default as _login } from './login.json';
+import { default as _report } from './report.json';
+import { default as _resetPassword } from './resetPassword.json';
+import { default as _setNewPassword } from './setNewPassword.json';
+import { default as _settings } from './settings.json';
+import { default as _signup } from './signup.json';
+import { default as _integrations } from './integrations.json';
+import { default as _generalSettings } from './generalSettings.json';
+
+export default {
+  ..._agentMgmt,
+  ..._billing,
+  ..._cannedMgmt,
+  ..._chatlist,
+  ..._contact,
+  ..._conversation,
+  ..._inboxMgmt,
+  ..._login,
+  ..._report,
+  ..._resetPassword,
+  ..._setNewPassword,
+  ..._settings,
+  ..._signup,
+  ..._integrations,
+  ..._generalSettings,
+};

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

@@ -68,5 +68,40 @@
   "SIDEBAR_ITEMS": {
     "PROFILE_SETTINGS": "Profile Settings",
     "LOGOUT": "Logout"
+  },
+  "APP_GLOBAL": {
+    "TRIAL_MESSAGE": "days trial remaining.",
+    "TRAIL_BUTTON": "Buy Now"
+  },
+  "COMPONENTS": {
+    "CODE": {
+      "BUTTON_TEXT": "Copy",
+      "COPY_SUCCESSFUL": "Code copied to clipboard successfully"
+    },
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Download",
+      "UPLOADING": "Uploading..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Submit"
+    }
+  },
+  "CONFIRM_EMAIL": "Verifying...",
+  "SETTINGS": {
+    "INBOXES": {
+      "NEW_INBOX": "Add Inbox"
+    }
+  },
+  "SIDEBAR": {
+    "CONVERSATIONS": "Conversations",
+    "REPORTS": "Reports",
+    "SETTINGS": "Settings",
+    "HOME": "Home",
+    "AGENTS": "Agents",
+    "INBOXES": "Inboxes",
+    "CANNED_RESPONSES": "Canned Responses",
+    "BILLING": "Billing",
+    "INTEGRATIONS": "Integrations",
+    "ACCOUNT_SETTINGS": "Account Settings"
   }
 }

app/javascript/dashboard/i18n/locale/es/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import { default as _agentMgmt } from './agentMgmt.json';
+import { default as _billing } from './billing.json';
+import { default as _cannedMgmt } from './cannedMgmt.json';
+import { default as _chatlist } from './chatlist.json';
+import { default as _contact } from './contact.json';
+import { default as _conversation } from './conversation.json';
+import { default as _inboxMgmt } from './inboxMgmt.json';
+import { default as _login } from './login.json';
+import { default as _report } from './report.json';
+import { default as _resetPassword } from './resetPassword.json';
+import { default as _setNewPassword } from './setNewPassword.json';
+import { default as _settings } from './settings.json';
+import { default as _signup } from './signup.json';
+import { default as _integrations } from './integrations.json';
+import { default as _generalSettings } from './generalSettings.json';
+
+export default {
+  ..._agentMgmt,
+  ..._billing,
+  ..._cannedMgmt,
+  ..._chatlist,
+  ..._contact,
+  ..._conversation,
+  ..._inboxMgmt,
+  ..._login,
+  ..._report,
+  ..._resetPassword,
+  ..._setNewPassword,
+  ..._settings,
+  ..._signup,
+  ..._integrations,
+  ..._generalSettings,
+};

app/javascript/dashboard/i18n/locale/fr/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import { default as _agentMgmt } from './agentMgmt.json';
+import { default as _billing } from './billing.json';
+import { default as _cannedMgmt } from './cannedMgmt.json';
+import { default as _chatlist } from './chatlist.json';
+import { default as _contact } from './contact.json';
+import { default as _conversation } from './conversation.json';
+import { default as _inboxMgmt } from './inboxMgmt.json';
+import { default as _login } from './login.json';
+import { default as _report } from './report.json';
+import { default as _resetPassword } from './resetPassword.json';
+import { default as _setNewPassword } from './setNewPassword.json';
+import { default as _settings } from './settings.json';
+import { default as _signup } from './signup.json';
+import { default as _integrations } from './integrations.json';
+import { default as _generalSettings } from './generalSettings.json';
+
+export default {
+  ..._agentMgmt,
+  ..._billing,
+  ..._cannedMgmt,
+  ..._chatlist,
+  ..._contact,
+  ..._conversation,
+  ..._inboxMgmt,
+  ..._login,
+  ..._report,
+  ..._resetPassword,
+  ..._setNewPassword,
+  ..._settings,
+  ..._signup,
+  ..._integrations,
+  ..._generalSettings,
+};

app/javascript/dashboard/i18n/locale/ml/settings.json

@@ -58,5 +58,40 @@
   "SIDEBAR_ITEMS": {
     "PROFILE_SETTINGS": "പ്രൊഫൈൽ ക്രമീകരണങ്ങൾ",
     "LOGOUT": "ലോഗൗട്ട്"
+  },
+  "APP_GLOBAL": {
+    "TRIAL_MESSAGE": "ദിവസത്തെ ട്രയൽ ശേഷിക്കുന്നു.",
+    "TRAIL_BUTTON": "ഇപ്പോൾ വാങ്ങുക"
+  },
+  "COMPONENTS": {
+    "CODE": {
+      "BUTTON_TEXT": "പകർത്തുക",
+      "COPY_SUCCESSFUL": "കോഡ് വിജയകരമായി ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തി"
+    },
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "ഡൗൺലോഡുചെയ്യുക",
+      "UPLOADING": "അപ്‌ലോഡുചെയ്യുന്നു..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "സമർപ്പിക്കുക"
+    }
+  },
+  "CONFIRM_EMAIL": "പരിശോധിച്ചുറപ്പിക്കുന്നു...",
+  "SETTINGS": {
+    "INBOXES": {
+      "NEW_INBOX": "ഇൻ‌ബോക്സ് ചേർക്കുക"
+    }
+  },
+  "SIDEBAR": {
+    "CONVERSATIONS": "സംഭാഷണങ്ങൾ",
+    "REPORTS": "റിപ്പോർട്ടുകൾ",
+    "SETTINGS": "ക്രമീകരണങ്ങൾ",
+    "HOME": "ഹോം",
+    "AGENTS": "ഏജന്റുമാർ",
+    "INBOXES": "ഇൻബോക്സുകൾ",
+    "CANNED_RESPONSES": "ക്യാൻഡ് പ്രതികരണങ്ങൾ",
+    "BILLING": "ബില്ലിംഗ്",
+    "INTEGRATIONS": "സംയോജനങ്ങൾ",
+    "ACCOUNT_SETTINGS": "അക്കൗണ്ട് ക്രമീകരണങ്ങൾ"
   }
 }

app/javascript/dashboard/i18n/locale/pt/index.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import { default as _agentMgmt } from './agentMgmt.json';
+import { default as _billing } from './billing.json';
+import { default as _cannedMgmt } from './cannedMgmt.json';
+import { default as _chatlist } from './chatlist.json';
+import { default as _contact } from './contact.json';
+import { default as _conversation } from './conversation.json';
+import { default as _inboxMgmt } from './inboxMgmt.json';
+import { default as _login } from './login.json';
+import { default as _report } from './report.json';
+import { default as _resetPassword } from './resetPassword.json';
+import { default as _setNewPassword } from './setNewPassword.json';
+import { default as _settings } from './settings.json';
+import { default as _signup } from './signup.json';
+import { default as _integrations } from './integrations.json';
+import { default as _generalSettings } from './generalSettings.json';
+
+export default {
+  ..._agentMgmt,
+  ..._billing,
+  ..._cannedMgmt,
+  ..._chatlist,
+  ..._contact,
+  ..._conversation,
+  ..._inboxMgmt,
+  ..._login,
+  ..._report,
+  ..._resetPassword,
+  ..._setNewPassword,
+  ..._settings,
+  ..._signup,
+  ..._integrations,
+  ..._generalSettings,
+};

app/javascript/dashboard/i18n/locale/ro/index.js

@@ -0,0 +1,33 @@
+import { default as _agentMgmt } from './agentMgmt.json';
+import { default as _billing } from './billing.json';
+import { default as _cannedMgmt } from './cannedMgmt.json';
+import { default as _chatlist } from './chatlist.json';
+import { default as _contact } from './contact.json';
+import { default as _conversation } from './conversation.json';
+import { default as _inboxMgmt } from './inboxMgmt.json';
+import { default as _login } from './login.json';
+import { default as _report } from './report.json';
+import { default as _resetPassword } from './resetPassword.json';
+import { default as _setNewPassword } from './setNewPassword.json';
+import { default as _settings } from './settings.json';
+import { default as _signup } from './signup.json';
+import { default as _integrations } from './integrations.json';
+import { default as _generalSettings } from './generalSettings.json';
+
+export default {
+  ..._agentMgmt,
+  ..._billing,
+  ..._cannedMgmt,
+  ..._chatlist,
+  ..._contact,
+  ..._conversation,
+  ..._inboxMgmt,
+  ..._login,
+  ..._report,
+  ..._resetPassword,
+  ..._setNewPassword,
+  ..._settings,
+  ..._signup,
+  ..._integrations,
+  ..._generalSettings,
+};

app/javascript/dashboard/i18n/ml.js

@@ -1,40 +0,0 @@
-import ml from './locale/ml';
-
-export default {
-  ...ml,
-  APP_GLOBAL: {
-    TRIAL_MESSAGE: 'ദിവസത്തെ ട്രയൽ ശേഷിക്കുന്നു.',
-    TRAIL_BUTTON: 'ഇപ്പോൾ വാങ്ങുക',
-  },
-  COMPONENTS: {
-    CODE: {
-      BUTTON_TEXT: 'പകർത്തുക',
-      COPY_SUCCESSFUL: 'കോഡ് വിജയകരമായി ക്ലിപ്പ്ബോർഡിലേക്ക് പകർത്തി',
-    },
-    FILE_BUBBLE: {
-      DOWNLOAD: 'ഡൗൺലോഡുചെയ്യുക',
-      UPLOADING: 'അപ്‌ലോഡുചെയ്യുന്നു...',
-    },
-    FORM_BUBBLE: {
-      SUBMIT: 'സമർപ്പിക്കുക',
-    },
-  },
-  CONFIRM_EMAIL: 'പരിശോധിച്ചുറപ്പിക്കുന്നു...',
-  SETTINGS: {
-    INBOXES: {
-      NEW_INBOX: 'ഇൻ‌ബോക്സ് ചേർക്കുക',
-    },
-  },
-  SIDEBAR: {
-    CONVERSATIONS: 'സംഭാഷണങ്ങൾ',
-    REPORTS: 'റിപ്പോർട്ടുകൾ',
-    SETTINGS: 'ക്രമീകരണങ്ങൾ',
-    HOME: 'ഹോം',
-    AGENTS: 'ഏജന്റുമാർ',
-    INBOXES: 'ഇൻബോക്സുകൾ',
-    CANNED_RESPONSES: 'ക്യാൻഡ് പ്രതികരണങ്ങൾ',
-    BILLING: 'ബില്ലിംഗ്',
-    INTEGRATIONS: 'സംയോജനങ്ങൾ',
-    ACCOUNT_SETTINGS: 'അക്കൗണ്ട് ക്രമീകരണങ്ങൾ',
-  },
-};

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="columns profile--settings ">
-    <form @submit.prevent="updateAccount()">
+    <form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
       <div class="small-12 row profile--settings--row">
         <div class="columns small-3 ">
           <h4 class="block-title">
@@ -24,10 +24,13 @@
           <label :class="{ error: $v.locale.$error }">
             {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
             <select v-model="locale">
-              <option value="ca">Catalan</option>
+              <option
-              <option value="de">German</option>
+                v-for="lang in enabledLanguages"
-              <option value="en">English</option>
+                :key="lang.iso_639_1_code"
-              <option value="ml">Malayalam</option>
+                :value="lang.iso_639_1_code"
+              >
+                {{ lang.name }}
+              </option>
             </select>
             <span v-if="$v.locale.$error" class="message">
               {{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
@@ -82,6 +85,8 @@
       >
       </woot-submit-button>
     </form>
+
+    <woot-loading-state v-if="uiFlags.isFetchingItem" />
   </div>
 </template>
 
@@ -91,9 +96,10 @@ import { required } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
 import { accountIdFromPathname } from 'dashboard/helper/URLHelper';
 import alertMixin from 'shared/mixins/alertMixin';
+import configMixin from 'shared/mixins/configMixin';
 
 export default {
-  mixins: [alertMixin],
+  mixins: [alertMixin, configMixin],
   data() {
     return {
       id: '',

app/javascript/dashboard/store/modules/accounts.js

@@ -57,7 +57,7 @@ export const mutations = {
       ...data,
     };
   },
-  [types.default.ADD_ACCOUNT]: MutationHelpers.create,
+  [types.default.ADD_ACCOUNT]: MutationHelpers.setSingleRecord,
   [types.default.EDIT_ACCOUNT]: MutationHelpers.update,
 };
 

app/javascript/shared/mixins/configMixin.js

@@ -9,5 +9,8 @@ export default {
     vapidPublicKey() {
       return window.chatwootConfig.vapidPublicKey;
     },
+    enabledLanguages() {
+      return window.chatwootConfig.enabledLanguages;
+    },
   },
 };

app/javascript/widget/App.vue

@@ -8,6 +8,7 @@
 import { mapActions } from 'vuex';
 import { setHeader } from 'widget/helpers/axios';
 import { IFrameHelper } from 'widget/helpers/utils';
+import Vue from 'vue';
 
 export default {
   name: 'App',
@@ -17,7 +18,9 @@ export default {
     };
   },
   mounted() {
-    const { websiteToken } = window.chatwootWebChannel;
+    const { websiteToken, locale } = window.chatwootWebChannel;
+    Vue.config.lang = locale;
+
     if (IFrameHelper.isIFrame()) {
       IFrameHelper.sendMessage({
         event: 'loaded',

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="chat-message--input">
-    <chat-input-area v-model="userInput" :placeholder="placeholder" />
+    <chat-input-area
+      v-model="userInput"
+      :placeholder="$t('CHAT_PLACEHOLDER')"
+    />
     <div class="button-wrap">
       <chat-attachment-button
         v-if="showAttachment"
@@ -44,10 +47,6 @@ export default {
   },
   mixins: [clickaway],
   props: {
-    placeholder: {
-      type: String,
-      default: 'Type your message',
-    },
     onSendMessage: {
       type: Function,
       default: () => {},

app/javascript/widget/components/template/EmailInput.vue

@@ -8,7 +8,7 @@
       <input
         v-model.trim="email"
         class="form-input"
-        placeholder="Please enter your email"
+        :placeholder="$t('EMAIL_PLACEHOLDER')"
         :class="{ error: $v.email.$error }"
         @input="$v.email.$touch"
         @keyup.enter="onSubmit"

app/javascript/widget/i18n/en.js

@@ -1,12 +0,0 @@
-export default {
-  COMPONENTS: {
-    FILE_BUBBLE: {
-      DOWNLOAD: 'Download',
-      UPLOADING: 'Uploading...',
-    },
-    FORM_BUBBLE: {
-      SUBMIT: 'Submit',
-    },
-  },
-  POWERED_BY: 'Powered by Chatwoot',
-};

app/javascript/widget/i18n/index.js

@@ -1,5 +1,15 @@
-import en from './en';
+import { default as ca } from './locale/ca.json';
+import { default as de } from './locale/de.json';
+import { default as el } from './locale/el.json';
+import { default as en } from './locale/en.json';
+import { default as ml } from './locale/ml.json';
+import { default as pt } from './locale/pt.json';
 
 export default {
+  ca,
+  de,
+  el,
   en,
+  ml,
+  pt,
 };

app/javascript/widget/i18n/locale/ca.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Descarrega",
+      "UPLOADING": "S'està pujant..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "sotmetre's"
+    }
+  },
+  "POWERED_BY": "Desenvolupat per Chatwoot",
+  "EMAIL_PLACEHOLDER": "Introduïu el vostre correu electrònic",
+  "CHAT_PLACEHOLDER": "Escriu el teu missatge"
+}

app/javascript/widget/i18n/locale/de.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Herunterladen",
+      "UPLOADING": "Hochladen..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Submit"
+    }
+  },
+  "POWERED_BY": "Unterstützt von Chatwoot",
+  "EMAIL_PLACEHOLDER": "Bitte geben Sie ihre E-Mail-Adresse ein",
+  "CHAT_PLACEHOLDER": "Geben Sie Ihre Nachricht ein"
+}

app/javascript/widget/i18n/locale/el.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Κατεβάστε",
+      "UPLOADING": "Μεταφόρτωση..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "υποβάλλουν"
+    }
+  },
+  "POWERED_BY": "Με την υποστήριξη του Chatwoot",
+  "EMAIL_PLACEHOLDER": "Εισαγάγετε το email σας",
+  "CHAT_PLACEHOLDER": "Πληκτρολογήστε το μήνυμά σας"
+}

app/javascript/widget/i18n/locale/en.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Download",
+      "UPLOADING": "Uploading..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Submit"
+    }
+  },
+  "POWERED_BY": "Powered by Chatwoot",
+  "EMAIL_PLACEHOLDER": "Please enter your email",
+  "CHAT_PLACEHOLDER": "Type your message"
+}

app/javascript/widget/i18n/locale/ml.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "ഡൗൺലോഡ്",
+      "UPLOADING": "അപ്‌ലോഡുചെയ്യുന്നു..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "സമർപ്പിക്കുക"
+    }
+  },
+  "POWERED_BY": "Powered by Chatwoot",
+  "EMAIL_PLACEHOLDER": "നിങ്ങളുടെ ഇമെയിൽ നൽകുക",
+  "CHAT_PLACEHOLDER": "നിങ്ങളുടെ സന്ദേശം ടൈപ്പുചെയ്യുക"
+}

app/javascript/widget/i18n/locale/pt.json

@@ -0,0 +1,14 @@
+{
+  "COMPONENTS": {
+    "FILE_BUBBLE": {
+      "DOWNLOAD": "Baixar",
+      "UPLOADING": "Enviando..."
+    },
+    "FORM_BUBBLE": {
+      "SUBMIT": "Enviar"
+    }
+  },
+  "POWERED_BY": "Desenvolvido por Chatwoot",
+  "EMAIL_PLACEHOLDER": "Por favor introduza o seu e-mail",
+  "CHAT_PLACEHOLDER": "Digite sua mensagem"
+}

app/views/layouts/vueapp.html.erb

@@ -38,6 +38,7 @@
         <% if ENV['VAPID_PUBLIC_KEY'] %>
         vapidPublicKey: new Uint8Array(<%= Base64.urlsafe_decode64(ENV['VAPID_PUBLIC_KEY']).bytes %>),
         <% end %>
+        enabledLanguages: <%= available_locales_with_name.to_json.html_safe %>
       }
     </script>
   </body>

app/views/widgets/show.html.erb

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
     <script>
       window.chatwootWebChannel = {
-        websiteName: '<%= @web_widget.inbox.name %>',
-        widgetColor: '<%= @web_widget.widget_color %>',
-        websiteToken: '<%= @web_widget.website_token %>',
-        welcomeTitle: '<%= @web_widget.welcome_title %>',
-        welcomeTagline: '<%= @web_widget.welcome_tagline %>',
         avatarUrl: '<%= @web_widget.inbox.avatar_url %>',
+        locale: '<%= @web_widget.account.locale %>',
+        websiteName: '<%= @web_widget.inbox.name %>',
+        websiteToken: '<%= @web_widget.website_token %>',
+        welcomeTagline: '<%= @web_widget.welcome_tagline %>',
+        welcomeTitle: '<%= @web_widget.welcome_title %>',
+        widgetColor: '<%= @web_widget.widget_color %>',
       }
       window.chatwootPubsubToken = '<%= @contact.pubsub_token %>'
       window.authToken = '<%= @token %>'

config/initializers/languages.rb

@@ -2,19 +2,22 @@
 # This Hash is used in account model, so do not change the index for existing languages
 
 LANGUAGES_CONFIG = {
-  0 => { name: 'English', iso_639_3_code: 'eng', iso_639_1_code: 'en' },
+  0 => { name: 'English', iso_639_3_code: 'eng', iso_639_1_code: 'en', enabled: true },
-  1 => { name: 'Arabic', iso_639_3_code: 'ara', iso_639_1_code: 'ar' },
+  1 => { name: 'Arabic', iso_639_3_code: 'ara', iso_639_1_code: 'ar', enabled: false },
-  2 => { name: 'Dutch', iso_639_3_code: 'nld', iso_639_1_code: 'nl' },
+  2 => { name: 'Dutch', iso_639_3_code: 'nld', iso_639_1_code: 'nl', enabled: false },
-  3 => { name: 'French', iso_639_3_code: 'fra', iso_639_1_code: 'fr' },
+  3 => { name: 'French', iso_639_3_code: 'fra', iso_639_1_code: 'fr', enabled: false },
-  4 => { name: 'German', iso_639_3_code: 'deu', iso_639_1_code: 'de' },
+  4 => { name: 'German', iso_639_3_code: 'deu', iso_639_1_code: 'de', enabled: true },
-  5 => { name: 'Hindi', iso_639_3_code: 'hin', iso_639_1_code: 'hi' },
+  5 => { name: 'Hindi', iso_639_3_code: 'hin', iso_639_1_code: 'hi', enabled: false },
-  6 => { name: 'Italian', iso_639_3_code: 'ita', iso_639_1_code: 'it' },
+  6 => { name: 'Italian', iso_639_3_code: 'ita', iso_639_1_code: 'it', enabled: false },
-  7 => { name: 'Japanese', iso_639_3_code: 'jpn', iso_639_1_code: 'ja' },
+  7 => { name: 'Japanese', iso_639_3_code: 'jpn', iso_639_1_code: 'ja', enabled: false },
-  8 => { name: 'Korean', iso_639_3_code: 'kor', iso_639_1_code: 'ko' },
+  8 => { name: 'Korean', iso_639_3_code: 'kor', iso_639_1_code: 'ko', enabled: false },
-  9 => { name: 'Portuguese', iso_639_3_code: 'por', iso_639_1_code: 'pt' },
+  9 => { name: 'Portuguese', iso_639_3_code: 'por', iso_639_1_code: 'pt', enabled: true },
-  10 => { name: 'Russian', iso_639_3_code: 'rus', iso_639_1_code: 'ru' },
+  10 => { name: 'Russian', iso_639_3_code: 'rus', iso_639_1_code: 'ru', enabled: false },
-  11 => { name: 'Chinese', iso_639_3_code: 'zho', iso_639_1_code: 'zh' },
+  11 => { name: 'Chinese', iso_639_3_code: 'zho', iso_639_1_code: 'zh', enabled: false },
-  12 => { name: 'Spanish', iso_639_3_code: 'spa', iso_639_1_code: 'es' },
+  12 => { name: 'Spanish', iso_639_3_code: 'spa', iso_639_1_code: 'es', enabled: false },
-  13 => { name: 'Malayalam', iso_639_3_code: 'mal', iso_639_1_code: 'ml' },
+  13 => { name: 'Malayalam', iso_639_3_code: 'mal', iso_639_1_code: 'ml', enabled: true },
-  14 => { name: 'Catalan', iso_639_3_code: 'cat', iso_639_1_code: 'ca' }
+  14 => { name: 'Catalan', iso_639_3_code: 'cat', iso_639_1_code: 'ca', enabled: true },
-}.freeze
+  15 => { name: 'Greek', iso_639_3_code: 'ell', iso_639_1_code: 'el', enabled: true }
+}.filter { |_key, val| val[:enabled] }.freeze
+
+Rails.configuration.i18n.available_locales = LANGUAGES_CONFIG.map { |_index, lang| lang[:iso_639_1_code].to_sym }

crowdin.yml

@@ -6,5 +6,5 @@ files:
     translation: /config/locales/%two_letters_code%.yml
   - source: /config/locales/devise.en.yml
     translation: /config/locales/devise.%two_letters_code%.yml
-  - source: /app/javascript/widget/i18n/en.js
+  - source: /app/javascript/widget/i18n/locale/en.json
-    translation: /app/javascript/widget/i18n/%two_letters_code%.js
+    translation: /app/javascript/widget/i18n/locale/%two_letters_code%.json

spec/controllers/api/v1/accounts/accounts_controller_spec.rb

@@ -136,7 +136,7 @@ RSpec.describe 'Accounts API', type: :request do
     context 'when it is an authenticated user' do
       params = {
         name: 'New Name',
-        locale: 'ar',
+        locale: 'en',
         domain: 'example.com',
         support_email: 'care@example.com',
         domain_emails_enabled: true