From 1ebab21cfa606aea61a71c90d96228dc8215ca3a Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 8 Jun 2021 00:22:36 +0530
Subject: [PATCH] chore: Configure API channel name and thumbnail (#2398)

---
 app/controllers/dashboard_controller.rb       |  4 ++-
 .../assets/scss/views/settings/channel.scss   |  3 +-
 .../components/widgets/ChannelItem.vue        |  6 +++-
 .../dashboard/settings/inbox/ChannelList.vue  | 28 ++++++++++++-------
 .../routes/dashboard/settings/inbox/Index.vue |  2 +-
 app/javascript/shared/store/globalConfig.js   |  4 +++
 config/installation_config.yml                |  4 +++
 7 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 14030b565..53c0abb02 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/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]
     )
diff --git a/app/javascript/dashboard/assets/scss/views/settings/channel.scss b/app/javascript/dashboard/assets/scss/views/settings/channel.scss
index 01828eb4d..80400bb71 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/channel.scss
+++ b/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{
diff --git a/app/javascript/dashboard/components/widgets/ChannelItem.vue b/app/javascript/dashboard/components/widgets/ChannelItem.vue
index 32989cc76..37b82436e 100644
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
index 920eb132a..ce19b918e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+++ b/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() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 478d04dbf..7eda147fc 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/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>
 
diff --git a/app/javascript/shared/store/globalConfig.js b/app/javascript/shared/store/globalConfig.js
index 73feb88b5..69117179a 100644
--- a/app/javascript/shared/store/globalConfig.js
+++ b/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,
diff --git a/config/installation_config.yml b/config/installation_config.yml
index e0ca16637..3f14a9a26 100644
--- a/config/installation_config.yml
+++ b/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: