feat: ✨ Add collaboration

apps/builder/pages/_app.tsx

@@ -18,7 +18,7 @@ import { actions } from 'libs/kbar'
 import { enableMocks } from 'mocks'
 import { SupportBubble } from 'components/shared/SupportBubble'
 
-if (process.env.NEXT_PUBLIC_AUTH_MOCKING === 'enabled') enableMocks()
+if (process.env.NEXT_PUBLIC_E2E_TEST === 'enabled') enableMocks()
 
 const App = ({ Component, pageProps }: AppProps) => {
   useRouterProgressBar()

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

@@ -1,5 +1,4 @@
 import NextAuth from 'next-auth'
-import { PrismaAdapter } from '@next-auth/prisma-adapter'
 import EmailProvider from 'next-auth/providers/email'
 import GitHubProvider from 'next-auth/providers/github'
 import GoogleProvider from 'next-auth/providers/google'
@@ -7,10 +6,8 @@ import FacebookProvider from 'next-auth/providers/facebook'
 import prisma from 'libs/prisma'
 import { Provider } from 'next-auth/providers'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { isNotDefined } from 'utils'
-import { User } from 'db'
-import { randomUUID } from 'crypto'
 import { withSentry } from '@sentry/nextjs'
+import { CustomAdapter } from './adapter'
 
 const providers: Provider[] = [
   EmailProvider({
@@ -52,30 +49,19 @@ if (process.env.FACEBOOK_CLIENT_ID && process.env.FACEBOOK_CLIENT_SECRET)
 
 const handler = (req: NextApiRequest, res: NextApiResponse) => {
   NextAuth(req, res, {
-    adapter: PrismaAdapter(prisma),
+    adapter: CustomAdapter(prisma),
     secret: process.env.ENCRYPTION_SECRET,
     providers,
     session: {
       strategy: 'database',
     },
     callbacks: {
-      session: async ({ session, user }) => {
-        const userFromDb = user as User
-        if (isNotDefined(userFromDb.apiToken))
-          userFromDb.apiToken = await generateApiToken(userFromDb.id)
-        return { ...session, user: userFromDb }
-      },
+      session: async ({ session, user }) => ({
+        ...session,
+        user,
+      }),
     },
   })
 }
 
-const generateApiToken = async (userId: string) => {
-  const apiToken = randomUUID()
-  await prisma.user.update({
-    where: { id: userId },
-    data: { apiToken },
-  })
-  return apiToken
-}
-
 export default withSentry(handler)

apps/builder/pages/api/auth/adapter.ts

@@ -0,0 +1,79 @@
+// Forked from https://github.com/nextauthjs/adapters/blob/main/packages/prisma/src/index.ts
+import type { PrismaClient, Prisma, Invitation } from 'db'
+import { randomUUID } from 'crypto'
+import type { Adapter, AdapterUser } from 'next-auth/adapters'
+import cuid from 'cuid'
+
+export function CustomAdapter(p: PrismaClient): Adapter {
+  return {
+    createUser: async (data: Omit<AdapterUser, 'id'>) => {
+      const user = { id: cuid(), email: data.email as string }
+      const invitations = await p.invitation.findMany({
+        where: { email: user.email },
+      })
+      const createdUser = await p.user.create({
+        data: { ...data, id: user.id, apiToken: randomUUID() },
+      })
+      if (invitations.length > 0)
+        await convertInvitationsToCollaborations(p, user, invitations)
+      return createdUser
+    },
+    getUser: (id) => p.user.findUnique({ where: { id } }),
+    getUserByEmail: (email) => p.user.findUnique({ where: { email } }),
+    async getUserByAccount(provider_providerAccountId) {
+      const account = await p.account.findUnique({
+        where: { provider_providerAccountId },
+        select: { user: true },
+      })
+      return account?.user ?? null
+    },
+    updateUser: (data) => p.user.update({ where: { id: data.id }, data }),
+    deleteUser: (id) => p.user.delete({ where: { id } }),
+    linkAccount: (data) => p.account.create({ data }) as any,
+    unlinkAccount: (provider_providerAccountId) =>
+      p.account.delete({ where: { provider_providerAccountId } }) as any,
+    async getSessionAndUser(sessionToken) {
+      const userAndSession = await p.session.findUnique({
+        where: { sessionToken },
+        include: { user: true },
+      })
+      if (!userAndSession) return null
+      const { user, ...session } = userAndSession
+      return { user, session }
+    },
+    createSession: (data) => p.session.create({ data }),
+    updateSession: (data) =>
+      p.session.update({ data, where: { sessionToken: data.sessionToken } }),
+    deleteSession: (sessionToken) =>
+      p.session.delete({ where: { sessionToken } }),
+    createVerificationToken: (data) => p.verificationToken.create({ data }),
+    async useVerificationToken(identifier_token) {
+      try {
+        return await p.verificationToken.delete({ where: { identifier_token } })
+      } catch (error) {
+        if ((error as Prisma.PrismaClientKnownRequestError).code === 'P2025')
+          return null
+        throw error
+      }
+    },
+  }
+}
+
+const convertInvitationsToCollaborations = async (
+  p: PrismaClient,
+  { id, email }: { id: string; email: string },
+  invitations: Invitation[]
+) => {
+  await p.collaboratorsOnTypebots.createMany({
+    data: invitations.map((invitation) => ({
+      typebotId: invitation.typebotId,
+      type: invitation.type,
+      userId: id,
+    })),
+  })
+  return p.invitation.deleteMany({
+    where: {
+      email,
+    },
+  })
+}

apps/builder/pages/api/typebots.ts

@@ -3,7 +3,7 @@ import { Prisma, User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
-import { parseNewTypebot } from 'services/typebots'
+import { parseNewTypebot } from 'services/typebots/typebots'
 import { methodNotAllowed } from 'utils'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {

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

@@ -1,5 +1,5 @@
 import { withSentry } from '@sentry/nextjs'
-import { User } from 'db'
+import { CollaborationType, Prisma, User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
@@ -17,33 +17,37 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   const user = session.user as User
   if (req.method === 'GET') {
     const typebot = await prisma.typebot.findFirst({
-      where: {
-        id: typebotId,
-        ownerId: user.email === adminEmail ? undefined : user.id,
-      },
+      where: parseWhereFilter(typebotId, user, 'read'),
       include: {
         publishedTypebot: true,
+        owner: { select: { email: true, name: true, image: true } },
+        collaborators: { select: { userId: true, type: true } },
       },
     })
     if (!typebot) return res.send({ typebot: null })
-    const { publishedTypebot, ...restOfTypebot } = typebot
-    return res.send({ typebot: restOfTypebot, publishedTypebot })
+    const { publishedTypebot, owner, collaborators, ...restOfTypebot } = typebot
+    const isReadOnly =
+      collaborators.find((c) => c.userId === user.id)?.type ===
+      CollaborationType.READ
+    return res.send({
+      typebot: restOfTypebot,
+      publishedTypebot,
+      owner,
+      isReadOnly,
+    })
   }
+
+  const canEditTypebot = parseWhereFilter(typebotId, user, 'write')
   if (req.method === 'DELETE') {
-    const typebots = await prisma.typebot.delete({
-      where: {
-        id_ownerId: {
-          id: typebotId,
-          ownerId: user.id,
-        },
-      },
+    const typebots = await prisma.typebot.deleteMany({
+      where: canEditTypebot,
     })
     return res.send({ typebots })
   }
   if (req.method === 'PUT') {
     const data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body
-    const typebots = await prisma.typebot.update({
-      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+    const typebots = await prisma.typebot.updateMany({
+      where: canEditTypebot,
       data: {
         ...data,
         theme: data.theme ?? undefined,
@@ -54,8 +58,8 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
   if (req.method === 'PATCH') {
     const data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body
-    const typebots = await prisma.typebot.update({
-      where: { id_ownerId: { id: typebotId, ownerId: user.id } },
+    const typebots = await prisma.typebot.updateMany({
+      where: canEditTypebot,
       data,
     })
     return res.send({ typebots })
@@ -63,4 +67,26 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
+const parseWhereFilter = (
+  typebotId: string,
+  user: User,
+  type: 'read' | 'write'
+): Prisma.TypebotWhereInput => ({
+  OR: [
+    {
+      id: typebotId,
+      ownerId: user.email === adminEmail ? undefined : user.id,
+    },
+    {
+      id: typebotId,
+      collaborators: {
+        every: {
+          userId: user.id,
+          type: type === 'write' ? CollaborationType.WRITE : undefined,
+        },
+      },
+    },
+  ],
+})
+
 export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/collaborators copy/[userId].ts

@@ -0,0 +1,34 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+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 userId = req.query.userId as string
+  if (req.method === 'PUT') {
+    const data = req.body
+    await prisma.collaboratorsOnTypebots.upsert({
+      where: { userId_typebotId: { typebotId, userId } },
+      create: data,
+      update: data,
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  if (req.method === 'DELETE') {
+    await prisma.collaboratorsOnTypebots.delete({
+      where: { userId_typebotId: { typebotId, userId } },
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/collaborators.ts

@@ -0,0 +1,23 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const user = await getAuthenticatedUser(req)
+  if (!user) return notAuthenticated(res)
+  const typebotId = req.query.typebotId as string
+  if (req.method === 'GET') {
+    const collaborators = await prisma.collaboratorsOnTypebots.findMany({
+      where: { typebotId },
+      include: { user: { select: { name: true, image: true, email: true } } },
+    })
+    return res.send({
+      collaborators,
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/collaborators/[userId].ts

@@ -0,0 +1,34 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+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 userId = req.query.userId as string
+  if (req.method === 'PUT') {
+    const data = req.body
+    await prisma.collaboratorsOnTypebots.upsert({
+      where: { userId_typebotId: { typebotId, userId } },
+      create: data,
+      update: data,
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  if (req.method === 'DELETE') {
+    await prisma.collaboratorsOnTypebots.delete({
+      where: { userId_typebotId: { typebotId, userId } },
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/invitations.ts

@@ -0,0 +1,58 @@
+import { withSentry } from '@sentry/nextjs'
+import { invitationToCollaborate } from 'assets/emails/invitationToCollaborate'
+import { CollaborationType } from 'db'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { sendEmailNotification } from 'services/api/emails'
+import { getAuthenticatedUser } from 'services/api/utils'
+import {
+  badRequest,
+  isNotDefined,
+  methodNotAllowed,
+  notAuthenticated,
+} from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  const user = await getAuthenticatedUser(req)
+  if (!user) return notAuthenticated(res)
+  const typebotId = req.query.typebotId as string
+  if (req.method === 'GET') {
+    const invitations = await prisma.invitation.findMany({
+      where: { typebotId },
+    })
+    return res.send({
+      invitations,
+    })
+  }
+  if (req.method === 'POST') {
+    const { email, type } =
+      (req.body as
+        | { email: string | undefined; type: CollaborationType | undefined }
+        | undefined) ?? {}
+    if (!email || !type) return badRequest(res)
+    const existingUser = await prisma.user.findUnique({
+      where: { email },
+      select: { id: true },
+    })
+    if (existingUser)
+      await prisma.collaboratorsOnTypebots.create({
+        data: { type, typebotId, userId: existingUser.id },
+      })
+    else await prisma.invitation.create({ data: { email, type, typebotId } })
+    if (isNotDefined(process.env.NEXT_PUBLIC_E2E_TEST))
+      await sendEmailNotification({
+        to: email,
+        subject: "You've been invited to collaborate 🤝",
+        content: invitationToCollaborate(
+          user.email ?? '',
+          `${process.env.NEXTAUTH_URL}/typebots/shared`
+        ),
+      })
+    return res.send({
+      message: 'success',
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/invitations/[email].ts

@@ -0,0 +1,34 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+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 email = req.query.email as string
+  if (req.method === 'PUT') {
+    const data = req.body
+    await prisma.invitation.upsert({
+      where: { email_typebotId: { email, typebotId } },
+      create: data,
+      update: data,
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  if (req.method === 'DELETE') {
+    await prisma.invitation.delete({
+      where: { email_typebotId: { email, typebotId } },
+    })
+    return res.send({
+      message: 'success',
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/api/typebots/[typebotId]/results.ts

@@ -3,7 +3,7 @@ import { User } from 'db'
 import prisma from 'libs/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getSession } from 'next-auth/react'
-import { isFreePlan } from 'services/user'
+import { isFreePlan } from 'services/user/user'
 import { methodNotAllowed } from 'utils'
 
 const adminEmail = 'contact@baptiste-arnaud.fr'

apps/builder/pages/api/users/[id]/sharedTypebots.ts

@@ -0,0 +1,31 @@
+import { withSentry } from '@sentry/nextjs'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getAuthenticatedUser } from 'services/api/utils'
+import { methodNotAllowed, notAuthenticated } from 'utils'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'GET') {
+    const user = await getAuthenticatedUser(req)
+    if (!user) return notAuthenticated(res)
+    const isCountOnly = req.query.count as string | undefined
+    if (isCountOnly) {
+      const count = await prisma.collaboratorsOnTypebots.count({
+        where: { userId: user.id },
+      })
+      return res.send({ count })
+    }
+    const sharedTypebots = await prisma.collaboratorsOnTypebots.findMany({
+      where: { userId: user.id },
+      include: {
+        typebot: { select: { name: true, publishedTypebotId: true, id: true } },
+      },
+    })
+    return res.send({
+      sharedTypebots: sharedTypebots.map((typebot) => ({ ...typebot.typebot })),
+    })
+  }
+  methodNotAllowed(res)
+}
+
+export default withSentry(handler)

apps/builder/pages/typebots.tsx

@@ -13,7 +13,7 @@ import { Banner } from 'components/dashboard/annoucements/AnnoucementBanner'
 
 const DashboardPage = () => {
   const [isLoading, setIsLoading] = useState(false)
-  const { query, isReady } = useRouter()
+  const { query, isReady, push } = useRouter()
   const { user } = useUser()
   const toast = useToast({
     position: 'top-right',
@@ -35,17 +35,20 @@ const DashboardPage = () => {
     if (!isReady) return
     const couponCode = query.coupon?.toString()
     const stripeStatus = query.stripe?.toString()
+    const redirectPath = query.redirectPath as string | undefined
 
     if (stripeStatus === 'success')
       toast({
         title: 'Typebot Pro',
         description: "You've successfully subscribed 🎉",
       })
-    if (!couponCode) return
-    setIsLoading(true)
-    redeemCoupon(couponCode).then(() => {
-      location.href = '/typebots'
-    })
+    if (couponCode) {
+      setIsLoading(true)
+      redeemCoupon(couponCode).then(() => {
+        location.href = '/typebots'
+      })
+    }
+    if (redirectPath) push(redirectPath)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isReady])
 

apps/builder/pages/typebots/shared.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Flex, Heading, Stack } from '@chakra-ui/layout'
+import { DashboardHeader } from 'components/dashboard/DashboardHeader'
+import { Seo } from 'components/Seo'
+import { BackButton } from 'components/dashboard/FolderContent/BackButton'
+import { useSharedTypebots } from 'services/user/sharedTypebots'
+import { useUser } from 'contexts/UserContext'
+import { useToast, Wrap } from '@chakra-ui/react'
+import { ButtonSkeleton } from 'components/dashboard/FolderContent/FolderButton'
+import { TypebotButton } from 'components/dashboard/FolderContent/TypebotButton'
+
+const SharedTypebotsPage = () => {
+  const { user } = useUser()
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+  })
+  const { sharedTypebots, isLoading } = useSharedTypebots({
+    userId: user?.id,
+    onError: (e) =>
+      toast({ title: "Couldn't fetch shared bots", description: e.message }),
+  })
+  return (
+    <Stack minH="100vh">
+      <Seo title="My typebots" />
+      <DashboardHeader />
+      <Flex w="full" flex="1" justify="center">
+        <Stack w="1000px" spacing={6}>
+          <Heading as="h1">Shared with me</Heading>
+          <Stack>
+            <Flex>
+              <BackButton id={null} />
+            </Flex>
+            <Wrap spacing={4}>
+              {isLoading && <ButtonSkeleton />}
+              {sharedTypebots?.map((typebot) => (
+                <TypebotButton key={typebot.id} typebot={typebot} isReadOnly />
+              ))}
+            </Wrap>
+          </Stack>
+        </Stack>
+      </Flex>
+    </Stack>
+  )
+}
+
+export default SharedTypebotsPage