build: add pnpm

2022-08-08 08:21:36 +02:00
parent 8c3b5058f1
commit ee338f62dc
183 changed files with 19442 additions and 18364 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -5,3 +5,10 @@ npm-debug.log
 README.md
 .next
 .git
+.github
+.turbo
+
+landing-page
+docs
+scripts
+wordpress
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@ -12,15 +12,16 @@ jobs:
      - name: Log Info
        run: echo ${{ github.event.deployment_status.target_url }} && echo ${{ github.event.deployment }} && echo ${{ github.event.deployment_status.environment }}
      - uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2.2.2
      - name: Install dependencies
-        run: yarn
+        run: pnpm i --frozen-lockfile
      - name: Build dependencies
-        run: yarn turbo run build --scope=builder --include-dependencies
+        run: pnpm turbo run build --filter="builder^..."
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run tests
        working-directory: ./apps/builder
-        run: yarn test
+        run: pnpm test
        env:
          PLAYWRIGHT_BUILDER_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
          DATABASE_URL: ${{ secrets.TEST_DATABASE_URL }}
--- a/.github/workflows/publish-lib-to-npm.yml
+++ b/.github/workflows/publish-lib-to-npm.yml
@ -12,12 +12,10 @@ jobs:
        working-directory: ./packages/typebot-js
    steps:
      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 16
-      - run: yarn
-      - run: yarn test
-      - run: yarn build
+      - uses: pnpm/action-setup@v2.2.2
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm test
+      - run: pnpm build
      - uses: JS-DevTools/npm-publish@v1
        with:
          package: './packages/typebot-js/package.json'
--- a/.github/workflows/publish_docker_images.yml
+++ b/.github/workflows/publish_docker_images.yml
@ -9,8 +9,8 @@ on:
    branches: [main]

 jobs:
-  push_images_to_docker_hub:
-    name: Push images to Docker Hub
+  push_builder:
+    name: Builder
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repo
@ -27,17 +27,6 @@ jobs:
            type=semver,pattern={{major}}.{{minor}}
            type=semver,pattern={{major}}

-      - name: Extract Viewer meta
-        id: viewer-meta
-        uses: docker/metadata-action@v4
-        with:
-          images: baptistearno/typebot-viewer
-          tags: |
-            type=ref,event=branch
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-
      - name: Log in to Docker Hub
        if: github.event_name != 'pull_request'
        uses: docker/login-action@v2
@ -54,6 +43,30 @@ jobs:
          labels: ${{ steps.builder-meta.outputs.labels }}
          build-args: |
            SCOPE=builder
+  push_viewer:
+    name: Viewer
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3
+
+      - name: Extract Viewer meta
+        id: viewer-meta
+        uses: docker/metadata-action@v4
+        with:
+          images: baptistearno/typebot-viewer
+          tags: |
+            type=ref,event=branch
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+
+      - name: Log in to Docker Hub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build and push viewer image
        uses: docker/build-push-action@v3
--- a/.gitignore
+++ b/.gitignore
@ -5,7 +5,6 @@ node_modules
 workspace.code-workspace
 .DS_Store
 .turbo
-yarn-error.log
 authenticatedState.json
 playwright-report
 dist
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+public-hoist-pattern[]=*prisma*
--- a/46
+++ b/46
@ -1,51 +1,37 @@
-# https://github.com/vercel/turborepo/issues/215#issuecomment-1027058056
-FROM node:16-slim AS base
+FROM node:18-slim AS base
 WORKDIR /app
 ARG SCOPE
 ENV SCOPE=${SCOPE}
-
-FROM base AS pruner
-RUN yarn global add turbo@1.2.9
-COPY . .
-RUN turbo prune --scope="${SCOPE}" --docker
-
-FROM base AS installer
-COPY --from=pruner /app/out/json/ .
-COPY --from=pruner /app/out/yarn.lock ./yarn.lock
-RUN yarn install --frozen-lockfile
+RUN npm --global install pnpm

 FROM base AS builder
-SHELL ["/bin/bash", "-o", "pipefail", "-c"]
-COPY --from=installer /app/ .
-COPY --from=pruner /app/out/full/ .
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.local
-RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl
-RUN yarn turbo run build --scope="${SCOPE}" --include-dependencies --no-deps
-RUN find . -name node_modules | xargs rm -rf
+RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl git
+COPY pnpm-lock.yaml .npmrc pnpm-workspace.yaml ./
+RUN pnpm fetch
+ADD . ./
+RUN pnpm install -r --offline
+RUN pnpm turbo run build --filter=${SCOPE}...

 FROM base AS runner
 WORKDIR /app
 ENV NODE_ENV production
-COPY ./packages/db/prisma ./prisma
-COPY --from=installer /app/node_modules ./node_modules
-COPY --from=builder /app/apps/${SCOPE}/next.config.js ./
-COPY --from=builder /app/apps/${SCOPE}/public ./public
-COPY --from=builder /app/apps/${SCOPE}/package.json ./package.json
-COPY --from=builder /app/apps/${SCOPE}/.next/standalone ./
-COPY --from=builder /app/apps/${SCOPE}/.next/static ./.next/static
-COPY --from=builder /app/apps/${SCOPE}/.env.docker ./.env.production
 RUN apt-get -qy update \
    && apt-get -qy --no-install-recommends install \
    openssl \
    && apt-get autoremove -yq \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*
+COPY ./packages/db/prisma ./prisma
+COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/apps/${SCOPE}/public ./apps/${SCOPE}/public
+COPY --from=builder --chown=node:node /app/apps/${SCOPE}/.next/standalone ./
+COPY --from=builder --chown=node:node /app/apps/${SCOPE}/.next/static ./apps/${SCOPE}/.next/static

 COPY env.sh ${SCOPE}-entrypoint.sh ./
-RUN chmod +x ./"${SCOPE}"-entrypoint.sh \
+RUN chmod +x ./${SCOPE}-entrypoint.sh \
    && chmod +x ./env.sh
-ENTRYPOINT ./"${SCOPE}"-entrypoint.sh
+ENTRYPOINT ./${SCOPE}-entrypoint.sh

 EXPOSE 3000
 ENV PORT 3000
--- a/README.md
+++ b/README.md
@ -54,7 +54,7 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host

   ```sh
   cd typebot.io
-   yarn
+   pnpm i
   ```

 3. Set up environment variables
@ -69,7 +69,7 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host
 5. Start the builder and viewer

   ```sh
-   yarn dev
+   pnpm dev
   ```

   Builder is available at `http://localhost:3000`
