chore: Allow admins to choose the agent bot from the UI (#5895)

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

@@ -333,6 +333,9 @@
     <div v-if="selectedTabKey === 'widgetBuilder'">
       <widget-builder :inbox="inbox" />
     </div>
+    <div v-if="selectedTabKey === 'botConfiguration'">
+      <bot-configuration :inbox="inbox" />
+    </div>
   </div>
 </template>
 
@@ -351,17 +354,20 @@ import GreetingsEditor from 'shared/components/GreetingsEditor';
 import ConfigurationPage from './settingsPage/ConfigurationPage';
 import CollaboratorsPage from './settingsPage/CollaboratorsPage';
 import WidgetBuilder from './WidgetBuilder';
+import BotConfiguration from './components/BotConfiguration';
+import { FEATURE_FLAGS } from '../../../../featureFlags';
 
 export default {
   components: {
+    BotConfiguration,
+    CollaboratorsPage,
+    ConfigurationPage,
+    FacebookReauthorize,
+    GreetingsEditor,
+    PreChatFormSettings,
     SettingIntroBanner,
     SettingsSection,
-    FacebookReauthorize,
-    PreChatFormSettings,
     WeeklyAvailability,
-    GreetingsEditor,
-    ConfigurationPage,
-    CollaboratorsPage,
     WidgetBuilder,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
@@ -388,6 +394,8 @@ export default {
   },
   computed: {
     ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       uiFlags: 'inboxes/getUIFlags',
     }),
     selectedTabKey() {
@@ -406,7 +414,7 @@ export default {
       return '';
     },
     tabs() {
-      const visibleToAllChannelTabs = [
+      let visibleToAllChannelTabs = [
         {
           key: 'inbox_settings',
           name: this.$t('INBOX_MGMT.TABS.SETTINGS'),
@@ -422,16 +430,12 @@ export default {
       ];
 
       if (this.isAWebWidgetInbox) {
-        return [
+        visibleToAllChannelTabs = [
           ...visibleToAllChannelTabs,
           {
             key: 'preChatForm',
             name: this.$t('INBOX_MGMT.TABS.PRE_CHAT_FORM'),
           },
-          {
-            key: 'configuration',
-            name: this.$t('INBOX_MGMT.TABS.CONFIGURATION'),
-          },
           {
             key: 'widgetBuilder',
             name: this.$t('INBOX_MGMT.TABS.WIDGET_BUILDER'),
@@ -444,9 +448,10 @@ export default {
         this.isALineChannel ||
         this.isAPIInbox ||
         this.isAnEmailChannel ||
-        this.isAWhatsAppChannel
+        this.isAWhatsAppChannel ||
+        this.isAWebWidgetInbox
       ) {
-        return [
+        visibleToAllChannelTabs = [
           ...visibleToAllChannelTabs,
           {
             key: 'configuration',
@@ -455,6 +460,21 @@ export default {
         ];
       }
 
+      if (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.AGENT_BOTS
+        ) &&
+        !(this.isAnEmailChannel || this.isATwitterInbox)
+      ) {
+        visibleToAllChannelTabs = [
+          ...visibleToAllChannelTabs,
+          {
+            key: 'botConfiguration',
+            name: this.$t('INBOX_MGMT.TABS.BOT_CONFIGURATION'),
+          },
+        ];
+      }
       return visibleToAllChannelTabs;
     },
     currentInboxId() {

app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="settings--content">
+    <loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
+    <form v-else class="row" @submit.prevent="updateActiveAgentBot">
+      <settings-section
+        :title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
+        :sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
+      >
+        <div class="medium-7 columns">
+          <label>
+            <select v-model="selectedAgentBotId">
+              <option value="" disabled selected>{{
+                $t('AGENT_BOTS.BOT_CONFIGURATION.SELECT_PLACEHOLDER')
+              }}</option>
+              <option
+                v-for="agentBot in agentBots"
+                :key="agentBot.id"
+                :value="agentBot.id"
+              >
+                {{ agentBot.name }}
+              </option>
+            </select>
+          </label>
+          <woot-submit-button
+            :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
+            :loading="uiFlags.isSettingAgentBot"
+          />
+        </div>
+      </settings-section>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import SettingsSection from 'dashboard/components/SettingsSection';
+import LoadingState from 'dashboard/components/widgets/LoadingState';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {
+    LoadingState,
+    SettingsSection,
+  },
+  mixins: [alertMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      selectedAgentBotId: null,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      agentBots: 'agentBots/getBots',
+      uiFlags: 'agentBots/getUIFlags',
+    }),
+    activeAgentBot() {
+      return this.$store.getters['agentBots/getActiveAgentBot'](this.inbox.id);
+    },
+  },
+  watch: {
+    activeAgentBot() {
+      this.selectedAgentBotId = this.activeAgentBot.id;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('agentBots/get');
+    this.$store.dispatch('agentBots/fetchAgentBotInbox', this.inbox.id);
+  },
+
+  methods: {
+    async updateActiveAgentBot() {
+      try {
+        await this.$store.dispatch('agentBots/setAgentBotInbox', {
+          inboxId: this.inbox.id,
+          // Added this to make sure that empty values are not sent to the API
+          botId: this.selectedAgentBotId ? this.selectedAgentBotId : undefined,
+        });
+        this.showAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>