WIP

client/components/open/integrations/DiscordIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <text-input name="discord_webhook_url" v-model="integration.settings.discord_webhook_url" class="mt-4"
       label="Discord webhook url" help="help">
       <template #help>
@@ -18,24 +18,24 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from "./IntegrationWrapper.vue"
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 import FormNotificationsMessageActions from "~/components/open/forms/components/form-components/components/FormNotificationsMessageActions.vue"
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 });
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const save = () => {
-  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((formIntegrationId.value) ? '/' + formIntegrationId.value : ''), {
-    method: (formIntegrationId.value) ? 'PUT' : 'POST',
+  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : ''), {
+    method: (props.formIntegrationId) ? 'PUT' : 'POST',
     body: integration.value
   }).then(data => {
     alert.success(data.message)

client/components/open/integrations/EmailIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <text-input name="notification_reply_to" v-model="integration.settings.notification_reply_to" class="mt-4"
       label="Notification Reply To" :help="notifiesHelp" />
     <text-area-input name="notification_emails" v-model="integration.settings.notification_emails" class="mt-4"
@@ -13,18 +13,18 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from './IntegrationWrapper.vue'
+import IntegrationWrapper from './components/IntegrationWrapper.vue'
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
-  integrationData: { type: Object, required: true }
+  integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 })
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const replayToEmailField = computed(() => {
@@ -43,8 +43,8 @@ const notifiesHelp = computed(() => {
 })
 
 const save = () => {
-  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((formIntegrationId.value) ? '/' + formIntegrationId.value : ''), {
-    method: (formIntegrationId.value) ? 'PUT' : 'POST',
+  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : ''), {
+    method: (props.formIntegrationId) ? 'PUT' : 'POST',
     body: integration.value
   }).then(data => {
     alert.success(data.message)
@@ -55,4 +55,3 @@ const save = () => {
   })
 }
 </script>
-

client/components/open/integrations/GoogleSheetsIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <div class="my-5">
       Coming Soon...
     </div>
@@ -12,22 +12,22 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from './IntegrationWrapper.vue'
+import IntegrationWrapper from './components/IntegrationWrapper.vue'
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 });
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const save = () => {
   console.log("Save clicked!")
   alert.warning("Coming Soon...")
 }
-</script>
+</script>

client/components/open/integrations/SlackIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <text-input name="slack_webhook_url" v-model="integration.settings.slack_webhook_url" class="mt-4"
       label="Slack webhook url" help="help">
       <template #help>
