Feature: Introduce locale in web-widget SDK (#871)

* Introduce setLocale in SDK

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

app/javascript/widget/App.vue

@@ -19,7 +19,7 @@ export default {
   },
   mounted() {
     const { websiteToken, locale } = window.chatwootWebChannel;
-    Vue.config.lang = locale;
+    this.setLocale(locale);
 
     if (IFrameHelper.isIFrame()) {
       IFrameHelper.sendMessage({
@@ -44,6 +44,7 @@ export default {
       if (message.event === 'config-set') {
         this.fetchOldConversations();
         this.fetchAvailableAgents(websiteToken);
+        this.setLocale(message.locale);
       } else if (message.event === 'widget-visible') {
         this.scrollConversationToBottom();
       } else if (message.event === 'set-current-url') {
@@ -58,6 +59,8 @@ export default {
         this.$store.dispatch('conversationLabels/destroy', message.label);
       } else if (message.event === 'set-user') {
         this.$store.dispatch('contacts/update', message);
+      } else if (message.event === 'set-locale') {
+        this.setLocale(message.locale);
       }
     });
 
@@ -71,6 +74,12 @@ export default {
       const container = this.$el.querySelector('.conversation-wrap');
       container.scrollTop = container.scrollHeight;
     },
+    setLocale(locale) {
+      const { enabledLanguages } = window.chatwootWebChannel;
+      if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
+        Vue.config.lang = locale;
+      }
+    },
   },
 };
 </script>

app/javascript/widget/api/endPoints.js

@@ -1,13 +1,26 @@
-const sendMessage = content => ({
-  url: `/api/v1/widget/messages${window.location.search}`,
-  params: {
-    message: {
-      content,
-      timestamp: new Date().toString(),
-      referer_url: window.refererURL || '',
+import Vue from 'vue';
+
+const sendMessage = content => {
+  const locale = Vue.config.lang;
+  const refererURL = window.refererURL || '';
+  let search = window.location.search;
+  if (search) {
+    search = `${search}&locale=${locale}`;
+  } else {
+    search = `?locale=${locale}`;
+  }
+
+  return {
+    url: `/api/v1/widget/messages${search}`,
+    params: {
+      message: {
+        content,
+        timestamp: new Date().toString(),
+        referer_url: refererURL,
+      },
     },
-  },
-});
+  };
+};
 
 const sendAttachment = ({ attachment }) => {
   const { refererURL = '' } = window;

app/javascript/widget/api/specs/endPoints.spec.js

@@ -1,12 +1,14 @@
 import endPoints from '../endPoints';
 
+jest.mock('vue', () => ({ config: { lang: 'ar' } }));
+
 describe('#sendMessage', () => {
   it('returns correct payload', () => {
     const spy = jest.spyOn(global, 'Date').mockImplementation(() => ({
       toString: () => 'mock date',
     }));
     expect(endPoints.sendMessage('hello')).toEqual({
-      url: `/api/v1/widget/messages`,
+      url: `/api/v1/widget/messages?locale=ar`,
       params: {
         message: {
           content: 'hello',

app/javascript/widget/i18n/index.js

@@ -1,15 +1,23 @@
+import { default as ar } from './locale/ar.json';
 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 fr } from './locale/fr.json';
 import { default as ml } from './locale/ml.json';
+import { default as nl } from './locale/nl.json';
 import { default as pt } from './locale/pt.json';
+import { default as pt_BR } from './locale/pt_BR.json';
 
 export default {
+  ar,
   ca,
   de,
   el,
   en,
+  fr,
   ml,
+  nl,
   pt,
+  pt_BR,
 };