fix: Add preference to choose browser lang for widget settings page (#5726)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/packs/sdk.js

@@ -18,6 +18,11 @@ const runSDK = ({ baseUrl, websiteToken }) => {
   }
 
   const chatwootSettings = window.chatwootSettings || {};
+  let locale = chatwootSettings.locale || 'en';
+  if (chatwootSettings.useBrowserLanguage) {
+    locale = window.navigator.language.replace('-', '_');
+  }
+
   window.$chatwoot = {
     baseUrl,
     hasLoaded: false,
@@ -25,7 +30,8 @@ const runSDK = ({ baseUrl, websiteToken }) => {
     isOpen: false,
     position: chatwootSettings.position === 'left' ? 'left' : 'right',
     websiteToken,
-    locale: chatwootSettings.locale,
+    locale,
+    useBrowserLanguage: chatwootSettings.useBrowserLanguage || false,
     type: getBubbleView(chatwootSettings.type),
     launcherTitle: chatwootSettings.launcherTitle || '',
     showPopoutButton: chatwootSettings.showPopoutButton || false,
@@ -58,7 +64,7 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.events.popoutChatWindow({
         baseUrl: window.$chatwoot.baseUrl,
         websiteToken: window.$chatwoot.websiteToken,
-        locale: window.$chatwoot.locale,
+        locale,
       });
     },
 

app/javascript/widget/App.vue

@@ -134,10 +134,20 @@ export default {
         });
       });
     },
-    setLocale(locale) {
+    setLocale(localeWithVariation) {
       const { enabledLanguages } = window.chatwootWebChannel;
-      if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
+      const localeWithoutVariation = localeWithVariation.split('_')[0];
-        this.$root.$i18n.locale = locale;
+      const hasLocaleWithoutVariation = enabledLanguages.some(
+        lang => lang.iso_639_1_code === localeWithoutVariation
+      );
+      const hasLocaleWithVariation = enabledLanguages.some(
+        lang => lang.iso_639_1_code === localeWithVariation
+      );
+
+      if (hasLocaleWithVariation) {
+        this.$root.$i18n.locale = localeWithVariation;
+      } else if (hasLocaleWithoutVariation) {
+        this.$root.$i18n.locale = localeWithoutVariation;
       }
     },
     registerUnreadEvents() {

app/views/widget_tests/index.html.erb

@@ -16,6 +16,7 @@ window.chatwootSettings = {
   hideMessageBubble: false,
   position: '<%= @widget_position %>',
   locale: 'en',
+  useBrowserLanguage: true,
   type: '<%= @widget_type %>',
   showPopoutButton: true,
   widgetStyle: '<%= @widget_style %>',