✨ Add conditional choice items

Allows you to conditonnally display an item from the Buttons or the Picture choice input Closes #546
2023-06-05 17:33:43 +02:00
parent acaa1c6223
commit ef0a2d9dc6
18 changed files with 404 additions and 157 deletions
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
@@ -5,12 +5,22 @@ import {
  Fade,
  IconButton,
  Flex,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  Portal,
+  useColorModeValue,
+  SlideFade,
 } from '@chakra-ui/react'
-import { PlusIcon } from '@/components/icons'
+import { PlusIcon, SettingsIcon } from '@/components/icons'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { ButtonItem, Item, ItemIndices, ItemType } from '@typebot.io/schemas'
 import React, { useRef, useState } from 'react'
 import { isNotDefined } from '@typebot.io/lib'
+import { useGraph } from '@/features/graph/providers/GraphProvider'
+import { ButtonsItemSettings } from './ButtonsItemSettings'

 type Props = {
  item: ButtonItem
@@ -20,8 +30,12 @@ type Props = {

 export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
  const { deleteItem, updateItem, createItem } = useTypebot()
+  const { openedItemId, setOpenedItemId } = useGraph()
  const [itemValue, setItemValue] = useState(item.content ?? 'Click to edit')
  const editableRef = useRef<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
+
+  const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()

  const handleInputSubmit = () => {
    if (itemValue === '') deleteItem(indices)
@@ -45,44 +59,101 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
    )
  }

+  const updateItemSettings = (settings: Omit<ButtonItem, 'content'>) => {
+    updateItem(indices, { ...item, ...settings })
+  }
+
  return (
-    <Flex px={4} py={2} justify="center" w="90%" pos="relative">
-      <Editable
-        ref={editableRef}
-        flex="1"
-        startWithEditView={isNotDefined(item.content)}
-        value={itemValue}
-        onChange={setItemValue}
-        onSubmit={handleInputSubmit}
-        onKeyDownCapture={handleKeyPress}
-        maxW="180px"
-      >
-        <EditablePreview
-          w="full"
-          color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
-          cursor="pointer"
-        />
-        <EditableInput />
-      </Editable>
-      <Fade
-        in={isMouseOver}
-        style={{
-          position: 'absolute',
-          bottom: '-15px',
-          zIndex: 3,
-          left: '90px',
-        }}
-        unmountOnExit
-      >
-        <IconButton
-          aria-label="Add item"
-          icon={<PlusIcon />}
-          size="xs"
-          shadow="md"
-          colorScheme="gray"
-          onClick={handlePlusClick}
-        />
-      </Fade>
-    </Flex>
+    <Popover
+      placement="right"
+      isLazy
+      isOpen={openedItemId === item.id}
+      closeOnBlur={false}
+    >
+      <PopoverAnchor>
+        <Flex px={4} py={2} justify="center" w="90%" pos="relative">
+          <Editable
+            ref={editableRef}
+            flex="1"
+            startWithEditView={isNotDefined(item.content)}
+            value={itemValue}
+            onChange={setItemValue}
+            onSubmit={handleInputSubmit}
+            onKeyDownCapture={handleKeyPress}
+            maxW="180px"
+          >
+            <EditablePreview
+              w="full"
+              color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
+              cursor="pointer"
+            />
+            <EditableInput />
+          </Editable>
+          <HitboxExtension />
+          <SlideFade
+            offsetY="0px"
+            offsetX="-10px"
+            in={isMouseOver}
+            style={{
+              position: 'absolute',
+              right: '-60px',
+              zIndex: 3,
+            }}
+            unmountOnExit
+          >
+            <IconButton
+              aria-label="Open settings"
+              icon={<SettingsIcon />}
+              bgColor={useColorModeValue('white', 'gray.800')}
+              variant="ghost"
+              size="sm"
+              shadow="md"
+              colorScheme="gray"
+              onClick={() => setOpenedItemId(item.id)}
+            />
+          </SlideFade>
+          <Fade
+            in={isMouseOver}
+            style={{
+              position: 'absolute',
+              bottom: '-15px',
+              zIndex: 3,
+              left: '90px',
+            }}
+            unmountOnExit
+          >
+            <IconButton
+              aria-label="Add item"
+              icon={<PlusIcon />}
+              size="xs"
+              shadow="md"
+              colorScheme="gray"
+              onClick={handlePlusClick}
+            />
+          </Fade>
+        </Flex>
+      </PopoverAnchor>
+      <Portal>
+        <PopoverContent pos="relative" onMouseDown={handleMouseDown}>
+          <PopoverArrow />
+          <PopoverBody
+            py="6"
+            overflowY="scroll"
+            maxH="400px"
+            shadow="lg"
+            ref={ref}
+          >
+            <ButtonsItemSettings
+              item={item}
+              onSettingsChange={updateItemSettings}
+            />
+          </PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
  )
 }