@ -86,14 +86,14 @@ Interested in self-hosting Typebot on your server? Take a look at the [self-host

   ```sh
   cd apps/landing-page
-   yarn dev
+   pnpm dev
   ```

 7. (Optionnal) Start the docs

   ```sh
   cd apps/docs
-   yarn start
+   pnpm start
   ```

 ## Contribute
--- a/apps/builder/.env.docker
+++ b/apps/builder/.env.docker
@ -6,3 +6,4 @@ NEXT_PUBLIC_GIPHY_API_KEY=
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
 NEXT_PUBLIC_SENTRY_DSN=
 NEXT_PUBLIC_VIEWER_INTERNAL_URL=
+NEXT_PUBLIC_E2E_TEST=
--- a/apps/builder/components/auth/DividerWithText.tsx
+++ b/apps/builder/components/auth/DividerWithText.tsx
@ -1,5 +1,11 @@
-import { FlexProps, Flex, Box, Divider, Text } from '@chakra-ui/react'
-import { useColorModeValue } from '@chakra-ui/system'
+import {
+  FlexProps,
+  Flex,
+  Box,
+  Divider,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import React from 'react'

 export const DividerWithText = (props: FlexProps) => {
--- a/apps/builder/components/dashboard/OnboardingModal.tsx
+++ b/apps/builder/components/dashboard/OnboardingModal.tsx
@ -11,7 +11,7 @@ import { useUser } from 'contexts/UserContext'
 import { Answer, Typebot } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { sendRequest } from 'utils'
+import { getViewerUrl, sendRequest } from 'utils'
 import confetti from 'canvas-confetti'
 import { useToast } from 'components/shared/hooks/useToast'

@ -119,6 +119,7 @@ export const OnboardingModal = ({ totalTypebots }: Props) => {
        <ModalBody>
          {typebot && (
            <TypebotViewer
+              apiHost={getViewerUrl({ isBuilder: true })}
              typebot={parseTypebotToPublicTypebot(typebot)}
              predefinedVariables={{
                Name: user?.name?.split(' ')[0] ?? undefined,
--- a/apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx
+++ b/apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx
@ -1,5 +1,4 @@
-import { Flex, HStack, StackProps } from '@chakra-ui/layout'
-import { CloseButton } from '@chakra-ui/react'
+import { CloseButton, Flex, HStack, StackProps } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'

 type VerifyEmailBannerProps = { id: string } & StackProps
--- a/apps/builder/components/editor/preview/PreviewDrawer.tsx
+++ b/apps/builder/components/editor/preview/PreviewDrawer.tsx
@ -18,6 +18,7 @@ import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import { Log } from 'db'
 import React, { useMemo, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { getViewerUrl } from 'utils'

 export const PreviewDrawer = () => {
  const { typebot } = useTypebot()
@ -100,6 +101,7 @@ export const PreviewDrawer = () => {
            pointerEvents={isResizing ? 'none' : 'auto'}
          >
            <TypebotViewer
+              apiHost={getViewerUrl({ isBuilder: true })}
              typebot={publicTypebot}
              onNewGroupVisible={setPreviewingEdge}
              onNewLog={handleNewLog}
--- a/apps/builder/components/results/ResultsTable/Cell.tsx
+++ b/apps/builder/components/results/ResultsTable/Cell.tsx
@ -1,10 +1,11 @@
 import { chakra, Fade, Button } from '@chakra-ui/react'
-import { Cell as CellProps } from '@tanstack/react-table'
+import { Cell as CellProps, flexRender } from '@tanstack/react-table'
 import { ExpandIcon } from 'assets/icons'
 import { memo } from 'react'
+import { TableData } from 'services/typebots/results'

 type Props = {
-  cell: CellProps<any>
+  cell: CellProps<TableData, unknown>
  size: number
  isExpandButtonVisible: boolean
  cellIndex: number
@ -34,7 +35,7 @@ const Cell = ({
        maxWidth: size,
      }}
    >
-      {cell.renderCell()}
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
      <chakra.span
        pos="absolute"
        top="0"
--- a/apps/builder/components/results/ResultsTable/HeaderRow.tsx
+++ b/apps/builder/components/results/ResultsTable/HeaderRow.tsx
@ -1,10 +1,10 @@
 import { Box, BoxProps, chakra } from '@chakra-ui/react'
-import { HeaderGroup } from '@tanstack/react-table'
+import { flexRender, HeaderGroup } from '@tanstack/react-table'
 import React from 'react'
+import { TableData } from 'services/typebots/results'

 type Props = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  headerGroup: HeaderGroup<any>
+  headerGroup: HeaderGroup<TableData>
 }

 export const HeaderRow = ({ headerGroup }: Props) => {
@ -28,7 +28,9 @@ export const HeaderRow = ({ headerGroup }: Props) => {
              maxWidth: header.getSize(),
            }}
          >
-            {header.isPlaceholder ? null : header.renderHeader()}
+            {header.isPlaceholder
+              ? null
+              : flexRender(header.column.columnDef.header, header.getContext())}
            {header.column.getCanResize() && (
              <ResizeHandle
                onMouseDown={header.getResizeHandler()}
--- a/apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx
+++ b/apps/builder/components/results/ResultsTable/ResultsActionButtons.tsx
@ -18,7 +18,7 @@ import {
  convertResultsToTableData,
  getAllResults,
  deleteResults as deleteFetchResults,
-} from 'services/typebots'
+} from 'services/typebots/results'

 type ResultsActionButtonsProps = {
  selectedResultsId: string[]
@ -93,7 +93,9 @@ export const ResultsActionButtons = ({

    const dataToUnparse = isSelectAll
      ? await getAllTableData()
-      : tableData.filter((data) => selectedResultsId.includes(data.id))
+      : tableData.filter((data) =>
+          selectedResultsId.includes(data.id.plainText)
+        )
    const csvData = new Blob(
      [
        unparse({
--- a/apps/builder/components/results/ResultsTable/ResultsTable.tsx
+++ b/apps/builder/components/results/ResultsTable/ResultsTable.tsx
@ -13,10 +13,10 @@ import { ResultHeaderCell, ResultsTablePreferences } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { LoadingRows } from './LoadingRows'
 import {
-  createTable,
-  useTableInstance,
+  useReactTable,
  getCoreRowModel,
  ColumnOrderState,
+  ColumnDef,
 } from '@tanstack/react-table'
 import { BlockIcon } from 'components/editor/BlocksSideBar/BlockIcon'
 import { ColumnSettingsButton } from './ColumnsSettingsButton'
@ -25,21 +25,11 @@ import { useDebounce } from 'use-debounce'
 import { ResultsActionButtons } from './ResultsActionButtons'
 import { Row } from './Row'
 import { HeaderRow } from './HeaderRow'
-
-type RowType = {
-  id: string
-  [key: string]:
-    | {
-        plainText: string
-        element?: JSX.Element | undefined
-      }
-    | string
-}
-const table = createTable().setRowType<RowType>()
+import { CellValueType, TableData } from 'services/typebots/results'

 type ResultsTableProps = {
  resultHeader: ResultHeaderCell[]
-  data: RowType[]
+  data: TableData[]
  hasMore?: boolean
  preferences?: ResultsTablePreferences
  onScrollToBottom: () => void
@ -92,18 +82,18 @@ export const ResultsTable = ({
  const bottomElement = useRef<HTMLDivElement | null>(null)
  const tableWrapper = useRef<HTMLDivElement | null>(null)

-  const columns = React.useMemo(
+  const columns = React.useMemo<ColumnDef<TableData>[]>(
    () => [
-      table.createDisplayColumn({
+      {
        id: 'select',
        enableResizing: false,
        maxSize: 40,
-        header: ({ instance }) => (
+        header: ({ table }) => (
          <IndeterminateCheckbox
            {...{
-              checked: instance.getIsAllRowsSelected(),
-              indeterminate: instance.getIsSomeRowsSelected(),
-              onChange: instance.getToggleAllRowsSelectedHandler(),
+              checked: table.getIsAllRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
+              onChange: table.getToggleAllRowsSelectedHandler(),
            }}
          />
        ),
@ -118,26 +108,24 @@ export const ResultsTable = ({
            />
          </div>
        ),
-      }),
-      ...resultHeader.map((header) =>
-        table.createDataColumn(header.label, {
-          id: header.id,
-          size: header.isLong ? 400 : 200,
-          cell: (info) => {
-            const value = info.getValue()
-            if (!value) return
-            if (typeof value === 'string') return ''
-            return value.element || value.plainText || ''
-          },
-          header: () => (
-            <HStack overflow="hidden" data-testid={`${header.label} header`}>
-              <HeaderIcon header={header} />
-              <Text>{header.label}</Text>
-            </HStack>
-          ),
-        })
-      ),
-      table.createDisplayColumn({
+      },
+      ...resultHeader.map<ColumnDef<TableData>>((header) => ({
+        id: header.id,
+        accessorKey: header.label,
+        size: header.isLong ? 400 : 200,
+        header: () => (
+          <HStack overflow="hidden" data-testid={`${header.label} header`}>
+            <HeaderIcon header={header} />
+            <Text>{header.label}</Text>
+          </HStack>
+        ),
+        cell: (info) => {
+          const value = info.getValue() as CellValueType | undefined
+          if (!value) return
+          return value.element || value.plainText || ''
+        },
+      })),
+      {
        id: 'logs',
        enableResizing: false,
        maxSize: 110,
@ -152,13 +140,13 @@ export const ResultsTable = ({
            See logs
          </Button>
        ),
-      }),
+      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [resultHeader]
  )

-  const instance = useTableInstance(table, {
+  const instance = useReactTable({
    data,
    columns,
    state: {
@ -167,7 +155,7 @@ export const ResultsTable = ({
      columnOrder: columnsOrder,
      columnSizing: columnsWidth,
    },
-    getRowId: (row) => row.id,
+    getRowId: (row) => row.id.plainText,
    columnResizeMode: 'onChange',
    onRowSelectionChange: setRowSelection,
    onColumnVisibilityChange: setColumnsVisibility,
--- a/apps/builder/components/results/ResultsTable/Row.tsx
+++ b/apps/builder/components/results/ResultsTable/Row.tsx
@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 import { Row as RowProps } from '@tanstack/react-table'
 import Cell from './Cell'
+import { TableData } from 'services/typebots/results'

 type Props = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  row: RowProps<any>
+  row: RowProps<TableData>
  isSelected: boolean
  bottomElement?: React.MutableRefObject<HTMLDivElement | null>
  onExpandButtonClick: () => void
--- a/apps/builder/components/share/ShareContent.tsx
+++ b/apps/builder/components/share/ShareContent.tsx
@ -16,11 +16,10 @@ import { useWorkspace } from 'contexts/WorkspaceContext'
 import React from 'react'
 import { parseDefaultPublicId } from 'services/typebots'
 import { isFreePlan } from 'services/workspace'
-import { isDefined, isNotDefined } from 'utils'
+import { getViewerUrl, isDefined, isNotDefined } from 'utils'
 import { CustomDomainsDropdown } from './customDomain/CustomDomainsDropdown'
 import { EditableUrl } from './EditableUrl'
 import { integrationsList } from './integrations/EmbedButton'
-import { env } from 'utils'

 export const ShareContent = () => {
  const { workspace } = useWorkspace()
@ -59,7 +58,9 @@ export const ShareContent = () => {
          </Heading>
          {typebot && (
            <EditableUrl
-              hostname={env('VIEWER_URL') ?? 'https://typebot.io'}
+              hostname={
+                getViewerUrl({ isBuilder: true }) ?? 'https://typebot.io'
+              }
              pathname={publicId}
              onPathnameChange={handlePublicIdChange}
            />
--- a/apps/builder/components/share/codeSnippets/Chat/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Chat/EmbedCode.tsx
@ -1,11 +1,11 @@
-import { FlexProps } from '@chakra-ui/layout'
 import prettier from 'prettier/standalone'
 import parserHtml from 'prettier/parser-html'
 import { BubbleParams } from 'typebot-js'
 import { parseInitBubbleCode, typebotJsHtml } from '../params'
 import { useTypebot } from 'contexts/TypebotContext'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'
+import { FlexProps } from '@chakra-ui/react'

 type ChatEmbedCodeProps = {
  withStarterVariables?: boolean
@ -21,9 +21,7 @@ export const ChatEmbedCode = ({
  const snippet = prettier.format(
    createSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      button,
      proactiveMessage,
--- a/apps/builder/components/share/codeSnippets/Container/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Container/EmbedCode.tsx
@ -5,7 +5,7 @@ import { parseInitContainerCode, typebotJsHtml } from '../params'
 import { IframeParams } from 'typebot-js'
 import { useTypebot } from 'contexts/TypebotContext'
 import { CodeEditor } from 'components/shared/CodeEditor'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'

 type ContainerEmbedCodeProps = {
  widthLabel: string
@ -23,9 +23,7 @@ export const ContainerEmbedCode = ({
  const snippet = prettier.format(
    parseSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      heightLabel,
      widthLabel,
--- a/apps/builder/components/share/codeSnippets/Iframe/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Iframe/EmbedCode.tsx
@ -1,7 +1,7 @@
 import { FlexProps } from '@chakra-ui/react'
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useTypebot } from 'contexts/TypebotContext'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'

 type Props = {
  widthLabel: string
@ -14,9 +14,7 @@ export const IframeEmbedCode = ({
 }: Props & FlexProps) => {
  const { typebot } = useTypebot()
  const src = `${
-    isEmpty(env('VIEWER_INTERNAL_URL'))
-      ? env('VIEWER_URL')
-      : env('VIEWER_INTERNAL_URL')
+    env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
  }/${typebot?.publicId}`
  const code = `<iframe src="${src}" width="${widthLabel}" height="${heightLabel}" />`

--- a/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
+++ b/apps/builder/components/share/codeSnippets/Popup/EmbedCode.tsx
@ -1,10 +1,10 @@
-import { FlexProps } from '@chakra-ui/layout'
+import { FlexProps } from '@chakra-ui/react'
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useTypebot } from 'contexts/TypebotContext'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
 import { PopupParams } from 'typebot-js'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'
 import { parseInitPopupCode, typebotJsHtml } from '../params'

 type PopupEmbedCodeProps = {
@ -18,9 +18,7 @@ export const PopupEmbedCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
  const snippet = prettier.format(
    createSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      delay,
    }),
--- a/apps/builder/components/share/codeSnippets/ReactCode.tsx
+++ b/apps/builder/components/share/codeSnippets/ReactCode.tsx
@ -10,7 +10,7 @@ import parserBabel from 'prettier/parser-babel'
 import prettier from 'prettier/standalone'
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useTypebot } from 'contexts/TypebotContext'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'

 type StandardReactDivProps = { widthLabel: string; heightLabel: string }
 export const StandardReactDiv = ({
@ -21,9 +21,7 @@ export const StandardReactDiv = ({
  const snippet = prettier.format(
    parseContainerSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      heightLabel,
      widthLabel,
@ -73,9 +71,7 @@ export const PopupReactCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
  const snippet = prettier.format(
    parsePopupSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      delay,
    }),
@ -124,9 +120,7 @@ export const ChatReactCode = ({
  const snippet = prettier.format(
    parseBubbleSnippet({
      url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
      }/${typebot?.publicId}`,
      button,
      proactiveMessage,
--- a/apps/builder/components/share/customDomain/CustomDomainModal.tsx
+++ b/apps/builder/components/share/customDomain/CustomDomainModal.tsx
@ -18,7 +18,7 @@ import {
 import { useToast } from 'components/shared/hooks/useToast'
 import { useEffect, useRef, useState } from 'react'
 import { createCustomDomain } from 'services/user'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'

 const hostnameRegex =
  /^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])$/
@ -118,9 +118,8 @@ export const CustomDomainModal = ({
                    <Stack>
                      <Text fontWeight="bold">Value</Text>
                      <Text>
-                        {isEmpty(env('VIEWER_INTERNAL_URL'))
-                          ? env('VIEWER_URL')
-                          : env('VIEWER_INTERNAL_URL')}
+                        {env('VIEWER_INTERNAL_URL') ??
+                          getViewerUrl({ isBuilder: true })}
                      </Text>
                    </Stack>
                  </HStack>
--- a/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/GtmModal/GtmInstructions.tsx
@ -11,7 +11,7 @@ import { PopupEmbedSettings } from 'components/share/codeSnippets/Popup/EmbedSet
 import { CodeEditor } from 'components/shared/CodeEditor'
 import { useState } from 'react'
 import { BubbleParams } from 'typebot-js'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'
 import { ModalProps } from '../../EmbedButton'

 type GtmInstructionsProps = {
@ -41,9 +41,7 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {

  const jsCode = parseInitContainerCode({
    url: `${
-      isEmpty(env('VIEWER_INTERNAL_URL'))
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
+      env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
    }/${publicId}`,
  })
  const headCode = `${typebotJsHtml}
--- a/apps/builder/components/share/integrations/modals/NotionModal.tsx
+++ b/apps/builder/components/share/integrations/modals/NotionModal.tsx
@ -16,7 +16,7 @@ import {
 } from '@chakra-ui/react'
 import { CopyButton } from 'components/shared/buttons/CopyButton'
 import { PublishFirstInfo } from 'components/shared/Info'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'
 import { ModalProps } from '../EmbedButton'

 export const NotionModal = ({
@ -46,17 +46,15 @@ export const NotionModal = ({
                  pr="4.5rem"
                  type={'text'}
                  defaultValue={`${
-                    isEmpty(env('VIEWER_INTERNAL_URL'))
-                      ? env('VIEWER_URL')
-                      : env('VIEWER_INTERNAL_URL')
+                    env('VIEWER_INTERNAL_URL') ??
+                    getViewerUrl({ isBuilder: true })
                  }/${publicId}`}
                />
                <InputRightElement width="4.5rem">
                  <CopyButton
                    textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
-                        ? env('VIEWER_URL')
-                        : env('VIEWER_INTERNAL_URL')
+                      env('VIEWER_INTERNAL_URL') ??
+                      getViewerUrl({ isBuilder: true })
                    }/${publicId}`}
                  />
                </InputRightElement>
--- a/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
+++ b/apps/builder/components/share/integrations/modals/ShopifyModal/ShopifyInstructions.tsx
@ -14,7 +14,7 @@ import { BubbleParams } from 'typebot-js'
 import { ModalProps } from '../../EmbedButton'
 import parserHtml from 'prettier/parser-html'
 import prettier from 'prettier/standalone'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'

 type ShopifyInstructionsProps = {
  type: 'standard' | 'popup' | 'bubble'
@ -46,9 +46,7 @@ const StandardInstructions = ({ publicId }: Pick<ModalProps, 'publicId'>) => {

  const jsCode = parseInitContainerCode({
    url: `${
-      isEmpty(env('VIEWER_INTERNAL_URL'))
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
+      env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
    }/${publicId}`,
  })
  const headCode = prettier.format(
--- a/apps/builder/components/share/integrations/modals/WordpressModal.tsx
+++ b/apps/builder/components/share/integrations/modals/WordpressModal.tsx
@ -17,7 +17,7 @@ import {
 import { ExternalLinkIcon } from 'assets/icons'
 import { CopyButton } from 'components/shared/buttons/CopyButton'
 import { PublishFirstInfo } from 'components/shared/Info'
-import { env, isEmpty } from 'utils'
+import { env, getViewerUrl } from 'utils'
 import { ModalProps } from '../EmbedButton'

 export const WordpressModal = ({
@ -55,17 +55,15 @@ export const WordpressModal = ({
                  pr="4.5rem"
                  type={'text'}
                  defaultValue={`${
-                    isEmpty(env('VIEWER_INTERNAL_URL'))
-                      ? env('VIEWER_URL')
-                      : env('VIEWER_INTERNAL_URL')
+                    env('VIEWER_INTERNAL_URL') ??
+                    getViewerUrl({ isBuilder: true })
                  }/${publicId}`}
                />
                <InputRightElement width="4.5rem">
                  <CopyButton
                    textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
-                        ? env('VIEWER_URL')
-                        : env('VIEWER_INTERNAL_URL')
+                      env('VIEWER_INTERNAL_URL') ??
+                      getViewerUrl({ isBuilder: true })
                    }/${publicId}`}
                  />
                </InputRightElement>
--- a/apps/builder/components/shared/CodeEditor.tsx
+++ b/apps/builder/components/shared/CodeEditor.tsx
@ -1,5 +1,6 @@
 import { Box, BoxProps, HStack } from '@chakra-ui/react'
-import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'
+import { EditorView, basicSetup } from 'codemirror'
+import { EditorState } from '@codemirror/state'
 import { json, jsonParseLinter } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
 import { javascript } from '@codemirror/lang-javascript'
@ -43,7 +44,7 @@ export const CodeEditor = ({
      setPlainTextValue(value)
      onChange && onChange(value)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
  )

  useEffect(
--- a/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
+++ b/apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx
@ -1,4 +1,4 @@
-import { useEventListener } from '@chakra-ui/hooks'
+import { useEventListener } from '@chakra-ui/react'
 import assert from 'assert'
 import {
  useGraph,
--- a/apps/builder/components/shared/Graph/Edges/Edges.tsx
+++ b/apps/builder/components/shared/Graph/Edges/Edges.tsx
@ -1,4 +1,4 @@
-import { chakra } from '@chakra-ui/system'
+import { chakra } from '@chakra-ui/react'
 import { colors } from 'libs/theme'
 import { Edge as EdgeProps } from 'models'
 import React from 'react'
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/TextBubbleEditor.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/TextBubbleEditor.tsx
@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import {
  Plate,
  selectEditor,
-  serializeHtml,
  TEditor,
  TElement,
  Value,
@ -16,6 +15,7 @@ import { parseHtmlStringToPlainText } from 'services/utils'
 import { defaultTextBubbleContent, TextBubbleContent, Variable } from 'models'
 import { VariableSearchInput } from 'components/shared/VariableSearchInput'
 import { ReactEditor } from 'slate-react'
+import { serializeHtml } from '@udecode/plate-serializer-html'

 type Props = {
  initialValue: TElement[]
@ -98,7 +98,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
    setValue(val)
    setIsVariableDropdownOpen(false)
  }
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.shiftKey) return
    if (e.key === 'Enter') closeEditor()
  }
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/ToolBar.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/TextBubbleEditor/ToolBar.tsx
@ -1,4 +1,4 @@
-import { StackProps, HStack, Button } from '@chakra-ui/react'
+import { StackProps, HStack, Button, IconButton } from '@chakra-ui/react'
 import {
  MARK_BOLD,
  MARK_ITALIC,
@ -7,7 +7,13 @@ import {
 import { getPluginType, PlateEditor, Value } from '@udecode/plate-core'
 import { LinkToolbarButton } from '@udecode/plate-ui-link'
 import { MarkToolbarButton } from '@udecode/plate-ui-toolbar'
-import { BoldIcon, ItalicIcon, UnderlineIcon, LinkIcon } from 'assets/icons'
+import {
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  LinkIcon,
+  UserIcon,
+} from 'assets/icons'

 type Props = {
  editor: PlateEditor<Value>
@ -33,9 +39,12 @@ export const ToolBar = ({
      borderBottomWidth={1}
      {...props}
    >
-      <Button size="sm" onMouseDown={handleVariablesButtonMouseDown}>
-        Variables
-      </Button>
+      <IconButton
+        aria-label="Insert variable"
+        size="sm"
+        onMouseDown={handleVariablesButtonMouseDown}
+        icon={<UserIcon />}
+      />
      <span data-testid="bold-button">
        <MarkToolbarButton
          type={getPluginType(editor, MARK_BOLD)}
--- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx
@ -1,22 +1,12 @@
-import { ChangeEvent, useState } from 'react'
-import {
-  Button,
-  Flex,
-  HStack,
-  Stack,
-  Text,
-  Input as ClassicInput,
-  SimpleGrid,
-  GridItem,
-} from '@chakra-ui/react'
+import { useState } from 'react'
+import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
 import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
 import { GiphySearch } from './GiphySearch'
 import { useTypebot } from 'contexts/TypebotContext'
-import { BaseEmoji, emojiIndex } from 'emoji-mart'
-import { emojis } from './emojis'
 import { Input } from '../Textbox/Input'
 import { env, isEmpty } from 'utils'
+import { EmojiSearchableList } from './emoji/EmojiSearchableList'

 type Props = {
  url?: string
@ -101,7 +91,7 @@ const BodyContent = ({
    case 'giphy':
      return <GiphyContent onNewUrl={onSubmit} />
    case 'emoji':
-      return <EmojiContent onEmojiSelected={onSubmit} />
+      return <EmojiSearchableList onEmojiSelected={onSubmit} />
  }
 }

@ -133,55 +123,6 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
  </Stack>
 )

-const EmojiContent = ({
-  onEmojiSelected,
-}: {
-  onEmojiSelected: (emoji: string) => void
-}) => {
-  const [searchValue, setSearchValue] = useState('')
-  const [filteredEmojis, setFilteredEmojis] = useState<string[]>(emojis)
-
-  const handleEmojiClick = (emoji: string) => () => onEmojiSelected(emoji)
-
-  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(e.target.value)
-    setFilteredEmojis(
-      emojiIndex.search(e.target.value)?.map((o) => (o as BaseEmoji).native) ??
-        emojis
-    )
-  }
-
-  return (
-    <Stack>
-      <ClassicInput
-        placeholder="Search..."
-        value={searchValue}
-        onChange={handleSearchChange}
-      />
-      <SimpleGrid
-        maxH="350px"
-        overflowY="scroll"
-        overflowX="hidden"
-        spacing={0}
-        columns={7}
-      >
-        {filteredEmojis.map((emoji) => (
-          <GridItem key={emoji}>
-            <Button
-              onClick={handleEmojiClick(emoji)}
-              variant="ghost"
-              size="sm"
-              fontSize="xl"
-            >
-              {emoji}
-            </Button>
-          </GridItem>
-        ))}
-      </SimpleGrid>
-    </Stack>
-  )
-}
-
 const GiphyContent = ({ onNewUrl }: ContentProps) => {
  if (isEmpty(env('GIPHY_API_KEY')))
    return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
--- a/apps/builder/components/shared/ImageUploadContent/emoji/EmojiSearchableList.tsx
+++ b/apps/builder/components/shared/ImageUploadContent/emoji/EmojiSearchableList.tsx
@ -0,0 +1,199 @@
+import emojis from './emojiList.json'
+import emojiTagsData from 'emojilib'
+import {
+  Stack,
+  SimpleGrid,
+  GridItem,
+  Button,
+  Input as ClassicInput,
+  Text,
+} from '@chakra-ui/react'
+import { useState, ChangeEvent, useEffect, useRef } from 'react'
+
+const emojiTags = emojiTagsData as Record<string, string[]>
+
+const people = emojis['Smileys & Emotion'].concat(emojis['People & Body'])
+const nature = emojis['Animals & Nature']
+const food = emojis['Food & Drink']
+const activities = emojis['Activities']
+const travel = emojis['Travel & Places']
+const objects = emojis['Objects']
+const symbols = emojis['Symbols']
+const flags = emojis['Flags']
+
+export const EmojiSearchableList = ({
+  onEmojiSelected,
+}: {
+  onEmojiSelected: (emoji: string) => void
+}) => {
+  const scrollContainer = useRef<HTMLDivElement>(null)
+  const bottomElement = useRef<HTMLDivElement>(null)
+  const [isSearching, setIsSearching] = useState(false)
+  const [filteredPeople, setFilteredPeople] = useState(people)
+  const [filteredAnimals, setFilteredAnimals] = useState(nature)
+  const [filteredFood, setFilteredFood] = useState(food)
+  const [filteredTravel, setFilteredTravel] = useState(travel)
+  const [filteredActivities, setFilteredActivities] = useState(activities)
+  const [filteredObjects, setFilteredObjects] = useState(objects)
+  const [filteredSymbols, setFilteredSymbols] = useState(symbols)
+  const [filteredFlags, setFilteredFlags] = useState(flags)
+  const [totalDisplayedCategories, setTotalDisplayedCategories] = useState(1)
+
+  useEffect(() => {
+    if (!bottomElement.current) return
+    const observer = new IntersectionObserver(handleObserver, {
+      root: scrollContainer.current,
+    })
+    if (bottomElement.current) observer.observe(bottomElement.current)
+    return () => {
+      observer.disconnect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bottomElement.current])
+
+  const handleObserver = (entities: IntersectionObserverEntry[]) => {
+    const target = entities[0]
+    if (target.isIntersecting) setTotalDisplayedCategories((c) => c + 1)
+  }
+
+  const handleSearchChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const searchValue = e.target.value
+    if (searchValue.length <= 2 && isSearching) return resetEmojiList()
+    setIsSearching(true)
+    setTotalDisplayedCategories(8)
+    const byTag = (emoji: string) =>
+      emojiTags[emoji].find((tag) => tag.includes(searchValue))
+    setFilteredPeople(people.filter(byTag))
+    setFilteredAnimals(nature.filter(byTag))
+    setFilteredFood(food.filter(byTag))
+    setFilteredTravel(travel.filter(byTag))
+    setFilteredActivities(activities.filter(byTag))
+    setFilteredObjects(objects.filter(byTag))
+    setFilteredSymbols(symbols.filter(byTag))
+    setFilteredFlags(flags.filter(byTag))
+  }
+
+  const resetEmojiList = () => {
+    setTotalDisplayedCategories(1)
+    setIsSearching(false)
+    setFilteredPeople(people)
+    setFilteredAnimals(nature)
+    setFilteredFood(food)
+    setFilteredTravel(travel)
+    setFilteredActivities(activities)
+    setFilteredObjects(objects)
+    setFilteredSymbols(symbols)
+    setFilteredFlags(flags)
+  }
+
+  return (
+    <Stack>
+      <ClassicInput placeholder="Search..." onChange={handleSearchChange} />
+      <Stack ref={scrollContainer} overflow="scroll" maxH="350px" spacing={4}>
+        {filteredPeople.length > 0 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              People
+            </Text>
+            <EmojiGrid emojis={filteredPeople} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredAnimals.length > 0 && totalDisplayedCategories >= 2 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Animals & Nature
+            </Text>
+            <EmojiGrid
+              emojis={filteredAnimals}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredFood.length > 0 && totalDisplayedCategories >= 3 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Food & Drink
+            </Text>
+            <EmojiGrid emojis={filteredFood} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredTravel.length > 0 && totalDisplayedCategories >= 4 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Travel & Places
+            </Text>
+            <EmojiGrid emojis={filteredTravel} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        {filteredActivities.length > 0 && totalDisplayedCategories >= 5 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Activities
+            </Text>
+            <EmojiGrid
+              emojis={filteredActivities}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredObjects.length > 0 && totalDisplayedCategories >= 6 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Objects
+            </Text>
+            <EmojiGrid
+              emojis={filteredObjects}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredSymbols.length > 0 && totalDisplayedCategories >= 7 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Symbols
+            </Text>
+            <EmojiGrid
+              emojis={filteredSymbols}
+              onEmojiClick={onEmojiSelected}
+            />
+          </Stack>
+        )}
+        {filteredFlags.length > 0 && totalDisplayedCategories >= 8 && (
+          <Stack>
+            <Text fontSize="sm" pl="2">
+              Flags
+            </Text>
+            <EmojiGrid emojis={filteredFlags} onEmojiClick={onEmojiSelected} />
+          </Stack>
+        )}
+        <div ref={bottomElement} />
+      </Stack>
+    </Stack>
+  )
+}
+
+const EmojiGrid = ({
+  emojis,
+  onEmojiClick,
+}: {
+  emojis: string[]
+  onEmojiClick: (emoji: string) => void
+}) => {
+  const handleClick = (emoji: string) => () => onEmojiClick(emoji)
+  return (
+    <SimpleGrid spacing={0} columns={7}>
+      {emojis.map((emoji) => (
+        <GridItem
+          as={Button}
+          onClick={handleClick(emoji)}
+          variant="ghost"
+          size="sm"
+          fontSize="xl"
+          key={emoji}
+        >
+          {emoji}
+        </GridItem>
+      ))}
+    </SimpleGrid>
+  )
+}
--- a/apps/builder/components/shared/ImageUploadContent/emoji/emojiList.json
+++ b/apps/builder/components/shared/ImageUploadContent/emoji/emojiList.json
--- a/apps/builder/components/shared/ImageUploadContent/emojis.ts
+++ b/apps/builder/components/shared/ImageUploadContent/emojis.ts
--- a/apps/builder/components/shared/SearchableDropdown.tsx
+++ b/apps/builder/components/shared/SearchableDropdown.tsx
@ -38,7 +38,7 @@ export const SearchableDropdown = ({
  const debounced = useDebouncedCallback(
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onValueChange ? onValueChange : () => {},
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
  )
  const [filteredItems, setFilteredItems] = useState([
    ...items
--- a/apps/builder/components/shared/SmartNumberInput.tsx
+++ b/apps/builder/components/shared/SmartNumberInput.tsx
@ -23,7 +23,7 @@ export const SmartNumberInput = ({
  const [currentValue, setCurrentValue] = useState(value?.toString() ?? '')
  const debounced = useDebouncedCallback(
    onValueChange,
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
  )

  useEffect(
--- a/apps/builder/components/shared/Textbox/TextBox.tsx
+++ b/apps/builder/components/shared/Textbox/TextBox.tsx
@ -36,7 +36,7 @@ export const TextBox = ({
    (value) => {
      onChange(value)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
  )

  useEffect(() => {
--- a/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
+++ b/apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx
@ -1,5 +1,9 @@
-import { Editable, EditablePreview, EditableInput } from '@chakra-ui/editable'
-import { Tooltip } from '@chakra-ui/tooltip'
+import {
+  Editable,
+  EditablePreview,
+  EditableInput,
+  Tooltip,
+} from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'

 type EditableProps = {
--- a/apps/builder/components/shared/VariableSearchInput.tsx
+++ b/apps/builder/components/shared/VariableSearchInput.tsx
@ -47,7 +47,7 @@ export const VariableSearchInput = ({
      const variable = variables.find((v) => v.name === value)
      if (variable) onSelectVariable(variable)
    },
-    env('E2E_TEST') === 'enabled' ? 0 : debounceTimeout
+    env('E2E_TEST') === 'true' ? 0 : debounceTimeout
  )
  const [filteredItems, setFilteredItems] = useState<Variable[]>(
    variables ?? []
--- a/apps/builder/components/shared/hooks/useToast.tsx
+++ b/apps/builder/components/shared/hooks/useToast.tsx
@ -1,4 +1,4 @@
-import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/toast'
+import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react'

 export const useToast = () => {
  const toast = useChakraToast()
--- a/apps/builder/components/templates/TemplatesModal.tsx
+++ b/apps/builder/components/templates/TemplatesModal.tsx
@ -17,7 +17,7 @@ import { useToast } from 'components/shared/hooks/useToast'
 import { Typebot } from 'models'
 import React, { useEffect, useState } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { sendRequest } from 'utils'
+import { getViewerUrl, sendRequest } from 'utils'
 import { TemplateProps, templates } from './data'

 type Props = {
@ -71,6 +71,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
            </Heading>
            {typebot && (
              <TypebotViewer
+                apiHost={getViewerUrl({ isBuilder: true })}
                typebot={parseTypebotToPublicTypebot(typebot)}
                key={typebot.id}
              />
--- a/apps/builder/contexts/ResultsProvider.tsx
+++ b/apps/builder/contexts/ResultsProvider.tsx
@ -2,8 +2,9 @@ import { ResultHeaderCell, ResultWithAnswers } from 'models'
 import { createContext, ReactNode, useContext, useMemo } from 'react'
 import {
  convertResultsToTableData,
+  TableData,
  useResults as useFetchResults,
-} from 'services/typebots'
+} from 'services/typebots/results'
 import { KeyedMutator } from 'swr'
 import { isDefined, parseResultHeader } from 'utils'
 import { useTypebot } from './TypebotContext'
@ -15,10 +16,7 @@ const resultsContext = createContext<{
  resultHeader: ResultHeaderCell[]
  totalResults: number
  totalHiddenResults?: number
-  tableData: {
-    id: string
-    [key: string]: { plainText: string; element?: JSX.Element } | string
-  }[]
+  tableData: TableData[]
  onDeleteResults: (totalResultsDeleted: number) => void
  fetchMore: () => void
  mutate: KeyedMutator<
--- a/apps/builder/contexts/TypebotContext/TypebotContext.tsx
+++ b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
@ -150,12 +150,6 @@ export const TypebotContext = ({
      new Date(typebot.updatedAt) >
      new Date(currentTypebotRef.current.updatedAt)
    ) {
-      console.log(
-        'Incoming typebot',
-        typebot,
-        'Current typebot',
-        currentTypebotRef.current
-      )
      setLocalTypebot({ ...typebot })
    }

@ -392,7 +386,7 @@ export const useFetchedTypebot = ({
    },
    Error
  >(`/api/typebots/${typebotId}`, fetcher, {
-    dedupingInterval: env('E2E_TEST') === 'enabled' ? 0 : undefined,
+    dedupingInterval: env('E2E_TEST') === 'true' ? 0 : undefined,
  })
  if (error && onError) onError(error)
  return {
--- a/apps/builder/contexts/TypebotDndContext.tsx
+++ b/apps/builder/contexts/TypebotDndContext.tsx
@ -14,14 +14,9 @@ const typebotDndContext = createContext<{
  setDraggedTypebot: Dispatch<SetStateAction<TypebotInDashboard | undefined>>
  mouseOverFolderId?: string | null
  setMouseOverFolderId: Dispatch<SetStateAction<string | undefined | null>>
-}>({
-  setDraggedTypebot: () => {
-    console.log('Not implemented')
-  },
-  setMouseOverFolderId: () => {
-    console.log('Not implemented')
-  },
-})
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+}>({})

 export const TypebotDndContext = ({ children }: { children: ReactNode }) => {
  const [draggedTypebot, setDraggedTypebot] = useState<TypebotInDashboard>()
--- a/apps/builder/layouts/settings/SettingsContent.tsx
+++ b/apps/builder/layouts/settings/SettingsContent.tsx
@ -4,6 +4,7 @@ import React, { useMemo } from 'react'
 import { TypebotViewer } from 'bot-engine'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
 import { SettingsSideMenu } from 'components/settings/SettingsSideMenu'
+import { getViewerUrl } from 'utils'

 export const SettingsContent = () => {
  const { typebot } = useTypebot()
@ -17,7 +18,12 @@ export const SettingsContent = () => {
    <Flex h="full" w="full">
      <SettingsSideMenu />
      <Flex flex="1">
-        {publicTypebot && <TypebotViewer typebot={publicTypebot} />}
+        {publicTypebot && (
+          <TypebotViewer
+            apiHost={getViewerUrl({ isBuilder: true })}
+            typebot={publicTypebot}
+          />
+        )}
      </Flex>
    </Flex>
  )
--- a/apps/builder/layouts/theme/ThemeContent.tsx
+++ b/apps/builder/layouts/theme/ThemeContent.tsx
@ -3,6 +3,7 @@ import { TypebotViewer } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
+import { getViewerUrl } from 'utils'
 import { ThemeSideMenu } from '../../components/theme/ThemeSideMenu'

 export const ThemeContent = () => {
@ -12,7 +13,12 @@ export const ThemeContent = () => {
    <Flex h="full" w="full">
      <ThemeSideMenu />
      <Flex flex="1">
-        {publicTypebot && <TypebotViewer typebot={publicTypebot} />}
+        {publicTypebot && (
+          <TypebotViewer
+            apiHost={getViewerUrl({ isBuilder: true })}
+            typebot={publicTypebot}
+          />
+        )}
      </Flex>
    </Flex>
  )
--- a/apps/builder/libs/plate.tsx
+++ b/apps/builder/libs/plate.tsx
@ -5,6 +5,7 @@ import {
 } from '@udecode/plate-basic-marks'
 import { createPlugins } from '@udecode/plate-core'
 import { createLinkPlugin, ELEMENT_LINK } from '@udecode/plate-link'
+import { PlateFloatingLink } from '@udecode/plate-ui-link'

 export const editorStyle: React.CSSProperties = {
  flex: 1,
@ -18,7 +19,9 @@ export const platePlugins = createPlugins(
    createBoldPlugin(),
    createItalicPlugin(),
    createUnderlinePlugin(),
-    createLinkPlugin(),
+    createLinkPlugin({
+      renderAfterEditable: PlateFloatingLink,
+    }),
  ],
  {
    components: {
--- a/apps/builder/libs/theme.ts
+++ b/apps/builder/libs/theme.ts
@ -100,4 +100,5 @@ const components = {
  },
 }

-export const customTheme = extendTheme({ colors, fonts, components })
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const customTheme: any = extendTheme({ colors, fonts, components })
--- a/apps/builder/mocks/index.ts
+++ b/apps/builder/mocks/index.ts
@ -1,30 +0,0 @@
-import { rest, setupWorker } from 'msw'
-import { setupServer } from 'msw/node'
-
-const handlers = () => [
-  rest.get('http://localhost:3000/api/auth/session', (req, res, ctx) => {
-    const authenticatedUser = JSON.parse(
-      typeof localStorage !== 'undefined'
-        ? (localStorage.getItem('authenticatedUser') as string)
-        : '{"id":"proUser","name":"Pro user","email":"pro-user@email.com","emailVerified":null,"image":"https://avatars.githubusercontent.com/u/16015833?v=4","plan":"PRO","stripeId":null}'
-    )
-    return res(
-      ctx.json({
-        user: authenticatedUser,
-        expires: '2022-03-13T17:02:42.317Z',
-      })
-    )
-  }),
-]
-
-export const enableMocks = () => {
-  if (typeof window === 'undefined') {
-    const server = setupServer(...handlers())
-    server.listen()
-  } else {
-    const worker = setupWorker(...handlers())
-    worker.start({
-      onUnhandledRequest: 'bypass',
-    })
-  }
-}
--- a/apps/builder/next.config.js
+++ b/apps/builder/next.config.js
@ -1,19 +1,20 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { withSentryConfig } = require('@sentry/nextjs')
+const path = require('path')

-const moduleExports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: 'standalone',
  experimental: {
-    outputStandalone: true,
+    outputFileTracingRoot: path.join(__dirname, '../../'),
  },
-  optimizeFonts: false,
 }

 const sentryWebpackPluginOptions = {
  silent: true,
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
 }

 module.exports = process.env.SENTRY_AUTH_TOKEN
-  ? withSentryConfig(moduleExports, sentryWebpackPluginOptions)
-  : moduleExports
+  ? withSentryConfig(nextConfig, sentryWebpackPluginOptions)
+  : nextConfig
--- a/apps/builder/package.json
+++ b/apps/builder/package.json
@ -3,112 +3,112 @@
  "version": "0.1.0",
  "license": "AGPL-3.0-or-later",
  "scripts": {
-    "dx": "yarn dev",
+    "dx": "pnpm dev",
    "dev": "ENVSH_ENV=.env.local bash ../../env.sh next dev -p 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
-    "test": "yarn playwright test",
-    "test:open": "PWDEBUG=1 yarn playwright test"
-  },
-  "msw": {
-    "workerDirectory": "public"
+    "test": "pnpm playwright test",
+    "test:open": "PWDEBUG=1 pnpm playwright test"
  },
  "dependencies": {
-    "@chakra-ui/css-reset": "^2.0.0",
-    "@chakra-ui/react": "^2.0.0",
-    "@codemirror/basic-setup": "^0.20.0",
-    "@codemirror/lang-css": "^0.20.0",
-    "@codemirror/lang-html": "^0.20.0",
-    "@codemirror/lang-javascript": "^0.20.0",
-    "@codemirror/lang-json": "^0.20.0",
-    "@codemirror/text": "^0.19.6",
+    "@chakra-ui/css-reset": "2.0.3",
+    "@chakra-ui/react": "^2.2.6",
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/lang-html": "^6.1.0",
+    "@codemirror/lang-javascript": "^6.0.2",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/state": "6.1.1",
    "@dnd-kit/core": "^6.0.5",
    "@dnd-kit/sortable": "^7.0.1",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@giphy/js-fetch-api": "^4.1.2",
-    "@giphy/js-types": "^4.1.0",
-    "@giphy/react-components": "^5.7.0",
-    "@googleapis/drive": "^2.3.0",
-    "@sentry/nextjs": "^6.19.7",
-    "@stripe/stripe-js": "^1.29.0",
-    "@tanstack/react-table": "^8.0.13",
-    "@udecode/plate-basic-marks": "^13.1.0",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@giphy/js-fetch-api": "4.4.0",
+    "@giphy/js-types": "^4.2.1",
+    "@giphy/react-components": "6.0.0",
+    "@googleapis/drive": "^3.0.1",
+    "@sentry/nextjs": "7.9.0",
+    "@stripe/stripe-js": "1.35.0",
+    "@tanstack/react-table": "8.5.11",
+    "@udecode/plate-basic-marks": "16.0.0",
    "@udecode/plate-common": "^7.0.2",
-    "@udecode/plate-core": "^13.1.0",
-    "@udecode/plate-link": "^13.1.0",
-    "@udecode/plate-ui-link": "^13.1.0",
-    "@udecode/plate-ui-toolbar": "^13.1.0",
-    "aws-sdk": "^2.1152.0",
-    "bot-engine": "*",
+    "@udecode/plate-core": "16.0.0",
+    "@udecode/plate-link": "16.0.0",
+    "@udecode/plate-serializer-html": "16.0.0",
+    "@udecode/plate-ui-link": "16.0.0",
+    "@udecode/plate-ui-toolbar": "16.0.0",
+    "aws-sdk": "2.1189.0",
+    "bot-engine": "workspace:*",
    "browser-image-compression": "^2.0.0",
    "canvas-confetti": "^1.5.1",
+    "codemirror": "^6.0.1",
    "cuid": "^2.1.8",
-    "db": "*",
    "deep-object-diff": "^1.1.7",
-    "dequal": "^2.0.2",
-    "emoji-mart": "^3.0.1",
+    "dequal": "^2.0.3",
+    "emojilib": "3.0.7",
    "focus-visible": "^5.2.0",
-    "framer-motion": "6.3.3",
-    "google-auth-library": "^8.0.2",
-    "google-spreadsheet": "^3.2.0",
-    "got": "^12.0.4",
+    "framer-motion": "7.0.0",
+    "google-auth-library": "^8.1.1",
+    "google-spreadsheet": "^3.3.0",
+    "got": "12.3.1",
    "htmlparser2": "^8.0.1",
-    "immer": "^9.0.14",
+    "immer": "^9.0.15",
    "js-video-url-parser": "^0.5.1",
    "jsonwebtoken": "^8.5.1",
-    "kbar": "^0.1.0-beta.34",
-    "micro": "^9.3.4",
+    "kbar": "^0.1.0-beta.36",
+    "micro": "9.4.1",
    "micro-cors": "^0.1.1",
-    "minio": "^7.0.28",
-    "models": "*",
-    "next": "^12.1.6",
-    "next-auth": "4.9.0",
-    "nodemailer": "^6.7.5",
+    "minio": "7.0.30",
+    "next": "12.2.4",
+    "next-auth": "4.10.3",
+    "nodemailer": "^6.7.7",
    "nprogress": "^0.2.0",
    "papaparse": "^5.3.2",
-    "prettier": "^2.6.2",
-    "qs": "^6.10.3",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "prettier": "2.7.1",
+    "qs": "^6.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
    "react-draggable": "^4.4.5",
-    "slate": "^0.81.1",
+    "slate": "0.82.0",
    "slate-history": "^0.66.0",
    "slate-hyperscript": "^0.77.0",
-    "slate-react": "^0.81.0",
-    "stripe": "^9.4.0",
+    "slate-react": "0.82.0",
+    "stripe": "10.0.0",
    "styled-components": "^5.3.5",
    "svg-round-corners": "^0.3.0",
    "swr": "^1.3.0",
    "tinycolor2": "^1.4.2",
-    "typebot-js": "*",
-    "use-debounce": "^8.0.1",
-    "utils": "*"
+    "typebot-js": "workspace:*",
+    "use-debounce": "8.0.3"
  },
  "devDependencies": {
-    "@playwright/test": "^1.22.0",
-    "@types/aws-sdk": "^2.7.0",
-    "@types/canvas-confetti": "^1.4.2",
-    "@types/emoji-mart": "^3.0.9",
-    "@types/google-spreadsheet": "^3.2.1",
+    "@babel/core": "7.18.10",
+    "@playwright/test": "1.24.2",
+    "@types/canvas-confetti": "^1.4.3",
+    "@types/google-spreadsheet": "^3.3.0",
    "@types/jsonwebtoken": "8.5.8",
    "@types/micro-cors": "^0.1.2",
    "@types/minio": "^7.0.13",
-    "@types/node": "^17.0.33",
-    "@types/nodemailer": "^6.4.4",
+    "@types/node": "18.6.5",
+    "@types/nodemailer": "6.4.5",
    "@types/nprogress": "^0.2.0",
-    "@types/papaparse": "^5.3.2",
-    "@types/prettier": "^2.6.1",
+    "@types/papaparse": "5.3.3",
+    "@types/prettier": "2.7.0",
    "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.0.17",
    "@types/react-table": "^7.7.12",
    "@types/tinycolor2": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/eslint-plugin": "5.33.0",
+    "@typescript-eslint/parser": "5.33.0",
+    "db": "workspace:*",
    "dotenv": "^16.0.1",
-    "eslint": "<8.0.0",
-    "eslint-config-next": "12.1.6",
-    "msw": "^0.43.1",
-    "typescript": "^4.6.4"
+    "eslint": "8.21.0",
+    "eslint-config-next": "12.2.4",
+    "eslint-plugin-react": "^7.30.1",
+    "models": "workspace:*",
+    "typescript": "^4.7.4",
+    "utils": "workspace:*"
  }
 }
--- a/apps/builder/pages/_app.tsx
+++ b/apps/builder/pages/_app.tsx
@ -6,7 +6,6 @@ import { customTheme } from 'libs/theme'
 import { useRouterProgressBar } from 'libs/routerProgressBar'
 import 'assets/styles/routerProgressBar.css'
 import 'assets/styles/plate.css'
-import 'focus-visible/dist/focus-visible'
 import 'assets/styles/submissionsTable.css'
 import 'assets/styles/codeMirror.css'
 import 'assets/styles/custom.css'
@ -15,15 +14,12 @@ import { TypebotContext } from 'contexts/TypebotContext'
 import { useRouter } from 'next/router'
 import { KBarProvider } from 'kbar'
 import { actions } from 'libs/kbar'
-import { enableMocks } from 'mocks'
 import { SupportBubble } from 'components/shared/SupportBubble'
 import { WorkspaceContext } from 'contexts/WorkspaceContext'
 import { toTitleCase } from 'utils'

 const { ToastContainer, toast } = createStandaloneToast(customTheme)

-if (process.env.NEXT_PUBLIC_E2E_TEST === 'enabled') enableMocks()
-
 const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {
  useRouterProgressBar()
  const { query, pathname, isReady } = useRouter()
@ -70,6 +66,7 @@ const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => {

 const displayStripeCallbackMessage = (
  status: string | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  toast: any
 ) => {
  if (status && ['pro', 'team'].includes(status)) {
--- a/apps/builder/pages/api/auth/[...nextauth].ts
+++ b/apps/builder/pages/api/auth/[...nextauth].ts
@ -15,7 +15,10 @@ import { env, isNotEmpty } from 'utils'

 const providers: Provider[] = []

-if (isNotEmpty(process.env.GITHUB_CLIENT_ID))
+if (
+  isNotEmpty(process.env.GITHUB_CLIENT_ID) &&
+  isNotEmpty(process.env.GITHUB_CLIENT_SECRET)
+)
  providers.push(
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
--- a/apps/builder/pages/api/credentials/[credentialsId].ts
+++ b/apps/builder/pages/api/credentials/[credentialsId].ts
@ -10,7 +10,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const workspaceId = req.query.workspaceId as string | undefined
  if (!workspaceId) return badRequest(res)
  if (req.method === 'DELETE') {
-    const credentialsId = req.query.credentialsId.toString()
+    const credentialsId = req.query.credentialsId as string | undefined
    const credentials = await prisma.credentials.deleteMany({
      where: {
        id: credentialsId,
--- a/apps/builder/pages/api/credentials/google-sheets/callback.ts
+++ b/apps/builder/pages/api/credentials/google-sheets/callback.ts
@ -12,8 +12,10 @@ import { getAuthenticatedUser } from 'services/api/utils'
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)
+  const state = req.query.state as string | undefined
+  if (!state) return badRequest(res)
  const { redirectUrl, blockId, workspaceId } = JSON.parse(
-    Buffer.from(req.query.state.toString(), 'base64').toString()
+    Buffer.from(state, 'base64').toString()
  )
  if (req.method === 'GET') {
    const code = req.query.code as string | undefined
--- a/apps/builder/pages/api/customDomains/[domain].ts
+++ b/apps/builder/pages/api/customDomains/[domain].ts
@ -11,7 +11,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const workspaceId = req.query.workspaceId as string | undefined
  if (!workspaceId) return badRequest(res)
  if (req.method === 'DELETE') {
-    const domain = req.query.domain.toString()
+    const domain = req.query.domain as string
    try {
      await deleteDomainOnVercel(domain)
    } catch {}
--- a/apps/builder/pages/api/folders/[id].ts
+++ b/apps/builder/pages/api/folders/[id].ts
@ -9,7 +9,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)

-  const id = req.query.id.toString()
+  const id = req.query.id as string
  if (req.method === 'GET') {
    const folder = await prisma.dashboardFolder.findFirst({
      where: {
--- a/apps/builder/pages/api/integrations/google-sheets/spreadsheets.ts
+++ b/apps/builder/pages/api/integrations/google-sheets/spreadsheets.ts
@ -1,6 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { drive } from '@googleapis/drive'
-import { OAuth2Client } from 'googleapis-common'
 import { getAuthenticatedGoogleClient } from 'libs/google-sheets'
 import { badRequest, methodNotAllowed, notAuthenticated } from 'utils'
 import { setUser, withSentry } from '@sentry/nextjs'
@ -19,7 +18,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
      return res.status(404).send("Couldn't find credentials in database")
    const response = await drive({
      version: 'v3',
-      auth: auth.client as unknown as OAuth2Client,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      auth: auth.client,
    }).files.list({
      q: "mimeType='application/vnd.google-apps.spreadsheet'",
      fields: 'nextPageToken, files(id, name)',
--- a/apps/builder/pages/api/mock/webhook.ts
+++ b/apps/builder/pages/api/mock/webhook.ts
@ -4,8 +4,8 @@ import { methodNotAllowed } from 'utils'

 const handler = (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === 'POST') {
-    const firstParam = req.query.firstParam.toString()
-    const secondParam = req.query.secondParam.toString()
+    const firstParam = req.query.firstParam?.toString()
+    const secondParam = req.query.secondParam?.toString()
    const customHeader = req.headers['custom-typebot']
    const { body } = req
    if (
--- a/apps/builder/pages/api/storage/upload-url.ts
+++ b/apps/builder/pages/api/storage/upload-url.ts
@ -1,7 +1,12 @@
 import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { getSession } from 'next-auth/react'
-import { badRequest, generatePresignedUrl, methodNotAllowed } from 'utils'
+import { getAuthenticatedUser } from 'services/api/utils'
+import {
+  badRequest,
+  generatePresignedUrl,
+  methodNotAllowed,
+  notAuthenticated,
+} from 'utils'

 const handler = async (
  req: NextApiRequest,
@ -9,11 +14,8 @@ const handler = async (
 ): Promise<void> => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  if (req.method === 'GET') {
-    const session = await getSession({ req })
-    if (!session) {
-      res.status(401)
-      return
-    }
+    const user = await getAuthenticatedUser(req)
+    if (!user) return notAuthenticated(res)

    if (
      !process.env.S3_ENDPOINT ||
--- a/apps/builder/pages/api/stripe/checkout.ts
+++ b/apps/builder/pages/api/stripe/checkout.ts
@ -8,7 +8,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    if (!process.env.STRIPE_SECRET_KEY)
      throw Error('STRIPE_SECRET_KEY var is missing')
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
-      apiVersion: '2020-08-27',
+      apiVersion: '2022-08-01',
    })
    const { email, currency, plan, workspaceId, href } =
      typeof req.body === 'string' ? JSON.parse(req.body) : req.body
--- a/apps/builder/pages/api/stripe/customer-portal.ts
+++ b/apps/builder/pages/api/stripe/customer-portal.ts
@ -27,7 +27,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    })
    if (!workspace?.stripeId) return forbidden(res)
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
-      apiVersion: '2020-08-27',
+      apiVersion: '2022-08-01',
    })
    const session = await stripe.billingPortal.sessions.create({
      customer: workspace.stripeId,
--- a/apps/builder/pages/api/stripe/update-subscription.ts
+++ b/apps/builder/pages/api/stripe/update-subscription.ts
@ -13,7 +13,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    if (!process.env.STRIPE_SECRET_KEY)
      throw Error('STRIPE_SECRET_KEY var is missing')
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
-      apiVersion: '2020-08-27',
+      apiVersion: '2022-08-01',
    })
    const subscriptions = await stripe.subscriptions.list({
      customer: customerId,
--- a/apps/builder/pages/api/stripe/webhook.ts
+++ b/apps/builder/pages/api/stripe/webhook.ts
@ -10,7 +10,7 @@ import { withSentry } from '@sentry/nextjs'
 if (!process.env.STRIPE_SECRET_KEY || !process.env.STRIPE_WEBHOOK_SECRET)
  throw new Error('STRIPE_SECRET_KEY or STRIPE_WEBHOOK_SECRET missing')
 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
-  apiVersion: '2020-08-27',
+  apiVersion: '2022-08-01',
 })

 const cors = Cors({
--- a/apps/builder/pages/api/typebots/[typebotId].ts
+++ b/apps/builder/pages/api/typebots/[typebotId].ts
@ -10,7 +10,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)

-  const typebotId = req.query.typebotId.toString()
+  const typebotId = req.query.typebotId as string
  if (req.method === 'GET') {
    const typebot = await prisma.typebot.findFirst({
      where: canReadTypebot(typebotId, user),
--- a/apps/builder/pages/api/typebots/[typebotId]/invitations.ts
+++ b/apps/builder/pages/api/typebots/[typebotId]/invitations.ts
@ -66,7 +66,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
      await prisma.invitation.create({
        data: { email: email.toLowerCase().trim(), type, typebotId },
      })
-    if (env('E2E_TEST') !== 'enabled')
+    if (env('E2E_TEST') !== 'true')
      await sendEmailNotification({
        to: email,
        subject: "You've been invited to collaborate 🤝",
--- a/apps/builder/pages/api/typebots/[typebotId]/results.ts
+++ b/apps/builder/pages/api/typebots/[typebotId]/results.ts
@ -23,9 +23,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  })
  if (!workspace) return forbidden(res)
  if (req.method === 'GET') {
-    const typebotId = req.query.typebotId.toString()
+    const typebotId = req.query.typebotId as string
    const lastResultId = req.query.lastResultId?.toString()
-    const take = parseInt(req.query.limit?.toString())
+    const take = Number(req.query.limit?.toString())
    const results = await prisma.result.findMany({
      take: isNaN(take) ? undefined : take,
      skip: lastResultId ? 1 : 0,
--- a/apps/builder/pages/api/typebots/[typebotId]/results/answers/count.ts
+++ b/apps/builder/pages/api/typebots/[typebotId]/results/answers/count.ts
@ -10,7 +10,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)
  if (req.method === 'GET') {
-    const typebotId = req.query.typebotId.toString()
+    const typebotId = req.query.typebotId as string
    const typebot = await prisma.typebot.findFirst({
      where: canReadTypebot(typebotId, user),
      include: { publishedTypebot: true },
--- a/apps/builder/pages/api/typebots/[typebotId]/results/stats.ts
+++ b/apps/builder/pages/api/typebots/[typebotId]/results/stats.ts
@ -10,7 +10,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)
  if (req.method === 'GET') {
-    const typebotId = req.query.typebotId.toString()
+    const typebotId = req.query.typebotId as string

    const totalViews = await prisma.result.count({
      where: {
--- a/apps/builder/pages/api/users/[userId].ts
+++ b/apps/builder/pages/api/users/[userId].ts
@ -8,7 +8,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const user = await getAuthenticatedUser(req)
  if (!user) return notAuthenticated(res)

-  const id = req.query.userId.toString()
+  const id = req.query.userId as string
  if (req.method === 'PUT') {
    const data = typeof req.body === 'string' ? JSON.parse(req.body) : req.body
    const typebots = await prisma.user.update({
--- a/apps/builder/pages/api/users/[userId]/api-tokens/[tokenId].ts
+++ b/apps/builder/pages/api/users/[userId]/api-tokens/[tokenId].ts
@ -9,7 +9,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (!user) return notAuthenticated(res)

  if (req.method === 'DELETE') {
-    const id = req.query.tokenId.toString()
+    const id = req.query.tokenId as string
    const apiToken = await prisma.apiToken.delete({
      where: { id },
    })
--- a/apps/builder/pages/typebots.tsx
+++ b/apps/builder/pages/typebots.tsx
@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { Stack, Text, VStack } from '@chakra-ui/layout'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
 import { TypebotDndContext } from 'contexts/TypebotDndContext'
 import { useRouter } from 'next/router'
-import { Spinner } from '@chakra-ui/react'
+import { Spinner, Stack, Text, VStack } from '@chakra-ui/react'
 import { pay } from 'services/stripe'
 import { useUser } from 'contexts/UserContext'
 import { NextPageContext } from 'next/types'
--- a/apps/builder/pages/typebots/[typebotId]/edit.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/edit.tsx
@ -1,4 +1,3 @@
-import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import {
@ -16,7 +15,7 @@ import { GraphProvider, GroupsCoordinatesProvider } from 'contexts/GraphContext'
 import { GraphDndContext } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext'
 import { GettingStartedModal } from 'components/editor/GettingStartedModal'
-import { Spinner } from '@chakra-ui/react'
+import { Spinner, Flex } from '@chakra-ui/react'

 const TypebotEditPage = () => {
  const { typebot, isReadOnly } = useTypebot()
--- a/apps/builder/pages/typebots/[typebotId]/results.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/results.tsx
@ -1,8 +1,7 @@
-import { Flex, Text } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import React, { useMemo } from 'react'
-import { HStack, Button, Tag } from '@chakra-ui/react'
+import { HStack, Button, Tag, Flex, Text } from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { ResultsContent } from 'components/results/ResultsContent'
 import { useTypebot } from 'contexts/TypebotContext'
--- a/apps/builder/pages/typebots/[typebotId]/settings.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/settings.tsx
@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/layout'
+import { Flex } from '@chakra-ui/react'
 import { Seo } from 'components/Seo'
 import { SettingsContent } from 'layouts/settings/SettingsContent'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
--- a/apps/builder/pages/typebots/[typebotId]/share.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/share.tsx
@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/layout'
+import { Flex } from '@chakra-ui/react'
 import { Seo } from 'components/Seo'
 import { ShareContent } from 'components/share/ShareContent'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
--- a/apps/builder/pages/typebots/[typebotId]/theme.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/theme.tsx
@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/layout'
+import { Flex } from '@chakra-ui/react'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
 import { ThemeContent } from 'layouts/theme/ThemeContent'
--- a/apps/builder/pages/typebots/folders/[id].tsx
+++ b/apps/builder/pages/typebots/folders/[id].tsx
@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Stack } from '@chakra-ui/layout'
+import { Flex, Stack } from '@chakra-ui/react'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
 import { Seo } from 'components/Seo'
 import { FolderContent } from 'components/dashboard/FolderContent'
--- a/apps/builder/playwright.config.ts
+++ b/apps/builder/playwright.config.ts
@ -5,8 +5,6 @@ import path from 'path'
 require('dotenv').config({
  path: path.join(__dirname, 'playwright/.env'),
 })
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-require('dotenv').config({ path: path.join(__dirname, '.env.local') })

 const config: PlaywrightTestConfig = {
  globalSetup: require.resolve(path.join(__dirname, 'playwright/global-setup')),
--- a/apps/builder/playwright/.env.example
+++ b/apps/builder/playwright/.env.example
@ -1,4 +1,6 @@
 PLAYWRIGHT_BUILDER_TEST_BASE_URL=http://localhost:3000
+DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
+ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be generated here: https://www.allkeysgenerator.com/Random/Security-Encryption-Key-Generator.aspx)

 # SMTP Credentials (Generated on https://ethereal.email/)
 SMTP_HOST=smtp.ethereal.email
--- a/apps/builder/playwright/services/browser.ts
+++ b/apps/builder/playwright/services/browser.ts
@ -1,5 +1,18 @@
+import { Page } from '@playwright/test'
+
 export const refreshUser = async () => {
  await fetch('/api/auth/session?update')
  const event = new Event('visibilitychange')
  document.dispatchEvent(event)
 }
+
+export const mockSessionApiCalls = (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"}}',
+      })
+    }
+    return route.continue()
+  })
--- 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 { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 // Can't test the update features because of the auth mocking.
 test('should display user info properly', async ({ page }) => {
@ -7,7 +10,7 @@ test('should display user info properly', async ({ page }) => {
  await page.click('text=Settings & Members')
  const saveButton = page.locator('button:has-text("Save")')
  await expect(saveButton).toBeHidden()
-  await expect(
+  expect(
    page.locator('input[type="email"]').getAttribute('disabled')
  ).toBeDefined()
  await page.fill('#name', 'John Doe')
--- a/apps/builder/playwright/tests/bubbles/embed.spec.ts
+++ b/apps/builder/playwright/tests/bubbles/embed.spec.ts
@ -6,11 +6,13 @@ import {
 import { BubbleBlockType, defaultEmbedBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'

 const pdfSrc = 'https://www.orimi.com/pdf-test.pdf'
-const iframeCode = '<iframe src="https://typebot.io"></iframe>'
 const siteSrc = 'https://app.cal.com/baptistearno/15min'

+test.beforeEach(({ page }) => mockSessionApiCalls(page))
+
 test.describe.parallel('Embed bubble block', () => {
  test.describe('Content settings', () => {
    test('should import and parse embed correctly', async ({ page }) => {
--- a/apps/builder/playwright/tests/bubbles/image.spec.ts
+++ b/apps/builder/playwright/tests/bubbles/image.spec.ts
@ -7,10 +7,13 @@ import { BubbleBlockType, defaultImageBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import path from 'path'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'

 const unsplashImageSrc =
  'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'

+test.beforeEach(({ page }) => mockSessionApiCalls(page))
+
 test.describe.parallel('Image bubble block', () => {
  test.describe('Content settings', () => {
    test('should upload image file correctly', async ({ page }) => {
--- a/apps/builder/playwright/tests/bubbles/text.spec.ts
+++ b/apps/builder/playwright/tests/bubbles/text.spec.ts
@ -6,6 +6,9 @@ import {
 import { BubbleBlockType, defaultTextBubbleContent } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe('Text bubble block', () => {
  test('rich text features should work', async ({ page }) => {
@ -42,15 +45,13 @@ test.describe('Text bubble block', () => {
    await page.press('div[role="textbox"]', 'Shift+Enter')

    await page.type('div[role="textbox"]', 'My super link')
+    await page.waitForTimeout(300)
    await page.press('div[role="textbox"]', 'Shift+Meta+ArrowLeft')
-    await page.waitForTimeout(200)
-    page.on('dialog', async (dialog) => {
-      await dialog.accept('https://github.com')
-    })
    await page.click('[data-testid="link-button"]')
-
+    await page.fill('input[placeholder="Paste link"]', 'https://github.com')
+    await page.press('input[placeholder="Paste link"]', 'Enter')
    await page.press('div[role="textbox"]', 'Shift+Enter')
-    await page.click('button >> text=Variables')
+    await page.click('button[aria-label="Insert variable"]')
    await page.fill('[data-testid="variables-input"]', 'test')
    await page.click('text=Create "test"')

--- a/apps/builder/playwright/tests/bubbles/video.spec.ts
+++ b/apps/builder/playwright/tests/bubbles/video.spec.ts
@ -10,12 +10,15 @@ import {
 } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'

 const videoSrc =
  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4'
 const youtubeVideoSrc = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
 const vimeoVideoSrc = 'https://vimeo.com/649301125'

+test.beforeEach(({ page }) => mockSessionApiCalls(page))
+
 test.describe.parallel('Video bubble block', () => {
  test.describe('Content settings', () => {
    test('should import video url correctly', async ({ page }) => {
--- a/apps/builder/playwright/tests/collaboration.spec.ts
+++ b/apps/builder/playwright/tests/collaboration.spec.ts
@ -3,6 +3,7 @@ import cuid from 'cuid'
 import { CollaborationType, Plan, WorkspaceRole } from 'db'
 import prisma from 'libs/prisma'
 import { InputBlockType, defaultTextInputOptions } from 'models'
+import { mockSessionApiCalls } from 'playwright/services/browser'
 import {
  createFolder,
  createResults,
@ -10,6 +11,8 @@ import {
  parseDefaultGroupWithBlock,
 } from '../services/database'

+test.beforeEach(({ page }) => mockSessionApiCalls(page))
+
 test.describe('Typebot owner', () => {
  test('Can invite collaborators', async ({ page }) => {
    const typebotId = cuid()
--- a/apps/builder/playwright/tests/customDomains.spec.ts
+++ b/apps/builder/playwright/tests/customDomains.spec.ts
@ -7,6 +7,9 @@ import {
 } from '../services/database'
 import path from 'path'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test('should be able to connect custom domain', async ({ page }) => {
  const typebotId = cuid()
--- a/apps/builder/playwright/tests/dashboard.spec.ts
+++ b/apps/builder/playwright/tests/dashboard.spec.ts
@ -1,9 +1,12 @@
 import test, { expect, Page } from '@playwright/test'
 import cuid from 'cuid'
 import path from 'path'
+import { mockSessionApiCalls } from 'playwright/services/browser'
 import { createFolders, createTypebots } from '../services/database'
 import { deleteButtonInConfirmDialog } from '../services/selectorUtils'

+test.beforeEach(({ page }) => mockSessionApiCalls(page))
+
 test.describe('Dashboard page', () => {
  test('folders navigation should work', async ({ page }) => {
    await page.goto('/typebots')
--- a/apps/builder/playwright/tests/editor.spec.ts
+++ b/apps/builder/playwright/tests/editor.spec.ts
@ -8,6 +8,9 @@ import { defaultTextInputOptions, InputBlockType } from 'models'
 import path from 'path'
 import cuid from 'cuid'
 import { typebotViewer } from '../services/selectorUtils'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe.parallel('Editor', () => {
  test('Edges connection should work', async ({ page }) => {
--- a/apps/builder/playwright/tests/inputs/buttons.spec.ts
+++ b/apps/builder/playwright/tests/inputs/buttons.spec.ts
@ -8,6 +8,9 @@ import { defaultChoiceInputOptions, InputBlockType, ItemType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
 import path from 'path'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe.parallel('Buttons input block', () => {
  test('can edit button items', async ({ page }) => {
--- a/apps/builder/playwright/tests/inputs/date.spec.ts
+++ b/apps/builder/playwright/tests/inputs/date.spec.ts
@ -6,6 +6,9 @@ import {
 import { defaultDateInputOptions, InputBlockType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe('Date input block', () => {
  test('options should work', async ({ page }) => {
--- a/apps/builder/playwright/tests/inputs/email.spec.ts
+++ b/apps/builder/playwright/tests/inputs/email.spec.ts
@ -6,6 +6,9 @@ import {
 import { defaultEmailInputOptions, InputBlockType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe('Email input block', () => {
  test('options should work', async ({ page }) => {
@ -31,7 +34,10 @@ test.describe('Email input block', () => {
    await expect(typebotViewer(page).locator(`button`)).toBeDisabled()

    await page.click(`text=${defaultEmailInputOptions.labels.placeholder}`)
-    await page.fill('#placeholder', 'Your email...')
+    await page.fill(
+      `input[value="${defaultEmailInputOptions.labels.placeholder}"]`,
+      'Your email...'
+    )
    await expect(page.locator('text=Your email...')).toBeVisible()
    await page.fill('#button', 'Go')
    await page.fill(
--- a/apps/builder/playwright/tests/inputs/file.spec.ts
+++ b/apps/builder/playwright/tests/inputs/file.spec.ts
@ -8,6 +8,9 @@ import { defaultFileInputOptions, InputBlockType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
 import path from 'path'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe.configure({ mode: 'parallel' })

--- a/apps/builder/playwright/tests/inputs/number.spec.ts
+++ b/apps/builder/playwright/tests/inputs/number.spec.ts
@ -6,6 +6,9 @@ import {
 import { defaultNumberInputOptions, InputBlockType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe('Number input block', () => {
  test('options should work', async ({ page }) => {
--- a/apps/builder/playwright/tests/inputs/payment.spec.ts
+++ b/apps/builder/playwright/tests/inputs/payment.spec.ts
@ -6,6 +6,9 @@ import {
 import { defaultPaymentInputOptions, InputBlockType } from 'models'
 import cuid from 'cuid'
 import { stripePaymentForm, typebotViewer } from '../../services/selectorUtils'
+import { mockSessionApiCalls } from 'playwright/services/browser'
+
+test.beforeEach(({ page }) => mockSessionApiCalls(page))

 test.describe('Payment input block', () => {
  test('Can configure Stripe account', async ({ page }) => {
--- a/Show More
+++ b/Show More