diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
index ad2daa5f3..a0185498b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationHooks.vue
@@ -2,7 +2,7 @@
 import { isEmptyObject } from '../../../../helper/commons';
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useHook } from './useHook';
 import NewHook from './NewHook.vue';
 import SingleIntegrationHooks from './SingleIntegrationHooks.vue';
 import MultipleIntegrationHooks from './MultipleIntegrationHooks.vue';
@@ -13,13 +13,17 @@ export default {
     SingleIntegrationHooks,
     MultipleIntegrationHooks,
   },
-  mixins: [hookMixin],
   props: {
     integrationId: {
       type: [String, Number],
       required: true,
     },
   },
+  setup(props) {
+    const { integrationId } = props;
+    const { isHookTypeInbox } = useHook(integrationId);
+    return { isHookTypeInbox };
+  },
   data() {
     return {
       loading: {},
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
index 38deab634..51aa8190f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/MultipleIntegrationHooks.vue
@@ -1,14 +1,17 @@
 <script>
 import { mapGetters } from 'vuex';
-import hookMixin from './hookMixin';
+import { useHook } from './useHook';
 export default {
-  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup(props) {
+    const { isHookTypeInbox, hasConnectedHooks } = useHook(props.integration);
+    return { isHookTypeInbox, hasConnectedHooks };
+  },
   computed: {
     ...mapGetters({
       globalConfig: 'globalConfig/get',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
index afaf059a6..aba526865 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/NewHook.vue
@@ -2,16 +2,19 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import hookMixin from './hookMixin';
+import { useHook } from './useHook';
 
 export default {
-  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup(props) {
+    const { isHookTypeInbox } = useHook(props.integration);
+    return { isHookTypeInbox };
+  },
   data() {
     return {
       endPoint: '',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
index 45ea83168..1a424063f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/SingleIntegrationHooks.vue
@@ -1,13 +1,16 @@
 <script>
-import hookMixin from './hookMixin';
+import { useHook } from './useHook';
 export default {
-  mixins: [hookMixin],
   props: {
     integration: {
       type: Object,
       default: () => ({}),
     },
   },
+  setup(props) {
+    const { hasConnectedHooks } = useHook(props.integration);
+    return { hasConnectedHooks };
+  },
 };
 </script>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js
new file mode 100644
index 000000000..c813d5fb0
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/useHook.js
@@ -0,0 +1,26 @@
+import { computed, ref } from 'vue';
+import { useStore } from 'dashboard/composables/store';
+
+export const useHook = (integrationObj, integrationId) => {
+  const store = useStore();
+  const integration = ref(null);
+  if (integrationId) {
+    integration.value =
+      store.getters['integrations/getIntegration'](integrationId);
+  } else {
+    integration.value = integrationObj;
+  }
+
+  const isHookTypeInbox = computed(() => {
+    return integration.value.hook_type === 'inbox';
+  });
+
+  const hasConnectedHooks = computed(() => {
+    return !!integration.value.hooks.length;
+  });
+
+  return {
+    isHookTypeInbox,
+    hasConnectedHooks,
+  };
+};