build: add pnpm

.dockerignore

@@ -4,4 +4,11 @@ node_modules
 npm-debug.log
 README.md
 .next
-.git
+.git
+.github
+.turbo
+
+landing-page
+docs
+scripts
+wordpress

.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 }}

.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
+      - uses: pnpm/action-setup@v2.2.2
-        with:
+      - run: pnpm i --frozen-lockfile
-          node-version: 16
+      - run: pnpm test
-      - run: yarn
+      - run: pnpm build
-      - run: yarn test
-      - run: yarn build
       - uses: JS-DevTools/npm-publish@v1
         with:
           package: './packages/typebot-js/package.json'

.github/workflows/publish_docker_images.yml

@@ -9,8 +9,8 @@ on:
     branches: [main]
 
 jobs:
-  push_images_to_docker_hub:
+  push_builder:
-    name: Push images to Docker Hub
+    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

.gitignore

@@ -5,7 +5,6 @@ node_modules
 workspace.code-workspace
 .DS_Store
 .turbo
-yarn-error.log
 authenticatedState.json
 playwright-report
 dist

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern[]=*prisma*

Dockerfile

@@ -1,51 +1,37 @@
-# https://github.com/vercel/turborepo/issues/215#issuecomment-1027058056
+FROM node:18-slim AS base
-FROM node:16-slim AS base
 WORKDIR /app
 ARG SCOPE
 ENV SCOPE=${SCOPE}
-
+RUN npm --global install pnpm
-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
 
 FROM base AS builder
-SHELL ["/bin/bash", "-o", "pipefail", "-c"]
+RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl git
-COPY --from=installer /app/ .
+COPY pnpm-lock.yaml .npmrc pnpm-workspace.yaml ./
-COPY --from=pruner /app/out/full/ .
+RUN pnpm fetch
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.production
+ADD . ./
-COPY ./apps/${SCOPE}/.env.docker ./apps/${SCOPE}/.env.local
+RUN pnpm install -r --offline
-RUN apt-get -qy update && apt-get -qy --no-install-recommends install openssl
+RUN pnpm turbo run build --filter=${SCOPE}...
-RUN yarn turbo run build --scope="${SCOPE}" --include-dependencies --no-deps
-RUN find . -name node_modules | xargs rm -rf
 
 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

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

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=

apps/builder/components/auth/DividerWithText.tsx

@@ -1,5 +1,11 @@
-import { FlexProps, Flex, Box, Divider, Text } from '@chakra-ui/react'
+import {
-import { useColorModeValue } from '@chakra-ui/system'
+  FlexProps,
+  Flex,
+  Box,
+  Divider,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react'
 import React from 'react'
 
 export const DividerWithText = (props: FlexProps) => {

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,

apps/builder/components/dashboard/annoucements/AnnoucementBanner.tsx

@@ -1,5 +1,4 @@
-import { Flex, HStack, StackProps } from '@chakra-ui/layout'
+import { CloseButton, Flex, HStack, StackProps } from '@chakra-ui/react'
-import { CloseButton } from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
 
 type VerifyEmailBannerProps = { id: string } & StackProps

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}

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"

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<TableData>
-  headerGroup: HeaderGroup<any>
 }
 
 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()}

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

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,
+  useReactTable,
-  useTableInstance,
   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'
-
+import { CellValueType, TableData } from 'services/typebots/results'
-type RowType = {
-  id: string
-  [key: string]:
-    | {
-        plainText: string
-        element?: JSX.Element | undefined
-      }
-    | string
-}
-const table = createTable().setRowType<RowType>()
 
 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(),
+              checked: table.getIsAllRowsSelected(),
-              indeterminate: instance.getIsSomeRowsSelected(),
+              indeterminate: table.getIsSomeRowsSelected(),
-              onChange: instance.getToggleAllRowsSelectedHandler(),
+              onChange: table.getToggleAllRowsSelectedHandler(),
             }}
           />
         ),
