feat(bot): ✨ Support variables in buttons

apps/builder/playwright/fixtures/typebots/inputs/variableButton.json

@@ -0,0 +1,132 @@
+{
+  "id": "cl4fr6kca0000p11abjka8lvd",
+  "createdAt": "2022-06-15T15:33:43.930Z",
+  "updatedAt": "2022-06-15T15:36:44.821Z",
+  "icon": null,
+  "name": "My typebot",
+  "publishedTypebotId": null,
+  "folderId": null,
+  "groups": [
+    {
+      "id": "block0",
+      "title": "Group #0",
+      "blocks": [
+        {
+          "id": "block0",
+          "type": "start",
+          "label": "Start",
+          "groupId": "block0",
+          "outgoingEdgeId": "edge1"
+        }
+      ],
+      "graphCoordinates": { "x": 0, "y": 0 }
+    },
+    {
+      "id": "block1",
+      "title": "Group #1",
+      "blocks": [
+        {
+          "id": "cl4fr6rgf0000396ml1ai0t8v",
+          "type": "Set variable",
+          "groupId": "block1",
+          "options": {
+            "variableId": "vcl4fr8f8l000b396m6gsbnrmd",
+            "expressionToEvaluate": "Variable item"
+          }
+        },
+        {
+          "id": "block1",
+          "type": "choice input",
+          "items": [
+            {
+              "id": "choice1",
+              "type": 0,
+              "blockId": "block1",
+              "content": "Item 1"
+            },
+            {
+              "id": "cl4fr7e6i0003396mkh7mol65",
+              "type": 0,
+              "blockId": "block1",
+              "content": "{{Item 2}}",
+              "outgoingEdgeId": "cl4fr80900009396my6euvunj"
+            },
+            {
+              "id": "cl4fr7lr90004396mh9vw8wnq",
+              "type": 0,
+              "blockId": "block1",
+              "content": "Item 3"
+            }
+          ],
+          "groupId": "block1",
+          "options": { "buttonLabel": "Send", "isMultipleChoice": false }
+        }
+      ],
+      "graphCoordinates": { "x": 199, "y": 210 }
+    },
+    {
+      "id": "cl4fr7wsv0007396m7xgbeymx",
+      "title": "Group #2",
+      "blocks": [
+        {
+          "id": "cl4fr7wsv0008396mf9oi9lvi",
+          "type": "text",
+          "content": {
+            "html": "<div>Ok great!</div>",
+            "richText": [
+              { "type": "p", "children": [{ "text": "Ok great!" }] }
+            ],
+            "plainText": "Ok great!"
+          },
+          "groupId": "cl4fr7wsv0007396m7xgbeymx"
+        }
+      ],
+      "graphCoordinates": { "x": 603, "y": 195 }
+    }
+  ],
+  "variables": [{ "id": "vcl4fr8f8l000b396m6gsbnrmd", "name": "Item 2" }],
+  "edges": [
+    {
+      "id": "edge1",
+      "to": { "groupId": "block1" },
+      "from": { "blockId": "block0", "groupId": "block0" }
+    },
+    {
+      "id": "cl4fr80900009396my6euvunj",
+      "to": { "groupId": "cl4fr7wsv0007396m7xgbeymx" },
+      "from": {
+        "itemId": "cl4fr7e6i0003396mkh7mol65",
+        "blockId": "block1",
+        "groupId": "block1"
+      }
+    }
+  ],
+  "theme": {
+    "chat": {
+      "inputs": {
+        "color": "#303235",
+        "backgroundColor": "#FFFFFF",
+        "placeholderColor": "#9095A0"
+      },
+      "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+      "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+      "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+    },
+    "general": { "font": "Open Sans", "background": { "type": "None" } }
+  },
+  "settings": {
+    "general": {
+      "isBrandingEnabled": true,
+      "isInputPrefillEnabled": true,
+      "isHideQueryParamsEnabled": true,
+      "isNewResultOnRefreshEnabled": false
+    },
+    "metadata": {
+      "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+    },
+    "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+  },
+  "publicId": null,
+  "customDomain": null,
+  "workspaceId": "proWorkspace"
+}

apps/builder/playwright/tests/inputs/buttons.spec.ts

@@ -1,11 +1,13 @@
 import test, { expect } from '@playwright/test'
 import {
   createTypebots,
+  importTypebotInDatabase,
   parseDefaultGroupWithBlock,
 } from '../../services/database'
 import { defaultChoiceInputOptions, InputBlockType, ItemType } from 'models'
 import { typebotViewer } from '../../services/selectorUtils'
 import cuid from 'cuid'
+import path from 'path'
 
 test.describe.parallel('Buttons input block', () => {
   test('can edit button items', async ({ page }) => {
@@ -67,3 +69,30 @@ test.describe.parallel('Buttons input block', () => {
     ).toBeVisible()
   })
 })
+
+test('Variable buttons should work', async ({ page }) => {
+  const typebotId = cuid()
+  await importTypebotInDatabase(
+    path.join(__dirname, '../../fixtures/typebots/inputs/variableButton.json'),
+    {
+      id: typebotId,
+    }
+  )
+
+  await page.goto(`/typebots/${typebotId}/edit`)
+  await page.click('text=Preview')
+  await typebotViewer(page).locator('text=Variable item').click()
+  await expect(typebotViewer(page).locator('text=Variable item')).toBeVisible()
+  await expect(typebotViewer(page).locator('text=Ok great!')).toBeVisible()
+  await page.click('text="Item 1"')
+  await page.fill('input[value="Item 1"]', '{{Item 2}}')
+  await page.click('[data-testid="block1-icon"]')
+  await page.click('text=Multiple choice?')
+  await page.click('text="Restart"')
+  await typebotViewer(page).locator('text="Variable item" >> nth=0').click()
+  await typebotViewer(page).locator('text="Variable item" >> nth=1').click()
+  await typebotViewer(page).locator('text="Send"').click()
+  await expect(
+    typebotViewer(page).locator('text="Variable item, Variable item"')
+  ).toBeVisible()
+})