chore: Configure API channel name and thumbnail (#2398)

app/controllers/dashboard_controller.rb

@@ -21,7 +21,9 @@ class DashboardController < ActionController::Base
       'PRIVACY_URL',
       'DISPLAY_MANIFEST',
       'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',
-      'CHATWOOT_INBOX_TOKEN'
+      'CHATWOOT_INBOX_TOKEN',
+      'API_CHANNEL_NAME',
+      'API_CHANNEL_THUMBNAIL'
     ).merge(
       APP_VERSION: Chatwoot.config[:version]
     )

app/javascript/dashboard/assets/scss/views/settings/channel.scss

@@ -31,8 +31,9 @@
     }
 
     img {
-      width: 50%;
       @include margin($space-normal auto);
+      flex: 1;
+      width: 50%;
     }
 
     .channel__title{

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -17,9 +17,13 @@
       src="~dashboard/assets/images/channels/telegram.png"
     />
     <img
-      v-if="channel.key === 'api'"
+      v-if="channel.key === 'api' && !channel.thumbnail"
       src="~dashboard/assets/images/channels/api.png"
     />
+    <img
+      v-if="channel.key === 'api' && channel.thumbnail"
+      :src="channel.thumbnail"
+    />
     <img
       v-if="channel.key === 'email'"
       src="~dashboard/assets/images/channels/email.png"

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -29,16 +29,6 @@ export default {
   },
   data() {
     return {
-      channelList: [
-        { key: 'website', name: 'Website' },
-        { key: 'facebook', name: 'Facebook' },
-        { key: 'twitter', name: 'Twitter' },
-        { key: 'twilio', name: 'Twilio' },
-        { key: 'email', name: 'Email' },
-        { key: 'api', name: 'API' },
-        { key: 'telegram', name: 'Telegram' },
-        { key: 'line', name: 'Line' },
-      ],
       enabledFeatures: {},
     };
   },
@@ -46,8 +36,26 @@ export default {
     account() {
       return this.$store.getters['accounts/getAccount'](this.accountId);
     },
+    channelList() {
+      const { apiChannelName, apiChannelThumbnail } = this.globalConfig;
+      return [
+        { key: 'website', name: 'Website' },
+        { key: 'facebook', name: 'Facebook' },
+        { key: 'twitter', name: 'Twitter' },
+        { key: 'twilio', name: 'Twilio' },
+        { key: 'email', name: 'Email' },
+        {
+          key: 'api',
+          name: apiChannelName || 'API',
+          thumbnail: apiChannelThumbnail,
+        },
+        { key: 'telegram', name: 'Telegram' },
+        { key: 'line', name: 'Line' },
+      ];
+    },
     ...mapGetters({
       accountId: 'getCurrentAccountId',
+      globalConfig: 'globalConfig/get',
     }),
   },
   mounted() {

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -49,7 +49,7 @@
                   Email
                 </span>
                 <span v-if="item.channel_type === 'Channel::Api'">
-                  Api
+                  {{ globalConfig.apiChannelName || 'API' }}
                 </span>
               </td>
 

app/javascript/shared/store/globalConfig.js

@@ -1,4 +1,6 @@
 const {
+  API_CHANNEL_NAME: apiChannelName,
+  API_CHANNEL_THUMBNAIL: apiChannelThumbnail,
   APP_VERSION: appVersion,
   BRAND_NAME: brandName,
   CHATWOOT_INBOX_TOKEN: chatwootInboxToken,
@@ -13,6 +15,8 @@ const {
 } = window.globalConfig || {};
 
 const state = {
+  apiChannelName,
+  apiChannelThumbnail,
   appVersion,
   brandName,
   chatwootInboxToken,

config/installation_config.yml

@@ -36,3 +36,7 @@
 - name: CHATWOOT_INBOX_HMAC_KEY
   value:
   locked: false
+- name: API_CHANNEL_NAME
+  value:
+- name: API_CHANNEL_THUMBNAIL
+  value: