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>

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')} ${

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>

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() {

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;

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;

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() {