✨ (buttons) Allow dynamic buttons from variable

Closes #237

apps/builder/src/components/SearchableDropdown.tsx

@@ -17,6 +17,7 @@ import { useDebouncedCallback } from 'use-debounce'
 import { env, isDefined } from 'utils'
 import { VariablesButton } from '@/features/variables'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
+import { useParentModal } from '@/features/graph/providers/ParentModalProvider'
 
 type Props = {
   selectedItem?: string
@@ -58,6 +59,7 @@ export const SearchableDropdown = ({
   const dropdownRef = useRef(null)
   const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
   const inputRef = useRef<HTMLInputElement>(null)
+  const { ref: parentModalRef } = useParentModal()
 
   useEffect(
     () => () => {
@@ -195,7 +197,7 @@ export const SearchableDropdown = ({
             )}
           </HStack>
         </PopoverAnchor>
-        <Portal>
+        <Portal containerRef={parentModalRef}>
           <PopoverContent
             maxH="35vh"
             overflowY="scroll"

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/ButtonsOptionsForm.tsx → 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'

apps/builder/src/features/blocks/integrations/webhook/utils/getDeepKeys.ts

@@ -6,21 +6,26 @@ export const getDeepKeys = (obj: any): string[] => {
       const subkeys = getDeepKeys(obj[key])
       keys = keys.concat(
         subkeys.map(function (subkey) {
-          return key + '.' + subkey
+          return key + parseKey(subkey)
         })
       )
     } else if (Array.isArray(obj[key])) {
-      for (let i = 0; i < obj[key].length; i++) {
-        const subkeys = getDeepKeys(obj[key][i])
-        keys = keys.concat(
-          subkeys.map(function (subkey) {
-            return key + '[' + i + ']' + '.' + subkey
-          })
-        )
-      }
+      const subkeys = getDeepKeys(obj[key][0])
+      keys = keys.concat(
+        subkeys.map(function (subkey) {
+          return `${key}.map(item => item${parseKey(subkey)})`
+        })
+      )
     } else {
       keys.push(key)
     }
   }
   return keys
 }
+
+const parseKey = (key: string) => {
+  if (key.includes(' ') && !key.includes('.map((item) => item')) {
+    return `['${key}']`
+  }
+  return `.${key}`
+}

apps/builder/src/features/blocks/integrations/webhook/webhook.spec.ts

@@ -89,7 +89,7 @@ test.describe('Builder', () => {
     await page.click('text=Save in variables')
     await page.click('text=Add an entry >> nth=-1')
     await page.click('input[placeholder="Select the data"]')
-    await page.click('text=data[0].name')
+    await page.click('text=data.map(item => item.name)')
   })
 })
 

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx

@@ -100,8 +100,7 @@ export const BlockNode = ({
 
   useEffect(() => {
     if (query.blockId?.toString() === block.id) setOpenedBlockId(block.id)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query])
+  }, [block.id, query, setOpenedBlockId])
 
   useEffect(() => {
     setIsConnecting(

apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNodeContent/BlockNodeContent.tsx

@@ -33,20 +33,18 @@ import { GoogleSheetsNodeContent } from '@/features/blocks/integrations/googleSh
 import { GoogleAnalyticsNodeContent } from '@/features/blocks/integrations/googleAnalytics/components/GoogleAnalyticsNodeContent'
 import { ZapierContent } from '@/features/blocks/integrations/zapier'
 import { SendEmailContent } from '@/features/blocks/integrations/sendEmail'
-import { isInputBlock, isChoiceInput, blockHasItems } from 'utils'
+import { isInputBlock, isChoiceInput } from 'utils'
 import { MakeComContent } from '@/features/blocks/integrations/makeCom'
 import { AudioBubbleNode } from '@/features/blocks/bubbles/audio'
 import { WaitNodeContent } from '@/features/blocks/logic/wait/components/WaitNodeContent'
 import { ScriptNodeContent } from '@/features/blocks/logic/script/components/ScriptNodeContent'
+import { ButtonsBlockNode } from '@/features/blocks/inputs/buttons/components/ButtonsBlockNode'
 
 type Props = {
   block: Block | StartBlock
   indices: BlockIndices
 }
 export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
-  if (blockHasItems(block))
-    return <ItemNodesList block={block} indices={indices} />
-
   if (
     isInputBlock(block) &&
     !isChoiceInput(block) &&
@@ -92,6 +90,9 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     case InputBlockType.URL: {
       return <UrlNodeContent placeholder={block.options.labels.placeholder} />
     }
+    case InputBlockType.CHOICE: {
+      return <ButtonsBlockNode block={block} indices={indices} />
+    }
     case InputBlockType.PHONE: {
       return <PhoneNodeContent placeholder={block.options.labels.placeholder} />
     }
@@ -126,7 +127,8 @@ export const BlockNodeContent = ({ block, indices }: Props): JSX.Element => {
     }
     case LogicBlockType.TYPEBOT_LINK:
       return <TypebotLinkNode block={block} />
-
+    case LogicBlockType.CONDITION:
+      return <ItemNodesList block={block} indices={indices} />
     case IntegrationBlockType.GOOGLE_SHEETS: {
       return (
         <GoogleSheetsNodeContent

apps/builder/src/features/graph/components/Nodes/ItemNode/ItemNodesList.tsx

@@ -1,9 +1,7 @@
 import {
   Flex,
-  HStack,
   Portal,
   Stack,
-  Tag,
   Text,
   useColorModeValue,
   useEventListener,
@@ -15,13 +13,7 @@ import {
   useGraph,
 } from '../../../providers'
 import { useTypebot } from '@/features/editor'
-import {
-  BlockIndices,
-  BlockWithItems,
-  LogicBlockType,
-  Item,
-  Variable,
-} from 'models'
+import { BlockIndices, BlockWithItems, LogicBlockType, Item } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { ItemNode } from './ItemNode'
 import { SourceEndpoint } from '../../Endpoints'
@@ -137,17 +129,8 @@ export const ItemNodesList = ({
       elem && (placeholderRefs.current[idx] = elem)
     }
 
-  const collectedVariableId =
-    'options' in block && block.options && block.options.variableId
-
   return (
     <Stack flex={1} spacing={1} maxW="full" onClick={stopPropagating}>
-      {collectedVariableId && (
-        <CollectVariableLabel
-          variableId={collectedVariableId}
-          variables={typebot?.variables ?? []}
-        />
-      )}
       <PlaceholderNode
         isVisible={showPlaceholders}
         isExpanded={expandedPlaceholderIndex === 0}
@@ -221,28 +204,3 @@ const DefaultItemNode = ({ block }: { block: BlockWithItems }) => {
     </Flex>
   )
 }
-
-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/viewer/src/features/blocks/inputs/buttons/api/utils/injectVariableValuesInButtonsInputBlock.ts

@@ -0,0 +1,31 @@
+import { deepParseVariable } from '@/features/variables/utils'
+import {
+  SessionState,
+  VariableWithValue,
+  ChoiceInputBlock,
+  ItemType,
+} from 'models'
+import { isDefined } from 'utils'
+
+export const injectVariableValuesInButtonsInputBlock =
+  (variables: SessionState['typebot']['variables']) =>
+  (block: ChoiceInputBlock): ChoiceInputBlock => {
+    if (block.options.dynamicVariableId) {
+      const variable = variables.find(
+        (variable) =>
+          variable.id === block.options.dynamicVariableId &&
+          isDefined(variable.value)
+      ) as VariableWithValue | undefined
+      if (!variable || typeof variable.value === 'string') return block
+      return {
+        ...block,
+        items: variable.value.map((item, idx) => ({
+          id: idx.toString(),
+          type: ItemType.BUTTON,
+          blockId: block.id,
+          content: item,
+        })),
+      }
+    }
+    return deepParseVariable(variables)(block)
+  }

apps/viewer/src/features/blocks/inputs/payment/api/utils/computePaymentInputRuntimeOptions.ts

@@ -11,11 +11,12 @@ import Stripe from 'stripe'
 import { decrypt } from 'utils/api/encryption'
 
 export const computePaymentInputRuntimeOptions =
-  (state: SessionState) => (options: PaymentInputOptions) =>
+  (state: Pick<SessionState, 'isPreview' | 'typebot'>) =>
+  (options: PaymentInputOptions) =>
     createStripePaymentIntent(state)(options)
 
 const createStripePaymentIntent =
-  (state: SessionState) =>
+  (state: Pick<SessionState, 'isPreview' | 'typebot'>) =>
   async (options: PaymentInputOptions): Promise<PaymentInputRuntimeOptions> => {
     const {
       isPreview,

apps/viewer/src/features/blocks/integrations/googleSheets/api/utils/getRow.ts

@@ -53,24 +53,21 @@ export const getRow = async (
       })
       return { outgoingEdgeId, logs: log ? [log] : undefined }
     }
-    const randomIndex = Math.floor(Math.random() * filteredRows.length)
     const extractingColumns = cellsToExtract
       .map((cell) => cell.column)
       .filter(isNotEmpty)
-    const selectedRow = filteredRows
-      .map((row) =>
-        extractingColumns.reduce<{ [key: string]: string }>(
-          (obj, column) => ({ ...obj, [column]: row[column] }),
-          {}
-        )
+    const selectedRows = filteredRows.map((row) =>
+      extractingColumns.reduce<{ [key: string]: string }>(
+        (obj, column) => ({ ...obj, [column]: row[column] }),
+        {}
       )
-      .at(randomIndex)
-    if (!selectedRow) return { outgoingEdgeId }
+    )
+    if (!selectedRows) return { outgoingEdgeId }
 
     const newVariables = options.cellsToExtract.reduce<VariableWithValue[]>(
       (newVariables, cell) => {
         const existingVariable = variables.find(byId(cell.variableId))
-        const value = selectedRow[cell.column ?? ''] ?? null
+        const value = selectedRows.map((row) => row[cell.column ?? ''])
         if (!existingVariable) return newVariables
         return [
           ...newVariables,