🐛 (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