⬆️ Upgrade dependencies

apps/builder/package.json

@@ -14,45 +14,45 @@
   },
   "dependencies": {
     "@chakra-ui/anatomy": "^2.1.1",
-    "@chakra-ui/react": "2.5.5",
+    "@chakra-ui/react": "2.6.0",
     "@chakra-ui/theme-tools": "^2.0.16",
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@emotion/react": "11.10.6",
-    "@emotion/styled": "11.10.6",
+    "@emotion/react": "11.10.8",
+    "@emotion/styled": "11.10.8",
     "@faire/mjml-react": "3.2.0",
-    "@giphy/js-fetch-api": "4.8.1",
+    "@giphy/js-fetch-api": "4.9.0",
     "@giphy/js-types": "4.4.0",
-    "@giphy/react-components": "6.8.1",
+    "@giphy/react-components": "6.9.0",
     "@googleapis/drive": "5.0.2",
     "@lezer/css": "^1.1.1",
     "@paralleldrive/cuid2": "2.2.0",
-    "@sentry/nextjs": "7.46.0",
-    "@stripe/stripe-js": "1.52.0",
-    "@tanstack/react-query": "^4.28.0",
-    "@tanstack/react-table": "8.8.5",
-    "@trpc/client": "10.18.0",
-    "@trpc/next": "10.18.0",
-    "@trpc/react-query": "10.18.0",
-    "@trpc/server": "10.18.0",
+    "@sentry/nextjs": "7.50.0",
+    "@stripe/stripe-js": "1.52.1",
+    "@tanstack/react-query": "^4.29.5",
+    "@tanstack/react-table": "8.9.0",
+    "@trpc/client": "10.23.0",
+    "@trpc/next": "10.23.0",
+    "@trpc/react-query": "10.23.0",
+    "@trpc/server": "10.23.0",
     "@typebot.io/emails": "workspace:*",
     "@typebot.io/js": "workspace:*",
     "@typebot.io/next-international": "0.3.8",
     "@typebot.io/react": "workspace:*",
-    "@udecode/plate-basic-marks": "20.4.0",
-    "@udecode/plate-common": "^20.4.0",
-    "@udecode/plate-core": "20.4.0",
-    "@udecode/plate-link": "20.4.1",
-    "@udecode/plate-serializer-html": "20.4.0",
-    "@udecode/plate-ui-link": "20.4.1",
-    "@udecode/plate-ui-toolbar": "20.4.0",
-    "@uiw/codemirror-extensions-langs": "^4.19.11",
-    "@uiw/codemirror-theme-github": "^4.19.11",
-    "@uiw/codemirror-theme-tokyo-night": "^4.19.11",
-    "@uiw/react-codemirror": "^4.19.11",
-    "@use-gesture/react": "^10.2.25",
-    "aws-sdk": "2.1348.0",
+    "@udecode/plate-basic-marks": "21.0.0",
+    "@udecode/plate-common": "^21.0.0",
+    "@udecode/plate-core": "21.0.0",
+    "@udecode/plate-link": "21.0.0",
+    "@udecode/plate-serializer-html": "21.0.0",
+    "@udecode/plate-ui-link": "21.0.0",
+    "@udecode/plate-ui-toolbar": "21.0.0",
+    "@uiw/codemirror-extensions-langs": "^4.19.16",
+    "@uiw/codemirror-theme-github": "^4.19.16",
+    "@uiw/codemirror-theme-tokyo-night": "^4.19.16",
+    "@uiw/react-codemirror": "^4.19.16",
+    "@use-gesture/react": "^10.2.26",
+    "aws-sdk": "2.1369.0",
     "browser-image-compression": "2.0.2",
     "canvas-confetti": "1.6.0",
     "codemirror": "6.0.1",
@@ -61,66 +61,65 @@
     "emojilib": "3.0.10",
     "focus-visible": "5.2.0",
     "framer-motion": "10.3.0",
-    "google-auth-library": "8.7.0",
+    "google-auth-library": "8.8.0",
     "google-spreadsheet": "3.3.0",
     "got": "12.6.0",
     "htmlparser2": "8.0.2",
-    "immer": "9.0.21",
+    "immer": "10.0.1",
     "js-video-url-parser": "0.5.1",
     "jsonwebtoken": "9.0.0",
     "micro": "10.0.1",
     "micro-cors": "0.1.1",
-    "minio": "7.0.33",
-    "next": "13.2.4",
-    "next-auth": "4.21.0",
+    "minio": "7.1.0",
+    "next": "13.3.4",
+    "next-auth": "4.22.1",
     "nextjs-cors": "^2.1.2",
     "nodemailer": "6.9.1",
     "nprogress": "0.2.0",
     "papaparse": "5.4.1",
-    "posthog-node": "2.6.0",
-    "prettier": "2.8.7",
+    "posthog-node": "3.1.1",
+    "prettier": "2.8.8",
     "qs": "6.11.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "slate": "0.91.4",
-    "slate-history": "0.86.0",
+    "slate": "0.94.0",
+    "slate-history": "0.93.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.92.0",
-    "stripe": "11.17.0",
-    "styled-components": "5.3.9",
+    "slate-react": "0.94.0",
+    "stripe": "12.3.0",
+    "styled-components": "5.3.10",
     "svg-round-corners": "0.4.1",
-    "swr": "2.1.2",
+    "swr": "2.1.5",
     "tinycolor2": "1.6.0",
     "trpc-openapi": "1.1.2",
     "unsplash-js": "^7.0.15",
-    "use-debounce": "9.0.3"
+    "use-debounce": "9.0.4"
   },
   "devDependencies": {
-    "@babel/core": "7.21.4",
-    "@chakra-ui/styled-system": "2.8.0",
-    "@playwright/test": "1.32.1",
+    "@chakra-ui/styled-system": "2.9.0",
+    "@playwright/test": "1.33.0",
     "@typebot.io/lib": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
     "@typebot.io/schemas": "workspace:*",
     "@typebot.io/tsconfig": "workspace:*",
     "@types/canvas-confetti": "1.6.0",
     "@types/google-spreadsheet": "3.3.1",
-    "@types/jsonwebtoken": "9.0.1",
+    "@types/jsonwebtoken": "9.0.2",
     "@types/micro-cors": "0.1.3",
     "@types/minio": "7.0.18",
-    "@types/node": "18.15.11",
+    "@types/node": "18.16.3",
     "@types/nodemailer": "6.4.7",
     "@types/nprogress": "0.2.0",
     "@types/papaparse": "5.3.7",
     "@types/prettier": "2.7.2",
     "@types/qs": "6.9.7",
-    "@types/react": "18.0.32",
+    "@types/react": "18.2.0",
     "@types/tinycolor2": "1.4.3",
     "dotenv": "16.0.3",
-    "eslint": "8.37.0",
+    "eslint": "8.39.0",
     "eslint-config-custom": "workspace:*",
-    "superjson": "^1.12.2",
-    "typescript": "5.0.3",
+    "superjson": "^1.12.3",
+    "typescript": "5.0.4",
     "zod": "3.21.4"
   }
 }

