fix(editor): 🐛 subscribe unsub zapier

apps/builder/components/shared/Graph/Nodes/StepNode/SettingsPopoverContent/bodies/ZapierSettings.tsx

@@ -20,6 +20,7 @@ type Props = {
 export const ZapierSettings = ({ step }: Props) => {
   const { webhooks } = useTypebot()
   const webhook = webhooks.find(byId(step.webhookId))
+
   return (
     <Stack spacing={4}>
       <Alert

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodeContent/contents/ZapierContent.tsx

@@ -1,15 +1,30 @@
 import { Text } from '@chakra-ui/react'
 import { useTypebot } from 'contexts/TypebotContext'
-import { ZapierStep } from 'models'
+import { defaultWebhookAttributes, Webhook, ZapierStep } from 'models'
+import { useEffect } from 'react'
 import { byId, isNotDefined } from 'utils'
 
 type Props = {
   step: ZapierStep
 }
 
-export const ZapierContent = ({ step: { webhookId } }: Props) => {
+export const ZapierContent = ({ step }: Props) => {
-  const { webhooks } = useTypebot()
+  const { webhooks, typebot, updateWebhook } = useTypebot()
-  const webhook = webhooks.find(byId(webhookId))
+  const webhook = webhooks.find(byId(step.webhookId))
+
+  useEffect(() => {
+    if (!typebot) return
+    if (!webhook) {
+      const { webhookId } = step
+      const newWebhook = {
+        id: webhookId,
+        ...defaultWebhookAttributes,
+        typebotId: typebot.id,
+      } as Webhook
+      updateWebhook(webhookId, newWebhook)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   if (isNotDefined(webhook?.body))
     return <Text color="gray.500">Configure...</Text>

apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/subscribeWebhook.ts

@@ -24,7 +24,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
       const { webhookId } = typebot.blocks
         .find(byId(blockId))
         ?.steps.find(byId(stepId)) as WebhookStep
-      await prisma.webhook.update({ where: { id: webhookId }, data: { url } })
+      await prisma.webhook.update({
+        where: { id: webhookId },
+        data: { url, body: '{{state}}' },
+      })
 
       return res.send({ message: 'success' })
     } catch (err) {