From 135261870ced8a0d145c11236841c57c43a583d6 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Thu, 12 Dec 2024 11:09:09 +0530
Subject: [PATCH] Add integration action components and update integration JSON
 files

- Introduced new action components for Email, Slack, Discord, Webhook, and Google Sheets integrations, enhancing the user interface for managing these integrations.
- Updated the `integrations.json` files to include `actions_file_name` for each integration, linking them to their respective action components.
- Improved the `GoogleSheetsIntegrationActions.vue` component by replacing direct provider information display with a badge for better UI consistency.

These changes aim to streamline integration management and improve the overall user experience.
---
 api/resources/data/forms/integrations.json    |  4 ++
 .../components/DiscordIntegrationActions.vue  | 46 ++++++++++++
 .../components/EmailIntegrationActions.vue    | 70 +++++++++++++++++++
 .../GoogleSheetsIntegrationActions.vue        | 16 ++---
 .../components/IntegrationCard.vue            |  2 +-
 .../components/SlackIntegrationActions.vue    | 46 ++++++++++++
 .../components/WebhookIntegrationActions.vue  | 44 ++++++++++++
 client/data/forms/integrations.json           |  4 ++
 client/lib/utils.js                           | 12 ++++
 9 files changed, 235 insertions(+), 9 deletions(-)
 create mode 100644 client/components/open/integrations/components/DiscordIntegrationActions.vue
 create mode 100644 client/components/open/integrations/components/EmailIntegrationActions.vue
 create mode 100644 client/components/open/integrations/components/SlackIntegrationActions.vue
 create mode 100644 client/components/open/integrations/components/WebhookIntegrationActions.vue

diff --git a/api/resources/data/forms/integrations.json b/api/resources/data/forms/integrations.json
index a61ff56db..07bcf4329 100644
--- a/api/resources/data/forms/integrations.json
+++ b/api/resources/data/forms/integrations.json
@@ -4,6 +4,7 @@
     "icon": "heroicons:envelope-20-solid",
     "section_name": "Notifications",
     "file_name": "EmailIntegration",
+    "actions_file_name": "EmailIntegrationActions",
     "is_pro": false,
     "crisp_help_page_slug": "can-i-receive-notifications-on-form-submissions-134svqv"
   },
@@ -12,6 +13,7 @@
     "icon": "mdi:slack",
     "section_name": "Notifications",
     "file_name": "SlackIntegration",
+    "actions_file_name": "SlackIntegrationActions",
     "is_pro": true
   },
   "discord": {
@@ -19,6 +21,7 @@
     "icon": "ic:baseline-discord",
     "section_name": "Notifications",
     "file_name": "DiscordIntegration",
+    "actions_file_name": "DiscordIntegrationActions",
     "is_pro": true
   },
   "webhook": {
@@ -26,6 +29,7 @@
     "icon": "material-symbols:webhook",
     "section_name": "Automation",
     "file_name": "WebhookIntegration",
+    "actions_file_name": "WebhookIntegrationActions",
     "is_pro": false
   },
   "zapier": {
diff --git a/client/components/open/integrations/components/DiscordIntegrationActions.vue b/client/components/open/integrations/components/DiscordIntegrationActions.vue
new file mode 100644
index 000000000..1ae2ac0bc
--- /dev/null
+++ b/client/components/open/integrations/components/DiscordIntegrationActions.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-1 items-center">
+    <div
+      v-if="integration"
+      class="hidden md:block space-y-1"
+    >
+      <UBadge
+        :label="mentionAsText(integration.data.message)"
+        color="gray"
+        size="xs"
+        class="max-w-[300px] truncate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { mentionAsText } from '~/lib/utils.js'
+
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data || props.integration.data.length === 0) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
+})
+</script>
diff --git a/client/components/open/integrations/components/EmailIntegrationActions.vue b/client/components/open/integrations/components/EmailIntegrationActions.vue
new file mode 100644
index 000000000..7f8b803e3
--- /dev/null
+++ b/client/components/open/integrations/components/EmailIntegrationActions.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="flex flex-1 items-center">
+    <div
+      v-if="integration"
+      class="hidden md:block space-y-1"
+    >
+      <UBadge
+        :label="mentionAsText(integration.data.subject)"
+        color="gray"
+        size="xs"
+        class="max-w-[300px] truncate"
+      />
+      <div class="flex items-center gap-1">
+        <UBadge
+          :label="firstEmail(integration.data.send_to)"
+          color="white"
+          size="xs"
+          class="max-w-[300px] truncate"
+        />
+        <UBadge
+          v-if="additionalEmailsCount(integration.data.send_to) > 0"
+          :label="`+${additionalEmailsCount(integration.data.send_to)}`"
+          color="white"
+          size="xs"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { mentionAsText } from '~/lib/utils.js'
+
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data || props.integration.data.length === 0) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
+})
+
+const firstEmail = (sendTo) => {
+  const emails = mentionAsText(sendTo).split('\n').filter(Boolean)
+  return emails[0] || ''
+}
+
+const additionalEmailsCount = (sendTo) => {
+  const emails = mentionAsText(sendTo).split('\n').filter(Boolean)
+  return Math.max(0, emails.length - 1)
+}
+</script>
diff --git a/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue b/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
index eb47176e3..223ebe753 100644
--- a/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
+++ b/client/components/open/integrations/components/GoogleSheetsIntegrationActions.vue
@@ -4,14 +4,12 @@
       v-if="integration.provider"
       class="hidden md:block space-y-1"
     >
