♻️ (editor) Improve webhook creation

Remove terrible useEffects

apps/builder/next.config.js

@@ -14,15 +14,6 @@ const nextConfig = withTM({
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
-  async redirects() {
-    return [
-      {
-        source: '/typebots/:typebotId',
-        destination: '/typebots/:typebotId/edit',
-        permanent: true,
-      },
-    ]
-  },
   headers: async () => {
     return [
       {

apps/builder/package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
     "@chakra-ui/css-reset": "2.0.11",
-    "@chakra-ui/react": "2.4.9",
+    "@chakra-ui/react": "2.5.0",
     "@chakra-ui/theme-tools": "^2.0.16",
     "@codemirror/lang-css": "6.0.1",
     "@codemirror/lang-html": "6.4.1",
@@ -63,7 +63,7 @@
     "emails": "workspace:*",
     "emojilib": "3.0.8",
     "focus-visible": "5.2.0",
-    "framer-motion": "8.5.4",
+    "framer-motion": "9.0.2",
     "google-auth-library": "8.7.0",
     "google-spreadsheet": "3.3.0",
     "got": "12.5.3",

apps/builder/src/components/inputs/TextBox.tsx

@@ -32,14 +32,16 @@ export const TextBox = ({
   debounceTimeout = 1000,
   label,
   moreInfoTooltip,
+  defaultValue,
+  isRequired,
   ...props
 }: TextBoxProps) => {
   const textBoxRef = useRef<(HTMLInputElement & HTMLTextAreaElement) | null>(
     null
   )
-  const [value, setValue] = useState<string>(props.defaultValue ?? '')
+  const [value, setValue] = useState<string>(defaultValue ?? '')
   const [carretPosition, setCarretPosition] = useState<number>(
-    props.defaultValue?.length ?? 0
+    defaultValue?.length ?? 0
   )
   const [isTouched, setIsTouched] = useState(false)
   const debounced = useDebouncedCallback(
@@ -50,10 +52,9 @@ export const TextBox = ({
   )
 
   useEffect(() => {
-    if (props.defaultValue !== value && value === '' && !isTouched)
+    if (isTouched || defaultValue === value) return
-      setValue(props.defaultValue ?? '')
+    setValue(defaultValue ?? '')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue, isTouched, value])
-  }, [props.defaultValue])
 
   useEffect(
     () => () => {
@@ -111,7 +112,7 @@ export const TextBox = ({
   )
 
   return (
-    <FormControl isRequired={props.isRequired}>
+    <FormControl isRequired={isRequired}>
       {label && (
         <FormLabel>
           {label}{' '}

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

@@ -22,17 +22,16 @@ import {
   VariableForTest,
   ResponseVariableMapping,
   WebhookBlock,
-  defaultWebhookAttributes,
-  Webhook,
   MakeComBlock,
   PabblyConnectBlock,
+  Webhook,
 } from 'models'
 import { DropdownList } from '@/components/DropdownList'
 import { CodeEditor } from '@/components/CodeEditor'
 import { HeadersInputs, QueryParamsInputs } from './KeyValueInputs'
 import { VariableForTestInputs } from './VariableForTestInputs'
 import { DataVariableInputs } from './ResponseMappingInputs'
-import { byId } from 'utils'
+import { byId, env } from 'utils'
 import { ExternalLinkIcon } from '@/components/icons'
 import { useToast } from '@/hooks/useToast'
 import { SwitchWithLabel } from '@/components/SwitchWithLabel'
@@ -41,11 +40,15 @@ import { executeWebhook } from '../../queries/executeWebhookQuery'
 import { getDeepKeys } from '../../utils/getDeepKeys'
 import { Input } from '@/components/inputs'
 import { convertVariablesForTestToVariables } from '../../utils/convertVariablesForTestToVariables'
+import { useDebouncedCallback } from 'use-debounce'
+
+const debounceWebhookTimeout = 2000
 
 type Provider = {
-  name: 'Make.com' | 'Pabbly Connect'
+  name: 'Pabbly Connect'
   url: string
 }
+
 type Props = {
   block: WebhookBlock | MakeComBlock | PabblyConnectBlock
   onOptionsChange: (options: WebhookOptions) => void
@@ -61,39 +64,28 @@ export const WebhookSettings = ({
   const [isTestResponseLoading, setIsTestResponseLoading] = useState(false)
   const [testResponse, setTestResponse] = useState<string>()
   const [responseKeys, setResponseKeys] = useState<string[]>([])
-
   const { showToast } = useToast()
-  const [localWebhook, setLocalWebhook] = useState(
+  const [localWebhook, _setLocalWebhook] = useState(
     webhooks.find(byId(webhookId))
   )
+  const updateWebhookDebounced = useDebouncedCallback(
+    async (newLocalWebhook) => {
+      await updateWebhook(newLocalWebhook.id, newLocalWebhook)
+    },
+    env('E2E_TEST') === 'true' ? 0 : debounceWebhookTimeout
+  )
 
-  useEffect(() => {
+  const setLocalWebhook = (newLocalWebhook: Webhook) => {
-    if (localWebhook) return
+    _setLocalWebhook(newLocalWebhook)
-    const incomingWebhook = webhooks.find(byId(webhookId))
+    updateWebhookDebounced(newLocalWebhook)
-    setLocalWebhook(incomingWebhook)
+  }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [webhooks])
 
-  useEffect(() => {
+  useEffect(
-    if (!typebot) return
+    () => () => {
-    if (!localWebhook) {
+      updateWebhookDebounced.flush()
-      const newWebhook = {
+    },
-        id: webhookId,
+    [updateWebhookDebounced]
-        ...defaultWebhookAttributes,
+  )
-        typebotId: typebot.id,
-      } as Webhook
-      updateWebhook(webhookId, newWebhook)
-    }
-
-    return () => {
-      setLocalWebhook((localWebhook) => {
-        if (!localWebhook) return
-        updateWebhook(webhookId, localWebhook).then()
-        return localWebhook
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
 
   const handleUrlChange = (url?: string) =>
     localWebhook && setLocalWebhook({ ...localWebhook, url: url ?? null })
@@ -126,8 +118,7 @@ export const WebhookSettings = ({
   const handleTestRequestClick = async () => {
     if (!typebot || !localWebhook) return
     setIsTestResponseLoading(true)
-    await updateWebhook(localWebhook.id, localWebhook)
+    await Promise.all([updateWebhook(localWebhook.id, localWebhook), save()])
-    await save()
     const { data, error } = await executeWebhook(
       typebot.id,
       convertVariablesForTestToVariables(
@@ -152,6 +143,7 @@ export const WebhookSettings = ({
   )
 
   if (!localWebhook) return <Spinner />
+
   return (
     <Stack spacing={4}>
       {provider && (

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

@@ -1,4 +1,4 @@
-export { duplicateWebhookQueries } from './queries/duplicateWebhookQuery'
+export { duplicateWebhookQuery } from './queries/duplicateWebhookQuery'
 export { WebhookSettings } from './components/WebhookSettings'
 export { WebhookContent } from './components/WebhookContent'
 export { WebhookIcon } from './components/WebhookIcon'

apps/builder/src/features/blocks/integrations/webhook/queries/createWebhookQuery.ts

@@ -0,0 +1,14 @@
+import { Webhook } from 'models'
+import { sendRequest } from 'utils'
+
+type Props = {
+  typebotId: string
+  data: Partial<Omit<Webhook, 'typebotId'>>
+}
+
+export const createWebhookQuery = ({ typebotId, data }: Props) =>
+  sendRequest<{ webhook: Webhook }>({
+    method: 'POST',
+    url: `/api/typebots/${typebotId}/webhooks`,
+    body: { data },
+  })

apps/builder/src/features/blocks/integrations/webhook/queries/duplicateWebhookQuery.ts

@@ -1,17 +1,27 @@
 import { Webhook } from 'models'
 import { sendRequest } from 'utils'
-import { saveWebhookQuery } from './saveWebhookQuery'
+import { createWebhookQuery } from './createWebhookQuery'
 
-export const duplicateWebhookQueries = async (
+type Props = {
-  typebotId: string,
+  existingIds: { typebotId: string; webhookId: string }
-  existingWebhookId: string,
+  newIds: { typebotId: string; webhookId: string }
-  newWebhookId: string
+}
-): Promise<Webhook | undefined> => {
+export const duplicateWebhookQuery = async ({
+  existingIds,
+  newIds,
+}: Props): Promise<Webhook | undefined> => {
   const { data } = await sendRequest<{ webhook: Webhook }>(
-    `/api/webhooks/${existingWebhookId}`
+    `/api/typebots/${existingIds.typebotId}/webhooks/${existingIds.webhookId}`
   )
   if (!data) return
-  const newWebhook = { ...data.webhook, id: newWebhookId, typebotId }
+  const newWebhook = {
-  await saveWebhookQuery(newWebhook.id, newWebhook)
+    ...data.webhook,
+    id: newIds.webhookId,
+    typebotId: newIds.typebotId,
+  }
+  await createWebhookQuery({
+    typebotId: newIds.typebotId,
+    data: { ...data.webhook, id: newIds.webhookId },
+  })
   return newWebhook
 }

apps/builder/src/features/blocks/integrations/webhook/queries/saveWebhookQuery.ts

@@ -1,12 +0,0 @@
-import { Webhook } from 'models'
-import { sendRequest } from 'utils'
-
-export const saveWebhookQuery = (
-  webhookId: string,
-  webhook: Partial<Webhook>
-) =>
-  sendRequest<{ webhook: Webhook }>({
-    method: 'PUT',
-    url: `/api/webhooks/${webhookId}`,
-    body: webhook,
-  })

apps/builder/src/features/blocks/integrations/webhook/queries/updateWebhookQuery.ts

@@ -0,0 +1,15 @@
+import { Webhook } from 'models'
+import { sendRequest } from 'utils'
+
+type Props = {
+  typebotId: string
+  webhookId: string
+  data: Partial<Omit<Webhook, 'id' | 'typebotId'>>
+}
+
+export const updateWebhookQuery = ({ typebotId, webhookId, data }: Props) =>
+  sendRequest<{ webhook: Webhook }>({
+    method: 'PATCH',
+    url: `/api/typebots/${typebotId}/webhooks/${webhookId}`,
+    body: { data },
+  })

apps/builder/src/features/dashboard/queries/importTypebotQuery.ts

@@ -1,4 +1,4 @@
-import { duplicateWebhookQueries } from '@/features/blocks/integrations/webhook'
+import { duplicateWebhookQuery } from '@/features/blocks/integrations/webhook'
 import { createId } from '@paralleldrive/cuid2'
 import { Plan, Prisma } from 'db'
 import {
@@ -25,11 +25,13 @@ export const importTypebotQuery = async (typebot: Typebot, userPlan: Plan) => {
     .filter(isWebhookBlock)
   await Promise.all(
     webhookBlocks.map((s) =>
-      duplicateWebhookQueries(
+      duplicateWebhookQuery({
-        newTypebot.id,
+        existingIds: { typebotId: typebot.id, webhookId: s.webhookId },
-        s.webhookId,
+        newIds: {
-        webhookIdsMapping.get(s.webhookId) as string
+          typebotId: newTypebot.id,
-      )
+          webhookId: webhookIdsMapping.get(s.webhookId) as string,
+        },
+      })
     )
   )
   return { data, error }

apps/builder/src/features/editor/providers/TypebotProvider/TypebotProvider.tsx

@@ -11,6 +11,7 @@ import { Router, useRouter } from 'next/router'
 import {
   createContext,
   ReactNode,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -34,7 +35,7 @@ import {
   updatePublishedTypebotQuery,
   deletePublishedTypebotQuery,
 } from '@/features/publish/queries'
-import { saveWebhookQuery } from '@/features/blocks/integrations/webhook/queries/saveWebhookQuery'
+import { updateWebhookQuery } from '@/features/blocks/integrations/webhook/queries/updateWebhookQuery'
 import {
   checkIfTypebotsAreEqual,
   checkIfPublished,
@@ -43,6 +44,8 @@ import {
   parsePublicTypebotToTypebot,
 } from '@/features/publish/utils'
 import { useAutoSave } from '@/hooks/useAutoSave'
+import { createWebhookQuery } from '@/features/blocks/integrations/webhook/queries/createWebhookQuery'
+import { duplicateWebhookQuery } from '@/features/blocks/integrations/webhook/queries/duplicateWebhookQuery'
 
 const autoSaveTimeout = 10000
 
@@ -306,20 +309,61 @@ export const TypebotProvider = ({
     return saveTypebot()
   }
 
-  const updateWebhook = async (
+  const updateWebhook = useCallback(
-    webhookId: string,
+    async (webhookId: string, updates: Partial<Webhook>) => {
-    updates: Partial<Webhook>
+      if (!typebot) return
+      const { data } = await updateWebhookQuery({
+        typebotId: typebot.id,
+        webhookId,
+        data: updates,
+      })
+      if (data)
+        mutate({
+          typebot,
+          publishedTypebot,
+          webhooks: (webhooks ?? []).map((w) =>
+            w.id === webhookId ? data.webhook : w
+          ),
+        })
+    },
+    [mutate, publishedTypebot, typebot, webhooks]
+  )
+
+  const createWebhook = async (data: Partial<Webhook>) => {
+    if (!typebot) return
+    const response = await createWebhookQuery({
+      typebotId: typebot.id,
+      data,
+    })
+    if (!response.data?.webhook) return
+    mutate({
+      typebot,
+      publishedTypebot,
+      webhooks: (webhooks ?? []).concat(response.data?.webhook),
+    })
+  }
+
+  const duplicateWebhook = async (
+    existingWebhookId: string,
+    newWebhookId: string
   ) => {
     if (!typebot) return
-    const { data } = await saveWebhookQuery(webhookId, updates)
+    const newWebhook = await duplicateWebhookQuery({
-    if (data)
+      existingIds: {
-      mutate({
+        typebotId: typebot.id,
-        typebot,
+        webhookId: existingWebhookId,
-        publishedTypebot,
+      },
-        webhooks: (webhooks ?? []).map((w) =>
+      newIds: {
-          w.id === webhookId ? data.webhook : w
+        typebotId: typebot.id,
-        ),
+        webhookId: newWebhookId,
-      })
+      },
+    })
+    if (!newWebhook) return
+    mutate({
+      typebot,
+      publishedTypebot,
+      webhooks: (webhooks ?? []).concat(newWebhook),
+    })
   }
 
   return (
@@ -343,8 +387,14 @@ export const TypebotProvider = ({
         updateTypebot: updateLocalTypebot,
         restorePublishedTypebot,
         updateWebhook,
-        ...groupsActions(setLocalTypebot as SetTypebot),
+        ...groupsActions(setLocalTypebot as SetTypebot, {
-        ...blocksAction(setLocalTypebot as SetTypebot),
+          onWebhookBlockCreated: createWebhook,
+          onWebhookBlockDuplicated: duplicateWebhook,
+        }),
+        ...blocksAction(setLocalTypebot as SetTypebot, {
+          onWebhookBlockCreated: createWebhook,
+          onWebhookBlockDuplicated: duplicateWebhook,
+        }),
         ...variablesAction(setLocalTypebot as SetTypebot),
         ...edgesAction(setLocalTypebot as SetTypebot),
         ...itemsAction(setLocalTypebot as SetTypebot),

apps/builder/src/features/editor/providers/TypebotProvider/actions/blocks.ts

@@ -4,6 +4,7 @@ import {
   DraggableBlock,
   DraggableBlockType,
   BlockIndices,
+  Webhook,
 } from 'models'
 import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotProvider'
@@ -29,7 +30,18 @@ export type BlocksActions = {
   deleteBlock: (indices: BlockIndices) => void
 }
 
-export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
+export type WebhookCallBacks = {
+  onWebhookBlockCreated: (data: Partial<Webhook>) => void
+  onWebhookBlockDuplicated: (
+    existingWebhookId: string,
+    newWebhookId: string
+  ) => void
+}
+
+export const blocksAction = (
+  setTypebot: SetTypebot,
+  { onWebhookBlockCreated, onWebhookBlockDuplicated }: WebhookCallBacks
+): BlocksActions => ({
   createBlock: (
     groupId: string,
     block: DraggableBlock | DraggableBlockType,
@@ -37,7 +49,13 @@ export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
   ) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
-        createBlockDraft(typebot, block, groupId, indices)
+        createBlockDraft(
+          typebot,
+          block,
+          groupId,
+          indices,
+          onWebhookBlockCreated
+        )
       })
     ),
   updateBlock: (
@@ -54,7 +72,10 @@ export const blocksAction = (setTypebot: SetTypebot): BlocksActions => ({
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {
         const block = { ...typebot.groups[groupIndex].blocks[blockIndex] }
-        const newBlock = duplicateBlockDraft(block.groupId)(block)
+        const newBlock = duplicateBlockDraft(block.groupId)(
+          block,
+          onWebhookBlockDuplicated
+        )
         typebot.groups[groupIndex].blocks.splice(blockIndex + 1, 0, newBlock)
       })
     ),
@@ -81,7 +102,8 @@ export const createBlockDraft = (
   typebot: WritableDraft<Typebot>,
   block: DraggableBlock | DraggableBlockType,
   groupId: string,
-  { groupIndex, blockIndex }: BlockIndices
+  { groupIndex, blockIndex }: BlockIndices,
+  onWebhookBlockCreated?: (data: Partial<Webhook>) => void
 ) => {
   const blocks = typebot.groups[groupIndex].blocks
   if (
@@ -91,7 +113,13 @@ export const createBlockDraft = (
   )
     deleteEdgeDraft(typebot, blocks[blockIndex - 1].outgoingEdgeId as string)
   typeof block === 'string'
-    ? createNewBlock(typebot, block, groupId, { groupIndex, blockIndex })
+    ? createNewBlock(
+        typebot,
+        block,
+        groupId,
+        { groupIndex, blockIndex },
+        onWebhookBlockCreated
+      )
     : moveBlockToGroup(typebot, block, groupId, { groupIndex, blockIndex })
   removeEmptyGroups(typebot)
 }
@@ -100,10 +128,13 @@ const createNewBlock = async (
   typebot: WritableDraft<Typebot>,
   type: DraggableBlockType,
   groupId: string,
-  { groupIndex, blockIndex }: BlockIndices
+  { groupIndex, blockIndex }: BlockIndices,
+  onWebhookBlockCreated?: (data: Partial<Webhook>) => void
 ) => {
   const newBlock = parseNewBlock(type, groupId)
   typebot.groups[groupIndex].blocks.splice(blockIndex ?? 0, 0, newBlock)
+  if (onWebhookBlockCreated && 'webhookId' in newBlock && newBlock.webhookId)
+    onWebhookBlockCreated({ id: newBlock.webhookId })
 }
 
 const moveBlockToGroup = (
@@ -140,7 +171,10 @@ const moveBlockToGroup = (
 
 export const duplicateBlockDraft =
   (groupId: string) =>
-  (block: Block): Block => {
+  (
+    block: Block,
+    onWebhookBlockDuplicated: WebhookCallBacks['onWebhookBlockDuplicated']
+  ): Block => {
     const blockId = createId()
     if (blockHasItems(block))
       return {
@@ -150,14 +184,17 @@ export const duplicateBlockDraft =
         items: block.items.map(duplicateItemDraft(blockId)),
         outgoingEdgeId: undefined,
       } as Block
-    if (isWebhookBlock(block))
+    if (isWebhookBlock(block)) {
+      const newWebhookId = createId()
+      onWebhookBlockDuplicated(block.webhookId, newWebhookId)
       return {
         ...block,
         groupId,
         id: blockId,
-        webhookId: createId(),
+        webhookId: newWebhookId,
         outgoingEdgeId: undefined,
       }
+    }
     return {
       ...block,
       groupId,

apps/builder/src/features/editor/providers/TypebotProvider/actions/groups.ts

@@ -6,6 +6,7 @@ import {
   deleteGroupDraft,
   createBlockDraft,
   duplicateBlockDraft,
+  WebhookCallBacks,
 } from './blocks'
 import { Coordinates } from '@/features/graph'
 
@@ -22,7 +23,10 @@ export type GroupsActions = {
   deleteGroup: (groupIndex: number) => void
 }
 
-const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
+const groupsActions = (
+  setTypebot: SetTypebot,
+  { onWebhookBlockCreated, onWebhookBlockDuplicated }: WebhookCallBacks
+): GroupsActions => ({
   createGroup: ({
     id,
     block,
@@ -42,7 +46,13 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
           blocks: [],
         }
         typebot.groups.push(newGroup)
-        createBlockDraft(typebot, block, newGroup.id, indices)
+        createBlockDraft(
+          typebot,
+          block,
+          newGroup.id,
+          indices,
+          onWebhookBlockCreated
+        )
       })
     ),
   updateGroup: (groupIndex: number, updates: Partial<Omit<Group, 'id'>>) =>
@@ -61,7 +71,9 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
           ...group,
           title: `${group.title} copy`,
           id,
-          blocks: group.blocks.map(duplicateBlockDraft(id)),
+          blocks: group.blocks.map((block) =>
+            duplicateBlockDraft(id)(block, onWebhookBlockDuplicated)
+          ),
           graphCoordinates: {
             x: group.graphCoordinates.x + 200,
             y: group.graphCoordinates.y + 100,

apps/builder/src/features/folders/components/TypebotButton.tsx

@@ -159,7 +159,7 @@ export const TypebotButton = ({
               <MenuItem onClick={handleUnpublishClick}>Unpublish</MenuItem>
             )}
             <MenuItem onClick={handleDuplicateClick}>Duplicate</MenuItem>
-            <MenuItem color="red" onClick={handleDeleteClick}>
+            <MenuItem color="red.400" onClick={handleDeleteClick}>
               Delete
             </MenuItem>
           </MoreButton>

apps/builder/src/features/graph/components/Graph.tsx

@@ -223,7 +223,12 @@ export const Graph = ({
   const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock })
 
   return (
-    <Flex ref={graphContainerRef} position="relative" {...props}>
+    <Flex
+      ref={graphContainerRef}
+      position="relative"
+      style={{ touchAction: 'none' }}
+      {...props}
+    >
       <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
       <Flex
         flex="1"

apps/builder/src/features/graph/components/Nodes/BlockNode/SettingsPopoverContent/SettingsPopoverContent.tsx

@@ -16,7 +16,6 @@ import {
   Block,
   BlockOptions,
   BlockWithOptions,
-  Webhook,
 } from 'models'
 import { useRef } from 'react'
 import { DateInputSettingsBody } from '@/features/blocks/inputs/date'
@@ -45,7 +44,6 @@ import { ScriptSettings } from '@/features/blocks/logic/script/components/Script
 
 type Props = {
   block: BlockWithOptions
-  webhook?: Webhook
   onExpandClick: () => void
   onBlockChange: (updates: Partial<Block>) => void
 }
@@ -93,7 +91,6 @@ export const BlockSettings = ({
   onBlockChange,
 }: {
   block: BlockWithOptions
-  webhook?: Webhook
   onBlockChange: (block: Partial<Block>) => void
 }): JSX.Element => {
   const handleOptionsChange = (options: BlockOptions) => {

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -195,6 +195,7 @@ const NonMemoizedDraggableGroupNode = ({
             transform: `translate(${currentCoordinates?.x ?? 0}px, ${
               currentCoordinates?.y ?? 0
             }px)`,
+            touchAction: 'none',
           }}
           onMouseEnter={handleMouseEnter}
           onMouseLeave={handleMouseLeave}

apps/builder/src/features/workspace/components/MembersList/MembersList.tsx

@@ -112,9 +112,7 @@ export const MembersList = () => {
       {isDefined(seatsLimit) && (
         <Heading fontSize="2xl">
           Members{' '}
-          {seatsLimit === -1
+          {seatsLimit === -1 ? '' : `(${currentMembersCount}/${seatsLimit})`}
-            ? ''
-            : `(${currentMembersCount + invitations.length}/${seatsLimit})`}
         </Heading>
       )}
       {workspace?.id && canEdit && (

apps/builder/src/features/workspace/workspaces.spec.ts

@@ -88,6 +88,9 @@ test('can manage members', async ({ page }) => {
   await page.goto('/typebots')
   await page.click('text=Settings & Members')
   await page.click('text="Members"')
+  await expect(
+    page.getByRole('heading', { name: 'Members (1/5)' })
+  ).toBeVisible()
   await expect(page.locator('text="user@email.com"').nth(1)).toBeVisible()
   await expect(page.locator('button >> text="Invite"')).toBeEnabled()
   await page.fill(

apps/builder/src/pages/api/typebots/[typebotId]/webhooks.ts

@@ -1,22 +1,24 @@
 import prisma from '@/lib/prisma'
-import { defaultWebhookAttributes } from 'models'
+import { defaultWebhookAttributes, Webhook } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { canWriteTypebots } from '@/utils/api/dbRules'
 import { getAuthenticatedUser } from '@/features/auth/api'
-import { forbidden, methodNotAllowed, notAuthenticated } from 'utils/api'
+import { methodNotAllowed, notAuthenticated, notFound } from 'utils/api'
+import { getTypebot } from '@/features/typebot/api/utils/getTypebot'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = await getAuthenticatedUser(req)
   if (!user) return notAuthenticated(res)
   if (req.method === 'POST') {
     const typebotId = req.query.typebotId as string
-    const typebot = await prisma.typebot.findFirst({
+    const data = req.body.data as Partial<Webhook>
-      where: canWriteTypebots(typebotId, user),
+    const typebot = await getTypebot({
-      select: { id: true },
+      accessLevel: 'write',
+      user,
+      typebotId,
     })
-    if (!typebot) return forbidden(res)
+    if (!typebot) return notFound(res)
     const webhook = await prisma.webhook.create({
-      data: { typebotId, ...defaultWebhookAttributes },
+      data: { ...defaultWebhookAttributes, ...data, typebotId },
     })
     return res.send({ webhook })
   }

apps/builder/src/pages/api/typebots/[typebotId]/webhooks/[webhookId].ts

@@ -1,4 +1,5 @@
 import prisma from '@/lib/prisma'
+import { Webhook } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import {
@@ -6,48 +7,44 @@ import {
   forbidden,
   methodNotAllowed,
   notAuthenticated,
+  notFound,
 } from 'utils/api'
 import { getTypebot } from '@/features/typebot/api/utils/getTypebot'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = await getAuthenticatedUser(req)
-  if (!user) return notAuthenticated(res)
+  const typebotId = req.query.typebotId as string
   const webhookId = req.query.webhookId as string
+  if (!user) return notAuthenticated(res)
   if (req.method === 'GET') {
+    const typebot = getTypebot({
+      accessLevel: 'read',
+      typebotId,
+      user,
+    })
+    if (!typebot) return notFound(res)
     const webhook = await prisma.webhook.findFirst({
       where: {
         id: webhookId,
-        typebot: {
+        typebotId,
-          OR: [
-            { workspace: { members: { some: { userId: user.id } } } },
-            {
-              collaborators: {
-                some: {
-                  userId: user.id,
-                },
-              },
-            },
-          ],
-        },
       },
     })
     return res.send({ webhook })
   }
-  if (req.method === 'PUT') {
+  if (req.method === 'PATCH') {
-    const data = req.body
+    const data = req.body.data as Partial<Webhook>
     if (!('typebotId' in data)) return badRequest(res)
     const typebot = await getTypebot({
       accessLevel: 'write',
-      typebotId: data.typebotId,
+      typebotId,
       user,
     })
     if (!typebot) return forbidden(res)
-    const webhook = await prisma.webhook.upsert({
+    const webhook = await prisma.webhook.update({
       where: {
         id: webhookId,
       },
-      create: data,
+      data,
-      update: data,
     })
     return res.send({ webhook })
   }

apps/landing-page/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@chakra-ui/icon": "3.0.15",
-    "@chakra-ui/react": "2.4.9",
+    "@chakra-ui/react": "2.5.0",
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
     "@vercel/analytics": "0.1.8",
@@ -20,7 +20,7 @@
     "aos": "2.3.4",
     "db": "workspace:*",
     "focus-visible": "5.2.0",
-    "framer-motion": "8.5.4",
+    "framer-motion": "9.0.2",
     "models": "workspace:*",
     "next": "13.1.6",
     "react": "18.2.0",