feat: Allow disconnecting agent bots (#6245)

* Allow disconnecting the bot

* Code Climate fix

* Show error message if exists

* Codeclimate test - rename file

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/i18n/locale/en/agentBots.json

@@ -24,8 +24,11 @@
       "TITLE": "Select an agent bot",
       "DESC": "You can set an agent bot from the list to this inbox. The bot can initially handle the conversation and transfer it to an agent when needed.",
       "SUBMIT": "Update",
+      "DISCONNECT": "Disconnect Bot",
       "SUCCESS_MESSAGE": "Successfully updated the agent bot",
+      "DISCONNECTED_SUCCESS_MESSAGE": "Successfully disconnected the agent bot",
       "ERROR_MESSAGE": "Could not update the agent bot, please try again later",
+      "DISCONNECTED_ERROR_MESSAGE": "Could not disconnect the agent bot, please try again later",
       "SELECT_PLACEHOLDER": "Select Bot"
     },
     "ADD": {

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

@@ -21,10 +21,23 @@
               </option>
             </select>
           </label>
+          <div class="button-container">
             <woot-submit-button
               :button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
               :loading="uiFlags.isSettingAgentBot"
             />
+            <woot-button
+              type="button"
+              :disabled="!selectedAgentBotId"
+              :loading="uiFlags.isDisconnecting"
+              variant="smooth"
+              color-scheme="alert"
+              class="button--disconnect"
+              @click="disconnectBot"
+            >
+              {{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
+            </woot-button>
+          </div>
         </div>
       </settings-section>
     </form>
@@ -86,6 +99,27 @@ export default {
         this.showAlert(this.$t('AGENT_BOTS.BOT_CONFIGURATION.ERROR_MESSAGE'));
       }
     },
+    async disconnectBot() {
+      try {
+        await this.$store.dispatch('agentBots/disconnectBot', {
+          inboxId: this.inbox.id,
+        });
+        this.showAlert(
+          this.$t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECTED_SUCCESS_MESSAGE')
+        );
+      } catch (error) {
+        this.showAlert(
+          error?.message ||
+            this.$t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECTED_ERROR_MESSAGE')
+        );
+      }
+    },
   },
 };
 </script>
+
+<style scoped lang="scss">
+.button--disconnect {
+  margin-left: var(--space-small);
+}
+</style>

app/javascript/dashboard/store/modules/agentBots.js

@@ -15,6 +15,7 @@ export const state = {
     isUpdating: false,
     isFetchingAgentBot: false,
     isSettingAgentBot: false,
+    isDisconnecting: false,
   },
   agentBotInbox: {},
 };
@@ -119,6 +120,18 @@ export const actions = {
       commit(types.SET_AGENT_BOT_UI_FLAG, { isSettingAgentBot: false });
     }
   },
+
+  disconnectBot: async ({ commit }, { inboxId }) => {
+    commit(types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: true });
+    try {
+      await InboxesAPI.setAgentBot(inboxId, null);
+      commit(types.SET_AGENT_BOT_INBOX, { agentBotId: '', inboxId });
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false });
+    }
+  },
 };
 
 export const mutations = {

app/javascript/dashboard/store/modules/specs/agentBots/agentBots.spec.js

@@ -132,4 +132,25 @@ describe('#actions', () => {
       ]);
     });
   });
+  describe('#disconnectBot', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({ data: {} });
+      await actions.disconnectBot({ commit }, { inboxId: 2 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: true }],
+        [types.SET_AGENT_BOT_INBOX, { inboxId: 2, agentBotId: '' }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.disconnectBot({ commit }, { inboxId: 2, agentBotId: '' })
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: true }],
+        [types.SET_AGENT_BOT_UI_FLAG, { isDisconnecting: false }],
+      ]);
+    });
+  });
 });