🐛 (limits) Fix storage limit trigger and e2e tests

2022-09-24 08:58:23 +02:00
parent 1e26703ad4
commit 30dff2d5d7
52 changed files with 1024 additions and 2205 deletions
--- a/apps/builder/components/analytics/AnalyticsContent.tsx
+++ b/apps/builder/components/analytics/AnalyticsContent.tsx
@ -2,7 +2,10 @@ import { Flex, Spinner, useDisclosure } from '@chakra-ui/react'
 import { StatsCards } from 'components/analytics/StatsCards'
 import { Graph } from 'components/shared/Graph'
 import { useToast } from 'components/shared/hooks/useToast'
-import { ChangePlanModal } from 'components/shared/modals/ChangePlanModal'
+import {
+  ChangePlanModal,
+  LimitReached,
+} from 'components/shared/modals/ChangePlanModal'
 import { GraphProvider, GroupsCoordinatesProvider } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { Stats } from 'models'
@ -49,7 +52,11 @@ export const AnalyticsContent = ({ stats }: { stats?: Stats }) => {
          <Spinner color="gray" />
        </Flex>
      )}
-      <ChangePlanModal onClose={onClose} isOpen={isOpen} />
+      <ChangePlanModal
+        onClose={onClose}
+        isOpen={isOpen}
+        type={LimitReached.ANALYTICS}
+      />
      <StatsCards stats={stats} pos="absolute" top={10} />
    </Flex>
  )
--- a/apps/builder/components/dashboard/FolderContent/CreateFolderButton.tsx
+++ b/apps/builder/components/dashboard/FolderContent/CreateFolderButton.tsx
@ -1,10 +1,12 @@
-import { Button, HStack, Tag, useDisclosure, Text } from '@chakra-ui/react'
+import { Button, HStack, useDisclosure, Text } from '@chakra-ui/react'
 import { FolderPlusIcon } from 'assets/icons'
 import {
  LimitReached,
  ChangePlanModal,
 } from 'components/shared/modals/ChangePlanModal'
+import { PlanTag } from 'components/shared/PlanTag'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
 import React from 'react'
 import { isFreePlan } from 'services/workspace'

