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

* Add available languages in account settings

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

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"
+}