apps/builder/src/features/billing/billing.spec.ts

@@ -249,9 +249,8 @@ test('custom plans should work', async ({ page }) => {
     description: 'Description of the deal',
   })
 
-  await page.goto('/api/stripe/custom-plan-checkout')
+  await page.goto('/typebots?claimCustomPlan=true')
 
   await expect(page.getByRole('list').getByText('$239.00')).toBeVisible()
   await expect(page.getByText('Subscribe to Acme custom plan')).toBeVisible()
-  await expect(page.getByText('Description of the deal')).toBeVisible()
 })

apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx

@@ -73,8 +73,14 @@ const TextBubbleEditorContent = ({
     setIsVariableDropdownOpen(false)
     if (!rememberedSelection.current || !variable) return
     ReactEditor.focus(editor as unknown as ReactEditor)
-    Transforms.select(editor as BaseEditor, rememberedSelection.current)
-    Transforms.insertText(editor as BaseEditor, '{{' + variable.name + '}}')
+    Transforms.select(
+      editor as unknown as BaseEditor,
+      rememberedSelection.current
+    )
+    Transforms.insertText(
+      editor as unknown as BaseEditor,
+      '{{' + variable.name + '}}'
+    )
   }
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {

apps/builder/src/features/editor/providers/typebotActions/blocks.ts

@@ -6,9 +6,8 @@ import {
   BlockIndices,
   Webhook,
 } from '@typebot.io/schemas'
-import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotProvider'
-import produce from 'immer'
+import { produce, Draft } from 'immer'
 import { cleanUpEdgeDraft, deleteEdgeDraft } from './edges'
 import { createId } from '@paralleldrive/cuid2'
 import { byId, isWebhookBlock, blockHasItems } from '@typebot.io/lib'
@@ -94,13 +93,13 @@ export const blocksAction = (
 
 const removeBlockFromGroup =
   ({ groupIndex, blockIndex }: BlockIndices) =>
-  (typebot: WritableDraft<Typebot>) => {
+  (typebot: Draft<Typebot>) => {
     if (typebot.groups[groupIndex].blocks[blockIndex].type === 'start') return
     typebot.groups[groupIndex].blocks.splice(blockIndex, 1)
   }
 
 export const createBlockDraft = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   block: DraggableBlock | DraggableBlockType,
   groupId: string,
   { groupIndex, blockIndex }: BlockIndices,
@@ -126,7 +125,7 @@ export const createBlockDraft = (
 }
 
 const createNewBlock = async (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   type: DraggableBlockType,
   groupId: string,
   { groupIndex, blockIndex }: BlockIndices,
@@ -139,7 +138,7 @@ const createNewBlock = async (
 }
 
 const moveBlockToGroup = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   block: DraggableBlock,
   groupId: string,
   { groupIndex, blockIndex }: BlockIndices
@@ -205,13 +204,13 @@ export const duplicateBlockDraft =
   }
 
 export const deleteGroupDraft =
-  (typebot: WritableDraft<Typebot>) => (groupIndex: number) => {
+  (typebot: Draft<Typebot>) => (groupIndex: number) => {
     if (typebot.groups[groupIndex].blocks.at(0)?.type === 'start') return
     cleanUpEdgeDraft(typebot, typebot.groups[groupIndex].id)
     typebot.groups.splice(groupIndex, 1)
   }
 
-export const removeEmptyGroups = (typebot: WritableDraft<Typebot>) => {
+export const removeEmptyGroups = (typebot: Draft<Typebot>) => {
   const emptyGroupsIndices = typebot.groups.reduce<number[]>(
     (arr, group, idx) => {
       group.blocks.length === 0 && arr.push(idx)

apps/builder/src/features/editor/providers/typebotActions/edges.ts

@@ -6,9 +6,8 @@ import {
   ItemIndices,
   Block,
 } from '@typebot.io/schemas'
-import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotProvider'
-import { produce } from 'immer'
+import { Draft, produce } from 'immer'
 import { byId, isDefined, blockHasItems } from '@typebot.io/lib'
 import { createId } from '@paralleldrive/cuid2'
 
@@ -71,7 +70,7 @@ export const edgesAction = (setTypebot: SetTypebot): EdgesActions => ({
 })
 
 const addEdgeIdToBlock = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   edgeId: string,
   { groupIndex, blockIndex }: BlockIndices
 ) => {
@@ -79,7 +78,7 @@ const addEdgeIdToBlock = (
 }
 
 const addEdgeIdToItem = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   edgeId: string,
   { groupIndex, blockIndex, itemIndex }: ItemIndices
 ) =>
@@ -87,20 +86,14 @@ const addEdgeIdToItem = (
     itemIndex
   ].outgoingEdgeId = edgeId)
 
-export const deleteEdgeDraft = (
-  typebot: WritableDraft<Typebot>,
-  edgeId: string
-) => {
+export const deleteEdgeDraft = (typebot: Draft<Typebot>, edgeId: string) => {
   const edgeIndex = typebot.edges.findIndex(byId(edgeId))
   if (edgeIndex === -1) return
   deleteOutgoingEdgeIdProps(typebot, edgeId)
   typebot.edges.splice(edgeIndex, 1)
 }
 
-const deleteOutgoingEdgeIdProps = (
-  typebot: WritableDraft<Typebot>,
-  edgeId: string
-) => {
+const deleteOutgoingEdgeIdProps = (typebot: Draft<Typebot>, edgeId: string) => {
   const edge = typebot.edges.find(byId(edgeId))
   if (!edge) return
   const fromGroupIndex = typebot.groups.findIndex(byId(edge.from.groupId))
@@ -125,7 +118,7 @@ const deleteOutgoingEdgeIdProps = (
 }
 
 export const cleanUpEdgeDraft = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   deletedNodeId: string
 ) => {
   const edgesToDelete = typebot.edges.filter((edge) =>
@@ -141,7 +134,7 @@ export const cleanUpEdgeDraft = (
 }
 
 const removeExistingEdge = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   edge: Omit<Edge, 'id'>
 ) => {
   typebot.edges = typebot.edges.filter((e) =>

apps/builder/src/features/editor/providers/typebotActions/items.ts

@@ -11,11 +11,10 @@ import {
   ButtonItem,
 } from '@typebot.io/schemas'
 import { SetTypebot } from '../TypebotProvider'
-import produce from 'immer'
+import { Draft, produce } from 'immer'
 import { cleanUpEdgeDraft } from './edges'
 import { byId, blockHasItems } from '@typebot.io/lib'
 import { createId } from '@paralleldrive/cuid2'
-import { WritableDraft } from 'immer/dist/types/types-external'
 
 type NewItem = Pick<
   ConditionItem | ButtonItem,
@@ -30,11 +29,7 @@ export type ItemsActions = {
   deleteItem: (indices: ItemIndices) => void
 }
 
-const createItem = (
-  block: WritableDraft<Block>,
-  item: NewItem,
-  itemIndex: number
-) => {
+const createItem = (block: Draft<Block>, item: NewItem, itemIndex: number) => {
   switch (block.type) {
     case LogicBlockType.CONDITION: {
       if (item.type === ItemType.CONDITION) {

apps/builder/src/features/editor/providers/typebotActions/variables.ts

@@ -1,7 +1,6 @@
 import { Typebot, Variable } from '@typebot.io/schemas'
-import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotProvider'
-import { produce } from 'immer'
+import { Draft, produce } from 'immer'
 
 export type VariablesActions = {
   createVariable: (variable: Variable) => void
@@ -39,7 +38,7 @@ export const variablesAction = (setTypebot: SetTypebot): VariablesActions => ({
 })
 
 export const deleteVariableDraft = (
-  typebot: WritableDraft<Typebot>,
+  typebot: Draft<Typebot>,
   variableId: string
 ) => {
   const index = typebot.variables.findIndex((v) => v.id === variableId)