⚡ (webhook) Enable advanced config for Zapier and Make.com

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComContent.tsx

@@ -1,30 +1,16 @@
 import { Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
-import { defaultWebhookAttributes, MakeComBlock, Webhook } from 'models'
-import { useEffect } from 'react'
+import { MakeComBlock } from 'models'
 import { byId, isNotDefined } from 'utils'
 
 type Props = {
   block: MakeComBlock
 }
 
 export const MakeComContent = ({ block }: Props) => {
-  const { webhooks, typebot, updateWebhook } = useTypebot()
+  const { webhooks } = useTypebot()
   const webhook = webhooks.find(byId(block.webhookId))
 
-  useEffect(() => {
-    if (!typebot) return
-    if (!webhook) {
-      const { webhookId } = block
-      const newWebhook = {
-        id: webhookId,
-        ...defaultWebhookAttributes,
-        typebotId: typebot.id,
-      } as Webhook
-      updateWebhook(webhookId, newWebhook)
-    }
-  }, [block, typebot, updateWebhook, webhook])
-
   if (isNotDefined(webhook?.body))
     return <Text color="gray.500">Configure...</Text>
   return (

apps/builder/src/features/blocks/integrations/makeCom/components/MakeComSettings.tsx

@@ -1,31 +1,68 @@
-import {
-  Alert,
-  AlertIcon,
-  Button,
-  Input,
-  Link,
-  Stack,
-  Text,
-} from '@chakra-ui/react'
+import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
 import { ExternalLinkIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor'
-import { MakeComBlock } from 'models'
-import React from 'react'
-import { byId } from 'utils'
+import { MakeComBlock, Webhook, WebhookOptions } from 'models'
+import React, { useCallback, useEffect, useState } from 'react'
+import { byId, env } from 'utils'
+import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
+import { useDebouncedCallback } from 'use-debounce'
+
+const debounceWebhookTimeout = 2000
 
 type Props = {
   block: MakeComBlock
+  onOptionsChange: (options: WebhookOptions) => void
 }
 
-export const MakeComSettings = ({ block }: Props) => {
-  const { webhooks } = useTypebot()
-  const webhook = webhooks.find(byId(block.webhookId))
+export const MakeComSettings = ({
+  block: { webhookId, id: blockId, options },
+  onOptionsChange,
+}: Props) => {
+  const { webhooks, updateWebhook } = useTypebot()
+  const webhook = webhooks.find(byId(webhookId))
+
+  const [localWebhook, _setLocalWebhook] = useState(webhook)
+  const updateWebhookDebounced = useDebouncedCallback(
+    async (newLocalWebhook) => {
+      await updateWebhook(newLocalWebhook.id, newLocalWebhook)
+    },
+    env('E2E_TEST') === 'true' ? 0 : debounceWebhookTimeout
+  )
+
+  const setLocalWebhook = useCallback(
+    (newLocalWebhook: Webhook) => {
+      _setLocalWebhook(newLocalWebhook)
+      updateWebhookDebounced(newLocalWebhook)
+    },
+    [updateWebhookDebounced]
+  )
+
+  useEffect(() => {
+    if (
+      !localWebhook ||
+      localWebhook.url ||
+      !webhook?.url ||
+      webhook.url === localWebhook.url
+    )
+      return
+    setLocalWebhook({
+      ...localWebhook,
+      url: webhook?.url,
+    })
+  }, [webhook, localWebhook, setLocalWebhook])
+
+  useEffect(
+    () => () => {
+      updateWebhookDebounced.flush()
+    },
+    [updateWebhookDebounced]
+  )
 
   return (
     <Stack spacing={4}>
-      <Alert status={webhook?.url ? 'success' : 'info'} rounded="md">
+      <Alert status={localWebhook?.url ? 'success' : 'info'} rounded="md">
         <AlertIcon />
-        {webhook?.url ? (
+        {localWebhook?.url ? (
           <>Your scenario is correctly configured 🚀</>
         ) : (
           <Stack>
@@ -41,7 +78,15 @@ export const MakeComSettings = ({ block }: Props) => {
           </Stack>
         )}
       </Alert>
-      {webhook?.url && <Input value={webhook?.url} isDisabled />}
+      {localWebhook && (
+        <WebhookAdvancedConfigForm
+          blockId={blockId}
+          webhook={localWebhook}
+          options={options}
+          onWebhookChange={setLocalWebhook}
+          onOptionsChange={onOptionsChange}
+        />
+      )}
     </Stack>
   )
 }

apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectContent.tsx

@@ -1,30 +1,16 @@
 import { Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor'
-import { defaultWebhookAttributes, PabblyConnectBlock, Webhook } from 'models'
-import { useEffect } from 'react'
+import { PabblyConnectBlock } from 'models'
 import { byId, isNotDefined } from 'utils'
 
 type Props = {
   block: PabblyConnectBlock
 }
 
 export const PabblyConnectContent = ({ block }: Props) => {
-  const { webhooks, typebot, updateWebhook } = useTypebot()
+  const { webhooks } = useTypebot()
   const webhook = webhooks.find(byId(block.webhookId))
 
-  useEffect(() => {
-    if (!typebot) return
-    if (!webhook) {
-      const { webhookId } = block
-      const newWebhook = {
-        id: webhookId,
-        ...defaultWebhookAttributes,
-        typebotId: typebot.id,
-      } as Webhook
-      updateWebhook(webhookId, newWebhook)
-    }
-  }, [block, typebot, updateWebhook, webhook])
-
   if (isNotDefined(webhook?.body))
     return <Text color="gray.500">Configure...</Text>
   return (

apps/builder/src/features/blocks/integrations/pabbly/components/PabblyConnectSettings.tsx

@@ -0,0 +1,92 @@
+import { Alert, AlertIcon, Button, Link, Stack, Text } from '@chakra-ui/react'
+import { ExternalLinkIcon } from '@/components/icons'
+import { useTypebot } from '@/features/editor'
+import { PabblyConnectBlock, Webhook, WebhookOptions } from 'models'
+import React, { useEffect, useState } from 'react'
+import { byId, env } from 'utils'
+import { WebhookAdvancedConfigForm } from '../../webhook/components/WebhookAdvancedConfigForm'
+import { useDebouncedCallback } from 'use-debounce'
+import { TextInput } from '@/components/inputs'
+
+const debounceWebhookTimeout = 2000
+
+type Props = {
+  block: PabblyConnectBlock
+  onOptionsChange: (options: WebhookOptions) => void
+}
+
+export const PabblyConnectSettings = ({
+  block: { webhookId, id: blockId, options },
+  onOptionsChange,
+}: Props) => {
+  const { webhooks, updateWebhook } = useTypebot()
+
+  const [localWebhook, _setLocalWebhook] = useState(
+    webhooks.find(byId(webhookId))
+  )
+
+  const updateWebhookDebounced = useDebouncedCallback(
+    async (newLocalWebhook) => {
+      await updateWebhook(newLocalWebhook.id, newLocalWebhook)
+    },
+    env('E2E_TEST') === 'true' ? 0 : debounceWebhookTimeout
+  )
+
+  const setLocalWebhook = (newLocalWebhook: Webhook) => {
+    _setLocalWebhook(newLocalWebhook)
+    updateWebhookDebounced(newLocalWebhook)
+  }
+
+  useEffect(
+    () => () => {
+      updateWebhookDebounced.flush()
+    },
+    [updateWebhookDebounced]
+  )
+
+  const handleUrlChange = (url: string) =>
+    localWebhook &&
+    setLocalWebhook({
+      ...localWebhook,
+      url,
+    })
+
+  return (
+    <Stack spacing={4}>
+      <Alert status={localWebhook?.url ? 'success' : 'info'} rounded="md">
+        <AlertIcon />
+        {localWebhook?.url ? (
+          <>Your scenario is correctly configured 🚀</>
+        ) : (
+          <Stack>
+            <Text>Head up to Pabbly Connect to get the webhook URL:</Text>
+            <Button
+              as={Link}
+              href="https://www.pabbly.com/connect/integrations/typebot/"
+              isExternal
+              colorScheme="blue"
+            >
+              <Text mr="2">Pabbly.com</Text> <ExternalLinkIcon />
+            </Button>
+          </Stack>
+        )}
+      </Alert>
+      <TextInput
+        placeholder="Paste webhook URL..."
+        defaultValue={localWebhook?.url ?? ''}
+        onChange={handleUrlChange}
+        withVariableButton={false}
+        debounceTimeout={0}
+      />
+      {localWebhook && (
+        <WebhookAdvancedConfigForm
+          blockId={blockId}
+          webhook={localWebhook}
+          options={options}
+          onWebhookChange={setLocalWebhook}
+          onOptionsChange={onOptionsChange}
+        />
+      )}
+    </Stack>
+  )
+}