chore: Repalce Hook Mixin with useHook composable [CW-3454]

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: {},

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',

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: '',

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>
 

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,
+  };
+};