+
+const HitboxExtension = () => (
+  <Flex h="full" w="50px" pos="absolute" top="0" right="-70px" />
+)
--- a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemSettings.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { Stack } from '@chakra-ui/react'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+import { ConditionForm } from '@/features/blocks/logic/condition/components/ConditionForm'
+import { ButtonItem, Condition, LogicalOperator } from '@typebot.io/schemas'
+
+type Props = {
+  item: ButtonItem
+  onSettingsChange: (updates: Omit<ButtonItem, 'content'>) => void
+}
+
+export const ButtonsItemSettings = ({ item, onSettingsChange }: Props) => {
+  const updateIsDisplayConditionEnabled = (isEnabled: boolean) =>
+    onSettingsChange({
+      ...item,
+      displayCondition: {
+        ...item.displayCondition,
+        isEnabled,
+      },
+    })
+
+  const updateDisplayCondition = (condition: Condition) =>
+    onSettingsChange({
+      ...item,
+      displayCondition: {
+        ...item.displayCondition,
+        condition,
+      },
+    })
+
+  return (
+    <Stack spacing={4}>
+      <SwitchWithRelatedSettings
+        label="Display condition"
+        initialValue={item.displayCondition?.isEnabled ?? false}
+        onCheckChange={updateIsDisplayConditionEnabled}
+      >
+        <ConditionForm
+          condition={
+            item.displayCondition?.condition ?? {
+              comparisons: [],
+              logicalOperator: LogicalOperator.AND,
+            }
+          }
+          onConditionChange={updateDisplayCondition}
+        />
+      </SwitchWithRelatedSettings>
+    </Stack>
+  )
+}
--- a/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
+++ b/apps/builder/src/features/blocks/inputs/pictureChoice/components/PictureChoiceItemSettings.tsx
@@ -11,6 +11,9 @@ import {
  Text,
 } from '@chakra-ui/react'
 import { ImageUploadContent } from '@/components/ImageUploadContent'
