✨ (buttons) Allow dynamic buttons from variable

Closes #237

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>
-  )
-}