feat: add inbox_ids to captain integration payload

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

@@ -8,7 +8,10 @@
       "DISABLED": "Captain is not enabled on your account.",
       "CLICK_HERE_TO_CONFIGURE": "Click here to configure",
       "LOADING_CONSOLE": "Loading Captain Console...",
-      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again."
+      "FAILED_TO_LOAD_CONSOLE": "Failed to load Captain Console. Please refresh and try again.",
+      "ERRORS": {
+        "CREATE_INBOX_IDS": "Please select at least one inbox to enable Captain"
+      }
     },
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
@@ -46,10 +49,7 @@
       "LIST": {
         "404": "There are no webhooks configured for this account.",
         "TITLE": "Manage webhooks",
-        "TABLE_HEADER": [
-          "Webhook endpoint",
-          "Actions"
-        ]
+        "TABLE_HEADER": ["Webhook endpoint", "Actions"]
       },
       "EDIT": {
         "BUTTON_TEXT": "Edit",
@@ -182,10 +182,7 @@
       "LIST": {
         "404": "There are no dashboard apps configured on this account yet",
         "LOADING": "Fetching dashboard apps...",
-        "TABLE_HEADER": [
-          "Name",
-          "Endpoint"
-        ],
+        "TABLE_HEADER": ["Name", "Endpoint"],
         "EDIT_TOOLTIP": "Edit app",
         "DELETE_TOOLTIP": "Delete app"
       },

app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue

@@ -3,8 +3,14 @@
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import hookMixin from './hookMixin';
+import WithLabel from 'v3/components/Form/WithLabel.vue';
+import InboxFilter from 'dashboard/routes/dashboard/settings/reports/components/Filters/Inboxes.vue';
 
 export default {
+  components: {
+    InboxFilter,
+    WithLabel,
+  },
   mixins: [hookMixin],
   props: {
     integration: {
@@ -17,6 +23,7 @@ export default {
       endPoint: '',
       alertMessage: '',
       values: {},
+      inboxIds: [],
     };
   },
   computed: {
@@ -55,6 +62,9 @@ export default {
     onClose() {
       this.$emit('close');
     },
+    setInboxes(selectedInboxes) {
+      this.inboxIds = selectedInboxes.map(inbox => inbox.id);
+    },
     buildHookPayload() {
       const hookPayload = {
         app_id: this.integration.id,
@@ -76,6 +86,10 @@ export default {
         }
       });
 
+      if (this.isIntegrationCaptain) {
+        hookPayload.settings.inbox_ids = this.inboxIds;
+      }
+
       if (this.isHookTypeInbox && this.values.inbox) {
         hookPayload.inbox_id = this.values.inbox;
       }
@@ -83,6 +97,14 @@ export default {
       return hookPayload;
     },
     async submitForm() {
+      if (this.isIntegrationCaptain && !this.inboxIds.length) {
+        this.alertMessage = this.$t(
+          'INTEGRATION_SETTINGS.CAPTAIN.ERRORS.CREATE_INBOX_IDS'
+        );
+        useAlert(this.alertMessage);
+        return;
+      }
+
       try {
         await this.$store.dispatch(
           'integrations/createHook',
@@ -120,7 +142,7 @@ export default {
         v-bind="item"
       />
       <formulate-input
-        v-if="isHookTypeInbox || isIntegrationCaptain"
+        v-if="isIntegrationDialogflow"
         :options="inboxes"
         type="select"
         name="inbox"
@@ -129,6 +151,17 @@ export default {
         validation="required"
         validation-name="Inbox"
       />
+      <WithLabel
+        name="inbox"
+        :label="$t('INTEGRATION_APPS.ADD.FORM.INBOX.PLACEHOLDER')"
+      >
+        <InboxFilter
+          v-if="isIntegrationCaptain"
+          class="w-full"
+          multiple
+          @inboxFilterSelection="setInboxes"
+        />
+      </WithLabel>
       <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button :disabled="hasErrors" :loading="uiFlags.isCreatingHook">
           {{ $t('INTEGRATION_APPS.ADD.FORM.SUBMIT') }}