fix: Update survey locale based on the account (#4207)

.codeclimate.yml

@@ -50,3 +50,6 @@ exclude_patterns:
   - 'app/javascript/dashboard/routes/dashboard/settings/automation/constants.js'
   - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'
   - 'app/javascript/dashboard/routes/dashboard/settings/reports/constants.js'
+  - 'app/javascript/dashboard/i18n/index.js'
+  - 'app/javascript/widget/i18n/index.js'
+  - 'app/javascript/survey/i18n/index.js'

.eslintrc.js

@@ -29,8 +29,8 @@ module.exports = {
     'vue/html-self-closing': 'off',
     "vue/no-v-html": 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'import/extensions': ['off']
-
+    'import/extensions': ['off'],
+    'no-console': 'error'
   },
   settings: {
     'import/resolver': {

app/javascript/packs/survey.js

@@ -3,6 +3,7 @@ import Vuelidate from 'vuelidate';
 import VueI18n from 'vue-i18n';
 import App from '../survey/App.vue';
 import i18n from '../survey/i18n';
+import store from '../survey/store';
 
 Vue.use(VueI18n);
 Vue.use(Vuelidate);
@@ -20,6 +21,7 @@ Vue.config.productionTip = false;
 window.onload = () => {
   window.WOOT_SURVEY = new Vue({
     i18n: i18nConfig,
+    store,
     render: h => h(App),
   }).$mount('#app');
 };

app/javascript/shared/components/Branding.vue

@@ -21,7 +21,6 @@
 
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { mapGetters } from 'vuex';
 
 const {
   LOGO_THUMBNAIL: logoThumbnail,
@@ -41,13 +40,20 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ referrerHost: 'appConfig/getReferrerHost' }),
     brandRedirectURL() {
-      const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`;
-      if (this.referrerHost) {
-        return `${baseURL}&utm_referrer=${this.referrerHost}`;
+      try {
+        const referrerHost = this.$store.getters['appConfig/getReferrerHost'];
+        const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=${
+          referrerHost ? 'widget_branding' : 'survey_branding'
+        }`;
+        if (referrerHost) {
+          return `${baseURL}&utm_referrer=${referrerHost}`;
         }
         return baseURL;
+      } catch (e) {
+        // Suppressing the error as getter is not defined in some cases
+      }
+      return '';
     },
   },
 };

app/javascript/survey/i18n/index.js

@@ -1,5 +1,69 @@
+import { default as ar } from './locale/ar.json';
+import { default as ca } from './locale/ca.json';
+import { default as cs } from './locale/cs.json';
+import { default as da } from './locale/da.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 es } from './locale/es.json';
+import { default as fa } from './locale/fa.json';
+import { default as fi } from './locale/fi.json';
+import { default as fr } from './locale/fr.json';
+import { default as hi } from './locale/hi.json';
+import { default as hu } from './locale/hu.json';
+import { default as id } from './locale/id.json';
+import { default as it } from './locale/it.json';
+import { default as ja } from './locale/ja.json';
+import { default as ko } from './locale/ko.json';
+import { default as ml } from './locale/ml.json';
+import { default as nl } from './locale/nl.json';
+import { default as no } from './locale/no.json';
+import { default as pl } from './locale/pl.json';
+import { default as pt } from './locale/pt.json';
+import { default as pt_BR } from './locale/pt_BR.json';
+import { default as ro } from './locale/ro.json';
+import { default as ru } from './locale/ru.json';
+import { default as sk } from './locale/sk.json';
+import { default as sv } from './locale/sv.json';
+import { default as ta } from './locale/ta.json';
+import { default as tr } from './locale/tr.json';
+import { default as uk } from './locale/uk.json';
+import { default as vi } from './locale/vi.json';
+import { default as zh_CN } from './locale/zh_CN.json';
+import { default as zh_TW } from './locale/zh_TW.json';
 
 export default {
+  ar,
+  ca,
+  cs,
+  da,
+  de,
+  el,
   en,
+  es,
+  fa,
+  fi,
+  fr,
+  hi,
+  hu,
+  id,
+  it,
+  ja,
+  ko,
+  ml,
+  nl,
+  no,
+  pl,
+  pt,
+  pt_BR,
+  ro,
+  ru,
+  sk,
+  sv,
+  ta,
+  tr,
+  uk,
+  vi,
+  zh_CN,
+  zh_TW,
 };

app/javascript/survey/store/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import globalConfig from 'shared/store/globalConfig';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  modules: {
+    globalConfig,
+  },
+});

app/javascript/survey/views/Response.vue

@@ -144,6 +144,7 @@ export default {
         this.surveyDetails = result?.data?.csat_survey_response;
         this.selectedRating = this.surveyDetails?.rating;
         this.feedbackMessage = this.surveyDetails?.feedback_message || '';
+        this.setLocale(result.data.locale);
       } catch (error) {
         const errorMessage = error?.response?.data?.message;
         this.errorMessage = errorMessage || this.$t('SURVEY.API.ERROR_MESSAGE');
@@ -179,6 +180,9 @@ export default {
         this.isUpdating = false;
       }
     },
+    setLocale(locale) {
+      this.$root.$i18n.locale = locale || 'en';
+    },
   },
 };
 </script>

app/views/public/api/v1/models/_csat_survey.json.jbuilder

@@ -2,5 +2,6 @@ json.id resource.id
 json.csat_survey_response resource.csat_survey_response
 json.inbox_avatar_url resource.inbox.avatar_url
 json.inbox_name resource.inbox.name
+json.locale resource.account.locale
 json.conversation_id resource.conversation_id
 json.created_at resource.created_at