@@ -118,26 +108,24 @@ export const ResultsTable = ({
             />
           </div>
         ),
-      }),
+      },
-      ...resultHeader.map((header) =>
+      ...resultHeader.map<ColumnDef<TableData>>((header) => ({
-        table.createDataColumn(header.label, {
+        id: header.id,
-          id: header.id,
+        accessorKey: header.label,
-          size: header.isLong ? 400 : 200,
+        size: header.isLong ? 400 : 200,
-          cell: (info) => {
+        header: () => (
-            const value = info.getValue()
+          <HStack overflow="hidden" data-testid={`${header.label} header`}>
-            if (!value) return
+            <HeaderIcon header={header} />
-            if (typeof value === 'string') return ''
+            <Text>{header.label}</Text>
-            return value.element || value.plainText || ''
+          </HStack>
-          },
+        ),
-          header: () => (
+        cell: (info) => {
-            <HStack overflow="hidden" data-testid={`${header.label} header`}>
+          const value = info.getValue() as CellValueType | undefined
-              <HeaderIcon header={header} />
+          if (!value) return
-              <Text>{header.label}</Text>
+          return value.element || value.plainText || ''
-            </HStack>
+        },
-          ),
+      })),
-        })
+      {
-      ),
-      table.createDisplayColumn({
         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,

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<TableData>
-  row: RowProps<any>
   isSelected: boolean
   bottomElement?: React.MutableRefObject<HTMLDivElement | null>
   onExpandButtonClick: () => void

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}
             />

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       button,
       proactiveMessage,

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       heightLabel,
       widthLabel,

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-      ? env('VIEWER_URL')
-      : env('VIEWER_INTERNAL_URL')
   }/${typebot?.publicId}`
   const code = `<iframe src="${src}" width="${widthLabel}" height="${heightLabel}" />`
 

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       delay,
     }),

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       delay,
     }),
@@ -124,9 +120,7 @@ export const ChatReactCode = ({
   const snippet = prettier.format(
     parseBubbleSnippet({
       url: `${
-        isEmpty(env('VIEWER_INTERNAL_URL'))
+        env('VIEWER_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-          ? env('VIEWER_URL')
-          : env('VIEWER_INTERNAL_URL')
       }/${typebot?.publicId}`,
       button,
       proactiveMessage,

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_INTERNAL_URL') ??
-                          ? env('VIEWER_URL')
+                          getViewerUrl({ isBuilder: true })}
-                          : env('VIEWER_INTERNAL_URL')}
                       </Text>
                     </Stack>
                   </HStack>

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
     }/${publicId}`,
   })
   const headCode = `${typebotJsHtml}

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_INTERNAL_URL') ??
-                      ? env('VIEWER_URL')
+                    getViewerUrl({ isBuilder: true })
-                      : env('VIEWER_INTERNAL_URL')
                   }/${publicId}`}
                 />
                 <InputRightElement width="4.5rem">
                   <CopyButton
                     textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
