fix(webhook): 🐛 Properly escape backslash and quotes

apps/builder/playwright/tests/settings.spec.ts

@@ -131,6 +131,9 @@ test.describe.parallel('Settings page', () => {
         }
       )
       await page.goto(`/typebots/${typebotId}/settings`)
+      await expect(
+        typebotViewer(page).locator('text="What\'s your name?"')
+      ).toBeVisible()
       await page.click('button:has-text("General")')
       await expect(page.locator('text=Pro')).toBeVisible()
       await page.click('text=Typebot.io branding')

apps/builder/playwright/tests/templates.spec.ts

@@ -5,6 +5,9 @@ import { typebotViewer } from '../services/selectorUtils'
 test.describe.parallel('Templates page', () => {
   test('From scratch should create a blank typebot', async ({ page }) => {
     await page.goto('/typebots/create')
+    await expect(
+      page.locator('button >> text="Settings & Members"')
+    ).toBeEnabled()
     await page.click('text=Start from scratch')
     await expect(page).toHaveURL(new RegExp(`/edit`))
   })

apps/viewer/pages/api/typebots/[typebotId]/blocks/[blockId]/executeWebhook.ts

@@ -143,13 +143,13 @@ export const executeWebhook =
       json:
         contentType !== 'x-www-form-urlencoded' && body
           ? safeJsonParse(
-              parseVariables(variables, { escapeLineBreaks: true })(body)
+              parseVariables(variables, { escapeForJson: true })(body)
             )
           : undefined,
       form:
         contentType === 'x-www-form-urlencoded' && body
           ? safeJsonParse(
-              parseVariables(variables, { escapeLineBreaks: true })(body)
+              parseVariables(variables, { escapeForJson: true })(body)
             )
           : undefined,
     }

packages/bot-engine/src/services/variable.ts

@@ -7,9 +7,9 @@ export const stringContainsVariable = (str: string): boolean =>
 export const parseVariables =
   (
     variables: Variable[],
-    options: { fieldToParse?: 'value' | 'id'; escapeLineBreaks?: boolean } = {
+    options: { fieldToParse?: 'value' | 'id'; escapeForJson?: boolean } = {
       fieldToParse: 'value',
-      escapeLineBreaks: false,
+      escapeForJson: false,
     }
   ) =>
   (text: string | undefined): string => {
@@ -23,12 +23,17 @@ export const parseVariables =
       if (options.fieldToParse === 'id') return variable.id
       const { value } = variable
       if (isNotDefined(value)) return ''
-      if (options.escapeLineBreaks)
-        return value.toString().replace(/\n/g, '\\n')
+      if (options.escapeForJson) return jsonParse(value.toString())
       return value.toString()
     })
   }
 
+const jsonParse = (str: string) =>
+  str
+    .replace(/\n/g, `\\n`)
+    .replace(/"/g, `\\"`)
+    .replace(/\\[^n"]/g, `\\\\ `)
+
 export const evaluateExpression = (variables: Variable[]) => (str: string) => {
   const evaluating = parseVariables(variables, { fieldToParse: 'id' })(
     str.includes('return ') ? str : `return ${str}`