✨ (api) Add CRUD typebot endpoints

Closes #320, closes #696

apps/builder/src/features/blocks/integrations/webhook/components/WebhookAdvancedConfigForm.tsx

@@ -47,7 +47,7 @@ export const WebhookAdvancedConfigForm = ({
   onWebhookChange,
   onOptionsChange,
 }: Props) => {
-  const { typebot, save, updateWebhook } = useTypebot()
+  const { typebot, save } = useTypebot()
   const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
   const [testResponse, setTestResponse] = useState<string>()
   const [responseKeys, setResponseKeys] = useState<string[]>([])
@@ -80,8 +80,7 @@ export const WebhookAdvancedConfigForm = ({
   const executeTestRequest = async () => {
     if (!typebot) return
     setIsTestResponseLoading(true)
-    if (!options.webhook)
-      await Promise.all([updateWebhook(webhook.id, webhook), save()])
+    if (!options.webhook) await save()
     else await save()
     const { data, error } = await executeWebhook(
       typebot.id,

apps/builder/src/features/blocks/integrations/webhook/components/WebhookContent.tsx

@@ -1,17 +1,15 @@
 import { Stack, Text } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { WebhookBlock } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
 import { SetVariableLabel } from '@/components/SetVariableLabel'
 
 type Props = {
   block: WebhookBlock
 }
 
-export const WebhookContent = ({ block: { options, webhookId } }: Props) => {
+export const WebhookContent = ({ block: { options } }: Props) => {
   const { typebot } = useTypebot()
-  const { webhooks } = useTypebot()
-  const webhook = options.webhook ?? webhooks.find(byId(webhookId))
+  const webhook = options.webhook
 
   if (!webhook?.url) return <Text color="gray.500">Configure...</Text>
   return (

apps/builder/src/features/blocks/integrations/webhook/components/WebhookSettings.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Spinner, Stack } from '@chakra-ui/react'
-import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { WebhookOptions, Webhook, WebhookBlock } from '@typebot.io/schemas'
-import { byId } from '@typebot.io/lib'
 import { TextInput } from '@/components/inputs'
 import { WebhookAdvancedConfigForm } from './WebhookAdvancedConfigForm'
 
@@ -12,42 +10,32 @@ type Props = {
 }
 
 export const WebhookSettings = ({
-  block: { webhookId, id: blockId, options },
+  block: { id: blockId, options },
   onOptionsChange,
 }: Props) => {
-  const { webhooks, updateWebhook } = useTypebot()
-  const [localWebhook, _setLocalWebhook] = useState(
-    webhooks.find(byId(webhookId))
-  )
-
   const setLocalWebhook = async (newLocalWebhook: Webhook) => {
-    if (options.webhook) {
-      onOptionsChange({ ...options, webhook: newLocalWebhook })
-      return
-    }
-    _setLocalWebhook(newLocalWebhook)
-    await updateWebhook(newLocalWebhook.id, newLocalWebhook)
+    if (!options.webhook) return
+    onOptionsChange({ ...options, webhook: newLocalWebhook })
+    return
   }
 
   const updateUrl = (url: string) => {
-    if (options.webhook)
-      onOptionsChange({ ...options, webhook: { ...options.webhook, url } })
-    else if (localWebhook)
-      setLocalWebhook({ ...localWebhook, url: url ?? undefined })
+    if (!options.webhook) return
+    onOptionsChange({ ...options, webhook: { ...options.webhook, url } })
   }
 
-  if (!localWebhook && !options.webhook) return <Spinner />
+  if (!options.webhook) return <Spinner />
 
   return (
     <Stack spacing={4}>
       <TextInput
         placeholder="Paste webhook URL..."
-        defaultValue={options.webhook?.url ?? localWebhook?.url ?? ''}
+        defaultValue={options.webhook?.url ?? ''}
         onChange={updateUrl}
       />
       <WebhookAdvancedConfigForm
         blockId={blockId}
-        webhook={(options.webhook ?? localWebhook) as Webhook}
+        webhook={options.webhook as Webhook}
         options={options}
         onWebhookChange={setLocalWebhook}
         onOptionsChange={onOptionsChange}

apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts

@@ -174,7 +174,7 @@ test.describe('API', () => {
     expect(data.resultExample).toMatchObject({
       message: 'This is a sample result, it has been generated ⬇️',
       Welcome: 'Hi!',
-      Email: 'test@email.com',
+      Email: 'user@email.com',
       Name: 'answer value',
       Services: 'Website dev, Content Marketing, Social Media, UI / UX Design',
       'Additional information': 'answer value',