+                      env('VIEWER_INTERNAL_URL') ??
-                        ? env('VIEWER_URL')
+                      getViewerUrl({ isBuilder: true })
-                        : env('VIEWER_INTERNAL_URL')
                     }/${publicId}`}
                   />
                 </InputRightElement>

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_INTERNAL_URL') ?? getViewerUrl({ isBuilder: true })
-        ? env('VIEWER_URL')
-        : env('VIEWER_INTERNAL_URL')
     }/${publicId}`,
   })
   const headCode = prettier.format(

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_INTERNAL_URL') ??
-                      ? env('VIEWER_URL')
+                    getViewerUrl({ isBuilder: true })
-                      : env('VIEWER_INTERNAL_URL')
                   }/${publicId}`}
                 />
                 <InputRightElement width="4.5rem">
                   <CopyButton
                     textToCopy={`${
-                      isEmpty(env('VIEWER_INTERNAL_URL'))
+                      env('VIEWER_INTERNAL_URL') ??
-                        ? env('VIEWER_URL')
+                      getViewerUrl({ isBuilder: true })
-                        : env('VIEWER_INTERNAL_URL')
                     }/${publicId}`}
                   />
                 </InputRightElement>

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(

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,

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'

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()
   }

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}>
+      <IconButton
-        Variables
+        aria-label="Insert variable"
-      </Button>
+        size="sm"
+        onMouseDown={handleVariablesButtonMouseDown}
+        icon={<UserIcon />}
+      />
       <span data-testid="bold-button">
         <MarkToolbarButton
           type={getPluginType(editor, MARK_BOLD)}

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,22 +1,12 @@
-import { ChangeEvent, useState } from 'react'
+import { useState } from 'react'
-import {
+import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
-  Button,
-  Flex,
-  HStack,
-  Stack,
-  Text,
-  Input as ClassicInput,
-  SimpleGrid,
-  GridItem,
-} 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>

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>
+  )
+}

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

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(

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(() => {

apps/builder/components/shared/TypebotHeader/EditableTypebotName.tsx

@@ -1,5 +1,9 @@
-import { Editable, EditablePreview, EditableInput } from '@chakra-ui/editable'
+import {
-import { Tooltip } from '@chakra-ui/tooltip'
+  Editable,
+  EditablePreview,
+  EditableInput,
+  Tooltip,
+} from '@chakra-ui/react'
 import React, { useEffect, useState } from 'react'
 
 type EditableProps = {

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 ?? []

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

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}
               />

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: {
+  tableData: TableData[]
-    id: string
-    [key: string]: { plainText: string; element?: JSX.Element } | string
-  }[]
   onDeleteResults: (totalResultsDeleted: number) => void
   fetchMore: () => void
   mutate: KeyedMutator<

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 {

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>>
-}>({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  setDraggedTypebot: () => {
+  // @ts-ignore
-    console.log('Not implemented')
+}>({})
-  },
-  setMouseOverFolderId: () => {
-    console.log('Not implemented')
-  },
-})
 
 export const TypebotDndContext = ({ children }: { children: ReactNode }) => {
   const [draggedTypebot, setDraggedTypebot] = useState<TypebotInDashboard>()

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>
   )

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>
   )

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: {

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 })

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',
-    })
-  }
-}

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)
+  ? withSentryConfig(nextConfig, sentryWebpackPluginOptions)
-  : moduleExports
+  : nextConfig

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": "pnpm playwright test",
-    "test:open": "PWDEBUG=1 yarn playwright test"
+    "test:open": "PWDEBUG=1 pnpm playwright test"
-  },
-  "msw": {
-    "workerDirectory": "public"
   },
   "dependencies": {
-    "@chakra-ui/css-reset": "^2.0.0",
+    "@chakra-ui/css-reset": "2.0.3",
-    "@chakra-ui/react": "^2.0.0",
+    "@chakra-ui/react": "^2.2.6",
-    "@codemirror/basic-setup": "^0.20.0",
+    "@codemirror/lang-css": "^6.0.0",
-    "@codemirror/lang-css": "^0.20.0",
+    "@codemirror/lang-html": "^6.1.0",
-    "@codemirror/lang-html": "^0.20.0",
+    "@codemirror/lang-javascript": "^6.0.2",
-    "@codemirror/lang-javascript": "^0.20.0",
+    "@codemirror/lang-json": "^6.0.0",
-    "@codemirror/lang-json": "^0.20.0",
+    "@codemirror/lint": "^6.0.0",
-    "@codemirror/text": "^0.19.6",
+    "@codemirror/state": "6.1.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
-    "@emotion/react": "^11.9.0",
+    "@dnd-kit/utilities": "^3.2.0",
-    "@emotion/styled": "^11.8.1",
+    "@emotion/react": "^11.10.0",
-    "@giphy/js-fetch-api": "^4.1.2",
+    "@emotion/styled": "^11.10.0",
-    "@giphy/js-types": "^4.1.0",
+    "@giphy/js-fetch-api": "4.4.0",
-    "@giphy/react-components": "^5.7.0",
+    "@giphy/js-types": "^4.2.1",
-    "@googleapis/drive": "^2.3.0",
+    "@giphy/react-components": "6.0.0",
-    "@sentry/nextjs": "^6.19.7",
+    "@googleapis/drive": "^3.0.1",
-    "@stripe/stripe-js": "^1.29.0",
+    "@sentry/nextjs": "7.9.0",
-    "@tanstack/react-table": "^8.0.13",
+    "@stripe/stripe-js": "1.35.0",
-    "@udecode/plate-basic-marks": "^13.1.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-core": "16.0.0",
-    "@udecode/plate-link": "^13.1.0",
+    "@udecode/plate-link": "16.0.0",
-    "@udecode/plate-ui-link": "^13.1.0",
+    "@udecode/plate-serializer-html": "16.0.0",
-    "@udecode/plate-ui-toolbar": "^13.1.0",
+    "@udecode/plate-ui-link": "16.0.0",
-    "aws-sdk": "^2.1152.0",
+    "@udecode/plate-ui-toolbar": "16.0.0",
-    "bot-engine": "*",
+    "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",
+    "dequal": "^2.0.3",
-    "emoji-mart": "^3.0.1",
+    "emojilib": "3.0.7",
     "focus-visible": "^5.2.0",
-    "framer-motion": "6.3.3",
+    "framer-motion": "7.0.0",
-    "google-auth-library": "^8.0.2",
+    "google-auth-library": "^8.1.1",
-    "google-spreadsheet": "^3.2.0",
+    "google-spreadsheet": "^3.3.0",
-    "got": "^12.0.4",
+    "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",
+    "kbar": "^0.1.0-beta.36",
-    "micro": "^9.3.4",
+    "micro": "9.4.1",
     "micro-cors": "^0.1.1",
-    "minio": "^7.0.28",
+    "minio": "7.0.30",
-    "models": "*",
+    "next": "12.2.4",
-    "next": "^12.1.6",
+    "next-auth": "4.10.3",
-    "next-auth": "4.9.0",
+    "nodemailer": "^6.7.7",
-    "nodemailer": "^6.7.5",
     "nprogress": "^0.2.0",
     "papaparse": "^5.3.2",
-    "prettier": "^2.6.2",
+    "prettier": "2.7.1",
-    "qs": "^6.10.3",
+    "qs": "^6.11.0",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.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",
+    "slate-react": "0.82.0",
-    "stripe": "^9.4.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": "*",
+    "typebot-js": "workspace:*",
-    "use-debounce": "^8.0.1",
+    "use-debounce": "8.0.3"
-    "utils": "*"
   },
   "devDependencies": {
-    "@playwright/test": "^1.22.0",
+    "@babel/core": "7.18.10",
-    "@types/aws-sdk": "^2.7.0",
+    "@playwright/test": "1.24.2",
-    "@types/canvas-confetti": "^1.4.2",
+    "@types/canvas-confetti": "^1.4.3",
-    "@types/emoji-mart": "^3.0.9",
+    "@types/google-spreadsheet": "^3.3.0",
-    "@types/google-spreadsheet": "^3.2.1",
     "@types/jsonwebtoken": "8.5.8",
     "@types/micro-cors": "^0.1.2",
     "@types/minio": "^7.0.13",
-    "@types/node": "^17.0.33",
+    "@types/node": "18.6.5",
-    "@types/nodemailer": "^6.4.4",
+    "@types/nodemailer": "6.4.5",
     "@types/nprogress": "^0.2.0",
-    "@types/papaparse": "^5.3.2",
+    "@types/papaparse": "5.3.3",
-    "@types/prettier": "^2.6.1",
+    "@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": "8.21.0",
-    "eslint-config-next": "12.1.6",
+    "eslint-config-next": "12.2.4",
-    "msw": "^0.43.1",
+    "eslint-plugin-react": "^7.30.1",
-    "typescript": "^4.6.4"
+    "models": "workspace:*",
+    "typescript": "^4.7.4",
+    "utils": "workspace:*"
   }
 }

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)) {

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,

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,

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

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 {}

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: {

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)',

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 firstParam = req.query.firstParam?.toString()
-    const secondParam = req.query.secondParam.toString()
+    const secondParam = req.query.secondParam?.toString()
     const customHeader = req.headers['custom-typebot']
     const { body } = req
     if (

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 { getAuthenticatedUser } from 'services/api/utils'
-import { badRequest, generatePresignedUrl, methodNotAllowed } from '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 })
+    const user = await getAuthenticatedUser(req)
-    if (!session) {
+    if (!user) return notAuthenticated(res)
-      res.status(401)
-      return
-    }
 
     if (
       !process.env.S3_ENDPOINT ||

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

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,

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,

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

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),

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 🤝",

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,

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 },

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: {

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

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 },
     })

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'

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

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'
@@ -34,7 +33,7 @@ const ResultsPage = () => {
       stats: { ...stats, totalStarts: stats.totalStarts - total },
     })
   }
-  
+
   return (
     <Flex overflow="hidden" h="100vh" flexDir="column">
       <Seo

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'

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'

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'

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'

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')),

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

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()
+  })

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')

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 }) => {

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 }) => {

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"')
 

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 }) => {

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

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

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')

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 }) => {

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 }) => {

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 }) => {

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(

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' })
 

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 }) => {

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 }) => {