feat(api): ✨ Add routes for subscribing webhook

apps/builder/.env.local.example

@@ -1,5 +1,3 @@
-NEXT_PUBLIC_AUTH_MOCKING=disabled
-
 DATABASE_URL=postgresql://postgres:@localhost:5432/typebot
 
 ENCRYPTION_SECRET=q3t6v9y$B&E)H@McQfTjWnZr4u7x!z%C #256-bits secret (can be generated here: https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx)

apps/builder/components/dashboard/FolderContent.tsx

@@ -12,10 +12,13 @@ import {
   Wrap,
 } from '@chakra-ui/react'
 import { useTypebotDnd } from 'contexts/TypebotDndContext'
-import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { createFolder, useFolders } from 'services/folders'
-import { patchTypebot, useTypebots } from 'services/typebots'
+import {
+  patchTypebot,
+  TypebotInDashboard,
+  useTypebots,
+} from 'services/typebots'
 import { AnnoucementModal } from './annoucements/AnnoucementModal'
 import { BackButton } from './FolderContent/BackButton'
 import { CreateBotButton } from './FolderContent/CreateBotButton'
@@ -42,7 +45,8 @@ export const FolderContent = ({ folder }: Props) => {
     x: 0,
     y: 0,
   })
-  const [typebotDragCandidate, setTypebotDragCandidate] = useState<Typebot>()
+  const [typebotDragCandidate, setTypebotDragCandidate] =
+    useState<TypebotInDashboard>()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   const toast = useToast({
@@ -130,16 +134,17 @@ export const FolderContent = ({ folder }: Props) => {
   }
   useEventListener('mouseup', handleMouseUp)
 
-  const handleMouseDown = (typebot: Typebot) => (e: React.MouseEvent) => {
-    const element = e.currentTarget as HTMLDivElement
-    const rect = element.getBoundingClientRect()
-    setDraggablePosition({ x: rect.left, y: rect.top })
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    setRelativeDraggablePosition({ x, y })
-    setMouseDownPosition({ x: e.screenX, y: e.screenY })
-    setTypebotDragCandidate(typebot)
-  }
+  const handleMouseDown =
+    (typebot: TypebotInDashboard) => (e: React.MouseEvent) => {
+      const element = e.currentTarget as HTMLDivElement
+      const rect = element.getBoundingClientRect()
+      setDraggablePosition({ x: rect.left, y: rect.top })
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      setRelativeDraggablePosition({ x, y })
+      setMouseDownPosition({ x: e.screenX, y: e.screenY })
+      setTypebotDragCandidate(typebot)
+    }
 
   const handleMouseMove = (e: MouseEvent) => {
     if (!typebotDragCandidate) return

apps/builder/components/dashboard/FolderContent/TypebotButton.tsx

@@ -21,7 +21,7 @@ import { useTypebotDnd } from 'contexts/TypebotDndContext'
 import { useDebounce } from 'use-debounce'
 
 type ChatbotCardProps = {
-  typebot: Typebot
+  typebot: Pick<Typebot, 'id' | 'publishedTypebotId' | 'name'>
   onTypebotDeleted: () => void
   onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
@@ -66,7 +66,7 @@ export const TypebotButton = ({
 
   const handleDuplicateClick = async (e: React.MouseEvent) => {
     e.stopPropagation()
-    const { data: createdTypebot, error } = await duplicateTypebot(typebot)
+    const { data: createdTypebot, error } = await duplicateTypebot(typebot.id)
     if (error)
       return toast({
         title: "Couldn't duplicate typebot",

apps/builder/components/dashboard/FolderContent/TypebotButtonOverlay.tsx

@@ -1,9 +1,9 @@
 import { Box, BoxProps, Flex, Text, VStack } from '@chakra-ui/react'
 import { GlobeIcon, ToolIcon } from 'assets/icons'
-import { Typebot } from 'models'
+import { TypebotInDashboard } from 'services/typebots'
 
 type Props = {
-  typebot: Typebot
+  typebot: TypebotInDashboard
 } & BoxProps
 
 export const TypebotCardOverlay = ({ typebot, ...props }: Props) => {

apps/builder/contexts/TypebotDndContext.tsx

@@ -1,4 +1,3 @@
-import { Typebot } from 'models'
 import {
   createContext,
   Dispatch,
@@ -8,18 +7,19 @@ import {
   useEffect,
   useState,
 } from 'react'
+import { TypebotInDashboard } from 'services/typebots'
 
 const typebotDndContext = createContext<{
-  draggedTypebot?: Typebot
-  setDraggedTypebot: Dispatch<SetStateAction<Typebot | undefined>>
+  draggedTypebot?: TypebotInDashboard
+  setDraggedTypebot: Dispatch<SetStateAction<TypebotInDashboard | undefined>>
   mouseOverFolderId?: string | null
   setMouseOverFolderId: Dispatch<SetStateAction<string | undefined | null>>
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
 }>({})
 
 export const TypebotDndContext = ({ children }: { children: ReactNode }) => {
-  const [draggedTypebot, setDraggedTypebot] = useState<Typebot>()
+  const [draggedTypebot, setDraggedTypebot] = useState<TypebotInDashboard>()
   const [mouseOverFolderId, setMouseOverFolderId] = useState<string | null>()
 
   useEffect(() => {

apps/builder/pages/api/auth/[...nextauth].ts

@@ -10,6 +10,7 @@ import { NextApiRequest, NextApiResponse } from 'next'
 import { isNotDefined } from 'utils'
 import { User } from 'db'
 import { randomUUID } from 'crypto'
+import { withSentry } from '@sentry/nextjs'
 
 const providers: Provider[] = [
   EmailProvider({
@@ -77,4 +78,4 @@ const generateApiToken = async (userId: string) => {
   return apiToken
 }
 
-export default handler
+export default withSentry(handler)

apps/builder/pages/api/integrations/email/test-config.ts

@@ -1,3 +1,4 @@
+import { withSentry } from '@sentry/nextjs'
 import { SmtpCredentialsData } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { createTransport } from 'nodemailer'
@@ -25,4 +26,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default handler
+export default withSentry(handler)

apps/builder/pages/api/typebots.ts

@@ -21,6 +21,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
           ownerId: user.id,
           folderId,
         },
+        select: { name: true, publishedTypebotId: true, id: true },
       })
       return res.send({ typebots })
     }

apps/builder/services/typebots.ts

@@ -51,6 +51,10 @@ import { stringify } from 'qs'
 import { isChoiceInput, isConditionStep, sendRequest } from 'utils'
 import { parseBlocksToPublicBlocks } from './publicTypebot'
 
+export type TypebotInDashboard = Pick<
+  Typebot,
+  'id' | 'name' | 'publishedTypebotId'
+>
 export const useTypebots = ({
   folderId,
   onError,
@@ -59,11 +63,10 @@ export const useTypebots = ({
   onError: (error: Error) => void
 }) => {
   const params = stringify({ folderId })
-  const { data, error, mutate } = useSWR<{ typebots: Typebot[] }, Error>(
-    `/api/typebots?${params}`,
-    fetcher,
-    { dedupingInterval: 0 }
-  )
+  const { data, error, mutate } = useSWR<
+    { typebots: TypebotInDashboard[] },
+    Error
+  >(`/api/typebots?${params}`, fetcher, { dedupingInterval: 0 })
   if (error) onError(error)
   return {
     typebots: data?.typebots,
@@ -93,11 +96,13 @@ export const importTypebot = async (typebot: Typebot) =>
     body: typebot,
   })
 
-export const duplicateTypebot = async (typebot: Typebot) => {
+export const duplicateTypebot = async (typebotId: string) => {
+  const { data: typebotToDuplicate } = await getTypebot(typebotId)
+  if (!typebotToDuplicate) return { error: new Error('Typebot not found') }
   const duplicatedTypebot: Omit<Typebot, 'id'> = omit(
     {
-      ...typebot,
-      name: `${typebot.name} copy`,
+      ...typebotToDuplicate,
+      name: `${typebotToDuplicate.name} copy`,
       publishedTypebotId: null,
       publicId: null,
     },
@@ -110,6 +115,12 @@ export const duplicateTypebot = async (typebot: Typebot) => {
   })
 }
 
+const getTypebot = (typebotId: string) =>
+  sendRequest<Typebot>({
+    url: `/api/typebots/${typebotId}`,
+    method: 'GET',
+  })
+
 export const deleteTypebot = async (id: string) =>
   sendRequest({
     url: `/api/typebots/${id}`,

apps/viewer/pages/api/typebots.ts

@@ -0,0 +1,20 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authenticateUser } from 'services/api/utils'
+import { methodNotAllowed } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'GET') {
+    const user = await authenticateUser(req)
+    if (!user) return res.status(401).json({ message: 'Not authenticated' })
+    const typebots = await prisma.typebot.findMany({
+      where: { ownerId: user.id },
+      select: { name: true, publishedTypebotId: true, id: true },
+    })
+    return res.send({ typebots })
+  }
+  return methodNotAllowed(res)
+}
+
+export default withSentry(handler)

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

@@ -0,0 +1,57 @@
+import { withSentry } from '@sentry/nextjs'
+import { Prisma } from 'db'
+import prisma from 'libs/prisma'
+import { IntegrationStepType, Typebot } from 'models'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authenticateUser } from 'services/api/utils'
+import { methodNotAllowed } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'PATCH') {
+    const user = await authenticateUser(req)
+    if (!user) return res.status(401).json({ message: 'Not authenticated' })
+    const body = req.body as Record<string, string>
+    if (!('url' in body))
+      return res.status(403).send({ message: 'url is missing in body' })
+    const { url } = body
+    const typebotId = req.query.typebotId.toString()
+    const stepId = req.query.stepId.toString()
+    const typebot = (await prisma.typebot.findUnique({
+      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+    })) as Typebot | undefined
+    if (!typebot) return res.status(400).send({ message: 'Typebot not found' })
+    try {
+      const updatedTypebot = addUrlToWebhookStep(url, typebot, stepId)
+      await prisma.typebot.update({
+        where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+        data: { blocks: updatedTypebot.blocks as Prisma.JsonArray },
+      })
+      return res.send({ message: 'success' })
+    } catch (err) {
+      return res
+        .status(400)
+        .send({ message: "stepId doesn't point to a Webhook step" })
+    }
+  }
+  return methodNotAllowed(res)
+}
+
+const addUrlToWebhookStep = (
+  url: string,
+  typebot: Typebot,
+  stepId: string
+): Typebot => ({
+  ...typebot,
+  blocks: typebot.blocks.map((b) => ({
+    ...b,
+    steps: b.steps.map((s) => {
+      if (s.id === stepId) {
+        if (s.type !== IntegrationStepType.WEBHOOK) throw new Error()
+        return { ...s, webhook: { ...s.webhook, url } }
+      }
+      return s
+    }),
+  })),
+})
+
+export default withSentry(handler)

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

@@ -0,0 +1,55 @@
+import { withSentry } from '@sentry/nextjs'
+import { Prisma } from 'db'
+import prisma from 'libs/prisma'
+import { IntegrationStepType, Typebot } from 'models'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authenticateUser } from 'services/api/utils'
+import { omit } from 'services/utils'
+import { methodNotAllowed } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'DELETE') {
+    const user = await authenticateUser(req)
+    if (!user) return res.status(401).json({ message: 'Not authenticated' })
+    const typebotId = req.query.typebotId.toString()
+    const stepId = req.query.stepId.toString()
+    const typebot = (await prisma.typebot.findUnique({
+      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+    })) as Typebot | undefined
+    if (!typebot) return res.status(400).send({ message: 'Typebot not found' })
+    try {
+      const updatedTypebot = removeUrlFromWebhookStep(typebot, stepId)
+      await prisma.typebot.update({
+        where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+        data: {
+          blocks: updatedTypebot.blocks as Prisma.JsonArray,
+        },
+      })
+      return res.send({ message: 'success' })
+    } catch (err) {
+      return res
+        .status(400)
+        .send({ message: "stepId doesn't point to a Webhook step" })
+    }
+  }
+  return methodNotAllowed(res)
+}
+
+const removeUrlFromWebhookStep = (
+  typebot: Typebot,
+  stepId: string
+): Typebot => ({
+  ...typebot,
+  blocks: typebot.blocks.map((b) => ({
+    ...b,
+    steps: b.steps.map((s) => {
+      if (s.id === stepId) {
+        if (s.type !== IntegrationStepType.WEBHOOK) throw new Error()
+        return { ...s, webhook: omit(s.webhook, 'url') }
+      }
+      return s
+    }),
+  })),
+})
+
+export default withSentry(handler)

apps/viewer/pages/api/typebots/[typebotId]/webhookSteps.ts

@@ -0,0 +1,37 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { Block, IntegrationStepType } from 'models'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authenticateUser } from 'services/api/utils'
+import { methodNotAllowed } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'GET') {
+    const user = await authenticateUser(req)
+    if (!user) return res.status(401).json({ message: 'Not authenticated' })
+    const typebotId = req.query.typebotId.toString()
+    const typebot = await prisma.typebot.findUnique({
+      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+      select: { blocks: true },
+    })
+    const emptyWebhookSteps = (typebot?.blocks as Block[]).reduce<
+      { blockId: string; stepId: string; name: string }[]
+    >((emptyWebhookSteps, block) => {
+      const steps = block.steps.filter(
+        (step) => step.type === IntegrationStepType.WEBHOOK && !step.webhook.url
+      )
+      return [
+        ...emptyWebhookSteps,
+        ...steps.map((s) => ({
+          blockId: s.blockId,
+          stepId: s.id,
+          name: `${block.title} > ${s.id}`,
+        })),
+      ]
+    }, [])
+    return res.send({ steps: emptyWebhookSteps })
+  }
+  return methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/viewer/pages/api/users/me.ts

@@ -0,0 +1,16 @@
+import { withSentry } from '@sentry/nextjs'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { authenticateUser } from 'services/api/utils'
+import { isNotDefined, methodNotAllowed } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'GET') {
+    const user = await authenticateUser(req)
+    if (isNotDefined(user))
+      return res.status(404).send({ message: 'User not found' })
+    return res.send({ id: user.id })
+  }
+  return methodNotAllowed(res)
+}
+
+export default withSentry(handler)