Chore: Use installation config in frontend (#847)

* Use installation config in widget * Add configuration for installation in UI * Add config for mailer Co-authored-by: Sojan <sojan@pepalo.com>
2020-05-12 01:31:40 +05:30
parent c74b5c21d7
commit f819bc0f33
22 changed files with 264 additions and 49 deletions
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -2,7 +2,7 @@
  <aside class="sidebar animated shrink columns">
    <div class="logo">
      <router-link :to="dashboardPath" replace>
-        <img src="~dashboard/assets/images/woot-logo.svg" alt="Woot-logo" />
+        <img :src="globalConfig.logo" :alt="globalConfig.installationName" />
      </router-link>
    </div>

@@ -104,10 +104,11 @@ export default {
  },
  computed: {
    ...mapGetters({
-      daysLeft: 'getTrialLeft',
-      subscriptionData: 'getSubscription',
-      inboxes: 'inboxes/getInboxes',
      currentUser: 'getCurrentUser',
+      daysLeft: 'getTrialLeft',
+      globalConfig: 'globalConfig/get',
+      inboxes: 'inboxes/getInboxes',
+      subscriptionData: 'getSubscription',
    }),
    accessibleMenuItems() {
      // get all keys in menuGroup
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -27,11 +27,17 @@

 <script>
 /* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
 export default {
+  mixins: [globalConfigMixin],
  props: {
    isFullwidth: Boolean,
+    items: {
+      type: Array,
+      default: () => [],
+    },
  },
-
  computed: {
    classObject() {
      return 'full-width';
@@ -39,9 +45,6 @@ export default {
    activeIndex() {
      return this.items.findIndex(i => i.route === this.$route.name);
    },
-    items() {
-      return this.$t('INBOX_MGMT.CREATE_FLOW');
-    },
  },
  methods: {
    isActive(item) {
--- a/app/javascript/dashboard/routes/auth/Signup.vue
+++ b/app/javascript/dashboard/routes/auth/Signup.vue
@@ -2,8 +2,8 @@
  <div class="medium-10 column signup">
    <div class="text-center medium-12 signup--hero">
      <img
-        src="~dashboard/assets/images/woot-logo.svg"
-        alt="Woot-logo"
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
        class="hero--logo"
      />
      <h2 class="hero--title">
@@ -58,13 +58,18 @@
              button-class="large expanded"
            >
            </woot-submit-button>
-            <p class="accept--terms" v-html="$t('REGISTER.TERMS_ACCEPT')"></p>
+            <p class="accept--terms" v-html="termsLink"></p>
          </div>
        </form>
        <div class="column text-center sigin--footer">
          <span>Already have an account?</span>
          <router-link to="/app/login">
-            {{ $t('LOGIN.TITLE') }}
+            {{
+              useInstallationName(
+                $t('LOGIN.TITLE'),
+                globalConfig.installationName
+              )
+            }}
          </router-link>
        </div>
      </div>
@@ -77,12 +82,13 @@

 import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
+  mixins: [globalConfigMixin],
  data() {
    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
      credentials: {
        name: '',
        email: '',
@@ -106,6 +112,19 @@ export default {
      },
    },
  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    termsLink() {
+      return this.$t('REGISTER.TERMS_ACCEPT')
+        .replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
+        .replace(
+          'https://www.chatwoot.com/privacy-policy',
+          this.globalConfig.privacyURL
+        );
+    },
+  },
  methods: {
    showAlert(message) {
      // Reset loading, current selected agent
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -74,7 +74,14 @@
        </div>
      </div>
      <div class="small-4 columns">
-        <span v-html="$t('AGENT_MGMT.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('AGENT_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
      </div>
    </div>
    <!-- Add Agent -->
@@ -108,8 +115,8 @@
 /* global bus */

 import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Thumbnail from '../../../../components/widgets/Thumbnail';
-
 import AddAgent from './AddAgent';
 import EditAgent from './EditAgent';
 import DeleteAgent from './DeleteAgent';
@@ -121,6 +128,7 @@ export default {
    DeleteAgent,
    Thumbnail,
  },
+  mixins: [globalConfigMixin],
  data() {
    return {
      loading: {},
@@ -138,6 +146,7 @@ export default {
      agentList: 'agents/getAgents',
      uiFlags: 'agents/getUIFlags',
      currentUserId: 'getCurrentUserID',
+      globalConfig: 'globalConfig/get',
    }),
    deleteConfirmText() {
      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
@@ -1,6 +1,33 @@
 <template>
  <div class="row content-box full-height">
-    <woot-wizard class="small-3 columns"></woot-wizard>
+    <woot-wizard
+      class="small-3 columns"
+      :global-config="globalConfig"
+      :items="items"
+    />
    <router-view></router-view>
  </div>
 </template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+    items() {
+      return this.$t('INBOX_MGMT.CREATE_FLOW').map(item => ({
+        ...item,
+        body: this.useInstallationName(
+          item.body,
+          this.globalConfig.installationName
+        ),
+      }));
+    },
+  },
+};
+</script>
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -77,7 +77,14 @@
      </div>

      <div class="small-4 columns">
-        <span v-html="$t('INBOX_MGMT.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('INBOX_MGMT.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
      </div>
    </div>
    <settings
@@ -107,13 +114,14 @@ import DeleteInbox from './DeleteInbox';
 import adminMixin from '../../../../mixins/isAdmin';
 import auth from '../../../../api/auth';
 import accountMixin from '../../../../mixins/account';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
  components: {
    Settings,
    DeleteInbox,
  },
-  mixins: [adminMixin, accountMixin],
+  mixins: [adminMixin, accountMixin, globalConfigMixin],
  data() {
    return {
      loading: {},
@@ -125,6 +133,7 @@ export default {
  computed: {
    ...mapGetters({
      inboxesList: 'inboxes/getInboxes',
+      globalConfig: 'globalConfig/get',
    }),
    // Delete Modal
    deleteConfirmText() {
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -7,7 +7,14 @@
          alt="Facebook-logo"
        />
      </a>
-      <p>{{ $t('INBOX_MGMT.ADD.FB.HELP') }}</p>
+      <p>
+        {{
+          useInstallationName(
+            $t('INBOX_MGMT.ADD.FB.HELP'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
    </div>
    <div v-else>
      <loading-state
@@ -18,7 +25,12 @@
        <div class="medium-12 columns">
          <page-header
            :header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
-            :header-content="$t('INBOX_MGMT.ADD.DETAILS.DESC')"
+            :header-content="
+              useInstallationName(
+                $t('INBOX_MGMT.ADD.DETAILS.DESC'),
+                globalConfig.installationName
+              )
+            "
          />
        </div>
        <div class="medium-7 columns">
@@ -72,13 +84,14 @@ import { mapGetters } from 'vuex';
 import ChannelApi from '../../../../../api/channels';
 import PageHeader from '../../SettingsSubPageHeader';
 import router from '../../../../index';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
  components: {
    LoadingState,
    PageHeader,
  },
-
+  mixins: [globalConfigMixin],
  data() {
    return {
      isCreating: false,
@@ -114,6 +127,7 @@ export default {
    },
    ...mapGetters({
      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
    }),
    accountId() {
      return this.currentUser.account_id;
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
@@ -13,7 +13,12 @@
                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.TITLE') }}
                </h3>
                <p class="integration--description">
-                  {{ $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT') }}
+                  {{
+                    useInstallationName(
+                      $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT'),
+                      globalConfig.installationName
+                    )
+                  }}
                </p>
              </div>
              <div class="small-2 column button-wrap">
@@ -33,20 +38,20 @@
          </div>
        </div>
      </div>
-      <!-- <div class="small-4 columns help-wrap">
-        <span v-html="$t('INTEGRATION_SETTINGS.SIDEBAR_TXT')"></span>
-      </div> -->
    </div>
  </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import { frontendURL } from '../../../../helper/URLHelper';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
+  mixins: [globalConfigMixin],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
    }),
    accountId() {
      return this.currentUser.account_id;
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -55,7 +55,14 @@
      </div>

      <div class="small-4 columns">
-        <span v-html="$t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT')"></span>
+        <span
+          v-html="
+            useInstallationName(
+              $t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
      </div>
    </div>

@@ -79,12 +86,14 @@
 import { mapGetters } from 'vuex';
 import NewWebhook from './New';
 import DeleteWebhook from './Delete';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';

 export default {
  components: {
    NewWebhook,
    DeleteWebhook,
  },
+  mixins: [globalConfigMixin],
  data() {
    return {
      loading: {},
@@ -97,6 +106,7 @@ export default {
    ...mapGetters({
      records: 'webhooks/getWebhooks',
      uiFlags: 'webhooks/getUIFlags',
+      globalConfig: 'globalConfig/get',
    }),
  },
  mounted() {
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@@ -2,19 +2,20 @@
  <div class="medium-12 column login">
    <div class="text-center medium-12 login__hero align-self-top">
      <img
-        src="~dashboard/assets/images/woot-logo.svg"
-        alt="Woot-logo"
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
        class="hero__logo"
      />
      <h2 class="hero__title">
-        {{ $t('LOGIN.TITLE') }}
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
      </h2>
    </div>
    <div class="row align-center">
      <div class="small-12 medium-4 column">
        <form class="login-box column align-self-top" @submit.prevent="login()">
          <div class="column log-in-form">
-            <!-- <h4 class="text-center">{{$t('LOGIN.TITLE')}}</h4> -->
            <label :class="{ error: $v.credentials.email.$error }">
              {{ $t('LOGIN.EMAIL.LABEL') }}
              <input
@@ -68,14 +69,15 @@
 /* global bus */

 import { required, email } from 'vuelidate/lib/validators';
-
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import WootSubmitButton from '../../components/buttons/FormSubmitButton';
-// import router from '../../routes';
+import { mapGetters } from 'vuex';

 export default {
  components: {
    WootSubmitButton,
  },
+  mixins: [globalConfigMixin],
  data() {
    return {
      // We need to initialize the component with any
@@ -102,6 +104,11 @@ export default {
      },
    },
  },
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+  },
  methods: {
    showAlert(message) {
      // Reset loading, current selected agent
--- a/app/javascript/dashboard/store/index.js
+++ b/app/javascript/dashboard/store/index.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';

+import accounts from './modules/accounts';
 import agents from './modules/agents';
 import auth from './modules/auth';
 import billing from './modules/billing';
@@ -10,15 +11,15 @@ import contactConversations from './modules/contactConversations';
 import contacts from './modules/contacts';
 import conversationLabels from './modules/conversationLabels';
 import conversationMetadata from './modules/conversationMetadata';
-import conversationTypingStatus from './modules/conversationTypingStatus';
 import conversationPage from './modules/conversationPage';
 import conversations from './modules/conversations';
+import conversationTypingStatus from './modules/conversationTypingStatus';
+import globalConfig from 'shared/store/globalConfig';
 import inboxes from './modules/inboxes';
 import inboxMembers from './modules/inboxMembers';
 import reports from './modules/reports';
 import userNotificationSettings from './modules/userNotificationSettings';
 import webhooks from './modules/webhooks';
-import accounts from './modules/accounts';

 Vue.use(Vuex);
 export default new Vuex.Store({
@@ -36,6 +37,7 @@ export default new Vuex.Store({
    conversationPage,
    conversations,
    conversationTypingStatus,
+    globalConfig,
    inboxes,
    inboxMembers,
    reports,
--- a/app/javascript/shared/mixins/globalConfigMixin.js
+++ b/app/javascript/shared/mixins/globalConfigMixin.js
@@ -0,0 +1,7 @@
+export default {
+  methods: {
+    useInstallationName(str = '', installationName) {
+      return str.replace(/Chatwoot/g, installationName);
+    },
+  },
+};
--- a/app/javascript/shared/store/globalConfig.js
+++ b/app/javascript/shared/store/globalConfig.js
@@ -0,0 +1,33 @@
+const {
+  LOGO_THUMBNAIL: logoThumbnail,
+  LOGO: logo,
+  INSTALLATION_NAME: installationName,
+  WIDGET_BRAND_URL: widgetBrandURL,
+  TERMS_URL: termsURL,
+  PRIVACY_URL: privacyURL,
+} = window.globalConfig;
+
+const state = {
+  logoThumbnail,
+  logo,
+  installationName,
+  widgetBrandURL,
+  termsURL,
+  privacyURL,
+};
+
+export const getters = {
+  get: $state => $state,
+};
+
+export const actions = {};
+
+export const mutations = {};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};
--- a/app/javascript/widget/components/Branding.vue
+++ b/app/javascript/widget/components/Branding.vue
@@ -1,15 +1,34 @@
 <template>
  <a
    class="branding"
-    href="https://www.chatwoot.com?utm_source=widget_branding"
+    :href="`${globalConfig.widgetBrandURL}?utm_source=widget_branding`"
    rel="noreferrer noopener nofollow"
    target="_blank"
  >
-    <img src="~widget/assets/images/logo.svg" alt="ChatwootLogo" />
-    <span>{{ $t('POWERED_BY') }}</span>
+    <img
+      :alt="globalConfig.installationName"
+      :src="globalConfig.logoThumbnail"
+    />
+    <span>
+      {{ useInstallationName($t('POWERED_BY'), globalConfig.installationName) }}
+    </span>
  </a>
 </template>

+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+export default {
+  mixins: [globalConfigMixin],
+  computed: {
+    ...mapGetters({
+      globalConfig: 'globalConfig/get',
+    }),
+  },
+};
+</script>
+
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
@import '~widget/assets/scss/variables.scss';
--- a/app/javascript/widget/store/index.js
+++ b/app/javascript/widget/store/index.js
@@ -7,6 +7,7 @@ import conversation from 'widget/store/modules/conversation';
 import conversationAttributes from 'widget/store/modules/conversationAttributes';
 import conversationLabels from 'widget/store/modules/conversationLabels';
 import events from 'widget/store/modules/events';
+import globalConfig from 'shared/store/globalConfig';
 import message from 'widget/store/modules/message';

 Vue.use(Vuex);
@@ -20,6 +21,7 @@ export default new Vuex.Store({
    conversationAttributes,
    conversationLabels,
    events,
+    globalConfig,
    message,
  },
 });