Notification & Integrations refactoring (#346)

* Integrations Refactoring - WIP

* integrations list & edit - WIP

* Fix integration store binding issue

* integrations refactor - WIP

* Form integration - WIP

* Form integration Edit - WIP

* Integration Refactor - Slack - WIP

* Integration Refactor - Discord - WIP

* Integration Refactor - Webhook - WIP

* Integration Refactor - Send Submission Confirmation - WIP

* Integration Refactor - Backend handler - WIP

* Form Integration Status field

* Integration Refactor - Backend SubmissionConfirmation - WIP

* IntegrationMigration Command

* skip confirmation email test case

* Small refactoring

* FormIntegration status active/inactive

* formIntegrationData to integrationData

* Rename file name with Integration suffix for integration realted files

* Loader on form integrations

* WIP

* form integration test case

* WIP

* Added Integration card - working on refactoring

* change location for IntegrationCard and update package file

* Form Integration Create/Edit in single Modal

* Remove integration extra pages

* crisp_help_page_slug for integration json

* integration logic as collapse

* UI improvements

* WIP

* Trying to debug vue devtools

* WIP for integrations

* getIntegrationHandler change namespace name

* useForm for integration fields + validation structure

* Integration Test case & apply validation rules

* Apply useform changes to integration other files

* validation rules for FormNotificationsMessageActions fields

* Zapier integration as coming soon

* Update FormCleaner

* set default settings for confirmation integration

* WIP

* Finish validation for all integrations

* Updated purify, added integration formatData

* Fix testcase

* Ran pint; working on integration errors

* Handle integration events

* command for Delete Old Integration Events

* Display Past Events in Modal

* on Integration event create with status error send email to form creator

* Polish styling

* Minor improvements

* Finish badge and integration status

* Fix tests and add an integration event test

* Lint

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/forms/[slug]/show/integrations/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
+    <div class="mb-20">
+      <h1 class="font-semibold mt-4 text-xl">
+        Your integrations
+      </h1>
+
+      <div class="text-sm text-gray-500">
+        Read, update and create data with dozens of 3rd-party integrations
+      </div>
+
+      <div v-if="integrationsLoading" class="my-6">
+        <Loader class="h-6 w-6 mx-auto"/>
+      </div>
+      <div v-else-if="formIntegrationsList.length" class="my-6">
+          <IntegrationCard v-for="(row) in formIntegrationsList" :key="row.id" :integration="row" :form="form"/>
+      </div>
+      <div class="text-gray-500 border shadow rounded-md p-5 mt-4" v-else>
+        No integration yet form this form.
+      </div>
+
+
+      <h1 class="font-semibold mt-8 text-xl">
+        Add a new integration
+      </h1>
+      <div v-for="(section, sectionName) in sectionsList" :key="sectionName" class="mb-8">
+        <h3 class="text-gray-500">
+          {{ sectionName }}
+        </h3>
+        <div class="flex flex-wrap mt-2 gap-4">
+          <IntegrationListOption v-for="(sectionItem, sectionItemKey) in section"
+                                 @select="openIntegrationModal"
+                                 :key="sectionItemKey" :integration="sectionItem"/>
+        </div>
+      </div>
+      <IntegrationModal v-if="form && selectedIntegrationKey && selectedIntegration" :form="form"
+                        :integration="selectedIntegration" :integrationKey="selectedIntegrationKey"
+                        :show="showIntegrationModal"
+                        @close="closeIntegrationModal"/>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed} from 'vue'
+import IntegrationModal from '~/components/open/integrations/components/IntegrationModal.vue'
+
+const props = defineProps({
+  form: {type: Object, required: true}
+})
+
+definePageMeta({
+  middleware: "auth"
+})
+useOpnSeoMeta({
+  title: (props.form) ? 'Form Integrations - ' + props.form.title : 'Form Integrations'
+})
+
+const alert = useAlert()
+const crisp = useCrisp()
+const route = useRoute()
+
+const formIntegrationsStore = useFormIntegrationsStore()
+const integrationsLoading = computed(() => formIntegrationsStore.loading)
+const integrations = computed(() => formIntegrationsStore.availableIntegrations)
+const sectionsList = computed(() => formIntegrationsStore.integrationsBySection)
+const formIntegrationsList = computed(() => formIntegrationsStore.getAllByFormId(props.form.id))
+
+let showIntegrationModal = ref(false)
+let selectedIntegrationKey = ref(null)
+let selectedIntegration = ref(null)
+
+onMounted(() => {
+  formIntegrationsStore.fetchFormIntegrations(props.form.id)
+})
+
+const openIntegrationModal = (itemKey) => {
+  if (!itemKey || !integrations.value.has(itemKey)) return alert.error('Integration not found')
+  if (integrations.value.get(itemKey).coming_soon) return alert.warning('This integration is not available yet')
+  selectedIntegrationKey.value = itemKey
+  selectedIntegration.value = integrations.value.get(selectedIntegrationKey.value)
+  showIntegrationModal.value = true
+}
+const closeIntegrationModal = () => {
+  showIntegrationModal.value = false
+  nextTick(() => {
+    selectedIntegrationKey.value = null
+    selectedIntegration.value = null
+  })
+}
+</script>