✨ (buttons) Allow dynamic buttons from variable

Closes #237

apps/builder/src/features/blocks/inputs/buttons/buttons.spec.ts

@@ -50,7 +50,7 @@ test.describe.parallel('Buttons input block', () => {
     await page.click('[data-testid="block2-icon"]')
     await page.click('text=Multiple choice?')
     await page.fill('#button', 'Go')
-    await page.getByPlaceholder('Select a variable').click()
+    await page.getByPlaceholder('Select a variable').nth(1).click()
     await page.getByText('var1').click()
     await expect(page.getByText('Collectsvar1')).toBeVisible()
     await page.click('[data-testid="block2-icon"]')

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx

@@ -0,0 +1,71 @@
+import { BlockIndices, ChoiceInputBlock, Variable } from 'models'
+import React from 'react'
+import { ItemNodesList } from '@/features/graph/components/Nodes/ItemNode'
+import {
+  HStack,
+  Stack,
+  Tag,
+  Text,
+  useColorModeValue,
+  Wrap,
+} from '@chakra-ui/react'
+import { useTypebot } from '@/features/editor'
+
+type Props = {
+  block: ChoiceInputBlock
+  indices: BlockIndices
+}
+
+export const ButtonsBlockNode = ({ block, indices }: Props) => {
+  const { typebot } = useTypebot()
+  const dynamicVariableName = typebot?.variables.find(
+    (variable) => variable.id === block.options.dynamicVariableId
+  )?.name
+
+  return (
+    <Stack w="full">
+      {block.options.variableId ? (
+        <CollectVariableLabel
+          variableId={block.options.variableId}
+          variables={typebot?.variables}
+        />
+      ) : null}
+      {block.options.dynamicVariableId ? (
+        <Wrap spacing={1}>
+          <Text>Display</Text>
+          <Tag bg="orange.400" color="white">
+            {dynamicVariableName}
+          </Tag>
+          <Text>buttons</Text>
+        </Wrap>
+      ) : (
+        <ItemNodesList block={block} indices={indices} />
+      )}
+    </Stack>
+  )
+}
+
+const CollectVariableLabel = ({
+  variableId,
+  variables,
+}: {
+  variableId: string
+  variables?: Variable[]
+}) => {
+  const textColor = useColorModeValue('gray.600', 'gray.400')
+  const variableName = variables?.find(
+    (variable) => variable.id === variableId
+  )?.name
+
+  if (!variableName) return null
+  return (
+    <HStack fontStyle="italic" spacing={1}>
+      <Text fontSize="sm" color={textColor}>
+        Collects
+      </Text>
+      <Tag bg="orange.400" color="white" size="sm">
+        {variableName}
+      </Tag>
+    </HStack>
+  )
+}

apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx

@@ -1,7 +1,8 @@
 import { Input } from '@/components/inputs'
+import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 import { SwitchWithLabel } from '@/components/SwitchWithLabel'
 import { VariableSearchInput } from '@/components/VariableSearchInput'
-import { FormLabel, Stack } from '@chakra-ui/react'
+import { FormControl, FormLabel, Stack } from '@chakra-ui/react'
 import { ChoiceInputOptions, Variable } from 'models'
 import React from 'react'
 
@@ -20,6 +21,8 @@ export const ButtonsOptionsForm = ({
     options && onOptionsChange({ ...options, buttonLabel })
   const handleVariableChange = (variable?: Variable) =>
     options && onOptionsChange({ ...options, variableId: variable?.id })
+  const handleDynamicVariableChange = (variable?: Variable) =>
+    options && onOptionsChange({ ...options, dynamicVariableId: variable?.id })
 
   return (
     <Stack spacing={4}>
@@ -40,6 +43,19 @@ export const ButtonsOptionsForm = ({
           />
         </Stack>
       )}
+      <FormControl>
+        <FormLabel>
+          Dynamic items from variable:{' '}
+          <MoreInfoTooltip>
+            If defined, buttons will be dynamically displayed based on what the
+            variable contains.
+          </MoreInfoTooltip>
+        </FormLabel>
+        <VariableSearchInput
+          initialVariableId={options?.dynamicVariableId}
+          onSelectVariable={handleDynamicVariableChange}
+        />
+      </FormControl>
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
           Save answer in a variable:

apps/builder/src/features/blocks/inputs/buttons/components/index.ts

@@ -1,3 +1,3 @@
 export * from './ButtonsItemNode'
 export * from './ButtonsIcon'
-export * from './ButtonsOptionsForm'
+export * from './ButtonsBlockSettings'