fix: Help Center articles are not available on the widget [CW-2534] (#7954)

app/javascript/widget/App.vue

@@ -111,6 +111,7 @@ export default {
       'setWidgetColor',
       'setBubbleVisibility',
       'setColorScheme',
+      'setLocale',
     ]),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
     ...mapActions('campaign', [
@@ -152,8 +153,10 @@ export default {
 
       if (hasLocaleWithVariation) {
         this.$root.$i18n.locale = localeWithVariation;
+        this.$store.dispatch('appConfig/setLocale', localeWithVariation);
       } else if (hasLocaleWithoutVariation) {
         this.$root.$i18n.locale = localeWithoutVariation;
+        this.$store.dispatch('appConfig/setLocale', localeWithoutVariation);
       }
     },
     registerUnreadEvents() {

app/javascript/widget/store/modules/appConfig.js

@@ -5,6 +5,7 @@ import {
   SET_WIDGET_APP_CONFIG,
   SET_WIDGET_COLOR,
   TOGGLE_WIDGET_OPEN,
+  SET_WIDGET_LOCALE,
 } from '../types';
 
 const state = {
@@ -18,6 +19,7 @@ const state = {
   widgetColor: '',
   widgetStyle: 'standard',
   darkMode: 'light',
+  locale: 'en',
 };
 
 export const getters = {
@@ -29,6 +31,7 @@ export const getters = {
   getReferrerHost: $state => $state.referrerHost,
   isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
   darkMode: $state => $state.darkMode,
+  widgetLocale: $state => $state.locale,
 };
 
 export const actions = {
@@ -65,6 +68,9 @@ export const actions = {
   setBubbleVisibility({ commit }, hideMessageBubble) {
     commit(SET_BUBBLE_VISIBILITY, hideMessageBubble);
   },
+  setLocale({ commit }, locale) {
+    commit(SET_WIDGET_LOCALE, locale);
+  },
 };
 
 export const mutations = {
@@ -74,6 +80,7 @@ export const mutations = {
     $state.hideMessageBubble = data.hideMessageBubble;
     $state.widgetStyle = data.widgetStyle;
     $state.darkMode = data.darkMode;
+    $state.locale = data.locale || $state.locale;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;
@@ -90,6 +97,9 @@ export const mutations = {
   [SET_COLOR_SCHEME]($state, darkMode) {
     $state.darkMode = darkMode;
   },
+  [SET_WIDGET_LOCALE]($state, locale) {
+    $state.locale = locale || $state.locale;
+  },
 };
 
 export default {

app/javascript/widget/store/modules/specs/appConfig/actions.spec.js

@@ -31,4 +31,11 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([['SET_COLOR_SCHEME', 'dark']]);
     });
   });
+
+  describe('#setLocale', () => {
+    it('creates actions for setting the locale properly', () => {
+      actions.setLocale({ commit }, 'es_ES');
+      expect(commit.mock.calls).toEqual([['SET_WIDGET_LOCALE', 'es_ES']]);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js

@@ -32,4 +32,12 @@ describe('#mutations', () => {
       expect(state.darkMode).toEqual('dark');
     });
   });
+
+  describe('#SET_WIDGET_LOCALE', () => {
+    it('sets widget locale properly', () => {
+      const state = { locale: 'en' };
+      mutations.SET_WIDGET_LOCALE(state, 'es_ES');
+      expect(state.locale).toEqual('es_ES');
+    });
+  });
 });

app/javascript/widget/store/types.js

@@ -7,3 +7,4 @@ export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
 export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN';
 export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';
 export const SET_BUBBLE_VISIBILITY = 'SET_BUBBLE_VISIBILITY';
+export const SET_WIDGET_LOCALE = 'SET_WIDGET_LOCALE';

app/javascript/widget/views/Home.vue

@@ -68,6 +68,7 @@ export default {
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       popularArticles: 'article/popularArticles',
       articleUiFlags: 'article/uiFlags',
+      widgetLocale: 'appConfig/widgetLocale',
     }),
     portal() {
       return window.chatwootWebChannel.portal;
@@ -79,12 +80,28 @@ export default {
         this.popularArticles.length
       );
     },
+    defaultLocale() {
+      const widgetLocale = this.widgetLocale;
+      const {
+        allowed_locales: allowedLocales,
+        default_locale: defaultLocale,
+      } = this.portal.config;
+
+      // IMPORTANT: Variation strict locale matching, Follow iso_639_1_code
+      // If the exact match of a locale is available in the list of portal locales, return it
+      // Else return the default locale. Eg: `es` will not work if `es_ES` is available in the list
+      if (allowedLocales.includes(widgetLocale)) {
+        return widgetLocale;
+      }
+      return defaultLocale;
+    },
   },
   mounted() {
     if (this.portal && this.popularArticles.length === 0) {
+      const locale = this.defaultLocale;
       this.$store.dispatch('article/fetch', {
         slug: this.portal.slug,
-        locale: 'en',
+        locale,
       });
     }
   },
@@ -102,9 +119,9 @@ export default {
       });
     },
     viewAllArticles() {
+      const locale = this.defaultLocale;
       const {
         portal: { slug },
-        locale = 'en',
       } = window.chatwootWebChannel;
       this.openArticleInArticleViewer(`/hc/${slug}/${locale}`);
     },