@@ -18,24 +18,24 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from "./IntegrationWrapper.vue"
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 import FormNotificationsMessageActions from "~/components/open/forms/components/form-components/components/FormNotificationsMessageActions.vue"
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 });
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const save = () => {
-  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((formIntegrationId.value) ? '/' + formIntegrationId.value : ''), {
-    method: (formIntegrationId.value) ? 'PUT' : 'POST',
+  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : ''), {
+    method: (props.formIntegrationId) ? 'PUT' : 'POST',
     body: integration.value
   }).then(data => {
     alert.success(data.message)

client/components/open/integrations/SubmissionConfirmationIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <div class="mt-5">{{ emailSubmissionConfirmationHelp }}</div>
 
     <div v-if="emailSubmissionConfirmationField">
@@ -28,18 +28,18 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from "./IntegrationWrapper.vue"
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 });
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const emailSubmissionConfirmationField = computed(() => {
@@ -58,8 +58,8 @@ const emailSubmissionConfirmationHelp = computed(() => {
 })
 
 const save = () => {
-  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((formIntegrationId.value) ? '/' + formIntegrationId.value : ''), {
-    method: (formIntegrationId.value) ? 'PUT' : 'POST',
+  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : ''), {
+    method: (props.formIntegrationId) ? 'PUT' : 'POST',
     body: integration.value
   }).then(data => {
     alert.success(data.message)

client/components/open/integrations/WebhookIntegration.vue

@@ -1,5 +1,5 @@
 <template>
-  <IntegrationWrapper :service="service" :form="form" v-model="integration">
+  <IntegrationWrapper :integration="props.integration" :form="form" v-model="integration">
     <text-input name="webhook_url" v-model="integration.settings.webhook_url" class="mt-4" label="Webhook url"
       help="We will post form submissions to this endpoint" />
 
@@ -10,23 +10,23 @@
 </template>
 
 <script setup>
-import IntegrationWrapper from "./IntegrationWrapper.vue"
+import IntegrationWrapper from "./components/IntegrationWrapper.vue"
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   form: { type: Object, required: true },
   integrationData: { type: Object, required: true },
+  formIntegrationId: { type: Number, required: false, default: null }
 });
 
 const alert = useAlert()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-const formIntegrationId = computed(() => parseInt(useRoute().params.id) ?? null)
 const integration = ref(props.integrationData)
 
 const save = () => {
-  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((formIntegrationId.value) ? '/' + formIntegrationId.value : ''), {
-    method: (formIntegrationId.value) ? 'PUT' : 'POST',
+  opnFetch('/open/forms/{formid}/integration'.replace('{formid}', props.form.id) + ((props.formIntegrationId) ? '/' + props.formIntegrationId : ''), {
+    method: (props.formIntegrationId) ? 'PUT' : 'POST',
     body: integration.value
   }).then(data => {
     alert.success(data.message)

client/components/open/integrations/IntegrationWrapper.vue → client/components/open/integrations/components/IntegrationWrapper.vue

@@ -2,10 +2,10 @@
   <div :class="wrapperClass" :style="inputStyle">
     <slot name="title">
       <h3 class="font-semibold mt-4 text-xl">
-        Connect your form to {{ service.name }}
-        <pro-tag v-if="service?.is_pro === true" />
+        Setup "{{ integration.name }}"
+        <pro-tag v-if="integration?.is_pro === true" />
       </h3>
-      <a class="cursor-pointer" @click.prevent="crisp.openHelpdesk()">Need help setting up?</a>
+      <a class="cursor-pointer" @click.prevent="crisp.openHelpdesk()">Need help with this integration?</a>
     </slot>
 
     <slot name="logic">
@@ -49,7 +49,7 @@
 import ConditionEditor from '~/components/open/forms/components/form-logic-components/ConditionEditor.client.vue'
 
 const props = defineProps({
-  service: { type: Object, required: true },
+  integration: { type: Object, required: true },
   modelValue: { required: false },
   wrapperClass: { type: String, required: false },
   inputStyle: { type: Object, required: false },

client/composables/stores/useContentStore.js

@@ -14,7 +14,6 @@ export const useContentStore = (mapKey = 'id') => {
     if (Array.isArray(key)) {
       return key.map((k) => content.value.get(k)).filter((item) => item !== undefined)
     }
-    console.log(key, content.value)
     return content.value.get(key)
   }
 

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

@@ -93,7 +93,7 @@
               <pro-tag v-if="sectionItem?.is_pro === true"/>
             </div>
             <NuxtLink v-track.new_integration_click="{ name: sectionItemKey }" class="absolute inset-0"
-                      :to="{ name: 'forms-slug-show-integrations-new', query: { 'service': sectionItemKey } }"/>
+                      :to="{ name: 'forms-slug-show-integrations-new', query: { 'integration': sectionItemKey } }"/>
           </div>
         </div>
       </div>

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

@@ -1,32 +1,9 @@
 <template>
   <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl p-4">
-
-<!--    <div v-if="!integration.id" v-for="(section, sectionName) in sectionsList" :key="sectionName" class="my-6">-->
-<!--      <h3 class="text-gray-500">-->
-<!--        {{ sectionName }}-->
-<!--      </h3>-->
-<!--      <div class="flex flex-wrap mt-4 gap-6">-->
-<!--        <div v-for="(sectionItem, sectionItemKey) in section" :key="sectionItemKey"-->
-<!--             class="bg-gray-50 border border-gray-200 group rounded cursor-pointer hover:bg-gray-100 relative p-4 pb-2 items-center justify-center w-[170px] h-[120px] flex flex-col">-->
-<!--          <div class="flex justify-center">-->
-<!--            <div class="h-10 w-10 text-gray-500 group-hover:text-blue-500 transition-colors flex items-center" v-html="sectionItem.icon"/>-->
-<!--          </div>-->
-<!--          <div class="flex-grow flex items-center">-->
-<!--            <div class="text-gray-400 font-medium mt-2 text-sm text-center">-->
-<!--              {{ sectionItem.name }}-->
-<!--            </div>-->
-<!--            <pro-tag v-if="sectionItem?.is_pro === true"/>-->
-<!--          </div>-->
-<!--          <NuxtLink v-track.new_integration_click="{ name: sectionItemKey }" class="absolute inset-0"-->
-<!--                    :to="{ name: 'forms-slug-show-integrations-new', query: { 'service': sectionItemKey } }"/>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div class="mb-20" v-else>-->
-<!--      <component v-if="integrationProperty.service && integrationProperty.component" :is="integrationProperty.component"-->
-<!--        :form="form" :service="integrationProperty.service" :integrationData="integrationData" />-->
-<!--    </div>-->
+    <div class="mb-20">
+      <component v-if="integration && component" :is="component"
+                 :form="form" :integration="integration" :integrationData="integrationData" />
+    </div>
   </div>
 </template>
 
@@ -47,46 +24,21 @@ useOpnSeoMeta({
 const crisp = useCrisp()
 const router = useRouter()
 const formIntegrationsStore = useFormIntegrationsStore()
-// const integrations = computed(() => formIntegrationsStore.integrations)
-// const integrationId = computed(() => useRoute().query.service ?? null)
-// const integration = computed(() => integrations.value.get(integrationId.value))
-// const integrationProperty = computed(() => {
-//   if (!integration.value || formIntegrationsStore.loading) return {}
-//   const service = integrations.value.get(integrationId.value) ?? null
-//   return {
-//     service,
-//     serviceKey: integrationId.value,
-//     component: resolveComponent(service.file_name)
-//   }
-// })
-
-const useIntegration = () => {
-  const id = ref(null)
-  const value = computed(() => formIntegrationsStore.getByKey(id.value))
-  const data = computed(() => {
-    return {
-      integration_id: id.value,
-      status: true,
-      settings: {},
-      logic: null
-    }
-  })
-  watch(() => useRoute().query.integration, (newValue) => {
-    if (!newValue || newValue === id.value) return
-    id.value = newValue
-    console.log('id.value', id.value)
-    console.log(value)
-  })
-
-  onMounted(() => {
-    // Init value
-    id.value = useRoute().query.integration
-    console.log('in')
-    console.log('id.value', id.value)
-    console.log(value, value.value)
-  })
+formIntegrationsStore.initIntegrations()
+const integrations = computed(() => formIntegrationsStore.integrations)
+const integrationId = computed(() => useRoute().query.integration ?? null)
+const integration = computed(() => integrations.value.get(integrationId.value))
+const component = computed(() => {
+  if (!integration.value) return null
+  return resolveComponent(integration.value.file_name)
+})
+const integrationData = computed(() => {
+  return {
+    integration_id: integrationId.value,
+    status: true,
+    settings: {},
+    logic: null
+  }
+})
 
-  return { value, data, id }
-}
-const integration = useIntegration()
 </script>