@ -26,7 +28,7 @@ export const CreateFolderButton = ({ isLoading, onClick }: Props) => {
    >
      <HStack>
        <Text>Create a folder</Text>
-        {isFreePlan(workspace) && <Tag colorScheme="orange">Pro</Tag>}
+        {isFreePlan(workspace) && <PlanTag plan={Plan.STARTER} />}
      </HStack>
      <ChangePlanModal
        isOpen={isOpen}
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/UsageContent/useUsage.ts
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/UsageContent/useUsage.ts
@ -7,7 +7,7 @@ export const useUsage = (workspaceId?: string) => {
    { totalChatsUsed: number; totalStorageUsed: number },
    Error
  >(workspaceId ? `/api/workspaces/${workspaceId}/usage` : null, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+    dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
  })
  return {
    data,
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/queries/useInvoicesQuery.ts
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/BillingContent/queries/useInvoicesQuery.ts
@ -14,7 +14,7 @@ export const useInvoicesQuery = (stripeId?: string | null) => {
    stripeId ? `/api/stripe/invoices?stripeId=${stripeId}` : null,
    fetcher,
    {
-      dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+      dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
    }
  )
  return {
--- a/apps/builder/components/dashboard/WorkspaceSettingsModal/MembersList/MembersList.tsx
+++ b/apps/builder/components/dashboard/WorkspaceSettingsModal/MembersList/MembersList.tsx
@ -24,7 +24,7 @@ export const MembersList = () => {
  })

  const handleDeleteMemberClick = (memberId: string) => async () => {
-    if (!workspace || !members || !invitations) return
+    if (!workspace) return
    await deleteMember(workspace.id, memberId)
    mutate({
      members: members.filter((m) => m.userId !== memberId),
@ -34,7 +34,7 @@ export const MembersList = () => {

  const handleSelectNewRole =
    (memberId: string) => async (role: WorkspaceRole) => {
-      if (!workspace || !members || !invitations) return
+      if (!workspace) return
      await updateMember(workspace.id, { userId: memberId, role })
      mutate({
        members: members.map((m) =>
@ -45,7 +45,7 @@ export const MembersList = () => {
    }

  const handleDeleteInvitationClick = (id: string) => async () => {
-    if (!workspace || !members || !invitations) return
+    if (!workspace) return
    await deleteInvitation({ workspaceId: workspace.id, id })
    mutate({
      invitations: invitations.filter((i) => i.id !== id),
@ -55,7 +55,7 @@ export const MembersList = () => {

  const handleSelectNewInvitationRole =
    (id: string) => async (type: WorkspaceRole) => {
-      if (!workspace || !members || !invitations) return
+      if (!workspace) return
      await updateInvitation({ workspaceId: workspace.id, id, type })
      mutate({
        invitations: invitations.map((i) => (i.id === id ? { ...i, type } : i)),
@ -63,17 +63,15 @@ export const MembersList = () => {
      })
    }

-  const handleNewInvitation = (invitation: WorkspaceInvitation) => {
-    if (!members || !invitations) return
-    mutate({
+  const handleNewInvitation = async (invitation: WorkspaceInvitation) => {
+    await mutate({
      members,
      invitations: [...invitations, invitation],
    })
  }

-  const handleNewMember = (member: Member) => {
-    if (!members || !invitations) return
-    mutate({
+  const handleNewMember = async (member: Member) => {
+    await mutate({
      members: [...members, member],
      invitations,
    })
@ -81,7 +79,7 @@ export const MembersList = () => {

  const canInviteNewMember = checkCanInviteMember({
    plan: workspace?.plan,
-    currentMembersCount: [...(members ?? []), ...(invitations ?? [])].length,
+    currentMembersCount: [...members, ...invitations].length,
  })

  return (
@ -103,7 +101,7 @@ export const MembersList = () => {
          isLocked={!canInviteNewMember}
        />
      )}
-      {members?.map((member) => (
+      {members.map((member) => (
        <MemberItem
          key={member.userId}
          email={member.email ?? ''}
@ -116,7 +114,7 @@ export const MembersList = () => {
          canEdit={canEdit}
        />
      ))}
-      {invitations?.map((invitation) => (
+      {invitations.map((invitation) => (
        <MemberItem
          key={invitation.email}
          email={invitation.email ?? ''}
--- a/apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx
+++ b/apps/builder/components/editor/BlocksSideBar/BlockTypeLabel.tsx
@ -1,5 +1,7 @@
-import { HStack, Tag, Text, Tooltip } from '@chakra-ui/react'
+import { HStack, Text, Tooltip } from '@chakra-ui/react'
+import { PlanTag } from 'components/shared/PlanTag'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
 import {
  BubbleBlockType,
  InputBlockType,
@ -52,11 +54,7 @@ export const BlockTypeLabel = ({ type }: Props): JSX.Element => {
        <Tooltip label="Upload Files">
          <HStack>
            <Text>File</Text>
-            {isFreePlan(workspace) && (
-              <Tag colorScheme="orange" size="sm">
-                Pro
-              </Tag>
-            )}
+            {isFreePlan(workspace) && <PlanTag plan={Plan.STARTER} />}
          </HStack>
        </Tooltip>
      )
--- a/apps/builder/components/settings/GeneralSettingsForm.tsx
+++ b/apps/builder/components/settings/GeneralSettingsForm.tsx
@ -1,14 +1,12 @@
+import { Flex, FormLabel, Stack, Switch, useDisclosure } from '@chakra-ui/react'
 import {
-  Flex,
-  FormLabel,
-  Stack,
-  Switch,
-  Tag,
-  useDisclosure,
-} from '@chakra-ui/react'
-import { ChangePlanModal } from 'components/shared/modals/ChangePlanModal'
+  ChangePlanModal,
+  LimitReached,
+} from 'components/shared/modals/ChangePlanModal'
+import { PlanTag } from 'components/shared/PlanTag'
 import { SwitchWithLabel } from 'components/shared/SwitchWithLabel'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
 import { GeneralSettings } from 'models'
 import React from 'react'
 import { isFreePlan } from 'services/workspace'
@ -25,9 +23,9 @@ export const GeneralSettingsForm = ({
 }: Props) => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { workspace } = useWorkspace()
-  const isUserFreePlan = isFreePlan(workspace)
+  const isWorkspaceFreePlan = isFreePlan(workspace)
  const handleSwitchChange = () => {
-    if (generalSettings?.isBrandingEnabled && isUserFreePlan) return
+    if (generalSettings?.isBrandingEnabled && isWorkspaceFreePlan) return
    onGeneralSettingsChange({
      ...generalSettings,
      isBrandingEnabled: !generalSettings?.isBrandingEnabled,
@ -56,15 +54,19 @@ export const GeneralSettingsForm = ({

  return (
    <Stack spacing={6}>
-      <ChangePlanModal isOpen={isOpen} onClose={onClose} />
+      <ChangePlanModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={LimitReached.BRAND}
+      />
      <Flex
        justifyContent="space-between"
        align="center"
-        onClick={isUserFreePlan ? onOpen : undefined}
+        onClick={isWorkspaceFreePlan ? onOpen : undefined}
      >
        <FormLabel htmlFor="branding" mb="0">
          Typebot.io branding{' '}
-          {isUserFreePlan && <Tag colorScheme="orange">Pro</Tag>}
+          {isWorkspaceFreePlan && <PlanTag plan={Plan.STARTER} />}
        </FormLabel>
        <Switch
          id="branding"
--- a/apps/builder/components/share/EditableUrl.tsx
+++ b/apps/builder/components/share/EditableUrl.tsx
@ -36,11 +36,10 @@ export const EditableUrl = ({
        <Tooltip label="Edit">
          <EditablePreview
            mx={1}
-            bgColor="blue.500"
-            color="white"
+            borderWidth="1px"
            px={3}
            rounded="md"
-            cursor="pointer"
+            cursor="text"
            display="flex"
            fontWeight="semibold"
          />
--- a/apps/builder/components/share/ShareContent.tsx
+++ b/apps/builder/components/share/ShareContent.tsx
@ -4,18 +4,20 @@ import {
  HStack,
  IconButton,
  Stack,
-  Tag,
  Wrap,
  Text,
 } from '@chakra-ui/react'
 import { TrashIcon } from 'assets/icons'
 import { UpgradeButton } from 'components/shared/buttons/UpgradeButton'
 import { useToast } from 'components/shared/hooks/useToast'
+import { LimitReached } from 'components/shared/modals/ChangePlanModal'
+import { PlanTag } from 'components/shared/PlanTag'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { useWorkspace } from 'contexts/WorkspaceContext'
+import { Plan } from 'db'
 import React from 'react'
 import { parseDefaultPublicId } from 'services/typebots'
-import { isFreePlan } from 'services/workspace'
+import { isWorkspaceProPlan } from 'services/workspace'
 import { getViewerUrl, isDefined, isNotDefined } from 'utils'
 import { CustomDomainsDropdown } from './customDomain/CustomDomainsDropdown'
 import { EditableUrl } from './EditableUrl'
@ -80,19 +82,18 @@ export const ShareContent = () => {
              />
            </HStack>
          )}
-          {isFreePlan(workspace) ? (
-            <UpgradeButton colorScheme="gray">
-              <Text mr="2">Add my domain</Text>{' '}
-              <Tag colorScheme="orange">Pro</Tag>
-            </UpgradeButton>
+          {isWorkspaceProPlan(workspace) &&
+          isNotDefined(typebot?.customDomain) ? (
+            <CustomDomainsDropdown
+              onCustomDomainSelect={handleCustomDomainChange}
+            />
          ) : (
-            <>
-              {isNotDefined(typebot?.customDomain) && (
-                <CustomDomainsDropdown
-                  onCustomDomainSelect={handleCustomDomainChange}
-                />
-              )}
-            </>
+            <UpgradeButton
+              colorScheme="gray"
+              limitReachedType={LimitReached.CUSTOM_DOMAIN}
+            >
+              <Text mr="2">Add my domain</Text> <PlanTag plan={Plan.PRO} />
+            </UpgradeButton>
          )}
        </Stack>

--- a/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx
@ -9,7 +9,7 @@ import {
  computeSourceCoordinates,
  computeDropOffPath,
 } from 'services/graph'
-import { isFreePlan } from 'services/workspace'
+import { isWorkspaceProPlan } from 'services/workspace'
 import { byId, isDefined } from 'utils'

 type Props = {
@ -28,7 +28,7 @@ export const DropOffEdge = ({
  const { sourceEndpoints, graphPosition } = useGraph()
  const { publishedTypebot } = useTypebot()

-  const isUserOnFreePlan = isFreePlan(workspace)
+  const isProPlan = isWorkspaceProPlan(workspace)

  const totalAnswers = useMemo(
    () => answersCounts.find((a) => a.groupId === groupId)?.totalAnswers,
@ -95,7 +95,7 @@ export const DropOffEdge = ({
      >
        <Tooltip
          label="Unlock Drop-off rate by upgrading to Pro plan"
-          isDisabled={!isUserOnFreePlan}
+          isDisabled={isProPlan}
        >
          <VStack
            bgColor={'red.500'}
@ -105,13 +105,28 @@ export const DropOffEdge = ({
            justifyContent="center"
            w="full"
            h="full"
-            filter={isUserOnFreePlan ? 'blur(4px)' : ''}
-            onClick={isUserOnFreePlan ? onUnlockProPlanClick : undefined}
-            cursor={isUserOnFreePlan ? 'pointer' : 'auto'}
+            onClick={isProPlan ? undefined : onUnlockProPlanClick}
+            cursor={isProPlan ? 'auto' : 'pointer'}
          >
-            <Text>{isUserOnFreePlan ? 'X' : dropOffRate}%</Text>
+            <Text filter={isProPlan ? '' : 'blur(2px)'}>
+              {isProPlan ? (
+                dropOffRate
+              ) : (
+                <Text as="span" filter="blur(2px)">
+                  X
+                </Text>
+              )}
+              %
+            </Text>
            <Tag colorScheme="red">
-              {isUserOnFreePlan ? 'n' : totalDroppedUser} users
+              {isProPlan ? (
+                totalDroppedUser
+              ) : (
+                <Text as="span" filter="blur(3px)" mr="1">
+                  NN
+                </Text>
+              )}{' '}
+              users
            </Tag>
          </VStack>
        </Tooltip>
--- a/apps/builder/components/shared/Graph/Edges/Edges.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edges.tsx
@ -25,7 +25,6 @@ export const Edges = ({
      pos="absolute"
      left="0"
      top="0"
-      pointerEvents="none"
      shapeRendering="geometricPrecision"
    >
      <DrawingEdge />
--- a/apps/builder/components/shared/PlanTag.tsx
+++ b/apps/builder/components/shared/PlanTag.tsx
@ -1,12 +1,12 @@
-import { Tag } from '@chakra-ui/react'
+import { Tag, TagProps } from '@chakra-ui/react'
 import { Plan } from 'db'

-export const PlanTag = ({ plan }: { plan?: Plan }) => {
+export const PlanTag = ({ plan, ...props }: { plan?: Plan } & TagProps) => {
  switch (plan) {
    case Plan.LIFETIME:
    case Plan.PRO: {
      return (
-        <Tag colorScheme="blue" data-testid="plan-tag">
+        <Tag colorScheme="blue" data-testid="pro-plan-tag" {...props}>
          Pro
        </Tag>
      )
@ -14,14 +14,14 @@ export const PlanTag = ({ plan }: { plan?: Plan }) => {
    case Plan.OFFERED:
    case Plan.STARTER: {
      return (
-        <Tag colorScheme="orange" data-testid="plan-tag">
+        <Tag colorScheme="orange" data-testid="starter-plan-tag" {...props}>
          Starter
        </Tag>
      )
    }
    default: {
      return (
-        <Tag colorScheme="gray" data-testid="plan-tag">
+        <Tag colorScheme="gray" data-testid="free-plan-tag" {...props}>
          Free
        </Tag>
      )
--- a/apps/builder/components/shared/buttons/UpgradeButton.tsx
+++ b/apps/builder/components/shared/buttons/UpgradeButton.tsx
@ -5,9 +5,9 @@ import { isNotDefined } from 'utils'
 import { ChangePlanModal } from '../modals/ChangePlanModal'
 import { LimitReached } from '../modals/ChangePlanModal'

-type Props = { type?: LimitReached } & ButtonProps
+type Props = { limitReachedType?: LimitReached } & ButtonProps

-export const UpgradeButton = ({ type, ...props }: Props) => {
+export const UpgradeButton = ({ limitReachedType, ...props }: Props) => {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const { workspace } = useWorkspace()
  return (
@ -18,7 +18,11 @@ export const UpgradeButton = ({ type, ...props }: Props) => {
      onClick={onOpen}
    >
      {props.children ?? 'Upgrade'}
-      <ChangePlanModal isOpen={isOpen} onClose={onClose} type={type} />
+      <ChangePlanModal
+        isOpen={isOpen}
+        onClose={onClose}
+        type={limitReachedType}
+      />
    </Button>
  )
 }
--- a/apps/builder/components/shared/modals/ChangePlanModal.tsx
+++ b/apps/builder/components/shared/modals/ChangePlanModal.tsx
@ -13,9 +13,10 @@ import { ChangePlanForm } from 'components/shared/ChangePlanForm'

 export enum LimitReached {
  BRAND = 'remove branding',
-  CUSTOM_DOMAIN = 'add custom domain',
+  CUSTOM_DOMAIN = 'add custom domains',
  FOLDER = 'create folders',
  FILE_INPUT = 'use file input blocks',
+  ANALYTICS = 'unlock in-depth analytics',
 }

 type ChangePlanModalProps = {
--- a/apps/builder/contexts/WorkspaceContext.tsx
+++ b/apps/builder/contexts/WorkspaceContext.tsx
@ -37,7 +37,11 @@ const workspaceContext = createContext<{
  //@ts-ignore
 }>({})

-export const WorkspaceContext = ({ children }: { children: ReactNode }) => {
+type WorkspaceContextProps = {
+  children: ReactNode
+}
+
+export const WorkspaceContext = ({ children }: WorkspaceContextProps) => {
  const { query } = useRouter()
  const { user } = useUser()
  const userId = user?.id
@ -45,6 +49,7 @@ export const WorkspaceContext = ({ children }: { children: ReactNode }) => {
  const { workspaces, isLoading, mutate } = useWorkspaces({ userId })
  const [currentWorkspace, setCurrentWorkspace] =
    useState<WorkspaceWithMembers>()
+  const [pendingWorkspaceId, setPendingWorkspaceId] = useState<string>()

  const canEdit =
    workspaces
@ -58,7 +63,9 @@ export const WorkspaceContext = ({ children }: { children: ReactNode }) => {
  useEffect(() => {
    if (!workspaces || workspaces.length === 0 || currentWorkspace) return
    const lastWorspaceId =
-      query.workspaceId?.toString() ?? localStorage.getItem('workspaceId')
+      pendingWorkspaceId ??
+      query.workspaceId?.toString() ??
+      localStorage.getItem('workspaceId')
    const defaultWorkspace = lastWorspaceId
      ? workspaces.find(byId(lastWorspaceId))
      : workspaces.find((w) =>
@ -77,11 +84,8 @@ export const WorkspaceContext = ({ children }: { children: ReactNode }) => {
  }, [currentWorkspace?.id])

  useEffect(() => {
-    if (
-      !typebot?.workspaceId ||
-      !currentWorkspace ||
-      typebot.workspaceId === currentWorkspace.id
-    )
+    if (!currentWorkspace) return setPendingWorkspaceId(typebot?.workspaceId)
+    if (!typebot?.workspaceId || typebot.workspaceId === currentWorkspace.id)
      return
    switchWorkspace(typebot.workspaceId)
    // eslint-disable-next-line react-hooks/exhaustive-deps
--- a/apps/builder/pages/api/workspaces/[workspaceId]/invitations.ts
+++ b/apps/builder/pages/api/workspaces/[workspaceId]/invitations.ts
@ -38,6 +38,17 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
          userId: existingUser.id,
        },
      })
+      if (env('E2E_TEST') !== 'true')
+        await sendEmailNotification({
+          to: data.email,
+          subject: "You've been invited to collaborate 🤝",
+          html: workspaceMemberInvitationEmail({
+            workspaceName: workspace.name,
+            guestEmail: data.email,
+            url: `${process.env.NEXTAUTH_URL}/typebots?workspaceId=${workspace.id}`,
+            hostEmail: user.email ?? '',
+          }),
+        })
      return res.send({
        member: {
          userId: existingUser.id,
@ -47,19 +58,21 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
          workspaceId: data.workspaceId,
        },
      })
-    } else await prisma.workspaceInvitation.create({ data })
-    if (env('E2E_TEST') !== 'true')
-      await sendEmailNotification({
-        to: data.email,
-        subject: "You've been invited to collaborate 🤝",
-        html: workspaceMemberInvitationEmail({
-          workspaceName: workspace.name,
-          guestEmail: data.email,
-          url: `${process.env.NEXTAUTH_URL}/typebots?workspaceId=${workspace.id}`,
-          hostEmail: user.email ?? '',
-        }),
-      })
-    return res.send({ message: 'success' })
+    } else {
+      const invitation = await prisma.workspaceInvitation.create({ data })
+      if (env('E2E_TEST') !== 'true')
+        await sendEmailNotification({
+          to: data.email,
+          subject: "You've been invited to collaborate 🤝",
+          html: workspaceMemberInvitationEmail({
+            workspaceName: workspace.name,
+            guestEmail: data.email,
+            url: `${process.env.NEXTAUTH_URL}/typebots?workspaceId=${workspace.id}`,
+            hostEmail: user.email ?? '',
+          }),
+        })
+      return res.send({ invitation })
+    }
  }
  methodNotAllowed(res)
 }
--- a/apps/builder/playwright/services/browser.ts
+++ b/apps/builder/playwright/services/browser.ts
@ -6,7 +6,7 @@ export const refreshUser = async () => {
  document.dispatchEvent(event)
 }

-export const connectedAsOtherUser = async (page: Page) =>
+export const mockSessionResponsesToOtherUser = async (page: Page) =>
  page.route('/api/auth/session', (route) => {
    if (route.request().method() === 'GET') {
      return route.fulfill({
--- a/apps/builder/playwright/services/database.ts
+++ b/apps/builder/playwright/services/database.ts
@ -21,6 +21,7 @@ import { readFileSync } from 'fs'
 import { injectFakeResults } from 'utils'
 import { encrypt } from 'utils/api'
 import Stripe from 'stripe'
+import cuid from 'cuid'

 const prisma = new PrismaClient()

@ -28,7 +29,7 @@ const stripe = new Stripe(process.env.STRIPE_TEST_SECRET_KEY ?? '', {
  apiVersion: '2022-08-01',
 })

-const userId = 'userId'
+export const userId = 'userId'
 const otherUserId = 'otherUserId'
 export const freeWorkspaceId = 'freeWorkspace'
 export const starterWorkspaceId = 'starterWorkspace'
@ -49,6 +50,12 @@ export const teardownDatabase = async () => {
  return prisma.webhook.deleteMany()
 }

+export const deleteWorkspaces = async (workspaceIds: string[]) => {
+  await prisma.workspace.deleteMany({
+    where: { id: { in: workspaceIds } },
+  })
+}
+
 export const addSubscriptionToWorkspace = async (
  workspaceId: string,
  items: Stripe.SubscriptionCreateParams.Item[],
@ -90,12 +97,12 @@ export const addSubscriptionToWorkspace = async (
 }

 export const setupDatabase = async () => {
-  await createWorkspaces()
-  await createUsers()
-  return createCredentials()
+  await setupWorkspaces()
+  await setupUsers()
+  return setupCredentials()
 }

-export const createWorkspaces = async () =>
+export const setupWorkspaces = async () =>
  prisma.workspace.createMany({
    data: [
      {
@ -122,21 +129,27 @@ export const createWorkspaces = async () =>
    ],
  })

-export const createWorkspace = async (workspace: Partial<Workspace>) => {
-  const { id: workspaceId } = await prisma.workspace.create({
-    data: {
+export const createWorkspaces = async (workspaces: Partial<Workspace>[]) => {
+  const workspaceIds = workspaces.map((workspace) => workspace.id ?? cuid())
+  await prisma.workspace.createMany({
+    data: workspaces.map((workspace, index) => ({
+      id: workspaceIds[index],
      name: 'Free workspace',
      plan: Plan.FREE,
      ...workspace,
-    },
+    })),
  })
-  await prisma.memberInWorkspace.create({
-    data: { userId, workspaceId, role: WorkspaceRole.ADMIN },
+  await prisma.memberInWorkspace.createMany({
+    data: workspaces.map((_, index) => ({
+      userId,
+      workspaceId: workspaceIds[index],
+      role: WorkspaceRole.ADMIN,
+    })),
  })
-  return workspaceId
+  return workspaceIds
 }

-export const createUsers = async () => {
+export const setupUsers = async () => {
  await prisma.user.create({
    data: {
      id: userId,
@ -237,7 +250,7 @@ export const createFolders = (partialFolders: Partial<DashboardFolder>[]) =>
    })),
  })

-const createCredentials = () => {
+const setupCredentials = () => {
  const { encryptedData, iv } = encrypt({
    expiry_date: 1642441058842,
    access_token:
--- a/apps/builder/playwright/tests/accountSettings.spec.ts
+++ b/apps/builder/playwright/tests/accountSettings.spec.ts
@ -1,5 +1,8 @@
 import test, { expect } from '@playwright/test'
 import path from 'path'
+import { userId } from 'playwright/services/database'
+
+test.describe.configure({ mode: 'parallel' })

 test('should display user info properly', async ({ page }) => {
  await page.goto('/typebots')
@ -18,7 +21,7 @@ test('should display user info properly', async ({ page }) => {
  await expect(page.locator('img >> nth=1')).toHaveAttribute(
    'src',
    new RegExp(
-      `http://localhost:9000/typebot/public/users/proUser/avatar`,
+      `http://localhost:9000/typebot/public/users/${userId}/avatar`,
      'gm'
    )
  )
--- a/apps/builder/playwright/tests/analytics.spec.ts
+++ b/apps/builder/playwright/tests/analytics.spec.ts
@ -0,0 +1,30 @@
+import test, { expect } from '@playwright/test'
+import cuid from 'cuid'
+import path from 'path'
+import {
+  importTypebotInDatabase,
+  starterWorkspaceId,
+} from '../services/database'
+
+test('analytics are not available for non-pro workspaces', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../fixtures/typebots/results/submissionHeader.json'),
+    {
+      id: typebotId,
+      workspaceId: starterWorkspaceId,
+    }
+  )
+  await page.goto(`/typebots/${typebotId}/results/analytics`)
+  const firstDropoffBox = page.locator('text="%" >> nth=0')
+  await firstDropoffBox.hover()
+  await expect(
+    page.locator('text="Unlock Drop-off rate by upgrading to Pro plan"')
+  ).toBeVisible()
+  await firstDropoffBox.click()
+  await expect(
+    page.locator(
+      'text="You need to upgrade your plan in order to unlock in-depth analytics"'
+    )
+  ).toBeVisible()
+})
--- a/apps/builder/playwright/tests/billing.spec.ts
+++ b/apps/builder/playwright/tests/billing.spec.ts
@ -5,13 +5,34 @@ import {
  addSubscriptionToWorkspace,
  createResults,
  createTypebots,
-  createWorkspace,
-  starterWorkspaceId,
+  createWorkspaces,
+  deleteWorkspaces,
 } from '../services/database'

+const usageWorkspaceId = cuid()
+const usageTypebotId = cuid()
+const planChangeWorkspaceId = cuid()
+
+test.beforeAll(async () => {
+  await createWorkspaces([
+    {
+      id: usageWorkspaceId,
+      name: 'Usage Workspace',
+      plan: Plan.STARTER,
+    },
+    {
+      id: planChangeWorkspaceId,
+      name: 'Plan Change Workspace',
+    },
+  ])
+  await createTypebots([{ id: usageTypebotId, workspaceId: usageWorkspaceId }])
+})
+
+test.afterAll(async () => {
+  await deleteWorkspaces([usageWorkspaceId, planChangeWorkspaceId])
+})
+
 test('should display valid usage', async ({ page }) => {
-  const starterTypebotId = cuid()
-  createTypebots([{ id: starterTypebotId, workspaceId: starterWorkspaceId }])
  await page.goto('/typebots')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
@ -24,37 +45,34 @@ test('should display valid usage', async ({ page }) => {
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
  await expect(page.locator('text="/ 300"')).toBeVisible()
+  await expect(page.locator('text="Storage"')).toBeHidden()
  await page.click('text=Free workspace', { force: true })

  await createResults({
-    idPrefix: 'usage',
    count: 10,
-    typebotId: starterTypebotId,
-    isChronological: false,
+    typebotId: usageTypebotId,
    fakeStorage: 1100 * 1024 * 1024,
  })
  await page.click('text=Free workspace')
-  await page.click('text="Starter workspace"')
+  await page.click('text="Usage Workspace"')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
  await expect(page.locator('text="/ 2,000"')).toBeVisible()
  await expect(page.locator('text="/ 2 GB"')).toBeVisible()
-  await expect(page.locator('text="1.07 GB"')).toBeVisible()
-  await expect(page.locator('text="200"')).toBeVisible()
+  await expect(page.locator('text="10" >> nth=0')).toBeVisible()
  await expect(page.locator('[role="progressbar"] >> nth=0')).toHaveAttribute(
    'aria-valuenow',
-    '10'
+    '1'
  )
+  await expect(page.locator('text="1.07 GB"')).toBeVisible()
  await expect(page.locator('[role="progressbar"] >> nth=1')).toHaveAttribute(
    'aria-valuenow',
    '54'
  )

  await createResults({
-    idPrefix: 'usage2',
-    typebotId: starterTypebotId,
-    isChronological: false,
-    count: 900,
+    typebotId: usageTypebotId,
+    count: 1090,
    fakeStorage: 1200 * 1024 * 1024,
  })
  await page.click('text="Settings"')
@ -68,12 +86,11 @@ test('should display valid usage', async ({ page }) => {
 })

 test('plan changes should work', async ({ page }) => {
-  const workspaceId = await createWorkspace({ name: 'Awesome workspace' })
-
+  test.setTimeout(80000)
  // Upgrade to STARTER
  await page.goto('/typebots')
  await page.click('text=Pro workspace')
-  await page.click('text=Awesome workspace')
+  await page.click('text=Plan Change Workspace')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
  await page.click('button >> text="2,000"')
@ -89,7 +106,7 @@ test('plan changes should work', async ({ page }) => {
  await expect(page.locator('text=$4.00 >> nth=0')).toBeVisible()
  await expect(page.locator('text=user@email.com')).toBeVisible()
  await addSubscriptionToWorkspace(
-    workspaceId,
+    planChangeWorkspaceId,
    [
      {
        price: process.env.STRIPE_STARTER_PRICE_ID,
@ -148,26 +165,23 @@ test('plan changes should work', async ({ page }) => {
  await page.goto('/typebots')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
-  await expect(page.locator('[data-testid="plan-tag"]')).toHaveText('Pro')
+  await expect(page.locator('[data-testid="pro-plan-tag"]')).toBeVisible()
  await page.click('button >> text="Cancel my subscription"')
-  await expect(page.locator('[data-testid="plan-tag"]')).toHaveText('Free')
+  await expect(page.locator('[data-testid="free-plan-tag"]')).toBeVisible()
 })

 test('should display invoices', async ({ page }) => {
  await page.goto('/typebots')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
-  await expect(
-    page.locator('text="No invoices found for this workspace."')
-  ).toBeVisible()
+  await expect(page.locator('text="Invoices"')).toBeHidden()
  await page.click('text=Pro workspace', { force: true })

  await page.click('text=Pro workspace')
-  await page.click('text=Starter workspace')
+  await page.click('text=Plan Change Workspace')
  await page.click('text=Settings & Members')
  await page.click('text=Billing & Usage')
  await expect(page.locator('text="Invoices"')).toBeVisible()
-  await expect(page.locator('text="Wed Jun 01 2022"')).toBeVisible()
-  await expect(page.locator('text="74567541-0001"')).toBeVisible()
-  await expect(page.locator('text="€30.00" >> nth=0')).toBeVisible()
+  await expect(page.locator('tr')).toHaveCount(2)
+  await expect(page.locator('text="€39.00"')).toBeVisible()
 })
--- a/apps/builder/playwright/tests/collaboration.spec.ts
+++ b/apps/builder/playwright/tests/collaboration.spec.ts
@ -8,6 +8,7 @@ import {
  createResults,
  createTypebots,
  parseDefaultGroupWithBlock,
+  userId,
 } from '../services/database'

 test.describe('Typebot owner', () => {
@ -21,7 +22,7 @@ test.describe('Typebot owner', () => {
        plan: Plan.FREE,
        members: {
          createMany: {
-            data: [{ role: WorkspaceRole.ADMIN, userId: 'proUser' }],
+            data: [{ role: WorkspaceRole.ADMIN, userId }],
          },
        },
      },
@ -51,20 +52,20 @@ test.describe('Typebot owner', () => {
    await expect(page.locator('text=Free user')).toBeHidden()
    await page.fill(
      'input[placeholder="colleague@company.com"]',
-      'free-user@email.com'
+      'other-user@email.com'
    )
    await page.click('text=Can edit')
    await page.click('text=Can view')
    await page.click('text=Invite')
-    await expect(page.locator('text=Free user')).toBeVisible()
+    await expect(page.locator('text=James Doe')).toBeVisible()
    await page.click('text="guest@email.com"')
    await page.click('text="Remove"')
    await expect(page.locator('text="guest@email.com"')).toBeHidden()
  })
 })

-test.describe('Collaborator', () => {
-  test('should display shared typebots', async ({ page }) => {
+test.describe('Guest', () => {
+  test('should have shared typebots displayed', async ({ page }) => {
    const typebotId = cuid()
    const guestWorkspaceId = cuid()
    await prisma.workspace.create({
@ -74,7 +75,7 @@ test.describe('Collaborator', () => {
        plan: Plan.FREE,
        members: {
          createMany: {
-            data: [{ role: WorkspaceRole.GUEST, userId: 'proUser' }],
+            data: [{ role: WorkspaceRole.GUEST, userId }],
          },
        },
      },
@ -89,29 +90,34 @@ test.describe('Collaborator', () => {
          options: defaultTextInputOptions,
        }),
      },
+      {
+        name: 'Another typebot',
+        workspaceId: guestWorkspaceId,
+      },
    ])
    await prisma.collaboratorsOnTypebots.create({
      data: {
        typebotId,
-        userId: 'proUser',
+        userId,
        type: CollaborationType.READ,
      },
    })
    await createFolder(guestWorkspaceId, 'Guest folder')
    await createResults({ typebotId, count: 10 })
    await page.goto(`/typebots`)
-    await page.click("text=Pro user's workspace")
+    await page.click('text=Pro workspace')
    await page.click('text=Guest workspace #2')
    await expect(page.locator('text=Guest typebot')).toBeVisible()
+    await expect(page.locator('text=Another typebot')).toBeHidden()
    await expect(page.locator('text=Guest folder')).toBeHidden()
    await page.click('text=Guest typebot')
    await page.click('button[aria-label="Show collaboration menu"]')
    await page.click('text=Everyone at Guest workspace')
    await expect(page.locator('text="Remove"')).toBeHidden()
-    await expect(page.locator('text=Pro user')).toBeVisible()
+    await expect(page.locator('text=John Doe')).toBeVisible()
    await page.click('text=Group #1', { force: true })
    await expect(page.locator('input[value="Group #1"]')).toBeHidden()
    await page.goto(`/typebots/${typebotId}/results`)
-    await expect(page.locator('text="See logs" >> nth=10')).toBeVisible()
+    await expect(page.locator('text="See logs" >> nth=9')).toBeVisible()
  })
 })
--- a/apps/builder/playwright/tests/customDomains.spec.ts
+++ b/apps/builder/playwright/tests/customDomains.spec.ts
@ -59,6 +59,10 @@ test.describe('Starter workspace', () => {
    await page.goto(`/typebots/${typebotId}/share`)
    await expect(page.locator('text=Pro')).toBeVisible()
    await page.click('text=Add my domain')
-    await expect(page.locator('text=For solo creator')).toBeVisible()
+    await expect(
+      page.locator(
+        'text="You need to upgrade your plan in order to add custom domains"'
+      )
+    ).toBeVisible()
  })
 })
--- a/apps/builder/playwright/tests/dashboard.spec.ts
+++ b/apps/builder/playwright/tests/dashboard.spec.ts
@ -1,88 +1,87 @@
 import test, { expect, Page } from '@playwright/test'
 import cuid from 'cuid'
-import path from 'path'
 import { createFolders, createTypebots } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'

-test.describe('Dashboard page', () => {
-  test('folders navigation should work', async ({ page }) => {
+test('folders navigation should work', async ({ page }) => {
+  await page.goto('/typebots')
+  const createFolderButton = page.locator('button:has-text("Create a folder")')
+  await expect(createFolderButton).not.toBeDisabled()
+  await createFolderButton.click()
+  await page.click('text="New folder"')
+  await page.fill('input[value="New folder"]', 'My folder #1')
+  await page.press('input[value="My folder #1"]', 'Enter')
+  await waitForNextApiCall(page)
+  await page.click('li:has-text("My folder #1")')
+  await expect(page.locator('h1:has-text("My folder #1")')).toBeVisible()
+  await createFolderButton.click()
+  await page.click('text="New folder"')
+  await page.fill('input', 'My folder #2')
+  await page.press('input', 'Enter')
+  await waitForNextApiCall(page)
+
+  await page.click('li:has-text("My folder #2")')
+  await expect(page.locator('h1 >> text="My folder #2"')).toBeVisible()
+
+  await page.click('text="Back"')
+  await expect(page.locator('span >> text="My folder #2"')).toBeVisible()
+
+  await page.click('text="Back"')
+  await expect(page.locator('span >> text=My folder #1')).toBeVisible()
+})
+
+test('folders and typebots should be deletable', async ({ page }) => {
+  await createFolders([{ name: 'Folder #1' }, { name: 'Folder #2' }])
+  await createTypebots([{ id: 'deletable-typebot', name: 'Typebot #1' }])
+  await page.goto('/typebots')
+  await page.click('button[aria-label="Show Folder #1 menu"]')
+  await page.click('li:has-text("Folder #1") >> button:has-text("Delete")')
+  await deleteButtonInConfirmDialog(page).click()
+  await expect(page.locator('span >> text="Folder #1"')).not.toBeVisible()
+  await page.click('button[aria-label="Show Typebot #1 menu"]')
+  await page.click('li:has-text("Typebot #1") >> button:has-text("Delete")')
+  await deleteButtonInConfirmDialog(page).click()
+  await expect(page.locator('span >> text="Typebot #1"')).not.toBeVisible()
+})
+
+test('folders and typebots should be movable', async ({ page }) => {
+  const droppableFolderId = cuid()
+  await createFolders([{ id: droppableFolderId, name: 'Droppable folder' }])
+  await createTypebots([{ name: 'Draggable typebot' }])
+  await page.goto('/typebots')
+  const typebotButton = page.locator('li:has-text("Draggable typebot")')
+  const folderButton = page.locator('li:has-text("Droppable folder")')
+  await page.dragAndDrop(
+    'li:has-text("Draggable typebot")',
+    'li:has-text("Droppable folder")'
+  )
+  await waitForNextApiCall(page)
+  await expect(typebotButton).toBeHidden()
+  await folderButton.click()
+  await expect(page).toHaveURL(new RegExp(`/folders/${droppableFolderId}`))
+  await expect(typebotButton).toBeVisible()
+  await page.dragAndDrop(
+    'li:has-text("Draggable typebot")',
+    'a:has-text("Back")'
+  )
+  await waitForNextApiCall(page)
+  await expect(typebotButton).toBeHidden()
+  await page.click('a:has-text("Back")')
+  await expect(typebotButton).toBeVisible()
+})
+
+test.describe('Free user', () => {
+  test("create folder shouldn't be available", async ({ page }) => {
    await page.goto('/typebots')
-    const createFolderButton = page.locator(
-      'button:has-text("Create a folder")'
-    )
-    await expect(createFolderButton).not.toBeDisabled()
-    await createFolderButton.click()
-    await page.click('text="New folder"')
-    await page.fill('input[value="New folder"]', 'My folder #1')
-    await page.press('input[value="My folder #1"]', 'Enter')
-    await waitForNextApiCall(page)
-    await page.click('li:has-text("My folder #1")')
-    await expect(page.locator('h1:has-text("My folder #1")')).toBeVisible()
-    await createFolderButton.click()
-    await page.click('text="New folder"')
-    await page.fill('input', 'My folder #2')
-    await page.press('input', 'Enter')
-    await waitForNextApiCall(page)
-
-    await page.click('li:has-text("My folder #2")')
-    await expect(page.locator('h1 >> text="My folder #2"')).toBeVisible()
-
-    await page.click('text="Back"')
-    await expect(page.locator('span >> text="My folder #2"')).toBeVisible()
-
-    await page.click('text="Back"')
-    await expect(page.locator('span >> text=My folder #1')).toBeVisible()
-  })
-
-  test('folders and typebots should be deletable', async ({ page }) => {
-    await createFolders([{ name: 'Folder #1' }, { name: 'Folder #2' }])
-    await createTypebots([{ id: 'deletable-typebot', name: 'Typebot #1' }])
-    await page.goto('/typebots')
-    await page.click('button[aria-label="Show Folder #1 menu"]')
-    await page.click('li:has-text("Folder #1") >> button:has-text("Delete")')
-    await deleteButtonInConfirmDialog(page).click()
-    await expect(page.locator('span >> text="Folder #1"')).not.toBeVisible()
-    await page.click('button[aria-label="Show Typebot #1 menu"]')
-    await page.click('li:has-text("Typebot #1") >> button:has-text("Delete")')
-    await deleteButtonInConfirmDialog(page).click()
-    await expect(page.locator('span >> text="Typebot #1"')).not.toBeVisible()
-  })
-
-  test('folders and typebots should be movable', async ({ page }) => {
-    const droppableFolderId = cuid()
-    await createFolders([{ id: droppableFolderId, name: 'Droppable folder' }])
-    await createTypebots([{ name: 'Draggable typebot' }])
-    await page.goto('/typebots')
-    const typebotButton = page.locator('li:has-text("Draggable typebot")')
-    const folderButton = page.locator('li:has-text("Droppable folder")')
-    await page.dragAndDrop(
-      'li:has-text("Draggable typebot")',
-      'li:has-text("Droppable folder")'
-    )
-    await waitForNextApiCall(page)
-    await expect(typebotButton).toBeHidden()
-    await folderButton.click()
-    await expect(page).toHaveURL(new RegExp(`/folders/${droppableFolderId}`))
-    await expect(typebotButton).toBeVisible()
-    await page.dragAndDrop(
-      'li:has-text("Draggable typebot")',
-      'a:has-text("Back")'
-    )
-    await waitForNextApiCall(page)
-    await expect(typebotButton).toBeHidden()
-    await page.click('a:has-text("Back")')
-    await expect(typebotButton).toBeVisible()
-  })
-
-  test.describe('Free user', () => {
-    test.use({
-      storageState: path.join(__dirname, '../secondUser.json'),
-    })
-    test("create folder shouldn't be available", async ({ page }) => {
-      await page.goto('/typebots')
-      await page.click('text=Create a folder')
-      await expect(page.locator('text=For solo creator')).toBeVisible()
-    })
+    await page.click('text="Pro workspace"')
+    await page.click('text="Free workspace"')
+    await expect(page.locator('[data-testid="starter-plan-tag"]')).toBeVisible()
+    await page.click('text=Create a folder')
+    await expect(
+      page.locator(
+        'text="You need to upgrade your plan in order to create folders"'
+      )
+    ).toBeVisible()
  })
 })

--- a/apps/builder/playwright/tests/editor.spec.ts
+++ b/apps/builder/playwright/tests/editor.spec.ts
@ -9,174 +9,174 @@ import path from 'path'
 import cuid from 'cuid'
 import { typebotViewer } from '../services/selectorUtils'

-test.describe.parallel('Editor', () => {
-  test('Edges connection should work', async ({ page }) => {
-    const typebotId = cuid()
-    await createTypebots([
-      {
-        id: typebotId,
-      },
-    ])
-    await page.goto(`/typebots/${typebotId}/edit`)
-    await expect(page.locator("text='Start'")).toBeVisible()
-    await page.dragAndDrop('text=Button', '#editor-container', {
-      targetPosition: { x: 1000, y: 400 },
-    })
-    await page.dragAndDrop(
-      'text=Text >> nth=0',
-      '[data-testid="group"] >> nth=1',
-      {
-        targetPosition: { x: 100, y: 50 },
-      }
-    )
-    await page.dragAndDrop(
-      '[data-testid="endpoint"]',
-      '[data-testid="group"] >> nth=1',
-      { targetPosition: { x: 100, y: 10 } }
-    )
-    await expect(page.locator('[data-testid="edge"]')).toBeVisible()
-    await page.dragAndDrop(
-      '[data-testid="endpoint"]',
-      '[data-testid="group"] >> nth=1'
-    )
-    await expect(page.locator('[data-testid="edge"]')).toBeVisible()
-    await page.dragAndDrop('text=Date', '#editor-container', {
-      targetPosition: { x: 1000, y: 800 },
-    })
-    await page.dragAndDrop(
-      '[data-testid="endpoint"] >> nth=2',
-      '[data-testid="group"] >> nth=2',
-      {
-        targetPosition: { x: 100, y: 10 },
-      }
-    )
-    await expect(page.locator('[data-testid="edge"] >> nth=0')).toBeVisible()
-    await expect(page.locator('[data-testid="edge"] >> nth=1')).toBeVisible()
+test.describe.configure({ mode: 'parallel' })

-    await page.click('[data-testid="clickable-edge"] >> nth=0', {
-      force: true,
-      button: 'right',
-    })
-    await page.click('text=Delete')
-    const total = await page.locator('[data-testid="edge"]').count()
-    expect(total).toBe(1)
+test('Edges connection should work', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+    },
+  ])
+  await page.goto(`/typebots/${typebotId}/edit`)
+  await expect(page.locator("text='Start'")).toBeVisible()
+  await page.dragAndDrop('text=Button', '#editor-container', {
+    targetPosition: { x: 1000, y: 400 },
  })
-  test('Drag and drop blocks and items should work', async ({ page }) => {
-    const typebotId = cuid()
-    await importTypebotInDatabase(
-      path.join(__dirname, '../fixtures/typebots/editor/buttonsDnd.json'),
-      {
-        id: typebotId,
-      }
-    )
-
-    // Blocks dnd
-    await page.goto(`/typebots/${typebotId}/edit`)
-    await expect(page.locator('[data-testid="block"] >> nth=1')).toHaveText(
-      'Hello!'
-    )
-    await page.dragAndDrop('text=Hello', '[data-testid="block"] >> nth=3', {
-      targetPosition: { x: 100, y: 0 },
-    })
-    await expect(page.locator('[data-testid="block"] >> nth=2')).toHaveText(
-      'Hello!'
-    )
-    await page.dragAndDrop('text=Hello', 'text=Group #2')
-    await expect(page.locator('[data-testid="block"] >> nth=3')).toHaveText(
-      'Hello!'
-    )
-
-    // Items dnd
-    await expect(page.locator('[data-testid="item"] >> nth=0')).toHaveText(
-      'Item 1'
-    )
-    await page.dragAndDrop('text=Item 1', 'text=Item 3')
-    await expect(page.locator('[data-testid="item"] >> nth=2')).toHaveText(
-      'Item 1'
-    )
-    await expect(page.locator('[data-testid="item"] >> nth=1')).toHaveText(
-      'Item 3'
-    )
-    await page.dragAndDrop('text=Item 3', 'text=Item 2-3')
-    await expect(page.locator('[data-testid="item"] >> nth=6')).toHaveText(
-      'Item 3'
-    )
+  await page.dragAndDrop(
+    'text=Text >> nth=0',
+    '[data-testid="group"] >> nth=1',
+    {
+      targetPosition: { x: 100, y: 50 },
+    }
+  )
+  await page.dragAndDrop(
+    '[data-testid="endpoint"]',
+    '[data-testid="group"] >> nth=1',
+    { targetPosition: { x: 100, y: 10 } }
+  )
+  await expect(page.locator('[data-testid="edge"]')).toBeVisible()
+  await page.dragAndDrop(
+    '[data-testid="endpoint"]',
+    '[data-testid="group"] >> nth=1'
+  )
+  await expect(page.locator('[data-testid="edge"]')).toBeVisible()
+  await page.dragAndDrop('text=Date', '#editor-container', {
+    targetPosition: { x: 1000, y: 800 },
  })
-  test('Undo / Redo buttons should work', async ({ page }) => {
-    const typebotId = cuid()
-    await createTypebots([
-      {
-        id: typebotId,
-        ...parseDefaultGroupWithBlock({
-          type: InputBlockType.TEXT,
-          options: defaultTextInputOptions,
-        }),
-      },
-    ])
+  await page.dragAndDrop(
+    '[data-testid="endpoint"] >> nth=2',
+    '[data-testid="group"] >> nth=2',
+    {
+      targetPosition: { x: 100, y: 10 },
+    }
+  )
+  await expect(page.locator('[data-testid="edge"] >> nth=0')).toBeVisible()
+  await expect(page.locator('[data-testid="edge"] >> nth=1')).toBeVisible()

-    await page.goto(`/typebots/${typebotId}/edit`)
-    await page.click('text=Group #1', { button: 'right' })
-    await page.click('text=Duplicate')
-    await expect(page.locator('text="Group #1"')).toBeVisible()
-    await expect(page.locator('text="Group #1 copy"')).toBeVisible()
-    await page.click('text="Group #1"', { button: 'right' })
-    await page.click('text=Delete')
-    await expect(page.locator('text="Group #1"')).toBeHidden()
-    await page.click('button[aria-label="Undo"]')
-    await expect(page.locator('text="Group #1"')).toBeVisible()
-    await page.click('button[aria-label="Redo"]')
-    await expect(page.locator('text="Group #1"')).toBeHidden()
-  })
-
-  test('Rename and icon change should work', async ({ page }) => {
-    const typebotId = cuid()
-    await createTypebots([
-      {
-        id: typebotId,
-        name: 'My awesome typebot',
-        ...parseDefaultGroupWithBlock({
-          type: InputBlockType.TEXT,
-          options: defaultTextInputOptions,
-        }),
-      },
-    ])
-
-    await page.goto(`/typebots/${typebotId}/edit`)
-
-    await page.click('[data-testid="editable-icon"]')
-    await expect(page.locator('text="My awesome typebot"')).toBeVisible()
-    await page.fill('input[placeholder="Search..."]', 'love')
-    await page.click('text="😍"')
-    await page.click('text="My awesome typebot"')
-    await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
-    await page.press('input[value="My superb typebot"]', 'Enter')
-    await page.click('[aria-label="Navigate back"]')
-    await expect(page.locator('text="😍"')).toBeVisible()
-    await expect(page.locator('text="My superb typebot"')).toBeVisible()
-  })
-
-  test('Preview from group should work', async ({ page }) => {
-    const typebotId = cuid()
-    await importTypebotInDatabase(
-      path.join(__dirname, '../fixtures/typebots/editor/previewFromGroup.json'),
-      {
-        id: typebotId,
-      }
-    )
-
-    await page.goto(`/typebots/${typebotId}/edit`)
-    await page.click('[aria-label="Preview bot from this group"] >> nth=1')
-    await expect(
-      typebotViewer(page).locator('text="Hello this is group 1"')
-    ).toBeVisible()
-    await page.click('[aria-label="Preview bot from this group"] >> nth=2')
-    await expect(
-      typebotViewer(page).locator('text="Hello this is group 2"')
-    ).toBeVisible()
-    await page.click('[aria-label="Close"]')
-    await page.click('text="Preview"')
-    await expect(
-      typebotViewer(page).locator('text="Hello this is group 1"')
-    ).toBeVisible()
+  await page.click('[data-testid="clickable-edge"] >> nth=0', {
+    force: true,
+    button: 'right',
  })
+  await page.click('text=Delete')
+  const total = await page.locator('[data-testid="edge"]').count()
+  expect(total).toBe(1)
+})
+test('Drag and drop blocks and items should work', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../fixtures/typebots/editor/buttonsDnd.json'),
+    {
+      id: typebotId,
+    }
+  )
+
+  // Blocks dnd
+  await page.goto(`/typebots/${typebotId}/edit`)
+  await expect(page.locator('[data-testid="block"] >> nth=1')).toHaveText(
+    'Hello!'
+  )
+  await page.dragAndDrop('text=Hello', '[data-testid="block"] >> nth=3', {
+    targetPosition: { x: 100, y: 0 },
+  })
+  await expect(page.locator('[data-testid="block"] >> nth=2')).toHaveText(
+    'Hello!'
+  )
+  await page.dragAndDrop('text=Hello', 'text=Group #2')
+  await expect(page.locator('[data-testid="block"] >> nth=3')).toHaveText(
+    'Hello!'
+  )
+
+  // Items dnd
+  await expect(page.locator('[data-testid="item"] >> nth=0')).toHaveText(
+    'Item 1'
+  )
+  await page.dragAndDrop('text=Item 1', 'text=Item 3')
+  await expect(page.locator('[data-testid="item"] >> nth=2')).toHaveText(
+    'Item 1'
+  )
+  await expect(page.locator('[data-testid="item"] >> nth=1')).toHaveText(
+    'Item 3'
+  )
+  await page.dragAndDrop('text=Item 3', 'text=Item 2-3')
+  await expect(page.locator('[data-testid="item"] >> nth=6')).toHaveText(
+    'Item 3'
+  )
+})
+test('Undo / Redo buttons should work', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+    },
+  ])
+
+  await page.goto(`/typebots/${typebotId}/edit`)
+  await page.click('text=Group #1', { button: 'right' })
+  await page.click('text=Duplicate')
+  await expect(page.locator('text="Group #1"')).toBeVisible()
+  await expect(page.locator('text="Group #1 copy"')).toBeVisible()
+  await page.click('text="Group #1"', { button: 'right' })
+  await page.click('text=Delete')
+  await expect(page.locator('text="Group #1"')).toBeHidden()
+  await page.click('button[aria-label="Undo"]')
+  await expect(page.locator('text="Group #1"')).toBeVisible()
+  await page.click('button[aria-label="Redo"]')
+  await expect(page.locator('text="Group #1"')).toBeHidden()
+})
+
+test('Rename and icon change should work', async ({ page }) => {
+  const typebotId = cuid()
+  await createTypebots([
+    {
+      id: typebotId,
+      name: 'My awesome typebot',
+      ...parseDefaultGroupWithBlock({
+        type: InputBlockType.TEXT,
+        options: defaultTextInputOptions,
+      }),
+    },
+  ])
+
+  await page.goto(`/typebots/${typebotId}/edit`)
+
+  await page.click('[data-testid="editable-icon"]')
+  await expect(page.locator('text="My awesome typebot"')).toBeVisible()
+  await page.fill('input[placeholder="Search..."]', 'love')
+  await page.click('text="😍"')
+  await page.click('text="My awesome typebot"')
+  await page.fill('input[value="My awesome typebot"]', 'My superb typebot')
+  await page.press('input[value="My superb typebot"]', 'Enter')
+  await page.click('[aria-label="Navigate back"]')
+  await expect(page.locator('text="😍"')).toBeVisible()
+  await expect(page.locator('text="My superb typebot"')).toBeVisible()
+})
+
+test('Preview from group should work', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../fixtures/typebots/editor/previewFromGroup.json'),
+    {
+      id: typebotId,
+    }
+  )
+
+  await page.goto(`/typebots/${typebotId}/edit`)
+  await page.click('[aria-label="Preview bot from this group"] >> nth=1')
+  await expect(
+    typebotViewer(page).locator('text="Hello this is group 1"')
+  ).toBeVisible()
+  await page.click('[aria-label="Preview bot from this group"] >> nth=2')
+  await expect(
+    typebotViewer(page).locator('text="Hello this is group 2"')
+  ).toBeVisible()
+  await page.click('[aria-label="Close"]')
+  await page.click('text="Preview"')
+  await expect(
+    typebotViewer(page).locator('text="Hello this is group 1"')
+  ).toBeVisible()
 })
--- a/apps/builder/playwright/tests/inputs/payment.spec.ts
+++ b/apps/builder/playwright/tests/inputs/payment.spec.ts
@ -62,7 +62,7 @@ test.describe('Payment input block', () => {
    await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
    await typebotViewer(page).locator(`text="Pay 30€"`).click()
    await expect(
-      typebotViewer(page).locator(`text="Your card was declined."`)
+      typebotViewer(page).locator(`text="Your card has been declined."`)
    ).toBeVisible()
    await stripePaymentForm(page)
      .locator(`[placeholder="1234 1234 1234 1234"]`)
--- a/apps/builder/playwright/tests/results.spec.ts
+++ b/apps/builder/playwright/tests/results.spec.ts
@ -43,7 +43,7 @@ test('results should be deletable', async ({ page }) => {
      }),
    },
  ])
-  await createResults({ typebotId, count: 200 })
+  await createResults({ typebotId, count: 200, isChronological: true })
  await page.goto(`/typebots/${typebotId}/results`)
  await selectFirstResults(page)
  await page.click('text="Delete"')
@ -67,7 +67,7 @@ test('submissions table should have infinite scroll', async ({ page }) => {
      tableWrapper.scrollTo(0, tableWrapper.scrollHeight)
    })

-  await createResults({ typebotId, count: 200 })
+  await createResults({ typebotId, count: 200, isChronological: true })
  await page.goto(`/typebots/${typebotId}/results`)
  await expect(page.locator('text=content199')).toBeVisible()

--- a/apps/builder/playwright/tests/settings.spec.ts
+++ b/apps/builder/playwright/tests/settings.spec.ts
@ -135,9 +135,13 @@ test.describe.parallel('Settings page', () => {
        typebotViewer(page).locator('text="What\'s your name?"')
      ).toBeVisible()
      await page.click('button:has-text("General")')
-      await expect(page.locator('text=Pro')).toBeVisible()
+      await expect(page.locator('text=Starter')).toBeVisible()
      await page.click('text=Typebot.io branding')
-      await expect(page.locator('text=For solo creator')).toBeVisible()
+      await expect(
+        page.locator(
+          'text="You need to upgrade your plan in order to remove branding"'
+        )
+      ).toBeVisible()
    })
  })
 })
--- a/apps/builder/playwright/tests/workspaces.spec.ts
+++ b/apps/builder/playwright/tests/workspaces.spec.ts
@ -1,7 +1,7 @@
 import test, { expect } from '@playwright/test'
 import cuid from 'cuid'
 import { defaultTextInputOptions, InputBlockType } from 'models'
-import { connectedAsOtherUser } from 'playwright/services/browser'
+import { mockSessionResponsesToOtherUser } from 'playwright/services/browser'
 import {
  createTypebots,
  parseDefaultGroupWithBlock,
@ -129,7 +129,7 @@ test('can manage members', async ({ page }) => {
  await page.click('button >> text="Remove"')
  await expect(page.locator('text="guest@email.com"')).toBeHidden()

-  await connectedAsOtherUser(page)
+  await mockSessionResponsesToOtherUser(page)
  await page.goto('/typebots')
  await page.click('text=Settings & Members')
  await expect(page.locator('text="Settings"')).toBeHidden()
--- a/apps/builder/services/workspace/member.ts
+++ b/apps/builder/services/workspace/member.ts
@ -17,8 +17,8 @@ export const useMembers = ({ workspaceId }: { workspaceId?: string }) => {
    dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
  })
  return {
-    members: data?.members,
-    invitations: data?.invitations,
+    members: data?.members ?? [],
+    invitations: data?.invitations ?? [],
    isLoading: !error && !data,
    mutate,
  }
--- a/apps/builder/services/workspace/workspace.ts
+++ b/apps/builder/services/workspace/workspace.ts
@ -1,7 +1,7 @@
 import { WorkspaceWithMembers } from 'contexts/WorkspaceContext'
 import { Plan, Workspace } from 'db'
 import useSWR from 'swr'
-import { isNotDefined, sendRequest } from 'utils'
+import { isDefined, isNotDefined, sendRequest } from 'utils'
 import { fetcher } from '../utils'

 export const useWorkspaces = ({ userId }: { userId?: string }) => {
@ -74,3 +74,6 @@ export const planToReadable = (plan?: Plan) => {

 export const isFreePlan = (workspace?: Pick<Workspace, 'plan'>) =>
  isNotDefined(workspace) || workspace?.plan === Plan.FREE
+
+export const isWorkspaceProPlan = (workspace?: Pick<Workspace, 'plan'>) =>
+  isDefined(workspace) && workspace.plan === Plan.PRO
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@ -17,16 +17,16 @@
  "dependencies": {
    "@docusaurus/core": "2.1.0",
    "@docusaurus/preset-classic": "2.1.0",
-    "@docusaurus/theme-search-algolia": "^2.1.0",
+    "@docusaurus/theme-search-algolia": "2.1.0",
    "@docusaurus/theme-common": "2.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@mdx-js/react": "^1.6.22",
-    "@svgr/webpack": "^6.3.1",
-    "clsx": "^1.2.1",
-    "file-loader": "^6.2.0",
-    "prism-react-renderer": "^1.3.5",
-    "url-loader": "^4.1.1"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "@mdx-js/react": "1.6.22",
+    "@svgr/webpack": "6.3.1",
+    "clsx": "1.2.1",
+    "file-loader": "6.2.0",
+    "prism-react-renderer": "1.3.5",
+    "url-loader": "4.1.1"
  },
  "browserslist": {
    "production": [
@ -41,9 +41,9 @@
    ]
  },
  "devDependencies": {
-    "@algolia/client-search": "^4.14.2",
-    "@types/react": "^18.0.19",
-    "typescript": "^4.8.3",
-    "webpack": "^5.74.0"
+    "@algolia/client-search": "4.14.2",
+    "@types/react": "18.0.19",
+    "typescript": "4.8.3",
+    "webpack": "5.74.0"
  }
 }
--- a/apps/landing-page/components/PricingPage/PricingCard/index.tsx
+++ b/apps/landing-page/components/PricingPage/PricingCard/index.tsx
@ -23,14 +23,12 @@ interface PricingCardProps extends CardProps {
  data: PricingCardData
  icon?: JSX.Element
  button: React.ReactElement
-  isMostPopular?: boolean
 }

 export const PricingCard = ({
  data,
  icon,
  button,
-  isMostPopular,
  ...rest
 }: PricingCardProps) => {
  const { features, price, name } = data
--- a/apps/landing-page/pages/pricing.tsx
+++ b/apps/landing-page/pages/pricing.tsx
@ -219,7 +219,6 @@ const Pricing = () => {
                  <ActionButton>Subscribe now</ActionButton>
                </NextChakraLink>
              }
-              isMostPopular
            />
          </Stack>
          <VStack maxW="1200px" w="full" spacing={[12, 20]} px="4">
--- a/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/storage/upload-url.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/storage/upload-url.ts
@ -76,6 +76,7 @@ const checkStorageLimit = async (typebotId: string) => {
  })
  if (!typebot?.workspace) throw new Error('Workspace not found')
  const { workspace } = typebot
+  console.log(typebot.workspaceId)
  const {
    _sum: { storageUsed: totalStorageUsed },
  } = await prisma.answer.aggregate({
@ -94,26 +95,27 @@ const checkStorageLimit = async (typebotId: string) => {
  if (!totalStorageUsed) return false
  const hasSentFirstEmail = workspace.storageLimitFirstEmailSentAt !== null
  const hasSentSecondEmail = workspace.storageLimitSecondEmailSentAt !== null
-  const storageLimit = getStorageLimit(typebot.workspace) * 1024 * 1024 * 1024
+  const storageLimit = getStorageLimit(typebot.workspace)
+  const storageLimitBytes = storageLimit * 1024 * 1024 * 1024
  if (
-    totalStorageUsed >= storageLimit * LIMIT_EMAIL_TRIGGER_PERCENT &&
+    totalStorageUsed >= storageLimitBytes * LIMIT_EMAIL_TRIGGER_PERCENT &&
    !hasSentFirstEmail &&
    env('E2E_TEST') !== 'true'
  )
-    sendAlmostReachStorageLimitEmail({
+    await sendAlmostReachStorageLimitEmail({
      workspaceId: workspace.id,
      storageLimit,
    })
  if (
-    totalStorageUsed >= storageLimit &&
+    totalStorageUsed >= storageLimitBytes &&
    !hasSentSecondEmail &&
    env('E2E_TEST') !== 'true'
  )
-    sendReachStorageLimitEmail({
+    await sendReachStorageLimitEmail({
      workspaceId: workspace.id,
      storageLimit,
    })
-  return (totalStorageUsed ?? 0) >= getStorageLimit(typebot?.workspace)
+  return totalStorageUsed >= storageLimitBytes
 }

 const sendAlmostReachStorageLimitEmail = async ({
--- a/apps/viewer/pages/api/typebots/[typebotId]/results.ts
+++ b/apps/viewer/pages/api/typebots/[typebotId]/results.ts
@ -69,8 +69,8 @@ const checkChatsUsage = async (
    | 'chatsLimitSecondEmailSentAt'
  >
 ) => {
-  const chatLimit = getChatsLimit(workspace)
-  if (chatLimit === -1) return
+  const chatsLimit = getChatsLimit(workspace)
+  if (chatsLimit === -1) return
  const now = new Date()
  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
  const lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0)
@ -91,26 +91,26 @@ const checkChatsUsage = async (
    workspace.chatsLimitSecondEmailSentAt < firstDayOfNextMonth &&
    workspace.chatsLimitSecondEmailSentAt > firstDayOfMonth
  if (
-    chatsCount >= chatLimit * LIMIT_EMAIL_TRIGGER_PERCENT &&
+    chatsCount >= chatsLimit * LIMIT_EMAIL_TRIGGER_PERCENT &&
    !hasSentFirstEmail &&
    env('E2E_TEST') !== 'true'
  )
    await sendAlmostReachChatsLimitEmail({
      workspaceId: workspace.id,
-      chatLimit,
+      chatLimit: chatsLimit,
      firstDayOfNextMonth,
    })
  if (
-    chatsCount >= chatLimit &&
+    chatsCount >= chatsLimit &&
    !hasSentSecondEmail &&
    env('E2E_TEST') !== 'true'
  )
    await sendReachedAlertEmail({
      workspaceId: workspace.id,
-      chatLimit,
+      chatLimit: chatsLimit,
      firstDayOfNextMonth,
    })
-  return chatsCount >= chatLimit
+  return chatsCount >= chatsLimit
 }

 const sendAlmostReachChatsLimitEmail = async ({
--- a/apps/viewer/playwright/services/browser.ts
+++ b/apps/viewer/playwright/services/browser.ts
@ -1,11 +1,11 @@
 import { Page } from '@playwright/test'

-export const mockSessionApiCalls = (page: Page) =>
-  page.route(`${process.env.BUILDER_URL}/api/auth/session`, (route) => {
+export const mockSessionResponsesToOtherUser = async (page: Page) =>
+  page.route('/api/auth/session', (route) => {
    if (route.request().method() === 'GET') {
      return route.fulfill({
        status: 200,
-        body: '{"user":{"id":"proUser","name":"Pro user","email":"pro-user@email.com","emailVerified":null,"image":"https://avatars.githubusercontent.com/u/16015833?v=4","stripeId":null,"graphNavigation": "TRACKPAD"}}',
+        body: '{"user":{"id":"otherUserId","name":"James Doe","email":"other-user@email.com","emailVerified":null,"image":"https://avatars.githubusercontent.com/u/16015833?v=4","stripeId":null,"graphNavigation": "TRACKPAD"}}',
      })
    }
    return route.continue()
--- a/apps/viewer/playwright/services/database.ts
+++ b/apps/viewer/playwright/services/database.ts
@ -18,6 +18,8 @@ const prisma = new PrismaClient()
 const userId = 'userId'
 export const freeWorkspaceId = 'freeWorkspace'
 export const starterWorkspaceId = 'starterWorkspace'
+export const limitTestWorkspaceId = 'limitTestWorkspace'
+export const apiToken = 'jirowjgrwGREHE'

 export const teardownDatabase = async () => {
  await prisma.workspace.deleteMany({
@ -51,6 +53,11 @@ export const createWorkspaces = async () =>
        name: 'Starter workspace',
        plan: Plan.STARTER,
      },
+      {
+        id: limitTestWorkspaceId,
+        name: 'Limit test workspace',
+        plan: Plan.FREE,
+      },
    ],
  })

@ -65,20 +72,10 @@ export const createUser = async () => {
        createMany: {
          data: [
            {
-              name: 'Token 1',
-              token: 'jirowjgrwGREHEtoken1',
+              name: 'Token',
+              token: apiToken,
              createdAt: new Date(2022, 1, 1),
            },
-            {
-              name: 'Github',
-              token: 'jirowjgrwGREHEgdrgithub',
-              createdAt: new Date(2022, 1, 2),
-            },
-            {
-              name: 'N8n',
-              token: 'jirowjgrwGREHrgwhrwn8n',
-              createdAt: new Date(2022, 1, 3),
-            },
          ],
        },
      },
@ -88,6 +85,7 @@ export const createUser = async () => {
    data: [
      { role: WorkspaceRole.ADMIN, userId, workspaceId: freeWorkspaceId },
      { role: WorkspaceRole.ADMIN, userId, workspaceId: starterWorkspaceId },
+      { role: WorkspaceRole.ADMIN, userId, workspaceId: limitTestWorkspaceId },
    ],
  })
 }
@ -207,8 +205,8 @@ export const importTypebotInDatabase = async (
 ) => {
  const typebot: Typebot = {
    ...JSON.parse(readFileSync(path).toString()),
-    ...updates,
    workspaceId: starterWorkspaceId,
+    ...updates,
  }
  await prisma.typebot.create({
    data: typebot,
--- a/apps/viewer/playwright/tests/api.spec.ts
+++ b/apps/viewer/playwright/tests/api.spec.ts
@ -1,5 +1,6 @@
 import test, { expect } from '@playwright/test'
 import {
+  apiToken,
  createResults,
  createWebhook,
  importTypebotInDatabase,
@ -23,7 +24,7 @@ test.beforeAll(async () => {
 test('can list typebots', async ({ request }) => {
  expect((await request.get(`/api/typebots`)).status()).toBe(401)
  const response = await request.get(`/api/typebots`, {
-    headers: { Authorization: 'Bearer userToken' },
+    headers: { Authorization: `Bearer ${apiToken}` },
  })
  const { typebots } = await response.json()
  expect(typebots).toHaveLength(1)
@ -41,7 +42,7 @@ test('can get webhook blocks', async ({ request }) => {
  const response = await request.get(
    `/api/typebots/${typebotId}/webhookBlocks`,
    {
-      headers: { Authorization: 'Bearer userToken' },
+      headers: { Authorization: `Bearer ${apiToken}` },
    }
  )
  const { blocks } = await response.json()
@ -65,7 +66,7 @@ test('can subscribe webhook', async ({ request }) => {
    `/api/typebots/${typebotId}/blocks/webhookBlock/subscribeWebhook`,
    {
      headers: {
-        Authorization: 'Bearer userToken',
+        Authorization: `Bearer ${apiToken}`,
      },
      data: { url: 'https://test.com' },
    }
@ -87,7 +88,7 @@ test('can unsubscribe webhook', async ({ request }) => {
  const response = await request.post(
    `/api/typebots/${typebotId}/blocks/webhookBlock/unsubscribeWebhook`,
    {
-      headers: { Authorization: 'Bearer userToken' },
+      headers: { Authorization: `Bearer ${apiToken}` },
    }
  )
  const body = await response.json()
@ -107,7 +108,7 @@ test('can get a sample result', async ({ request }) => {
  const response = await request.get(
    `/api/typebots/${typebotId}/blocks/webhookBlock/sampleResult`,
    {
-      headers: { Authorization: 'Bearer userToken' },
+      headers: { Authorization: `Bearer ${apiToken}` },
    }
  )
  const data = await response.json()
@ -128,7 +129,7 @@ test('can list results', async ({ request }) => {
  const response = await request.get(
    `/api/typebots/${typebotId}/results?limit=10`,
    {
-      headers: { Authorization: 'Bearer userToken' },
+      headers: { Authorization: `Bearer ${apiToken}` },
    }
  )
  const { results } = await response.json()
--- a/apps/viewer/playwright/tests/fileUpload.spec.ts
+++ b/apps/viewer/playwright/tests/fileUpload.spec.ts
@ -6,7 +6,6 @@ import { typebotViewer } from '../services/selectorUtils'
 import { createResults, importTypebotInDatabase } from '../services/database'
 import { readFileSync } from 'fs'
 import { isDefined } from 'utils'
-import { describe } from 'node:test'

 const THREE_GIGABYTES = 3 * 1024 * 1024 * 1024

@ -49,7 +48,7 @@ test('should work as expected', async ({ page, browser }) => {
    page.locator('text="Export"').click(),
  ])
  const downloadPath = await download.path()
-  expect(path).toBeDefined()
+  expect(downloadPath).toBeDefined()
  const file = readFileSync(downloadPath as string).toString()
  const { data } = parse(file)
  expect(data).toHaveLength(2)
@ -86,7 +85,7 @@ test('should work as expected', async ({ page, browser }) => {
  ).toBeVisible()
 })

-describe('Storage limit is reached', () => {
+test.describe('Storage limit is reached', () => {
  const typebotId = cuid()

  test.beforeAll(async () => {
--- a/apps/viewer/playwright/tests/hugeBlock.spec.ts
+++ b/apps/viewer/playwright/tests/hugeBlock.spec.ts
@ -3,9 +3,6 @@ import path from 'path'
 import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'
 import cuid from 'cuid'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('should work as expected', async ({ page }) => {
  const typebotId = cuid()
--- a/apps/viewer/playwright/tests/limits.spec.ts
+++ b/apps/viewer/playwright/tests/limits.spec.ts
@ -1,8 +1,8 @@
 import test, { expect } from '@playwright/test'
 import {
  createResults,
-  freeWorkspaceId,
  importTypebotInDatabase,
+  limitTestWorkspaceId,
 } from '../services/database'
 import cuid from 'cuid'
 import path from 'path'
@ -14,7 +14,7 @@ test('should not start if chat limit is reached', async ({ page }) => {
    {
      id: typebotId,
      publicId: `${typebotId}-public`,
-      workspaceId: freeWorkspaceId,
+      workspaceId: limitTestWorkspaceId,
    }
  )
  await createResults({ typebotId, count: 320 })
--- a/apps/viewer/playwright/tests/metadata.spec.ts
+++ b/apps/viewer/playwright/tests/metadata.spec.ts
@ -11,9 +11,6 @@ import {
 } from 'models'
 import { typebotViewer } from '../services/selectorUtils'
 import cuid from 'cuid'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('Should correctly parse metadata', async ({ page }) => {
  const typebotId = cuid()
@ -37,20 +34,20 @@ test('Should correctly parse metadata', async ({ page }) => {
    },
  ])
  await page.goto(`/${typebotId}-public`)
-  await expect(
+  expect(
    await page.evaluate(`document.querySelector('title').textContent`)
  ).toBe(customMetadata.title)
-  await expect(
+  expect(
    await page.evaluate(
      () => (document.querySelector('meta[name="description"]') as any).content
    )
  ).toBe(customMetadata.description)
-  await expect(
+  expect(
    await page.evaluate(
      () => (document.querySelector('meta[property="og:image"]') as any).content
    )
  ).toBe(customMetadata.imageUrl)
-  await expect(
+  expect(
    await page.evaluate(() =>
      (document.querySelector('link[rel="icon"]') as any).getAttribute('href')
    )
--- a/apps/viewer/playwright/tests/predefinedVariables.spec.ts
+++ b/apps/viewer/playwright/tests/predefinedVariables.spec.ts
@ -3,9 +3,6 @@ import { importTypebotInDatabase } from '../services/database'
 import cuid from 'cuid'
 import path from 'path'
 import { typebotViewer } from '../services/selectorUtils'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('should correctly be injected', async ({ page }) => {
  const typebotId = cuid()
--- a/apps/viewer/playwright/tests/sendEmail.spec.ts
+++ b/apps/viewer/playwright/tests/sendEmail.spec.ts
@ -7,9 +7,6 @@ import cuid from 'cuid'
 import path from 'path'
 import { typebotViewer } from '../services/selectorUtils'
 import { SmtpCredentialsData } from 'models'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 const mockSmtpCredentials: SmtpCredentialsData = {
  from: {
--- a/apps/viewer/playwright/tests/settings.spec.ts
+++ b/apps/viewer/playwright/tests/settings.spec.ts
@ -10,9 +10,6 @@ import {
  defaultTextInputOptions,
  InputBlockType,
 } from 'models'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('Result should be in storage by default', async ({ page }) => {
  const typebotId = cuid()
--- a/apps/viewer/playwright/tests/typebotLink.spec.ts
+++ b/apps/viewer/playwright/tests/typebotLink.spec.ts
@ -2,9 +2,6 @@ import test, { expect } from '@playwright/test'
 import path from 'path'
 import { importTypebotInDatabase } from '../services/database'
 import { typebotViewer } from '../services/selectorUtils'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('should work as expected', async ({ page }) => {
  const typebotId = 'cl0ibhi7s0018n21aarlmg0cm'
--- a/apps/viewer/playwright/tests/webhook.spec.ts
+++ b/apps/viewer/playwright/tests/webhook.spec.ts
@ -4,9 +4,6 @@ import cuid from 'cuid'
 import path from 'path'
 import { typebotViewer } from '../services/selectorUtils'
 import { HttpMethod } from 'models'
-import { mockSessionApiCalls } from 'playwright/services/browser'
-
-test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('should execute webhooks properly', async ({ page }) => {
  const typebotId = cuid()
--- a/packages/bot-engine/src/components/ConversationContainer.tsx
+++ b/packages/bot-engine/src/components/ConversationContainer.tsx
@ -80,6 +80,7 @@ export const ConversationContainer = ({
    }
    const nextGroup = currentTypebot.groups.find(byId(nextEdge.to.groupId))
    if (!nextGroup) return onCompleted()
+    console.log(nextGroup, nextEdge)
    const startBlockIndex = nextEdge.to.blockId
      ? nextGroup.blocks.findIndex(byId(nextEdge.to.blockId))
      : 0
@ -151,9 +152,7 @@ export const ConversationContainer = ({
          const groupAfter = displayedGroups[idx + 1]
          const groupAfterStartsWithInput =
            groupAfter &&
-            isInputBlock(
-              groupAfter.group.blocks[groupAfter.startBlockIndex] as Block
-            )
+            isInputBlock(groupAfter.group.blocks[groupAfter.startBlockIndex])
          return (
            <ChatGroup
              key={displayedGroup.group.id + idx}
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -8,6 +8,7 @@
  "devDependencies": {
    "@types/nodemailer": "6.4.5",
    "aws-sdk": "2.1213.0",
+    "cuid": "^2.1.8",
    "db": "workspace:*",
    "models": "workspace:*",
    "next": "12.3.0",
--- a/packages/utils/playwright.ts
+++ b/packages/utils/playwright.ts
@ -1,9 +1,10 @@
 import { PrismaClient } from 'db'
+import cuid from 'cuid'

 type CreateFakeResultsProps = {
  typebotId: string
  count: number
-  idPrefix?: string
+  customResultIdPrefix?: string
  isChronological?: boolean
  fakeStorage?: number
 }
@ -12,18 +13,19 @@ export const injectFakeResults =
  (prisma: PrismaClient) =>
  async ({
    count,
-    idPrefix = '',
+    customResultIdPrefix,
    typebotId,
-    isChronological = true,
+    isChronological,
    fakeStorage,
  }: CreateFakeResultsProps) => {
+    const resultIdPrefix = customResultIdPrefix ?? cuid()
    await prisma.result.createMany({
      data: [
        ...Array.from(Array(count)).map((_, idx) => {
          const today = new Date()
          const rand = Math.random()
          return {
-            id: `${idPrefix}-result${idx}`,
+            id: `${resultIdPrefix}-result${idx}`,
            typebotId,
            createdAt: isChronological
              ? new Date(
@ -36,20 +38,23 @@ export const injectFakeResults =
        }),
      ],
    })
-    return createAnswers(prisma)({ idPrefix, fakeStorage, count })
+    return createAnswers(prisma)({ fakeStorage, resultIdPrefix, count })
  }

 const createAnswers =
  (prisma: PrismaClient) =>
  ({
    count,
-    idPrefix,
+    resultIdPrefix,
    fakeStorage,
-  }: Pick<CreateFakeResultsProps, 'fakeStorage' | 'idPrefix' | 'count'>) => {
+  }: { resultIdPrefix: string } & Pick<
+    CreateFakeResultsProps,
+    'fakeStorage' | 'count'
+  >) => {
    return prisma.answer.createMany({
      data: [
        ...Array.from(Array(count)).map((_, idx) => ({
-          resultId: `${idPrefix}-result${idx}`,
+          resultId: `${resultIdPrefix}-result${idx}`,
          content: `content${idx}`,
          blockId: 'block1',
          groupId: 'block1',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml