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,10 +7,11 @@ 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
@@ -19,7 +19,7 @@ const typebotDndContext = createContext<{
 }>({})
 
 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}`,