🚸 (condition) Enable multiple condition items in one block

Closes #162

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

@@ -9,12 +9,12 @@ import React, { useEffect, useRef, useState } from 'react'
 import {
   BubbleBlock,
   BubbleBlockContent,
-  ConditionBlock,
   DraggableBlock,
   Block,
   BlockWithOptions,
   TextBubbleContent,
   TextBubbleBlock,
+  LogicBlockType,
 } from 'models'
 import { isBubbleBlock, isTextBubbleBlock } from 'utils'
 import { BlockNodeContent } from './BlockNodeContent/BlockNodeContent'
@@ -28,7 +28,12 @@ import { BlockSettings } from './SettingsPopoverContent/SettingsPopoverContent'
 import { TextBubbleEditor } from '../../../../blocks/bubbles/textBubble/components/TextBubbleEditor'
 import { TargetEndpoint } from '../../Endpoints'
 import { MediaBubblePopoverContent } from './MediaBubblePopoverContent'
-import { NodePosition, useDragDistance, useGraph } from '../../../providers'
+import {
+  NodePosition,
+  useBlockDnd,
+  useDragDistance,
+  useGraph,
+} from '../../../providers'
 import { ContextMenu } from '@/components/ContextMenu'
 import { setMultipleRefs } from '@/utils/helpers'
 import { hasDefaultConnector } from '../../../utils'
@@ -53,6 +58,7 @@ export const BlockNode = ({
     setFocusedGroupId,
     previewingEdge,
   } = useGraph()
+  const { mouseOverBlock, setMouseOverBlock, draggedItem } = useBlockDnd()
   const { typebot, updateBlock } = useTypebot()
   const [isConnecting, setIsConnecting] = useState(false)
   const [isPopoverOpened, setIsPopoverOpened] = useState(
@@ -99,6 +105,8 @@ export const BlockNode = ({
   }
 
   const handleMouseEnter = () => {
+    if (draggedItem !== undefined)
+      setMouseOverBlock({ id: block.id, ref: blockRef })
     if (connectingIds)
       setConnectingIds({
         ...connectingIds,
@@ -107,6 +115,7 @@ export const BlockNode = ({
   }
 
   const handleMouseLeave = () => {
+    if (mouseOverBlock) setMouseOverBlock(undefined)
     if (connectingIds?.target)
       setConnectingIds({
         ...connectingIds,
@@ -238,9 +247,8 @@ export const BlockNode = ({
   )
 }
 
-const hasSettingsPopover = (
-  block: Block
-): block is BlockWithOptions | ConditionBlock => !isBubbleBlock(block)
+const hasSettingsPopover = (block: Block): block is BlockWithOptions =>
+  !isBubbleBlock(block) && block.type !== LogicBlockType.CONDITION
 
 const isMediaBubbleBlock = (
   block: Block

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

@@ -8,8 +8,6 @@ import {
 } from '@chakra-ui/react'
 import { ExpandIcon } from '@/components/icons'
 import {
-  ConditionItem,
-  ConditionBlock,
   InputBlockType,
   IntegrationBlockType,
   LogicBlockType,
@@ -34,7 +32,6 @@ import { SendEmailSettings } from '@/features/blocks/integrations/sendEmail'
 import { WebhookSettings } from '@/features/blocks/integrations/webhook'
 import { ZapierSettings } from '@/features/blocks/integrations/zapier'
 import { CodeSettings } from '@/features/blocks/logic/code'
-import { ConditionSettingsBody } from '@/features/blocks/logic/condition'
 import { RedirectSettings } from '@/features/blocks/logic/redirect'
 import { SetVariableSettings } from '@/features/blocks/logic/setVariable'
 import { TypebotLinkSettingsForm } from '@/features/blocks/logic/typebotLink'
@@ -42,7 +39,7 @@ import { ButtonsOptionsForm } from '@/features/blocks/inputs/buttons'
 import { ChatwootSettingsForm } from '@/features/blocks/integrations/chatwoot'
 
 type Props = {
-  block: BlockWithOptions | ConditionBlock
+  block: BlockWithOptions
   webhook?: Webhook
   onExpandClick: () => void
   onBlockChange: (updates: Partial<Block>) => void
@@ -88,18 +85,14 @@ export const BlockSettings = ({
   block,
   onBlockChange,
 }: {
-  block: BlockWithOptions | ConditionBlock
+  block: BlockWithOptions
   webhook?: Webhook
   onBlockChange: (block: Partial<Block>) => void
 }): JSX.Element => {
   const handleOptionsChange = (options: BlockOptions) => {
     onBlockChange({ options } as Partial<Block>)
   }
-  const handleItemChange = (updates: Partial<ConditionItem>) => {
-    onBlockChange({
-      items: [{ ...(block as ConditionBlock).items[0], ...updates }],
-    } as Partial<Block>)
-  }
+
   switch (block.type) {
     case InputBlockType.TEXT: {
       return (
@@ -189,11 +182,6 @@ export const BlockSettings = ({
         />
       )
     }
-    case LogicBlockType.CONDITION: {
-      return (
-        <ConditionSettingsBody block={block} onItemChange={handleItemChange} />
-      )
-    }
     case LogicBlockType.REDIRECT: {
       return (
         <RedirectSettings