-      <div
-        class="font-medium mr-2"
-      >
-        {{ integration.provider.name }}
-      </div>
-      <div class="text-sm">
-        {{ integration.provider.email }}
-      </div>
+      <UBadge
+        :label="mentionAsText(integration.provider.email)"
+        color="gray"
+        size="xs"
+        class="max-w-[300px] truncate"
+      />
     </div>
 
     <div
@@ -39,6 +37,8 @@
 </template>
 
 <script setup>
+import { mentionAsText } from '~/lib/utils.js'
+
 const props = defineProps({
   integration: {
     type: Object,
diff --git a/client/components/open/integrations/components/IntegrationCard.vue b/client/components/open/integrations/components/IntegrationCard.vue
index 43a76f148..15990cda2 100644
--- a/client/components/open/integrations/components/IntegrationCard.vue
+++ b/client/components/open/integrations/components/IntegrationCard.vue
@@ -3,7 +3,7 @@
     class="text-gray-500 border shadow rounded-md p-5 mt-4 relative flex items-center"
   >
     <div
-      class="flex items-center"
+      class="flex items-center w-full md:w-1/4"
       :class="{'flex-grow': !actionsComponent}"
     >
       <div
diff --git a/client/components/open/integrations/components/SlackIntegrationActions.vue b/client/components/open/integrations/components/SlackIntegrationActions.vue
new file mode 100644
index 000000000..1ae2ac0bc
--- /dev/null
+++ b/client/components/open/integrations/components/SlackIntegrationActions.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="flex flex-1 items-center">
+    <div
+      v-if="integration"
+      class="hidden md:block space-y-1"
+    >
+      <UBadge
+        :label="mentionAsText(integration.data.message)"
+        color="gray"
+        size="xs"
+        class="max-w-[300px] truncate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { mentionAsText } from '~/lib/utils.js'
+
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data || props.integration.data.length === 0) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
+})
+</script>
diff --git a/client/components/open/integrations/components/WebhookIntegrationActions.vue b/client/components/open/integrations/components/WebhookIntegrationActions.vue
new file mode 100644
index 000000000..08731d05b
--- /dev/null
+++ b/client/components/open/integrations/components/WebhookIntegrationActions.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-1 items-center">
+    <div
+      v-if="integration"
+      class="hidden md:block space-y-1"
+    >
+      <UBadge
+        :label="integration.data.webhook_url"
+        color="gray"
+        size="xs"
+        class="max-w-[300px] truncate"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  integration: {
+    type: Object,
+    required: true,
+  },
+  form: {
+    type: Object,
+    required: true,
+  }
+})
+
+const formIntegrationsStore = useFormIntegrationsStore()
+let interval = null
+
+onMounted(() => {
+  if (!props.integration.data || props.integration.data.length === 0) {
+    interval = setInterval(() => formIntegrationsStore.fetchFormIntegrations(props.form.id), 3000)
+    setTimeout(() => { clearInterval(interval) }, 30000)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (interval) {
+    clearInterval(interval)
+  }
+})
+</script>
diff --git a/client/data/forms/integrations.json b/client/data/forms/integrations.json
index a61ff56db..07bcf4329 100644
--- a/client/data/forms/integrations.json
+++ b/client/data/forms/integrations.json
@@ -4,6 +4,7 @@
     "icon": "heroicons:envelope-20-solid",
     "section_name": "Notifications",
     "file_name": "EmailIntegration",
+    "actions_file_name": "EmailIntegrationActions",
     "is_pro": false,
     "crisp_help_page_slug": "can-i-receive-notifications-on-form-submissions-134svqv"
   },
@@ -12,6 +13,7 @@
     "icon": "mdi:slack",
     "section_name": "Notifications",
     "file_name": "SlackIntegration",
+    "actions_file_name": "SlackIntegrationActions",
     "is_pro": true
   },
   "discord": {
@@ -19,6 +21,7 @@
     "icon": "ic:baseline-discord",
     "section_name": "Notifications",
     "file_name": "DiscordIntegration",
+    "actions_file_name": "DiscordIntegrationActions",
     "is_pro": true
   },
   "webhook": {
@@ -26,6 +29,7 @@
     "icon": "material-symbols:webhook",
     "section_name": "Automation",
     "file_name": "WebhookIntegration",
+    "actions_file_name": "WebhookIntegrationActions",
     "is_pro": false
   },
   "zapier": {
diff --git a/client/lib/utils.js b/client/lib/utils.js
index d1339a50e..8838818ca 100644
--- a/client/lib/utils.js
+++ b/client/lib/utils.js
@@ -109,3 +109,15 @@ export const customDomainUsed = function () {
 
   return host !== appDomain && getDomain(host) !== appDomain
 }
+
+export const mentionAsText = (content) => {
+  if (!content) return ''
+  
+  // Parse the content and style mentions
+  return content.replace(
+    /<span\s+mention-field-id="([^"]+)"\s+mention-field-name="([^"]+)"[^>]*>([^<]+)<\/span>/g,
+    (match, fieldId, fieldName, text) => {
+      return `${text}`
+    }
+  )
+}
\ No newline at end of file