+import { SwitchWithRelatedSettings } from '@/components/SwitchWithRelatedSettings'
+import { ConditionForm } from '@/features/blocks/logic/condition/components/ConditionForm'
+import { Condition, LogicalOperator } from '@typebot.io/schemas'

 type Props = {
  typebotId: string
@@ -32,15 +35,35 @@ export const PictureChoiceItemSettings = ({
  const updateDescription = (description: string) =>
    onItemChange({ ...item, description })

+  const updateIsDisplayConditionEnabled = (isEnabled: boolean) =>
+    onItemChange({
+      ...item,
+      displayCondition: {
+        ...item.displayCondition,
+        isEnabled,
+      },
+    })
+
+  const updateDisplayCondition = (condition: Condition) =>
+    onItemChange({
+      ...item,
+      displayCondition: {
+        ...item.displayCondition,
+        condition,
+      },
+    })
+
  return (
-    <Stack>
+    <Stack spacing={4}>
      <HStack>
        <Text fontWeight="medium">Image:</Text>
        <Popover isLazy>
          {({ onClose }) => (
            <>
              <PopoverTrigger>
-                <Button size="sm">Pick an image</Button>
+                <Button size="sm">
+                  {item.pictureSrc ? 'Change image' : 'Pick an image'}
+                </Button>
              </PopoverTrigger>
              <PopoverContent p="4" w="500px">
                <ImageUploadContent
@@ -67,6 +90,21 @@ export const PictureChoiceItemSettings = ({
        defaultValue={item.description}
        onChange={updateDescription}
      />
+      <SwitchWithRelatedSettings
+        label="Display condition"
+        initialValue={item.displayCondition?.isEnabled ?? false}
+        onCheckChange={updateIsDisplayConditionEnabled}
+      >
+        <ConditionForm
+          condition={
+            item.displayCondition?.condition ?? {
+              comparisons: [],
+              logicalOperator: LogicalOperator.AND,
+            }
+          }
+          onConditionChange={updateDisplayCondition}
+        />
+      </SwitchWithRelatedSettings>
    </Stack>
  )
 }
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionContent.tsx
@@ -0,0 +1,78 @@
+import { Stack, Wrap, Tag, Text, useColorModeValue } from '@chakra-ui/react'
+import { byId } from '@typebot.io/lib'
+import { ComparisonOperators, Condition, Variable } from '@typebot.io/schemas'
+
+type Props = {
+  condition: Condition
+  variables: Variable[]
+  size?: 'xs' | 'sm'
+  displaySemicolon?: boolean
+}
+export const ConditionContent = ({
+  condition,
+  variables,
+  size = 'sm',
+  displaySemicolon,
+}: Props) => {
+  const comparisonValueBg = useColorModeValue('gray.200', 'gray.700')
+  return (
+    <Stack>
+      {condition.comparisons.map((comparison, idx) => {
+        const variable = variables.find(byId(comparison.variableId))
+        return (
+          <Wrap key={comparison.id} spacing={1} noOfLines={1}>
+            {idx === 0 && <Text fontSize={size}>IF</Text>}
+            {idx > 0 && (
+              <Text fontSize={size}>{condition.logicalOperator ?? ''}</Text>
+            )}
+            {variable?.name && (
+              <Tag bgColor="orange.400" color="white" size="sm">
+                {variable.name}
+              </Tag>
+            )}
+            {comparison.comparisonOperator && (
+              <Text fontSize={size}>
+                {parseComparisonOperatorSymbol(comparison.comparisonOperator)}
+              </Text>
+            )}
+            {comparison?.value && (
+              <Tag bgColor={comparisonValueBg} size="sm">
+                {comparison.value}
+              </Tag>
+            )}
+            {idx === condition.comparisons.length - 1 && displaySemicolon && (
+              <Text fontSize={size}>:</Text>
+            )}
+          </Wrap>
+        )
+      })}
+    </Stack>
+  )
+}
+
+const parseComparisonOperatorSymbol = (
+  operator: ComparisonOperators
+): string => {
+  switch (operator) {
+    case ComparisonOperators.CONTAINS:
+      return 'contains'
+    case ComparisonOperators.EQUAL:
+      return '='
+    case ComparisonOperators.GREATER:
+      return '>'
+    case ComparisonOperators.IS_SET:
+      return 'is set'
+    case ComparisonOperators.LESS:
+      return '<'
+    case ComparisonOperators.NOT_EQUAL:
+      return '!='
+    case ComparisonOperators.ENDS_WITH:
+      return 'ends with'
+    case ComparisonOperators.STARTS_WITH:
+      return 'starts with'
+    case ComparisonOperators.IS_EMPTY:
+      return 'is empty'
+    case ComparisonOperators.NOT_CONTAINS:
+      return 'not contains'
+  }
+}
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionItemForm.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionItemForm.tsx
@@ -1,30 +1,30 @@
 import { Flex } from '@chakra-ui/react'
 import { DropdownList } from '@/components/DropdownList'
-import { Comparison, ConditionItem, LogicalOperator } from '@typebot.io/schemas'
+import { Comparison, Condition, LogicalOperator } from '@typebot.io/schemas'
 import React from 'react'
 import { ComparisonItem } from './ComparisonItem'
 import { TableList } from '@/components/TableList'

 type Props = {
-  itemContent: ConditionItem['content']
-  onItemChange: (updates: Partial<ConditionItem>) => void
+  condition: Condition
+  onConditionChange: (newCondition: Condition) => void
 }

-export const ConditionItemForm = ({ itemContent, onItemChange }: Props) => {
+export const ConditionForm = ({ condition, onConditionChange }: Props) => {
  const handleComparisonsChange = (comparisons: Comparison[]) =>
-    onItemChange({ content: { ...itemContent, comparisons } })
+    onConditionChange({ ...condition, comparisons })
  const handleLogicalOperatorChange = (logicalOperator: LogicalOperator) =>
-    onItemChange({ content: { ...itemContent, logicalOperator } })
+    onConditionChange({ ...condition, logicalOperator })

  return (
    <TableList<Comparison>
-      initialItems={itemContent.comparisons}
+      initialItems={condition.comparisons}
      onItemsChange={handleComparisonsChange}
      Item={ComparisonItem}
      ComponentBetweenItems={() => (
        <Flex justify="center">
          <DropdownList
-            currentItem={itemContent.logicalOperator}
+            currentItem={condition.logicalOperator}
            onItemSelect={handleLogicalOperatorChange}
            items={Object.values(LogicalOperator)}
          />
--- a/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
+++ b/apps/builder/src/features/blocks/logic/condition/components/ConditionItemNode.tsx
@@ -1,9 +1,6 @@
 import {
-  Stack,
-  Tag,
  Text,
  Flex,
-  Wrap,
  Fade,
  IconButton,
  Popover,
@@ -12,23 +9,23 @@ import {
  PopoverArrow,
  PopoverBody,
  useEventListener,
-  useColorModeValue,
  PopoverAnchor,
 } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import {
  Comparison,
  ConditionItem,
-  ComparisonOperators,
  ItemType,
  ItemIndices,
+  Condition,
 } from '@typebot.io/schemas'
 import React, { useRef } from 'react'
-import { byId, isNotDefined } from '@typebot.io/lib'
+import { isNotDefined } from '@typebot.io/lib'
 import { PlusIcon } from '@/components/icons'
-import { ConditionItemForm } from './ConditionItemForm'
+import { ConditionForm } from './ConditionForm'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { createId } from '@paralleldrive/cuid2'
+import { ConditionContent } from './ConditionContent'

 type Props = {
  item: ConditionItem
@@ -37,7 +34,6 @@ type Props = {
 }

 export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
-  const comparisonValueBg = useColorModeValue('gray.200', 'gray.700')
  const { typebot, createItem, updateItem } = useTypebot()
  const { openedItemId, setOpenedItemId } = useGraph()
  const ref = useRef<HTMLDivElement | null>(null)
@@ -48,8 +44,8 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
    setOpenedItemId(item.id)
  }

-  const handleItemChange = (updates: Partial<ConditionItem>) => {
-    updateItem(indices, { ...item, ...updates })
+  const updateCondition = (condition: Condition) => {
+    updateItem(indices, { ...item, content: condition } as ConditionItem)
  }

  const handlePlusClick = (event: React.MouseEvent) => {
@@ -85,37 +81,10 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
          comparisonIsEmpty(item.content.comparisons[0]) ? (
            <Text color={'gray.500'}>Configure...</Text>
          ) : (
-            <Stack maxW="170px">
-              {item.content.comparisons.map((comparison, idx) => {
-                const variable = typebot?.variables.find(
-                  byId(comparison.variableId)
-                )
-                return (
-                  <Wrap key={comparison.id} spacing={1} noOfLines={1}>
-                    {idx > 0 && (
-                      <Text>{item.content.logicalOperator ?? ''}</Text>
-                    )}
-                    {variable?.name && (
-                      <Tag bgColor="orange.400" color="white">
-                        {variable.name}
-                      </Tag>
-                    )}
-                    {comparison.comparisonOperator && (
-                      <Text fontSize="sm">
-                        {parseComparisonOperatorSymbol(
-                          comparison.comparisonOperator
-                        )}
-                      </Text>
-                    )}
-                    {comparison?.value && (
-                      <Tag bgColor={comparisonValueBg}>
-                        <Text noOfLines={1}>{comparison.value}</Text>
-                      </Tag>
-                    )}
-                  </Wrap>
-                )
-              })}
-            </Stack>
+            <ConditionContent
+              condition={item.content}
+              variables={typebot?.variables ?? []}
+            />
          )}
          <Fade
            in={isMouseOver}
@@ -148,9 +117,9 @@ export const ConditionItemNode = ({ item, isMouseOver, indices }: Props) => {
            shadow="lg"
            ref={ref}
          >
-            <ConditionItemForm
-              itemContent={item.content}
-              onItemChange={handleItemChange}
+            <ConditionForm
+              condition={item.content}
+              onConditionChange={updateCondition}
            />
          </PopoverBody>
        </PopoverContent>
@@ -163,30 +132,3 @@ const comparisonIsEmpty = (comparison: Comparison) =>
  isNotDefined(comparison.comparisonOperator) &&
  isNotDefined(comparison.value) &&
  isNotDefined(comparison.variableId)
-
-const parseComparisonOperatorSymbol = (
-  operator: ComparisonOperators
-): string => {
-  switch (operator) {
-    case ComparisonOperators.CONTAINS:
-      return 'contains'
-    case ComparisonOperators.EQUAL:
-      return '='
-    case ComparisonOperators.GREATER:
-      return '>'
-    case ComparisonOperators.IS_SET:
-      return 'is set'
-    case ComparisonOperators.LESS:
-      return '<'
-    case ComparisonOperators.NOT_EQUAL:
-      return '!='
-    case ComparisonOperators.ENDS_WITH:
-      return 'ends with'
-    case ComparisonOperators.STARTS_WITH:
-      return 'starts with'
-    case ComparisonOperators.IS_EMPTY:
-      return 'is empty'
-    case ComparisonOperators.NOT_CONTAINS:
-      return 'not contains'
-  }
-}
--- a/apps/builder/src/features/graph/components/nodes/item/ItemNode.tsx
+++ b/apps/builder/src/features/graph/components/nodes/item/ItemNode.tsx
@@ -1,4 +1,4 @@
-import { Flex, useColorModeValue } from '@chakra-ui/react'
+import { Flex, useColorModeValue, Stack } from '@chakra-ui/react'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import {
  ChoiceInputBlock,
@@ -20,6 +20,7 @@ import {
 } from '@/features/graph/providers/GraphDndProvider'
 import { useGraph } from '@/features/graph/providers/GraphProvider'
 import { setMultipleRefs } from '@/helpers/setMultipleRefs'
+import { ConditionContent } from '@/features/blocks/logic/condition/components/ConditionContent'

 type Props = {
  item: Item
@@ -71,12 +72,22 @@ export const ItemNode = ({
      renderMenu={() => <ItemNodeContextMenu indices={indices} />}
    >
      {(ref, isContextMenuOpened) => (
-        <Flex
+        <Stack
          data-testid="item"
          pos="relative"
          ref={setMultipleRefs([ref, itemRef])}
          w="full"
        >
+          {'displayCondition' in item &&
+            item.displayCondition?.isEnabled &&
+            item.displayCondition.condition && (
+              <ConditionContent
+                condition={item.displayCondition.condition}
+                variables={typebot?.variables ?? []}
+                size="xs"
+                displaySemicolon
+              />
+            )}
          <Flex
            align="center"
            onMouseEnter={handleMouseEnter}
@@ -113,7 +124,7 @@ export const ItemNode = ({
              />
            )}
          </Flex>
-        </Flex>
+        </Stack>
      )}
    </ContextMenu>
  )